Refactor controller

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
opensearch-project · Feb 16, 2023 · 5b0aa8a · 5b0aa8a
1 parent 901fd8a
commit 5b0aa8a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 52 deletions.
diff --git a/cypress/integration/add_map_to_dashboard.spec.js b/cypress/integration/add_map_to_dashboard.spec.js
@@ -14,7 +14,7 @@ describe('Add map to dashboard', () => {
     cy.get('div[data-test-subj="sampleDataSetCardflights"]', { timeout: 60000 })
       .contains(/(Add|View) data/)
       .click();
-    cy.wait(5000);
+    cy.wait(60000);
   });
 
   it('Add new map to dashboard', () => {

diff --git a/public/components/layer_control_panel/layer_control_panel.tsx b/public/components/layer_control_panel/layer_control_panel.tsx
@@ -24,13 +24,7 @@ import { I18nProvider } from '@osd/i18n/react';
 import { Map as Maplibre } from 'maplibre-gl';
 import './layer_control_panel.scss';
 import { isEqual } from 'lodash';
-import {
-  IndexPattern,
-  RefreshInterval,
-  TimeRange,
-  Filter,
-  Query,
-} from '../../../../../src/plugins/data/public';
+import { IndexPattern } from '../../../../../src/plugins/data/public';
 import { AddLayerPanel } from '../add_layer_panel';
 import { LayerConfigPanel } from '../layer_config';
 import { MapLayerSpecification } from '../../model/mapLayerType';
@@ -66,10 +60,6 @@ interface Props {
   zoom: number;
   mapConfig: ConfigSchema;
   inDashboardMode: boolean;
-  timeRange?: TimeRange;
-  refreshConfig?: RefreshInterval;
-  filters?: Filter[];
-  query?: Query;
 }
 
 export const LayerControlPanel = memo(
@@ -83,10 +73,6 @@ export const LayerControlPanel = memo(
     zoom,
     mapConfig,
     inDashboardMode,
-    timeRange,
-    refreshConfig,
-    filters,
-    query,
   }: Props) => {
     const { services } = useOpenSearchDashboards<MapServices>();
     const {
@@ -109,41 +95,6 @@ export const LayerControlPanel = memo(
     >();
     const [visibleLayers, setVisibleLayers] = useState<MapLayerSpecification[]>([]);
 
-    // Update data layers when state bar time range, filters and query changes
-    useEffect(() => {
-      layers.forEach((layer: MapLayerSpecification) => {
-        if (referenceLayerTypeLookup[layer.type]) {
-          return;
-        }
-        handleDataLayerRender(
-          layer,
-          mapState,
-          services,
-          maplibreRef,
-          undefined,
-          timeRange,
-          filters,
-          query
-        );
-      });
-    }, [timeRange, mapState, filters]);
-
-    // Update data layers when state bar enable auto refresh
-    useEffect(() => {
-      let intervalId: NodeJS.Timeout | undefined;
-      if (refreshConfig && !refreshConfig.pause) {
-        intervalId = setInterval(() => {
-          layers.forEach((layer: MapLayerSpecification) => {
-            if (referenceLayerTypeLookup[layer.type]) {
-              return;
-            }
-            handleDataLayerRender(layer, mapState, services, maplibreRef, undefined, timeRange);
-          });
-        }, refreshConfig.value);
-      }
-      return () => clearInterval(intervalId);
-    }, [refreshConfig]);
-
     useEffect(() => {
       if (!isUpdatingLayerRender && initialLayersLoaded) {
         return;
@@ -169,7 +120,7 @@ export const LayerControlPanel = memo(
           if (referenceLayerTypeLookup[layer.type]) {
             handleReferenceLayerRender(layer, maplibreRef, beforeLayerId);
           } else {
-            handleDataLayerRender(layer, mapState, services, maplibreRef, beforeLayerId, timeRange);
+            handleDataLayerRender(layer, mapState, services, maplibreRef, beforeLayerId);
           }
         });
         setInitialLayersLoaded(true);

diff --git a/public/components/map_container/map_container.tsx b/public/components/map_container/map_container.tsx
@@ -25,6 +25,7 @@ import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_d
 import { ResizeChecker } from '../../../../../src/plugins/opensearch_dashboards_utils/public';
 import { MapServices } from '../../types';
 import { ConfigSchema } from '../../../common/config';
+import { referenceLayerTypeLookup } from '../../model/layersFunctions';
 
 interface MapContainerProps {
   setLayers: (layers: MapLayerSpecification[]) => void;
@@ -85,6 +86,9 @@ export const MapContainer = ({
     maplibreInstance.on('move', () => {
       return setZoom(Number(maplibreInstance.getZoom().toFixed(2)));
     });
+
+    // By default, Maplibre only auto resize map window when browser size changes, but in dashboard mode, we need
+    // manually resize map window size when map panel size changes
     const mapContainerElement: HTMLElement | null = document.querySelector('.map-page');
     let resizeChecker: ResizeChecker;
     if (mapContainerElement) {
@@ -201,6 +205,41 @@ export const MapContainer = ({
     };
   }, [layers, mapState, services]);
 
+  // Update data layers when state bar time range, filters and query changes
+  useEffect(() => {
+    layers.forEach((layer: MapLayerSpecification) => {
+      if (referenceLayerTypeLookup[layer.type]) {
+        return;
+      }
+      handleDataLayerRender(
+        layer,
+        mapState,
+        services,
+        maplibreRef,
+        undefined,
+        timeRange,
+        filters,
+        query
+      );
+    });
+  }, [timeRange, mapState, filters]);
+
+  // Update data layers when state bar enable auto refresh
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout | undefined;
+    if (refreshConfig && !refreshConfig.pause) {
+      intervalId = setInterval(() => {
+        layers.forEach((layer: MapLayerSpecification) => {
+          if (referenceLayerTypeLookup[layer.type]) {
+            return;
+          }
+          handleDataLayerRender(layer, mapState, services, maplibreRef, undefined, timeRange);
+        });
+      }, refreshConfig.value);
+    }
+    return () => clearInterval(intervalId);
+  }, [refreshConfig]);
+
   return (
     <div className="map-main">
       <EuiPanel