fix: use useLayoutEffect for D3 chart rendering to prevent frame mismatches (#175)

When switching the y-axis metric on the GPU chart, dots and roofline paths
could briefly appear out of sync. The useEffect + setTimeout(0) pattern
deferred D3 rendering to after the browser paint, allowing a stale frame
to be visible. Switching to useLayoutEffect ensures all D3 updates (dots,
lines, axes, zoom restore) are applied atomically before the browser paints.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Alec Ibarra <93070681+adibarra@users.noreply.github.com>

Author: 3 people

packages/app/src/lib/d3-chart/D3Chart/useD3ChartRenderer.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import * as d3 from 'd3';
 
 import { computeTooltipPosition } from '../layers/scatter-points';
@@ -90,7 +90,9 @@ export function useD3ChartRenderer<T>(props: D3ChartProps<T>, deps: RendererDeps
   const prevDataRef = useRef(data);
   const prevScalesRef = useRef({ xScaleConfig, yScaleConfig });
 
-  useEffect(() => {
+  // useLayoutEffect ensures D3 renders synchronously before browser paint,
+  // preventing a frame where dots and lines are out of sync during y-axis metric changes.
+  useLayoutEffect(() => {
     if (!svgRef.current || !tooltipRef.current || dimensions.width === 0) return;
     if (data.length === 0 && layers.every((l) => l.type !== 'custom')) return;
 
@@ -102,7 +104,7 @@ export function useD3ChartRenderer<T>(props: D3ChartProps<T>, deps: RendererDeps
     prevDataRef.current = data;
     prevScalesRef.current = { xScaleConfig, yScaleConfig };
 
-    const timeoutId = setTimeout(() => {
+    {
       if (!svgRef.current || !tooltipRef.current) return;
 
       // Preserve zoom transform before structure rebuild
@@ -470,9 +472,7 @@ export function useD3ChartRenderer<T>(props: D3ChartProps<T>, deps: RendererDeps
 
       // ── User onRender callback ──
       onRender?.(ctx);
-    }, 0);
-
-    return () => clearTimeout(timeoutId);
+    }
     // We intentionally list specific deps rather than the entire props object.
   }, [
     data,