Merge pull request #918 from vegaprotocol/fix/4826-throttle-redraw-re…

…quest fix: 4826 throttle redraw request in plot container
vegaprotocol · Oct 12, 2023 · 54d3dd5 · 54d3dd5
2 parents 0ea5c3c + c0c8f93
commit 54d3dd5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/ui/components/plot-container/plot-container.tsx b/src/ui/components/plot-container/plot-container.tsx
@@ -112,6 +112,15 @@ export const PlotContainer = forwardRef<
     const xAxisRef = useRef<HTMLDivElement>(null!);
     const allotmentRef = useRef<AllotmentHandle>(null!);
 
+    const requestRedraw = useCallback(() => {
+      chartRef.current?.requestRedraw();
+    }, []);
+
+    const throttleRequestRedraw = useMemo(
+      () => throttle(requestRedraw, THROTTLE_INTERVAL),
+      [requestRedraw],
+    );
+
     const handleBoundsChanged = useCallback(
       (bounds: Bounds) => {
         setBounds(bounds);
@@ -180,7 +189,7 @@ export const PlotContainer = forwardRef<
       )
         .interval(interval)
         .on("redraw", () => {
-          chartRef.current?.requestRedraw();
+          throttleRequestRedraw();
         })
         .on("bounds_changed", (bounds: Bounds) => {
           handleThrottledBoundsChanged(bounds);
@@ -201,8 +210,7 @@ export const PlotContainer = forwardRef<
           onRightClick(event);
         });
 
-      chartRef.current?.requestRedraw();
-
+      throttleRequestRedraw();
       requestAnimationFrame(
         () => chartElement.current?.initialize(initialViewport),
       );
@@ -244,9 +252,9 @@ export const PlotContainer = forwardRef<
           },
         );
 
-        chartRef.current?.requestRedraw();
+        throttleRequestRedraw();
       }
-    }, [chartElement, refs, scenegraph.panes]);
+    }, [chartElement, refs, scenegraph.panes, throttleRequestRedraw]);
 
     useEffect(() => {
       if (chartElement.current) {
@@ -274,9 +282,7 @@ export const PlotContainer = forwardRef<
           vertical
           proportionalLayout={false}
           onChange={(sizes) => {
-            if (typeof chartRef.current?.requestRedraw === "function") {
-              chartRef.current?.requestRedraw();
-            }
+            throttleRequestRedraw();
             onChangePane(sizes);
           }}
         >

diff --git a/src/util/constants/constants.ts b/src/util/constants/constants.ts
@@ -14,7 +14,7 @@ export const AXIS_HEIGHT = FONT_SIZE + 5;
 export const AXIS_WIDTH = FONT_SIZE + 60;
 
 export const Y_AXIS_WIDTH = 92;
-export const THROTTLE_INTERVAL = 10;
+export const THROTTLE_INTERVAL = 150;
 export const INITIAL_NUM_CANDLES_TO_DISPLAY = 100;
 export const INITIAL_NUM_CANDLES_TO_FETCH = 10000;
 export const DEFAULT_INTERVAL_WIDTH = 10;