[Maps] allow adding multiple layers

x-pack/legacy/plugins/maps/public/angular/map_controller.js

@@ -38,7 +38,6 @@ import {
   setGotoWithCenter,
   replaceLayerList,
   setQuery,
-  clearTransientLayerStateAndCloseFlyout,
   setMapSettings,
   enableFullScreen,
   updateFlyout,
@@ -535,7 +534,6 @@ app.controller(
     addHelpMenuToAppChrome();
 
     async function doSave(saveOptions) {
-      await store.dispatch(clearTransientLayerStateAndCloseFlyout());
       savedMap.syncWithStore(store.getState());
       let id;
 

x-pack/plugins/maps/common/descriptor_types/descriptor_types.d.ts

@@ -132,6 +132,7 @@ export type SourceDescriptor =
 export type LayerDescriptor = {
   __dataRequests?: DataRequestDescriptor[];
   __isInErrorState?: boolean;
+  __isPreviewLayer?: boolean;
   __errorMessage?: string;
   __trackedLayerDescriptor?: LayerDescriptor;
   alpha?: number;

x-pack/plugins/maps/public/actions/layer_actions.ts

@@ -9,10 +9,10 @@ import { Query } from 'src/plugins/data/public';
 import { MapStoreState } from '../reducers/store';
 import {
   getLayerById,
+  getLayerList,
   getLayerListRaw,
   getSelectedLayerId,
   getMapReady,
-  getTransientLayerId,
 } from '../selectors/map_selectors';
 import { FLYOUT_STATE } from '../reducers/ui';
 import { cancelRequest } from '../reducers/non_serializable_instances';
@@ -27,7 +27,6 @@ import {
   SET_JOINS,
   SET_LAYER_VISIBILITY,
   SET_SELECTED_LAYER,
-  SET_TRANSIENT_LAYER,
   SET_WAITING_FOR_READY_HIDDEN_LAYERS,
   TRACK_CURRENT_LAYER_STATE,
   UPDATE_LAYER_ORDER,
@@ -139,6 +138,41 @@ export function addLayerWithoutDataSync(layerDescriptor: LayerDescriptor) {
   };
 }
 
+export function addPreviewLayers(layerDescriptors: LayerDescriptor[]) {
+  return (dispatch: Dispatch) => {
+    dispatch<any>(removePreviewLayers());
+
+    layerDescriptors.forEach((layerDescriptor) => {
+      dispatch<any>(addLayer({ ...layerDescriptor, __isPreviewLayer: true }));
+    });
+  };
+}
+
+export function removePreviewLayers() {
+  return (dispatch: Dispatch, getState: () => MapStoreState) => {
+    getLayerList(getState()).forEach((layer) => {
+      if (layer.isPreviewLayer()) {
+        dispatch<any>(removeLayer(layer.getId()));
+      }
+    });
+  };
+}
+
+export function promotePreviewLayers() {
+  return (dispatch: Dispatch, getState: () => MapStoreState) => {
+    getLayerList(getState()).forEach((layer) => {
+      if (layer.isPreviewLayer()) {
+        dispatch({
+          type: UPDATE_LAYER_PROP,
+          id: layer.getId(),
+          propName: '__isPreviewLayer',
+          newValue: false,
+        });
+      }
+    });
+  };
+}
+
 export function setLayerVisibility(layerId: string, makeVisible: boolean) {
   return async (dispatch: Dispatch, getState: () => MapStoreState) => {
     // if the current-state is invisible, we also want to sync data
@@ -193,31 +227,17 @@ export function setSelectedLayer(layerId: string | null) {
   };
 }
 
-export function removeTransientLayer() {
+export function setSelectedLayerToFirstPreviewLayer() {
   return async (dispatch: Dispatch, getState: () => MapStoreState) => {
-    const transientLayerId = getTransientLayerId(getState());
-    if (transientLayerId) {
-      await dispatch<any>(removeLayerFromLayerList(transientLayerId));
-      await dispatch<any>(setTransientLayer(null));
+    const firstPreviewLayer = getLayerList(getState()).find((layer) => {
+      return layer.isPreviewLayer();
+    });
+    if (firstPreviewLayer) {
+      dispatch<any>(setSelectedLayer(firstPreviewLayer.getId()));
     }
   };
 }
 
-export function setTransientLayer(layerId: string | null) {
-  return {
-    type: SET_TRANSIENT_LAYER,
-    transientLayerId: layerId,
-  };
-}
-
-export function clearTransientLayerStateAndCloseFlyout() {
-  return async (dispatch: Dispatch) => {
-    await dispatch(updateFlyout(FLYOUT_STATE.NONE));
-    await dispatch<any>(setSelectedLayer(null));
-    await dispatch<any>(removeTransientLayer());
-  };
-}
-
 export function updateLayerOrder(newLayerOrder: number[]) {
   return {
     type: UPDATE_LAYER_ORDER,

x-pack/plugins/maps/public/actions/map_action_constants.ts

@@ -5,7 +5,6 @@
  */
 
 export const SET_SELECTED_LAYER = 'SET_SELECTED_LAYER';
-export const SET_TRANSIENT_LAYER = 'SET_TRANSIENT_LAYER';
 export const UPDATE_LAYER_ORDER = 'UPDATE_LAYER_ORDER';
 export const ADD_LAYER = 'ADD_LAYER';
 export const SET_LAYER_ERROR_STATUS = 'SET_LAYER_ERROR_STATUS';

x-pack/plugins/maps/public/classes/layers/layer.tsx

@@ -80,6 +80,7 @@ export interface ILayer {
   getInFlightRequestTokens(): symbol[];
   getPrevRequestToken(dataId: string): symbol | undefined;
   destroy: () => void;
+  isPreviewLayer: () => boolean;
 }
 export type Footnote = {
   icon: ReactElement<any>;
@@ -179,6 +180,10 @@ export class AbstractLayer implements ILayer {
     return this.getSource().isJoinable();
   }
 
+  isPreviewLayer(): boolean {
+    return !!this._descriptor.__isPreviewLayer;
+  }
+
   supportsElasticsearchFilters(): boolean {
     return this.getSource().isESSource();
   }

x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts

@@ -9,7 +9,7 @@ import { ReactElement } from 'react';
 import { LayerDescriptor } from '../../../common/descriptor_types';
 
 export type RenderWizardArguments = {
-  previewLayer: (layerDescriptor: LayerDescriptor | null, isIndexingSource?: boolean) => void;
+  previewLayers: (layerDescriptors: LayerDescriptor[], isIndexingSource?: boolean) => void;
   mapColors: string[];
   // upload arguments
   isIndexingTriggered: boolean;

x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_template.tsx

@@ -53,13 +53,12 @@ export class ObservabilityLayerTemplate extends Component<RenderWizardArguments,
   };
 
   _previewLayer() {
-    this.props.previewLayer(
-      createLayerDescriptor({
-        layer: this.state.layer,
-        metric: this.state.metric,
-        display: this.state.display,
-      })
-    );
+    const layerDescriptor = createLayerDescriptor({
+      layer: this.state.layer,
+      metric: this.state.metric,
+      display: this.state.display,
+    });
+    this.props.previewLayers(layerDescriptor ? [layerDescriptor] : []);
   }
 
   render() {

x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx

@@ -28,7 +28,7 @@ export const uploadLayerWizardConfig: LayerWizard = {
   icon: 'importAction',
   isIndexingSource: true,
   renderWizard: ({
-    previewLayer,
+    previewLayers,
     mapColors,
     isIndexingTriggered,
     onRemove,
@@ -38,13 +38,13 @@ export const uploadLayerWizardConfig: LayerWizard = {
   }: RenderWizardArguments) => {
     function previewGeojsonFile(geojsonFile: unknown, name: string) {
       if (!geojsonFile) {
-        previewLayer(null);
+        previewLayers([]);
         return;
       }
       const sourceDescriptor = GeojsonFileSource.createDescriptor(geojsonFile, name);
       const layerDescriptor = VectorLayer.createDescriptor({ sourceDescriptor }, mapColors);
       // TODO figure out a better way to handle passing this information back to layer_addpanel
-      previewLayer(layerDescriptor, true);
+      previewLayers([layerDescriptor], true);
     }
 
     function viewIndexedData(indexResponses: {
@@ -72,7 +72,7 @@ export const uploadLayerWizardConfig: LayerWizard = {
         )
       );
       if (!indexPatternId || !geoField) {
-        previewLayer(null);
+        previewLayers([]);
       } else {
         const esSearchSourceConfig = {
           indexPatternId,
@@ -85,7 +85,7 @@ export const uploadLayerWizardConfig: LayerWizard = {
               ? SCALING_TYPES.CLUSTERS
               : SCALING_TYPES.LIMIT,
         };
-        previewLayer(createDefaultLayerDescriptor(esSearchSourceConfig, mapColors));
+        previewLayers([createDefaultLayerDescriptor(esSearchSourceConfig, mapColors)]);
         importSuccessHandler(indexResponses);
       }
     }

x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx

@@ -22,11 +22,11 @@ export const emsBoundariesLayerWizardConfig: LayerWizard = {
     defaultMessage: 'Administrative boundaries from Elastic Maps Service',
   }),
   icon: 'emsApp',
-  renderWizard: ({ previewLayer, mapColors }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: Partial<EMSFileSourceDescriptor>) => {
       const sourceDescriptor = EMSFileSource.createDescriptor(sourceConfig);
       const layerDescriptor = VectorLayer.createDescriptor({ sourceDescriptor }, mapColors);
-      previewLayer(layerDescriptor);
+      previewLayers([layerDescriptor]);
     };
     return <EMSFileCreateSourceEditor onSourceConfigChange={onSourceConfigChange} />;
   },

x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx

@@ -22,12 +22,12 @@ export const emsBaseMapLayerWizardConfig: LayerWizard = {
     defaultMessage: 'Tile map service from Elastic Maps Service',
   }),
   icon: 'emsApp',
-  renderWizard: ({ previewLayer }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: unknown) => {
       const layerDescriptor = VectorTileLayer.createDescriptor({
         sourceDescriptor: EMSTMSSource.createDescriptor(sourceConfig),
       });
-      previewLayer(layerDescriptor);
+      previewLayers([layerDescriptor]);
     };
 
     return <TileServiceSelect onTileSelect={onSourceConfigChange} />;

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx

@@ -35,10 +35,10 @@ export const clustersLayerWizardConfig: LayerWizard = {
     defaultMessage: 'Geospatial data grouped in grids with metrics for each gridded cell',
   }),
   icon: 'logoElasticsearch',
-  renderWizard: ({ previewLayer }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: Partial<ESGeoGridSourceDescriptor>) => {
       if (!sourceConfig) {
-        previewLayer(null);
+        previewLayers([]);
         return;
       }
 
@@ -94,7 +94,7 @@ export const clustersLayerWizardConfig: LayerWizard = {
           },
         }),
       });
-      previewLayer(layerDescriptor);
+      previewLayers([layerDescriptor]);
     };
 
     return (

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx

@@ -21,17 +21,17 @@ export const heatmapLayerWizardConfig: LayerWizard = {
     defaultMessage: 'Geospatial data grouped in grids to show density',
   }),
   icon: 'logoElasticsearch',
-  renderWizard: ({ previewLayer }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: Partial<ESGeoGridSourceDescriptor>) => {
       if (!sourceConfig) {
-        previewLayer(null);
+        previewLayers([]);
         return;
       }
 
       const layerDescriptor = HeatmapLayer.createDescriptor({
         sourceDescriptor: ESGeoGridSource.createDescriptor(sourceConfig),
       });
-      previewLayer(layerDescriptor);
+      previewLayers([layerDescriptor]);
     };
 
     return (

x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx

@@ -29,10 +29,10 @@ export const point2PointLayerWizardConfig: LayerWizard = {
     defaultMessage: 'Aggregated data paths between the source and destination',
   }),
   icon: 'logoElasticsearch',
-  renderWizard: ({ previewLayer }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: unknown) => {
       if (!sourceConfig) {
-        previewLayer(null);
+        previewLayers([]);
         return;
       }
 
@@ -65,7 +65,7 @@ export const point2PointLayerWizardConfig: LayerWizard = {
           },
         }),
       });
-      previewLayer(layerDescriptor);
+      previewLayers([layerDescriptor]);
     };
 
     return <CreateSourceEditor onSourceConfigChange={onSourceConfigChange} />;

x-pack/plugins/maps/public/classes/sources/es_search_source/create_source_editor.js

@@ -64,12 +64,12 @@ export class CreateSourceEditor extends Component {
   }
 
   _onIndexPatternSelect = (indexPatternId) => {
-    this.setState(
-      {
-        indexPatternId,
-      },
-      this._loadIndexPattern(indexPatternId)
-    );
+    this.setState({ indexPatternId }, () => {
+      if (!indexPatternId) {
+        this._previewLayer();
+      }
+      this._loadIndexPattern(indexPatternId);
+    });
   };
 
   _loadIndexPattern = (indexPatternId) => {

x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx

@@ -28,14 +28,14 @@ export const esDocumentsLayerWizardConfig: LayerWizard = {
     defaultMessage: 'Vector data from a Kibana index pattern',
   }),
   icon: 'logoElasticsearch',
-  renderWizard: ({ previewLayer, mapColors }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: unknown) => {
       if (!sourceConfig) {
-        previewLayer(null);
+        previewLayers([]);
         return;
       }
 
-      previewLayer(createDefaultLayerDescriptor(sourceConfig, mapColors));
+      previewLayers([createDefaultLayerDescriptor(sourceConfig, mapColors)]);
     };
     return <CreateSourceEditor onSourceConfigChange={onSourceConfigChange} />;
   },

x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx

@@ -24,11 +24,11 @@ export const kibanaRegionMapLayerWizardConfig: LayerWizard = {
     defaultMessage: 'Vector data from hosted GeoJSON configured in kibana.yml',
   }),
   icon: 'logoKibana',
-  renderWizard: ({ previewLayer, mapColors }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: unknown) => {
       const sourceDescriptor = KibanaRegionmapSource.createDescriptor(sourceConfig);
       const layerDescriptor = VectorLayer.createDescriptor({ sourceDescriptor }, mapColors);
-      previewLayer(layerDescriptor);
+      previewLayers([layerDescriptor]);
     };
 
     return <CreateSourceEditor onSourceConfigChange={onSourceConfigChange} />;

x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx

@@ -24,12 +24,12 @@ export const kibanaBasemapLayerWizardConfig: LayerWizard = {
     defaultMessage: 'Tile map service configured in kibana.yml',
   }),
   icon: 'logoKibana',
