[Maps] Add hiddenLayers option to embeddable map input (elastic#54355)

* Add hiddenLayers option to embeddable map input

* Move hiddenLayers logic to actions and reducers. Adds Documentation

* Address code review suggestions

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,30 +253,44 @@ 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));
     }
   };
 }
 
+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)))
+      );
+    }
+  };
+}

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
 ```

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,
+      });
+    }
   }
 }

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;
   }

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,