fix(react-components): adding debounce to the echarts zoom handler

awslabs · Sep 19, 2023 · b983385 · b983385
1 parent 50edcc1
commit b983385
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/packages/react-components/src/components/chart/eChartsConstants.ts b/packages/react-components/src/components/chart/eChartsConstants.ts
@@ -95,3 +95,7 @@ export const MULTI_Y_AXIS_LEGEND_WIDTH = 172;
 // style constants
 export const EMPHASIZE_SCALE_CONSTANT = 2;
 export const DEEMPHASIZE_OPACITY = 0.25;
+
+// Zoom constants
+
+export const ECHARTS_ZOOM_DEBOUNCE_MS = 300;
diff --git a/packages/react-components/src/components/chart/hooks/useDataZoom.ts b/packages/react-components/src/components/chart/hooks/useDataZoom.ts
@@ -1,8 +1,8 @@
-import { MutableRefObject, useEffect, useState } from 'react';
+import { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { useViewport } from '../../../hooks/useViewport';
 import { DataZoomComponentOption, EChartsType } from 'echarts';
 import { ECHARTS_GESTURE } from '../../../common/constants';
-import { DEFAULT_DATA_ZOOM } from '../eChartsConstants';
+import { DEFAULT_DATA_ZOOM, ECHARTS_ZOOM_DEBOUNCE_MS } from '../eChartsConstants';
 import { ViewportInMs } from '../types';
 import { Viewport } from '@iot-app-kit/core';
 
@@ -11,23 +11,41 @@ import { Viewport } from '@iot-app-kit/core';
 const onDataZoomEvent = (chart: EChartsType, setViewport: (viewport: Viewport, lastUpdatedBy?: string) => void) => {
   if (chart) {
     const allDataZooms = chart.getOption().dataZoom as DataZoomComponentOption[];
-    !!allDataZooms.length &&
+    if (allDataZooms.length) {
       setViewport(
         { start: new Date(allDataZooms[0].startValue || 0), end: new Date(allDataZooms[0].endValue || 0) },
         ECHARTS_GESTURE
       );
+    }
   }
 };
+// this variable has to live in the global namespace else debounce will not work
+let debounceTimer: NodeJS.Timeout | null = null;
+const debounceZoom = (func: (...args: unknown[]) => void, delay: number) => {
+  return (...args: unknown[]) => {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = setTimeout(() => {
+      func.call(null, ...args);
+    }, delay);
+  };
+};
 
 export const useDataZoom = (chartRef: MutableRefObject<EChartsType | null>, viewportInMs: ViewportInMs) => {
   const { lastUpdatedBy, setViewport } = useViewport();
-  const [isScrolling, setIsScroling] = useState(false);
+  const [isScrolling, setIsScrolling] = useState(false);
+
+  const viewportInMsRef = useRef(viewportInMs);
+  useEffect(() => {
+    viewportInMsRef.current = viewportInMs;
+  }, [viewportInMs]);
 
   // handle live mode
   useEffect(() => {
     const chart = chartRef.current;
     if (chart && (!isScrolling || lastUpdatedBy === 'date-picker')) {
-      setIsScroling(false);
+      setIsScrolling(false);
       chart.setOption({
         dataZoom: { ...DEFAULT_DATA_ZOOM, startValue: viewportInMs.initial, end: 100 },
       });
@@ -39,13 +57,15 @@ export const useDataZoom = (chartRef: MutableRefObject<EChartsType | null>, view
     const chart = chartRef?.current;
     if (chart) {
       chart.on('dataZoom', () => {
-        setIsScroling(true);
-        onDataZoomEvent(chart, setViewport);
+        debounceZoom(() => {
+          setIsScrolling(true);
+          onDataZoomEvent(chart, setViewport);
+        }, ECHARTS_ZOOM_DEBOUNCE_MS)();
       });
     }
+
     return () => {
       chart?.off('dataZoom');
-      return;
     };
   }, [chartRef]);
 };