Create new map from dashboard visualization and save return

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

Hide file tree

Showing 12 changed files with 273 additions and 118 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 = () => {

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';
@@ -23,7 +23,11 @@ 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,15 +38,14 @@ export const MapComponent = ({
   mapConfig,
   timeRange,
   inDashboardMode,
-}: Props) => {
+}: MapComponentProps) => {
   const { services } = useOpenSearchDashboards<MapServices>();
   const {
     savedObjects: { client: savedObjectsClient },
   } = services;
   const [layers, setLayers] = useState<MapLayerSpecification[]>([]);
-  const [savedMapObject, setSavedMapObject] = useState<SimpleSavedObject<
-    MapSavedObjectAttributes
-  > | null>();
+  const [savedMapObject, setSavedMapObject] =
+    useState<SimpleSavedObject<MapSavedObjectAttributes> | null>();
   const [layersIndexPatterns, setLayersIndexPatterns] = useState<IndexPattern[]>([]);
   const maplibreRef = useRef<Maplibre | null>(null);
   const [mapState, setMapState] = useState<MapState>(getInitialMapState());
@@ -66,9 +69,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 +107,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} />