[Region Map] Fix loading default vector map and base layer setting

src/legacy/core_plugins/kibana/public/visualize/editor/editor.js

@@ -79,6 +79,13 @@ uiRoutes
         }
 
         return savedVisualizations.get($route.current.params)
+          .then(savedVis => {
+            if (savedVis.vis.type.setup) {
+              return savedVis.vis.type.setup(savedVis)
+                .catch(() => savedVis);
+            }
+            return savedVis;
+          })
           .catch(redirectWhenMissing({
             '*': '/visualize'
           }));
@@ -98,6 +105,13 @@ uiRoutes
               savedVis.id);
             return savedVis;
           })
+          .then(savedVis => {
+            if (savedVis.vis.type.setup) {
+              return savedVis.vis.type.setup(savedVis)
+                .catch(() => savedVis);
+            }
+            return savedVis;
+          })
           .catch(redirectWhenMissing({
             'visualization': '/visualize',
             'search': '/management/kibana/objects/savedVisualizations/' + $route.current.params.id,

src/legacy/core_plugins/region_map/public/components/region_map_options.tsx

@@ -17,24 +17,20 @@
  * under the License.
  */
 
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { EuiIcon, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { toastNotifications } from 'ui/notify';
 import { FileLayerField, VectorLayer, ServiceSettings } from 'ui/vis/map/service_settings';
 import { VisOptionsProps } from 'ui/vis/editors/default';
 import {
   NumberInputOption,
   SelectOption,
   SwitchOption,
 } from '../../../kbn_vislib_vis_types/public/components';
-import { ORIGIN } from '../../../tile_map/common/origin';
 import { WmsOptions } from '../../../tile_map/public/components/wms_options';
-import { mapToLayerWithId } from '../util';
 import { RegionMapVisParams } from '../types';
-import { RegionMapsConfig } from '../plugin';
 
 const mapLayerForOption = ({ layerId, name }: VectorLayer) => ({
   text: name,
@@ -48,30 +44,26 @@ const mapFieldForOption = ({ description, name }: FileLayerField) => ({
 
 export type RegionMapOptionsProps = {
   serviceSettings: ServiceSettings;
-  includeElasticMapsService: RegionMapsConfig['includeElasticMapsService'];
 } & VisOptionsProps<RegionMapVisParams>;
 
 function RegionMapOptions(props: RegionMapOptionsProps) {
-  const { includeElasticMapsService, serviceSettings, stateParams, vis, setValue } = props;
-  const [vectorLayers, setVectorLayers] = useState<VectorLayer[]>(
-    vis.type.editorConfig.collections.vectorLayers
-  );
-  const [vectorLayerOptions, setVectorLayerOptions] = useState(vectorLayers.map(mapLayerForOption));
-  const currentLayerId = stateParams.selectedLayer && stateParams.selectedLayer.layerId;
+  const { serviceSettings, stateParams, vis, setValue } = props;
+  const { vectorLayers } = vis.type.editorConfig.collections;
+  const vectorLayerOptions = useMemo(() => vectorLayers.map(mapLayerForOption), [vectorLayers]);
   const fieldOptions = useMemo(
     () =>
       ((stateParams.selectedLayer && stateParams.selectedLayer.fields) || []).map(
         mapFieldForOption
       ),
-    [currentLayerId]
+    [stateParams.selectedLayer]
   );
 
   const setEmsHotLink = useCallback(
     async (layer: VectorLayer) => {
       const emsHotLink = await serviceSettings.getEMSHotLink(layer);
       setValue('emsHotLink', emsHotLink);
     },
-    [setValue]
+    [setValue, serviceSettings]
   );
 
   const setLayer = useCallback(
@@ -84,7 +76,7 @@ function RegionMapOptions(props: RegionMapOptionsProps) {
         setEmsHotLink(newLayer);
       }
     },
-    [vectorLayers, setValue]
+    [vectorLayers, setEmsHotLink, setValue]
   );
 
   const setField = useCallback(
@@ -93,53 +85,9 @@ function RegionMapOptions(props: RegionMapOptionsProps) {
         setValue(paramName, stateParams.selectedLayer.fields.find(f => f.name === value));
       }
     },
-    [currentLayerId, setValue]
+    [setValue, stateParams.selectedLayer]
   );
 
-  useEffect(() => {
-    async function setDefaultValues() {
-      try {
-        const layers = await serviceSettings.getFileLayers();
-        const newLayers = layers
-          .map(mapToLayerWithId.bind(null, ORIGIN.EMS))
-          .filter(
-            layer => !vectorLayers.some(vectorLayer => vectorLayer.layerId === layer.layerId)
-          );
-
-        // backfill v1 manifest for now
-        newLayers.forEach(layer => {
-          if (layer.format === 'geojson') {
-            layer.format = {
-              type: 'geojson',
-            };
-          }
-        });
-
-        const newVectorLayers = [...vectorLayers, ...newLayers];
-
-        setVectorLayers(newVectorLayers);
-        setVectorLayerOptions(newVectorLayers.map(mapLayerForOption));
-
-        const [newLayer] = newVectorLayers;
-
-        if (newLayer && !stateParams.selectedLayer) {
-          setValue('selectedLayer', newLayer);
-          setValue('selectedJoinField', newLayer.fields[0]);
-
-          if (newLayer.isEMS) {
-            setEmsHotLink(newLayer);
-          }
-        }
-      } catch (error) {
-        toastNotifications.addWarning(error.message);
-      }
-    }
-
-    if (includeElasticMapsService) {
-      setDefaultValues();
-    }
-  }, []);
-
   return (
     <>
       <EuiPanel paddingSize="s">

src/legacy/core_plugins/region_map/public/region_map_type.js

@@ -33,9 +33,6 @@ import { ORIGIN } from '../../tile_map/common/origin';
 export function createRegionMapTypeDefinition(dependencies) {
   const { uiSettings, regionmapsConfig, serviceSettings } = dependencies;
   const visualization = createRegionMapVisualization(dependencies);
-  const vectorLayers = regionmapsConfig.layers.map(mapToLayerWithId.bind(null, ORIGIN.KIBANA_YML));
-  const selectedLayer = vectorLayers[0];
-  const selectedJoinField = selectedLayer ? selectedLayer.fields[0] : null;
 
   return visFactory.createBaseVisualization({
     name: 'region_map',
@@ -52,8 +49,6 @@ provided base maps, or add your own. Darker colors represent higher values.',
         addTooltip: true,
         colorSchema: 'Yellow to Red',
         emsHotLink: '',
-        selectedLayer,
-        selectedJoinField,
         isDisplayWarning: true,
         wms: uiSettings.get('visualization:tileMap:WMSdefaults'),
         mapZoom: 2,
@@ -69,12 +64,10 @@ provided base maps, or add your own. Darker colors represent higher values.',
         <RegionMapOptions
           {...props}
           serviceSettings={serviceSettings}
-          includeElasticMapsService={regionmapsConfig.includeElasticMapsService}
-        />
-      ),
+        />),
       collections: {
         colorSchemas,
-        vectorLayers,
+        vectorLayers: [],
         tmsLayers: [],
       },
       schemas: new Schemas([
@@ -113,5 +106,54 @@ provided base maps, or add your own. Darker colors represent higher values.',
         },
       ]),
     },
+    setup: async (savedVis) => {
+      const vis = savedVis.vis;
+
+      const tmsLayers = await serviceSettings.getTMSServices();
+      vis.type.editorConfig.collections.tmsLayers = tmsLayers;
+      if (!vis.params.wms.selectedTmsLayer && tmsLayers.length) {
+        vis.params.wms.selectedTmsLayer = tmsLayers[0];
+      }
+
+      const vectorLayers = regionmapsConfig.layers.map(
+        mapToLayerWithId.bind(null, ORIGIN.KIBANA_YML)
+      );
+      let selectedLayer = vectorLayers[0];
+      let selectedJoinField = selectedLayer ? selectedLayer.fields[0] : null;
+      if (regionmapsConfig.includeElasticMapsService) {
+        const layers = await serviceSettings.getFileLayers();
+        const newLayers = layers
+          .map(mapToLayerWithId.bind(null, ORIGIN.EMS))
+          .filter(
+            (layer) =>
+              !vectorLayers.some(vectorLayer => vectorLayer.layerId === layer.layerId)
+          );
+
+        // backfill v1 manifest for now
+        newLayers.forEach((layer) => {
+          if (layer.format === 'geojson') {
+            layer.format = {
+              type: 'geojson',
+            };
+          }
+        });
+
+        vis.type.editorConfig.collections.vectorLayers = [...vectorLayers, ...newLayers];
+
+        [selectedLayer] = vis.type.editorConfig.collections.vectorLayers;
+        selectedJoinField = selectedLayer ? selectedLayer.fields[0] : null;
+
+        if (selectedLayer && !vis.params.selectedLayer && selectedLayer.isEMS) {
+          vis.params.emsHotLink = await serviceSettings.getEMSHotLink(selectedLayer);
+        }
+      }
+
+      if (!vis.params.selectedLayer) {
+        vis.params.selectedLayer = selectedLayer;
+        vis.params.selectedJoinField = selectedJoinField;
+      }
+
+      return savedVis;
+    },
   });
 }

src/legacy/core_plugins/tile_map/public/components/tile_map_options.tsx

@@ -21,7 +21,6 @@ import React, { useEffect } from 'react';
 import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { ServiceSettings } from 'ui/vis/map/service_settings';
 import { VisOptionsProps } from 'ui/vis/editors/default';
 import {
   BasicOptions,
@@ -33,9 +32,7 @@ import { WmsOptions } from './wms_options';
 import { TileMapVisParams } from '../types';
 import { MapTypes } from '../map_types';
 
-export type TileMapOptionsProps = { serviceSettings: ServiceSettings } & VisOptionsProps<
-  TileMapVisParams
->;
+export type TileMapOptionsProps = VisOptionsProps<TileMapVisParams>;
 
 function TileMapOptions(props: TileMapOptionsProps) {
   const { stateParams, setValue, vis } = props;

src/legacy/core_plugins/tile_map/public/components/wms_options.tsx

@@ -17,12 +17,11 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { toastNotifications } from 'ui/notify';
 import { TmsLayer } from 'ui/vis/map/service_settings';
 import { SelectOption, SwitchOption } from '../../../kbn_vislib_vis_types/public/components';
 import { RegionMapOptionsProps } from '../../../region_map/public/components/region_map_options';
@@ -32,18 +31,10 @@ import { TileMapVisParams } from '../types';
 
 const mapLayerForOption = ({ id }: TmsLayer) => ({ text: id, value: id });
 
-function WmsOptions({
-  serviceSettings,
-  stateParams,
-  setValue,
-  vis,
-}: TileMapOptionsProps | RegionMapOptionsProps) {
+function WmsOptions({ stateParams, setValue, vis }: TileMapOptionsProps | RegionMapOptionsProps) {
   const { wms } = stateParams;
   const { tmsLayers } = vis.type.editorConfig.collections;
-  const [tmsLayerOptions, setTmsLayersOptions] = useState<Array<{ text: string; value: string }>>(
-    tmsLayers.map(mapLayerForOption)
-  );
-  const [layers, setLayers] = useState<TmsLayer[]>([]);
+  const tmsLayerOptions = useMemo(() => tmsLayers.map(mapLayerForOption), [tmsLayers]);
 
   const setWmsOption = <T extends keyof TileMapVisParams['wms']>(
     paramName: T,
@@ -55,31 +46,12 @@ function WmsOptions({
     });
 
   const selectTmsLayer = (id: string) => {
-    const layer = layers.find(l => l.id === id);
+    const layer = tmsLayers.find((l: TmsLayer) => l.id === id);
     if (layer) {
       setWmsOption('selectedTmsLayer', layer);
     }
   };
 
-  useEffect(() => {
-    serviceSettings
-      .getTMSServices()
-      .then(services => {
-        const newBaseLayers: TmsLayer[] = [
-          ...tmsLayers,
-          ...services.filter(service => !tmsLayers.some(({ id }: TmsLayer) => service.id === id)),
-        ];
-
-        setLayers(newBaseLayers);
-        setTmsLayersOptions(newBaseLayers.map(mapLayerForOption));
-
-        if (!wms.selectedTmsLayer && newBaseLayers.length) {
-          setWmsOption('selectedTmsLayer', newBaseLayers[0]);
-        }
-      })
-      .catch((error: Error) => toastNotifications.addWarning(error.message));
-  }, []);
-
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">

src/legacy/core_plugins/tile_map/public/tile_map_type.js

@@ -119,7 +119,7 @@ export function createTileMapTypeDefinition(dependencies) {
         ],
         tmsLayers: [],
       },
-      optionsTemplate: props => <TileMapOptions {...props} serviceSettings={serviceSettings} />,
+      optionsTemplate: (props) => <TileMapOptions {...props} />,
       schemas: new Schemas([
         {
           group: 'metrics',
@@ -144,5 +144,21 @@ export function createTileMapTypeDefinition(dependencies) {
         },
       ]),
     },
+    setup: async (savedVis) => {
+      const vis = savedVis.vis;
+      let tmsLayers;
+
+      try {
+        tmsLayers = await serviceSettings.getTMSServices();
+      } catch (e) {
+        return savedVis;
+      }
+
+      vis.type.editorConfig.collections.tmsLayers = tmsLayers;
+      if (!vis.params.wms.selectedTmsLayer && tmsLayers.length) {
+        vis.params.wms.selectedTmsLayer = tmsLayers[0];
+      }
+      return savedVis;
+    },
   });
 }