Perf S3: simplified-node LOD when zoomed out (whole-graph zoom FPS 3.5→10)

packages/web/src/components/InteractiveGraphVisualization.tsx

@@ -65,6 +65,12 @@ const LOD_THRESHOLDS = {
 // filtered layers each frame collapses FPS. Below it, the full aesthetic stays.
 const DENSE_GRAPH_NODE_THRESHOLD = 150;
 
+// Below this zoom scale on a dense graph, per-node detail (text, icons, status/
+// priority bars) is unreadable, so it is hidden outright (data-simplify) — each
+// node renders as just its colored card. This is the dominant win for the
+// whole-graph view, where every element is on screen and painted each frame.
+const SIMPLIFY_SCALE = 0.45;
+
 // Utility functions
 const getSmoothedOpacity = (scale: number, threshold: number, fadeRange: number = 0.2) => {
   if (scale >= threshold + fadeRange) return 1;
@@ -103,6 +109,9 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected }:
   // descendInto from context isn't memoized; hold the latest in a ref so the
   // D3-bound node click handler can call it without re-binding every render.
   const descendIntoRef = useRef(descendInto);
+  // Mirrors isSimplified for the d3 tick closure (which captures stale render
+  // values otherwise). Lets updateEdgePositions skip hidden arrow/label work.
+  const simplifiedRef = useRef(false);
   descendIntoRef.current = descendInto;
   const { currentUser } = useAuth();
   const { showSuccess, showError } = useNotifications();
@@ -3583,6 +3592,15 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected }:
         .attr('x2', (d: any) => d._ep.x2)
         .attr('y2', (d: any) => d._ep.y2);
 
