perf: cap the viewport culling margin in graph units

The culling margin was a fraction of the viewport, which is screen-space,
so dividing it by the zoom made it cover more and more of the graph as the
user zoomed out. At minimum zoom it more than doubled the queried area and
mounted far more nodes than a pan could ever reach before the next
recompute - 2012 of 3003 nodes on a large graph.

Cap it at roughly five node widths, which is ample lead time at any zoom.
Working zoom is unaffected: the cap only binds once the ratio exceeds it,
which happens below roughly 0.35 zoom.

Panning a 3000-node graph at minimum zoom:

  141.2ms -> 78.7ms median frame, 2012 -> 910 nodes mounted

This does not help when the whole graph is already on screen; no margin
change can cull nodes that are genuinely in view.

Author: benjcooley

src/composables/graph/useViewportCulling.test.ts

@@ -73,6 +73,14 @@ describe('getCullingBounds', () => {
     })
   })
 
+  it('caps the margin in graph units when zoomed out', () => {
+    // At z=0.05 the ratio alone would add 10000 units of margin per edge.
+    const bounds = getCullingBounds({ x: 0, y: 0, z: 0.05 }, VIEWPORT, 0.5)
+
+    expect(bounds.x).toBe(-2000)
+    expect(bounds.width).toBe(VIEWPORT.width / 0.05 + 4000)
+  })
+
   it('accounts for pan offset and zoom', () => {
     // At z=2 the viewport covers half as much graph space.
     expect(getCullingBounds({ x: -100, y: -50, z: 2 }, VIEWPORT, 0)).toEqual({

src/composables/graph/useViewportCulling.ts

@@ -22,6 +22,17 @@ import type { Bounds, NodeId } from '@/renderer/core/layout/types'
 /** Extra coverage beyond each viewport edge, as a fraction of viewport size. */
 const VIEWPORT_MARGIN_RATIO = 0.5
 
+/**
+ * Ceiling on the margin, in graph units.
+ *
+ * The ratio above is screen-relative, so dividing it by the zoom makes the
+ * margin cover more and more of the graph as the user zooms out - at minimum
+ * zoom it more than doubles the queried area, pulling in far more nodes than a
+ * pan could reach before the next recompute. Roughly five node widths is ample
+ * lead time at any zoom.
+ */
+const MAX_MARGIN_GRAPH_UNITS = 2000
+
 /** Grace period before unmounting nodes that left the viewport. */
 const UNMOUNT_DELAY_MS = 250
 
@@ -57,14 +68,20 @@ export function getCullingBounds(
   marginRatio = VIEWPORT_MARGIN_RATIO
 ): Bounds {
   const scale = camera.z || 1
-  const marginX = viewport.width * marginRatio
-  const marginY = viewport.height * marginRatio
+  const marginX = Math.min(
+    (viewport.width * marginRatio) / scale,
+    MAX_MARGIN_GRAPH_UNITS
+  )
+  const marginY = Math.min(
+    (viewport.height * marginRatio) / scale,
+    MAX_MARGIN_GRAPH_UNITS
+  )
 
   return {
-    x: -marginX / scale - camera.x,
-    y: -marginY / scale - camera.y,
-    width: (viewport.width + marginX * 2) / scale,
-    height: (viewport.height + marginY * 2) / scale
+    x: -marginX - camera.x,
+    y: -marginY - camera.y,
+    width: viewport.width / scale + marginX * 2,
+    height: viewport.height / scale + marginY * 2
   }
 }