Function GraphCanvas

dashboard/graph/src/GraphCanvas.tsx:48–468

({
  nodes,
  edges,
  focusId,
  selectedId,
  pathIds,
  fitSignal = 0,
  onSelect,
  onExpand,
}: GraphCanvasProps)

const DIM_ALPHA = 0.13;

export default function GraphCanvas({
  nodes,
  edges,
  focusId,
  selectedId,
  pathIds,
  fitSignal = 0,
  onSelect,
  onExpand,
}: GraphCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const simRef = useRef<Simulation | null>(null);
  const cameraRef = useRef<Camera>({ x: 0, y: 0, k: 1 });
  const hoverRef = useRef<SimNode | null>(null);
  const dragRef = useRef<{ node: SimNode | null; panning: boolean; lastX: number; lastY: number }>(
    { node: null, panning: false, lastX: 0, lastY: 0 },
  );
  const needsRenderRef = useRef(true);
  const rafRef = useRef(0);
  // Cached per-frame inputs: CSS-pixel canvas size (refreshed by the
  // ResizeObserver) and resolved theme tokens (dropped on data-theme flips) —
  // getBoundingClientRect/getComputedStyle are too expensive at 60fps.
  const sizeRef = useRef<CanvasSize>({ width: 0, height: 0 });
  const themeRef = useRef<ThemeColors | null>(null);
  const propsRef = useRef({ selectedId, pathIds, focusId, onSelect, onExpand });
  propsRef.current = { selectedId, pathIds, focusId, onSelect, onExpand };

  // Rebuild the simulation when data changes, preserving prior positions.
  useEffect(() => {
    simRef.current = createSimulation(nodes, edges, simRef.current, focusId);
    simRef.current.reheat(0.9);
    needsRenderRef.current = true;
  }, [nodes, edges]); // eslint-disable-line react-hooks/exhaustive-deps

  // Fly to the focused node, then keep tracking it while the layout settles
  // (cleared as soon as the user pans manually).
  const followIdRef = useRef<string | null>(null);
  // Keep the whole graph framed while the layout settles after a fit
  // (cleared on any manual pan/zoom or focus-follow).
  const followFitRef = useRef(false);
  useEffect(() => {
    if (!focusId || !simRef.current) return;
    const node = simRef.current.nodes.find((n) => n.id === focusId);
    if (!node) return;
    const camera = cameraRef.current;
    camera.x = node.x;
    camera.y = node.y;
    camera.k = Math.max(camera.k, 0.8);
    followIdRef.current = focusId;
    followFitRef.current = false;
    needsRenderRef.current = true;
  }, [focusId, nodes]);

  useEffect(() => {
    needsRenderRef.current = true;
  }, [selectedId, pathIds]);

  // Zoom-to-fit: frame the bounding box of every simulated node, and keep