Create new map from dashboard visualization and save return

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
opensearch-project · Feb 13, 2023 · 4f178f4 · 4f178f4
1 parent e0f8e27
commit 4f178f4
Show file tree

Hide file tree

Showing 14 changed files with 310 additions and 161 deletions.
diff --git a/common/index.ts b/common/index.ts
@@ -46,7 +46,8 @@ export const MIN_LONGITUDE = -180;
 export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
 export const MAP_SAVED_OBJECT_TYPE = 'map';
 // TODO: Replace with actual app icon
-export const MAPS_APP_ICON = 'globe';
+export const MAPS_APP_ICON = 'gisApp';
+export const MAPS_VISUALIZATION_DESCRIPTION = 'Create map visualization with multiple layers';
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -4,6 +4,6 @@
     "opensearchDashboardsVersion": "3.0.0",
     "server": true,
     "ui": true,
-    "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "opensearchDashboardsUtils", "navigation", "savedObjects", "data", "embeddable"],
+    "requiredPlugins": ["regionMap", "opensearchDashboardsReact", "opensearchDashboardsUtils", "navigation", "savedObjects", "data", "embeddable", "visualizations"],
     "optionalPlugins": []
   }
diff --git a/public/components/layer_control_panel/layer_control_panel.tsx b/public/components/layer_control_panel/layer_control_panel.tsx
@@ -30,7 +30,6 @@ import { AddLayerPanel } from '../add_layer_panel';
 import { LayerConfigPanel } from '../layer_config';
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import {
-  DASHBOARDS_MAPS_LAYER_TYPE,
   LAYER_ICON_TYPE_MAP,
   LAYER_PANEL_HIDE_LAYER_ICON,
   LAYER_PANEL_SHOW_LAYER_ICON,
@@ -98,16 +97,17 @@ export const LayerControlPanel = memo(
     >();
     const [visibleLayers, setVisibleLayers] = useState<MapLayerSpecification[]>([]);
 
+    // Update data layers when state bar changes
     useEffect(() => {
-      if (timeRange) {
-        layers.forEach((layer: MapLayerSpecification) => {
-          if (layer.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP) {
-            return;
-          }
-          handleDataLayerRender(layer, mapState, services, maplibreRef, undefined, timeRange);
-        });
-      }
+      layers.forEach((layer: MapLayerSpecification) => {
+        if (referenceLayerTypeLookup[layer.type]) {
+          return;
+        }
+        handleDataLayerRender(layer, mapState, services, maplibreRef, undefined, timeRange);
+      });
+    }, [timeRange, mapState]);
 
+    useEffect(() => {
       if (!isUpdatingLayerRender && initialLayersLoaded) {
         return;
       }
@@ -138,7 +138,7 @@ export const LayerControlPanel = memo(
         setInitialLayersLoaded(true);
       }
       setIsUpdatingLayerRender(false);
-    }, [layers, timeRange]);
+    }, [layers]);
 
     useEffect(() => {
       const getCurrentVisibleLayers = () => {
@@ -356,8 +356,13 @@ export const LayerControlPanel = memo(
       return visibleLayers.includes(layer);
     };
 
+    if (inDashboardMode) {
+      return null;
+    }
+
+    let content;
     if (isLayerControlVisible) {
-      return (
+      content = (
         <I18nProvider>
           <EuiPanel
             paddingSize="none"
@@ -536,19 +541,21 @@ export const LayerControlPanel = memo(
           </EuiPanel>
         </I18nProvider>
       );
+    } else {
+      content = (
+        <EuiFlexItem grow={false} className="layerControlPanel layerControlPanel--hide">
+          <EuiButtonIcon
+            className="layerControlPanel__visButton"
+            size="s"
+            iconType="menuRight"
+            onClick={() => setIsLayerControlVisible((visible) => !visible)}
+            aria-label="Show layer control"
+            title="Expand layers panel"
+          />
+        </EuiFlexItem>
+      );
     }
 
-    return (
-      <EuiFlexItem grow={false} className="layerControlPanel layerControlPanel--hide">
-        <EuiButtonIcon
-          className="layerControlPanel__visButton"
-          size="s"
-          iconType="menuRight"
-          onClick={() => setIsLayerControlVisible((visible) => !visible)}
-          aria-label="Show layer control"
-          title="Expand layers panel"
-        />
-      </EuiFlexItem>
-    );
+    return <div className="layerControlPanel-container">{content}</div>;
   }
 );
diff --git a/public/components/map_container/map_container.tsx b/public/components/map_container/map_container.tsx
@@ -204,22 +204,20 @@ export const MapContainer = ({
           zoom: {zoom}
         </small>
       </EuiPanel>
-      <div className="layerControlPanel-container">
-        {mounted && (
-          <LayerControlPanel
-            maplibreRef={maplibreRef}
-            layers={layers}
-            setLayers={setLayers}
-            layersIndexPatterns={layersIndexPatterns}
-            setLayersIndexPatterns={setLayersIndexPatterns}
-            mapState={mapState}
-            zoom={zoom}
-            mapConfig={mapConfig}
-            inDashboardMode={inDashboardMode}
-            timeRange={timeRange}
-          />
-        )}
-      </div>
+      {mounted && (
+        <LayerControlPanel
+          maplibreRef={maplibreRef}
+          layers={layers}
+          setLayers={setLayers}
+          layersIndexPatterns={layersIndexPatterns}
+          setLayersIndexPatterns={setLayersIndexPatterns}
+          mapState={mapState}
+          zoom={zoom}
+          mapConfig={mapConfig}
+          inDashboardMode={inDashboardMode}
+          timeRange={timeRange}
+        />
+      )}
       <div className="map-container" ref={mapContainer} />
     </div>
   );

diff --git a/public/components/map_page/map_page.tsx b/public/components/map_page/map_page.tsx
@@ -5,8 +5,8 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { SimpleSavedObject } from 'opensearch-dashboards/public';
 import { Map as Maplibre } from 'maplibre-gl';
+import { SimpleSavedObject } from '../../../../../src/core/public';
 import { MapContainer } from '../map_container';
 import { MapTopNavMenu } from '../map_top_nav';
 import { MapServices } from '../../types';
@@ -17,13 +17,17 @@ import {
   MAP_LAYER_DEFAULT_NAME,
   OPENSEARCH_MAP_LAYER,
 } from '../../../common';
-import { MapLayerSpecification } from '../../model/mapLayerType';
+import {MapLayerSpecification, OSMLayerSpecification} from '../../model/mapLayerType';
 import { getLayerConfigMap, getInitialMapState } from '../../utils/getIntialConfig';
 import { IndexPattern, TimeRange } from '../../../../../src/plugins/data/public';
 import { MapState } from '../../model/mapState';
 import { ConfigSchema } from '../../../common/config';
 
-interface Props {
+interface MapPageProps {
+  mapConfig: ConfigSchema;
+}
+
+interface MapComponentProps {
   mapConfig: ConfigSchema;
   mapIdFromSavedObject: string;
   timeRange?: TimeRange;
@@ -34,7 +38,7 @@ export const MapComponent = ({
   mapConfig,
   timeRange,
   inDashboardMode,
-}: Props) => {
+}: MapComponentProps) => {
   const { services } = useOpenSearchDashboards<MapServices>();
   const {
     savedObjects: { client: savedObjectsClient },
@@ -66,9 +70,8 @@ export const MapComponent = ({
         setLayersIndexPatterns(savedIndexPatterns);
       });
     } else {
-      const initialDefaultLayer: MapLayerSpecification = getLayerConfigMap(mapConfig)[
-        OPENSEARCH_MAP_LAYER.type
-      ];
+      const initialDefaultLayer: MapLayerSpecification =
+        getLayerConfigMap(mapConfig)[OPENSEARCH_MAP_LAYER.type];
       initialDefaultLayer.name = MAP_LAYER_DEFAULT_NAME;
       setLayers([initialDefaultLayer]);
     }
@@ -105,7 +108,7 @@ export const MapComponent = ({
   );
 };
 
-export const MapPage = ({ mapConfig }: Props) => {
+export const MapPage = ({ mapConfig }: MapPageProps) => {
   const { id: mapId } = useParams<{ id: string }>();
   return (
     <MapComponent mapIdFromSavedObject={mapId} mapConfig={mapConfig} inDashboardMode={false} />