Refactor controller

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
opensearch-project · Feb 16, 2023 · 2621a43 · 2621a43
1 parent 901fd8a
commit 2621a43
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 defualt, Maplibre only auto resize map window when broswer size changes, but in dashboard mode, we need
+ // mamually 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