From b4bb6142610254cec5b9f1382bb4222bd8499bf2 Mon Sep 17 00:00:00 2001 From: Corey Robertson Date: Fri, 10 Jan 2020 12:58:37 -0500 Subject: [PATCH] [Maps] Add hiddenLayers option to embeddable map input (#54355) * Add hiddenLayers option to embeddable map input * Move hiddenLayers logic to actions and reducers. Adds Documentation * Address code review suggestions --- .../maps/public/actions/map_actions.js | 39 ++++++++++++++++--- .../plugins/maps/public/embeddable/README.md | 1 + .../maps/public/embeddable/map_embeddable.js | 14 ++++++- .../plugins/maps/public/reducers/map.js | 15 +++++-- .../maps/public/selectors/map_selectors.js | 4 ++ 5 files changed, 64 insertions(+), 9 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/actions/map_actions.js b/x-pack/legacy/plugins/maps/public/actions/map_actions.js index 053b389a5901100..f05b7eba9e7e01b 100644 --- a/x-pack/legacy/plugins/maps/public/actions/map_actions.js +++ b/x-pack/legacy/plugins/maps/public/actions/map_actions.js @@ -39,7 +39,7 @@ export const SET_LAYER_ERROR_STATUS = 'SET_LAYER_ERROR_STATUS'; export const ADD_WAITING_FOR_MAP_READY_LAYER = 'ADD_WAITING_FOR_MAP_READY_LAYER'; export const CLEAR_WAITING_FOR_MAP_READY_LAYER_LIST = 'CLEAR_WAITING_FOR_MAP_READY_LAYER_LIST'; export const REMOVE_LAYER = 'REMOVE_LAYER'; -export const TOGGLE_LAYER_VISIBLE = 'TOGGLE_LAYER_VISIBLE'; +export const SET_LAYER_VISIBILITY = 'SET_LAYER_VISIBILITY'; export const MAP_EXTENT_CHANGED = 'MAP_EXTENT_CHANGED'; export const MAP_READY = 'MAP_READY'; export const MAP_DESTROYED = 'MAP_DESTROYED'; @@ -72,6 +72,7 @@ export const DISABLE_TOOLTIP_CONTROL = 'DISABLE_TOOLTIP_CONTROL'; export const HIDE_TOOLBAR_OVERLAY = 'HIDE_TOOLBAR_OVERLAY'; export const HIDE_LAYER_CONTROL = 'HIDE_LAYER_CONTROL'; export const HIDE_VIEW_CONTROL = 'HIDE_VIEW_CONTROL'; +export const SET_WAITING_FOR_READY_HIDDEN_LAYERS = 'SET_WAITING_FOR_READY_HIDDEN_LAYERS'; function getLayerLoadingCallbacks(dispatch, layerId) { return { @@ -252,23 +253,25 @@ export function cleanTooltipStateForLayer(layerId, layerFeatures = []) { }; } -export function toggleLayerVisible(layerId) { +export function setLayerVisibility(layerId, makeVisible) { return async (dispatch, getState) => { //if the current-state is invisible, we also want to sync data //e.g. if a layer was invisible at start-up, it won't have any data loaded const layer = getLayerById(layerId, getState()); - if (!layer) { + + // If the layer visibility is already what we want it to be, do nothing + if (!layer || layer.isVisible() === makeVisible) { return; } - const makeVisible = !layer.isVisible(); if (!makeVisible) { dispatch(cleanTooltipStateForLayer(layerId)); } await dispatch({ - type: TOGGLE_LAYER_VISIBLE, + type: SET_LAYER_VISIBILITY, layerId, + visibility: makeVisible, }); if (makeVisible) { dispatch(syncDataForLayer(layerId)); @@ -276,6 +279,18 @@ export function toggleLayerVisible(layerId) { }; } +export function toggleLayerVisible(layerId) { + return async (dispatch, getState) => { + const layer = getLayerById(layerId, getState()); + if (!layer) { + return; + } + const makeVisible = !layer.isVisible(); + + dispatch(setLayerVisibility(layerId, makeVisible)); + }; +} + export function setSelectedLayer(layerId) { return async (dispatch, getState) => { const oldSelectedLayer = getSelectedLayerId(getState()); @@ -840,3 +855,17 @@ export function hideLayerControl() { export function hideViewControl() { return { type: HIDE_VIEW_CONTROL, hideViewControl: true }; } + +export function setHiddenLayers(hiddenLayerIds) { + return (dispatch, getState) => { + const isMapReady = getMapReady(getState()); + + if (!isMapReady) { + dispatch({ type: SET_WAITING_FOR_READY_HIDDEN_LAYERS, hiddenLayerIds }); + } else { + getLayerListRaw(getState()).forEach(layer => + dispatch(setLayerVisibility(layer.id, !hiddenLayerIds.includes(layer.id))) + ); + } + }; +} diff --git a/x-pack/legacy/plugins/maps/public/embeddable/README.md b/x-pack/legacy/plugins/maps/public/embeddable/README.md index eb6571a96016c79..1de327702fb87ab 100644 --- a/x-pack/legacy/plugins/maps/public/embeddable/README.md +++ b/x-pack/legacy/plugins/maps/public/embeddable/README.md @@ -9,6 +9,7 @@ - **hideToolbarOverlay:** (Boolean) Will disable toolbar, which can be used to navigate to coordinate by entering lat/long and zoom values. - **hideLayerControl:** (Boolean) Will hide useful layer control, which can be used to hide/show a layer to get a refined view of the map. - **hideViewControl:** (Boolean) Will hide view control at bottom right of the map, which shows lat/lon values based on mouse hover in the map, this is useful to get coordinate value from a particular point in map. +- **hiddenLayers:** (Array of Strings) Array of layer ids that should be hidden. Any other layers will be set to visible regardless of their value in the layerList used to initialize the embeddable ### Creating a Map embeddable from saved object ``` diff --git a/x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.js b/x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.js index 2ee766f91fbca24..c723e996ee6797e 100644 --- a/x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.js +++ b/x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.js @@ -32,11 +32,12 @@ import { hideToolbarOverlay, hideLayerControl, hideViewControl, + setHiddenLayers, } from '../actions/map_actions'; import { setReadOnly, setIsLayerTOCOpen, setOpenTOCDetails } from '../actions/ui_actions'; import { getIsLayerTOCOpen, getOpenTOCDetails } from '../selectors/ui_selectors'; import { getInspectorAdapters, setEventHandlers } from '../reducers/non_serializable_instances'; -import { getMapCenter, getMapZoom } from '../selectors/map_selectors'; +import { getMapCenter, getMapZoom, getHiddenLayerIds } from '../selectors/map_selectors'; import { MAP_SAVED_OBJECT_TYPE } from '../../common/constants'; export class MapEmbeddable extends Embeddable { @@ -153,6 +154,9 @@ export class MapEmbeddable extends Embeddable { } this._store.dispatch(replaceLayerList(this._layerList)); + if (this.input.hiddenLayers) { + this._store.dispatch(setHiddenLayers(this.input.hiddenLayers)); + } this._dispatchSetQuery(this.input); this._dispatchSetRefreshConfig(this.input); @@ -244,5 +248,13 @@ export class MapEmbeddable extends Embeddable { openTOCDetails, }); } + + const hiddenLayerIds = getHiddenLayerIds(this._store.getState()); + + if (!_.isEqual(this.input.hiddenLayers, hiddenLayerIds)) { + this.updateInput({ + hiddenLayers: hiddenLayerIds, + }); + } } } diff --git a/x-pack/legacy/plugins/maps/public/reducers/map.js b/x-pack/legacy/plugins/maps/public/reducers/map.js index 7dd60f013cefde5..ac409c685c71afd 100644 --- a/x-pack/legacy/plugins/maps/public/reducers/map.js +++ b/x-pack/legacy/plugins/maps/public/reducers/map.js @@ -16,7 +16,7 @@ import { ADD_WAITING_FOR_MAP_READY_LAYER, CLEAR_WAITING_FOR_MAP_READY_LAYER_LIST, REMOVE_LAYER, - TOGGLE_LAYER_VISIBLE, + SET_LAYER_VISIBILITY, MAP_EXTENT_CHANGED, MAP_READY, MAP_DESTROYED, @@ -46,6 +46,7 @@ import { HIDE_TOOLBAR_OVERLAY, HIDE_LAYER_CONTROL, HIDE_VIEW_CONTROL, + SET_WAITING_FOR_READY_HIDDEN_LAYERS, } from '../actions/map_actions'; import { copyPersistentState, TRACKED_LAYER_DESCRIPTOR } from './util'; @@ -307,8 +308,8 @@ export function map(state = INITIAL_STATE, action) { ...state, waitingForMapReadyLayerList: [], }; - case TOGGLE_LAYER_VISIBLE: - return updateLayerInList(state, action.layerId, 'visible'); + case SET_LAYER_VISIBILITY: + return updateLayerInList(state, action.layerId, 'visible', action.visibility); case UPDATE_LAYER_STYLE: const styleLayerId = action.layerId; return updateLayerInList(state, styleLayerId, 'style', { ...action.style }); @@ -376,6 +377,14 @@ export function map(state = INITIAL_STATE, action) { hideViewControl: action.hideViewControl, }, }; + case SET_WAITING_FOR_READY_HIDDEN_LAYERS: + return { + ...state, + waitingForMapReadyLayerList: state.waitingForMapReadyLayerList.map(layer => ({ + ...layer, + visible: !action.hiddenLayerIds.includes(layer.id), + })), + }; default: return state; } diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js index 3d8e6f97ef077d1..4b3d1355e4264f3 100644 --- a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js +++ b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js @@ -150,6 +150,10 @@ export const getLayerList = createSelector( } ); +export const getHiddenLayerIds = createSelector(getLayerListRaw, layers => + layers.filter(layer => !layer.visible).map(layer => layer.id) +); + export const getSelectedLayer = createSelector( getSelectedLayerId, getLayerList,