diff --git a/src/ui/components/plot-container/plot-container.tsx b/src/ui/components/plot-container/plot-container.tsx index 7c385234..8db83744 100644 --- 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(null!); const allotmentRef = useRef(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 index 9e720878..f87c4e36 100644 --- 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;