perf(library): keep route previews within frame budget

Author: FelixTJDietrich

library/lib/utils/geometry/edgeGeometrySubscriptions.ts

@@ -47,6 +47,52 @@ const registryRouteBounds = (route: IPoint[]): GeometryRect => {
   return result
 }
 
+type DisplayedRouteChange = {
+  id: string
+  before: IPoint[] | undefined
+  after: IPoint[] | undefined
+}
+
+// Every rendered edge owns a selector, but all selectors observe the same
+// geometry-store transition. Cache that transition's changed display routes
+// once so a preview write costs O(route count + subscribers * changed routes),
+// rather than making every edge diff the complete route registry independently.
+const displayedRouteChangesCache = new WeakMap<
+  Readonly<Record<string, IPoint[]>>,
+  WeakMap<
+    Readonly<Record<string, IPoint[]>>,
+    WeakMap<Readonly<Record<string, IPoint[]>>, DisplayedRouteChange[]>
+  >
+>()
+
+const displayedRouteChanges = (
+  geometryById: Readonly<Record<string, IPoint[]>>,
+  previousPreview: Readonly<Record<string, IPoint[]>>,
+  nextPreview: Readonly<Record<string, IPoint[]>>
+): DisplayedRouteChange[] => {
+  let byPrevious = displayedRouteChangesCache.get(geometryById)
+  if (!byPrevious) {
+    byPrevious = new WeakMap()
+    displayedRouteChangesCache.set(geometryById, byPrevious)
+  }
+  let byNext = byPrevious.get(previousPreview)
+  if (!byNext) {
+    byNext = new WeakMap()
+    byPrevious.set(previousPreview, byNext)
+  }
+  const cached = byNext.get(nextPreview)
+  if (cached) return cached
+
+  const changes: DisplayedRouteChange[] = []
+  for (const [id, exact] of Object.entries(geometryById)) {
+    const before = previousPreview[id] ?? exact
+    const after = nextPreview[id] ?? exact
+    if (before !== after) changes.push({ id, before, after })
+  }
+  byNext.set(nextPreview, changes)
+  return changes
+}
+
 /**
  * Broad-phase route selection. It deliberately permits boundary-touching false
  * positives; downstream jump/label geometry retains its exact intersection
@@ -133,6 +179,22 @@ export const createDisplayedRouteEntriesSelector = (
   return (geometryById, previewById) => {
     if (geometryById === previousGeometry && previewById === previousPreview)
       return previousSelection
+    if (geometryById === previousGeometry && previousPreview) {
+      const relevantRouteChanged = displayedRouteChanges(
+        geometryById,
+        previousPreview,
+        previewById
+      ).some(
+        ({ id, before, after }) =>
+          id !== excludeId &&
+          ((before && mayIntersect(query, registryRouteBounds(before))) ||
+            (after && mayIntersect(query, registryRouteBounds(after))))
+      )
+      if (!relevantRouteChanged) {
+        previousPreview = previewById
+        return previousSelection
+      }
+    }
     previousGeometry = geometryById
     previousPreview = previewById
     previousSelection = selectDisplayedRouteEntriesIntersectingRect(

library/tests/unit/edgeGeometrySubscriptions.test.ts

@@ -112,6 +112,24 @@ describe("selectRouteEntriesIntersectingRect", () => {
 
     expect(before).toEqual(["near", near])
     expect(shallow(before, after)).toBe(true)
+    expect(after).toBe(before)
+  })
+
+  it("recomputes a displayed-route selection when a preview enters or leaves the query", () => {
+    const far = [p(500, 0), p(500, 100)]
+    const entering = [p(80, 0), p(80, 100)]
+    const exact = { route: far }
+    const select = createDisplayedRouteEntriesSelector(query)
+
+    const outside = select(exact, { route: far })
+    const inside = select(exact, { route: entering })
+    const left = select(exact, { route: [p(510, 0), p(510, 100)] })
+
+    expect(outside).toEqual([])
+    expect(inside).toEqual(["route", entering])
+    expect(left).toEqual([])
+    expect(inside).not.toBe(outside)
+    expect(left).not.toBe(inside)
   })
 
   it("changes when a route enters, changes within, or leaves the query", () => {

standalone/webapp/playwright.config.ts

@@ -131,6 +131,10 @@ export default defineConfig({
             use: {
               ...devices["Desktop Firefox"],
               viewport: { width: 1280, height: 720 },
+              // Trace screenshots run after every Playwright action and compete
+              // with the rAF probe for paint time. A performance project must
+              // measure the application, not continuous diagnostic capture.
+              trace: "off",
             },
           },
         ]
@@ -152,6 +156,9 @@ export default defineConfig({
       use: {
         ...devices["Desktop Chrome"],
         viewport: { width: 1280, height: 720 },
+        // Keep the timing probe isolated from per-action trace screenshots.
+        // Failure screenshots and the HTML report remain available globally.
+        trace: "off",
       },
     },
   ],

standalone/webapp/tests/perf/edge-routing.spec.ts

@@ -64,6 +64,48 @@ const renderedEdgePaths = async (
       ) as Record<string, string>
   )
 
+/**
+ * Pick nodes whose centres are real pointer targets, ordered from the viewport
+ * centre outwards. The standalone header and palette overlay the canvas; using
+ * fixture indices assumes those controls do not exist and can leave Playwright
+ * sending a measured drag to a negative or obscured viewport coordinate.
+ */
+const unobscuredNodesNearestViewportCenter = async (
+  editor: Locator,
+  count: number
+): Promise<string[]> =>
+  editor
+    .locator('.react-flow__node[data-id^="perf-node-"]')
+    .evaluateAll((elements, desiredCount) => {
+      const viewportCenter = {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2,
+      }
+      return elements
+        .flatMap((element) => {
+          const id = element.getAttribute("data-id")
+          const rect = element.getBoundingClientRect()
+          const center = {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+          }
+          const pointerTarget = document.elementFromPoint(center.x, center.y)
+          if (!id || !pointerTarget || !element.contains(pointerTarget))
+            return []
+          return [
+            {
+              id,
+              distance:
+                (center.x - viewportCenter.x) ** 2 +
+                (center.y - viewportCenter.y) ** 2,
+            },
+          ]
+        })
+        .sort((a, b) => a.distance - b.distance)
+        .slice(0, desiredCount)
+        .map(({ id }) => id)
+    }, count)
+
 const hasMultipleDirectionChanges = (path: string): boolean => {
   const commands = [
     ...path.matchAll(/([ML])\s*(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)/g),
@@ -511,11 +553,15 @@ test("large-diagram interaction sustains a 30 fps p95 frame budget", async ({
   await openLocalWithPerf(page, fixture)
   const editor = page.locator(`#react-flow-library-${String(fixture.id)}`)
   const frameDeltas: number[] = []
+  const nodeIds = await unobscuredNodesNearestViewportCenter(editor, 4)
 
-  for (let index = 0; index < 4; index++) {
-    const node = editor.locator(
-      `.react-flow__node[data-id="perf-node-${String(index).padStart(2, "0")}"]`
-    )
+  expect(
+    nodeIds,
+    "performance fixture must expose four unobscured nodes"
+  ).toHaveLength(4)
+
+  for (const [index, nodeId] of nodeIds.entries()) {
+    const node = editor.locator(`.react-flow__node[data-id="${nodeId}"]`)
     frameDeltas.push(
       ...(await dragNodeBy(node, page, index % 2 === 0 ? 40 : -40, 30, {
         steps: 12,