-  renderWizard: ({ previewLayer }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers }: RenderWizardArguments) => {
     const onSourceConfigChange = () => {
       const layerDescriptor = TileLayer.createDescriptor({
         sourceDescriptor: KibanaTilemapSource.createDescriptor(),
       });
-      previewLayer(layerDescriptor);
+      previewLayers([layerDescriptor]);
     };
     return <CreateSourceEditor onSourceConfigChange={onSourceConfigChange} />;
   },

x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx

@@ -19,11 +19,11 @@ export const mvtVectorSourceWizardConfig: LayerWizard = {
     defaultMessage: 'Vector source wizard',
   }),
   icon: 'grid',
-  renderWizard: ({ previewLayer, mapColors }: RenderWizardArguments) => {
+  renderWizard: ({ previewLayers, mapColors }: RenderWizardArguments) => {
     const onSourceConfigChange = (sourceConfig: MVTSingleLayerVectorSourceConfig) => {
       const sourceDescriptor = MVTSingleLayerVectorSource.createDescriptor(sourceConfig);
       const layerDescriptor = TiledVectorLayer.createDescriptor({ sourceDescriptor }, mapColors);
-      previewLayer(layerDescriptor);
+      previewLayers([layerDescriptor]);
     };
 
     return <MVTSingleLayerVectorSourceEditor onSourceConfigChange={onSourceConfigChange} />;