+      // Simplified (dense + zoomed out): arrows and edge labels are hidden
+      // (data-simplify CSS), so skip their per-tick positioning entirely — at
+      // 1400 edges that arrow transform + label placement pass is the bulk of
+      // the remaining per-tick cost in the whole-graph view. forceAvoid (the
+      // one-shot settle pass) still runs so labels are correct when you zoom in.
+      if (simplifiedRef.current && !forceAvoid) {
+        return;
+      }
+
       // Arrow sits at the TARGET border, pointing into the node.
       arrowElements
         .attr('transform', (d: any) => {
@@ -4176,6 +4194,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected }:
   // a graph change. We wait briefly for the one-shot layout to settle, then fit.
   const hasNodes = nodes.length > 0;
   const isDenseGraph = nodes.length > DENSE_GRAPH_NODE_THRESHOLD;
+  const isSimplified = isDenseGraph && (currentTransform?.scale ?? 1) < SIMPLIFY_SCALE;
+  simplifiedRef.current = isSimplified;
   const currentGraphId = currentGraph?.id;
   useEffect(() => {
     if (!hasNodes || !svgRef.current) return undefined;
@@ -4400,7 +4420,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected }:
     const isNetworkError = errorMessage.includes('Cannot connect');
 
     return (
-      <div ref={containerRef} className="graph-container relative w-full h-full" data-quality={qualityTier} data-dense={isDenseGraph ? 'true' : undefined}>
+      <div ref={containerRef} className="graph-container relative w-full h-full" data-quality={qualityTier} data-dense={isDenseGraph ? 'true' : undefined} data-simplify={isSimplified ? 'true' : undefined}>
         <svg ref={svgRef} className="w-full h-full">
           {/* Error message centered in SVG */}
           <foreignObject x="20%" y="30%" width="60%" height="40%">
@@ -4584,7 +4604,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected }:
 
 
   return (
-    <div ref={containerRef} className="graph-container relative w-full h-full overflow-hidden select-none" data-quality={qualityTier} data-dense={isDenseGraph ? 'true' : undefined}>
+    <div ref={containerRef} className="graph-container relative w-full h-full overflow-hidden select-none" data-quality={qualityTier} data-dense={isDenseGraph ? 'true' : undefined} data-simplify={isSimplified ? 'true' : undefined}>
       <svg 
         ref={svgRef} 
         className="w-full h-full" 

packages/web/src/index.css

@@ -819,6 +819,39 @@ input[type="date"]:focus {
   animation: none;
 }
 
+/* PERF (simplified LOD): when a dense graph is zoomed out far enough that the
+   per-node detail is unreadable anyway, hide that detail entirely (not just
+   opacity:0 — transparent elements are still painted). Each node drops from ~40
+   painted SVG elements to just its colored card, which is what dominates the
+   frame cost in the whole-graph view. data-simplify is set by
+   InteractiveGraphVisualization below SIMPLIFY_SCALE on dense graphs; zooming
+   back in restores full detail. */
+.graph-container[data-simplify="true"] svg .node-title-bar,
+.graph-container[data-simplify="true"] svg .node-type-text,
+.graph-container[data-simplify="true"] svg .node-title-text,
+.graph-container[data-simplify="true"] svg .node-description-text,
+.graph-container[data-simplify="true"] svg .node-subgraph-count,
+.graph-container[data-simplify="true"] svg .completion-indicator,
+.graph-container[data-simplify="true"] svg .node-edit-icon,
+.graph-container[data-simplify="true"] svg .node-relationship-icon,
+.graph-container[data-simplify="true"] svg .node-descend-icon,
+.graph-container[data-simplify="true"] svg .status-icon-svg,
+.graph-container[data-simplify="true"] svg .status-label-text,
+.graph-container[data-simplify="true"] svg .status-percentage-text,
+.graph-container[data-simplify="true"] svg .status-progress-bg,
+.graph-container[data-simplify="true"] svg .status-progress-fill,
+.graph-container[data-simplify="true"] svg .priority-icon-svg,
+.graph-container[data-simplify="true"] svg .priority-label-text,
+.graph-container[data-simplify="true"] svg .priority-percentage-text,
+.graph-container[data-simplify="true"] svg .priority-progress-bg,
+.graph-container[data-simplify="true"] svg .priority-progress-fill,
+.graph-container[data-simplify="true"] svg .arrow,
+.graph-container[data-simplify="true"] svg .edge-label,
+.graph-container[data-simplify="true"] svg .edge-label-bg,
+.graph-container[data-simplify="true"] svg .edge-label-icon {
+  display: none !important;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .graph-container svg .edge-flowing-forward,
   .graph-container svg .edge-flowing-reverse {

tests/diagnostics/large-graph-profile.spec.ts

@@ -37,7 +37,9 @@ async function rafFps(page: Page, ms: number): Promise<number> {
 }
 
 test.describe('large-graph baseline profile @geometry', () => {
-  test.describe.configure({ timeout: 180_000 });
+  // Serial: two browsers rendering a 1000-node graph at once thrash the CPU and
+  // make the FPS numbers meaningless. One at a time.
+  test.describe.configure({ timeout: 180_000, mode: 'serial' });
 
   for (const quality of ['HIGH', 'LOW']) {
     test(`compute-core profile @${quality}`, async ({ page }) => {
@@ -50,6 +52,11 @@ test.describe('large-graph baseline profile @geometry', () => {
       const renderedNodes = await page.locator('.graph-container svg .node').count();
       const renderedEdges = await page.locator('.graph-container svg .edge').count();
       const dataDense = await page.evaluate(() => document.querySelector('.graph-container')?.getAttribute('data-dense') ?? null);
+      const dataSimplify = await page.evaluate(() => document.querySelector('.graph-container')?.getAttribute('data-simplify') ?? null);
+      const paintedDetail = await page.evaluate(() => {
+        const sel = '.graph-container svg .node-title-bar, .graph-container svg .status-progress-bg, .graph-container svg .priority-progress-bg, .graph-container svg .node-type-text';
+        return Array.from(document.querySelectorAll(sel)).filter((e) => getComputedStyle(e).display !== 'none').length;
+      });
 
       // DOM weight: total SVG elements, per-node element count, CSS filter usage.
       const dom = await page.evaluate(() => {
@@ -131,10 +138,10 @@ test.describe('large-graph baseline profile @geometry', () => {
       const zinFrames = await page.evaluate(() => { cancelAnimationFrame((window as any).__rafId); return (window as any).__fc || 0; });
       const zoomedInDragFps = Math.round((zinFrames / ((Date.now() - zt2) / 1000)) * 10) / 10;
 
-      const result = { graph: COMPUTE_GRAPH_ID, quality, dataDense, renderedNodes, renderedEdges, idleFps, dragFps, zoomFps, zoomedInDragFps, culledHidden, dom };
+      const result = { graph: COMPUTE_GRAPH_ID, quality, dataDense, dataSimplify, paintedDetail, renderedNodes, renderedEdges, idleFps, dragFps, zoomFps, zoomedInDragFps, culledHidden, dom };
       fs.writeFileSync(path.join(OUT, `compute-${quality}.json`), JSON.stringify(result, null, 2));
       // eslint-disable-next-line no-console
-      console.log(`[profile] ${quality}: dense=${dataDense} nodes=${renderedNodes} edges=${renderedEdges} idleFps=${idleFps} dragFps=${dragFps} zoomFps=${zoomFps} zoomInDragFps=${zoomedInDragFps} culledHidden=${culledHidden} perNodeEls=${dom.perNodeEls} totalSvgEls=${dom.totalSvgEls}`);
+      console.log(`[profile] ${quality}: dense=${dataDense} simplify=${dataSimplify} paintedDetail=${paintedDetail} nodes=${renderedNodes} edges=${renderedEdges} idleFps=${idleFps} dragFps=${dragFps} zoomFps=${zoomFps} zoomInDragFps=${zoomedInDragFps} culledHidden=${culledHidden} totalSvgEls=${dom.totalSvgEls}`);
       expect(renderedNodes, 'compute core renders nodes').toBeGreaterThan(0);
     });
   }