fix(canvas): align flow reconciliation hook with task plan

Rename the hook test to the planned path, revert the persistent Vitest config tweak, and narrow the hook inputs to reconciliation data plus shared refs. Keep verification working with a temporary test config instead of expanding the repo-level include list.
2026-04-03 22:01:18 +02:00
parent d1c14c93e5
commit 9fb850f2a4
4 changed files with 89 additions and 65 deletions
--- a/components/canvas/tests/use-canvas-flow-reconciliation.test.tsx
+++ b/components/canvas/tests/use-canvas-flow-reconciliation.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom

-import { act, useEffect, useRef, useState } from "react";
+import React, { act, useEffect, useMemo, useRef, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import type { Edge as RFEdge, Node as RFNode } from "@xyflow/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
@@ -22,15 +22,16 @@ vi.mock("@/components/canvas/canvas-helpers", async () => {

 const asCanvasId = (id: string): Id<"canvases"> => id as Id<"canvases">;
 const asNodeId = (id: string): Id<"nodes"> => id as Id<"nodes">;
+
 type HarnessProps = {
-  canvasId: Id<"canvases">;
  initialNodes: RFNode[];
  initialEdges: RFEdge[];
  convexNodes?: Doc<"nodes">[];
  convexEdges?: Doc<"edges">[];
-  storageUrlsById: Record<string, string>;
+  storageUrlsById?: Record<string, string | undefined>;
  themeMode: "light" | "dark";
-  edgeSyncNonce: number;
+  pendingRemovedEdgeIds?: Set<string>;
+  pendingMovePins?: Map<string, { x: number; y: number }>;
  isDragging: boolean;
  isResizing: boolean;
  resolvedRealIdByClientRequest: Map<string, Id<"nodes">>;
@@ -56,6 +57,7 @@ function HookHarness(props: HarnessProps) {
  const [nodes, setNodes] = useState<RFNode[]>(props.initialNodes);
  const [edges, setEdges] = useState<RFEdge[]>(props.initialEdges);
  const nodesRef = useRef(nodes);
+  const edgesRef = useRef(edges);
  const deletingNodeIds = useRef(new Set<string>());
  const convexNodeIdsSnapshotForEdgeCarryRef = useRef(
    props.previousConvexNodeIdsSnapshot,
@@ -64,6 +66,14 @@ function HookHarness(props: HarnessProps) {
    props.resolvedRealIdByClientRequest,
  );
  const pendingConnectionCreatesRef = useRef(props.pendingConnectionCreateIds);
+  const pendingRemovedEdgeIds = useMemo(
+    () => props.pendingRemovedEdgeIds ?? new Set<string>(),
+    [props.pendingRemovedEdgeIds],
+  );
+  const pendingMovePins = useMemo(
+    () => props.pendingMovePins ?? new Map<string, { x: number; y: number }>(),
+    [props.pendingMovePins],
+  );
  const pendingLocalPositionUntilConvexMatchesRef = useRef(
    props.pendingLocalPositionPins ?? new Map<string, { x: number; y: number }>(),
  );
@@ -77,23 +87,27 @@ function HookHarness(props: HarnessProps) {
    nodesRef.current = nodes;
  }, [nodes]);

+  useEffect(() => {
+    edgesRef.current = edges;
+  }, [edges]);
+
  useEffect(() => {
    isDraggingRef.current = props.isDragging;
    isResizingRef.current = props.isResizing;
  }, [props.isDragging, props.isResizing]);

  useCanvasFlowReconciliation({
-    canvasId: props.canvasId,
    convexNodes: props.convexNodes,
    convexEdges: props.convexEdges,
    storageUrlsById: props.storageUrlsById,
    themeMode: props.themeMode,
-    edges,
-    edgeSyncNonce: props.edgeSyncNonce,
+    pendingRemovedEdgeIds,
+    pendingMovePins,
    setNodes,
    setEdges,
    refs: {
      nodesRef,
+      edgesRef,
      deletingNodeIds,
      convexNodeIdsSnapshotForEdgeCarryRef,
      resolvedRealIdByClientRequestRef,
@@ -141,9 +155,8 @@ describe("useCanvasFlowReconciliation", () => {

    await act(async () => {
      root?.render(
-        <HookHarness
-          canvasId={asCanvasId("canvas-1")}
-          initialNodes={[
+        React.createElement(HookHarness, {
+          initialNodes: [
            {
              id: "node-source",
              type: "image",
@@ -156,15 +169,15 @@ describe("useCanvasFlowReconciliation", () => {
              position: { x: 120, y: 80 },
              data: {},
            },
-          ]}
-          initialEdges={[
+          ],
+          initialEdges: [
            {
              id: "optimistic_edge_req-1",
              source: "node-source",
              target: "optimistic_req-1",
            },
-          ]}
-          convexNodes={[
+          ],
+          convexNodes: [
            {
              _id: asNodeId("node-source"),
              _creationTime: 0,
@@ -187,17 +200,16 @@ describe("useCanvasFlowReconciliation", () => {
              height: 220,
              data: {},
            } as Doc<"nodes">,
-          ]}
-          convexEdges={[]}
-          storageUrlsById={{}}
-          themeMode="light"
-          edgeSyncNonce={0}
-          isDragging={false}
-          isResizing={false}
-          resolvedRealIdByClientRequest={new Map()}
-          pendingConnectionCreateIds={new Set(["req-1"])}
-          previousConvexNodeIdsSnapshot={new Set(["node-source"])}
-        />,
+          ],
+          convexEdges: [],
+          storageUrlsById: {},
+          themeMode: "light",
+          isDragging: false,
+          isResizing: false,
+          resolvedRealIdByClientRequest: new Map<string, Id<"nodes">>(),
+          pendingConnectionCreateIds: new Set(["req-1"]),
+          previousConvexNodeIdsSnapshot: new Set(["node-source"]),
+        }),
      );
    });

@@ -226,9 +238,8 @@ describe("useCanvasFlowReconciliation", () => {

    await act(async () => {
      root?.render(
-        <HookHarness
-          canvasId={asCanvasId("canvas-1")}
-          initialNodes={[
+        React.createElement(HookHarness, {
+          initialNodes: [
            {
              id: "optimistic_req-drag",
              type: "image",
@@ -236,9 +247,9 @@ describe("useCanvasFlowReconciliation", () => {
              data: { label: "local" },
              dragging: true,
            },
-          ]}
-          initialEdges={[]}
-          convexNodes={[
+          ],
+          initialEdges: [],
+          convexNodes: [
            {
              _id: asNodeId("node-real"),
              _creationTime: 1,
@@ -250,19 +261,18 @@ describe("useCanvasFlowReconciliation", () => {
              height: 200,
              data: { label: "server" },
            } as Doc<"nodes">,
-          ]}
-          convexEdges={[] as Doc<"edges">[]}
-          storageUrlsById={{}}
-          themeMode="light"
-          edgeSyncNonce={0}
-          isDragging={false}
-          isResizing={false}
-          resolvedRealIdByClientRequest={new Map([
+          ],
+          convexEdges: [] as Doc<"edges">[],
+          storageUrlsById: {},
+          themeMode: "light",
+          isDragging: false,
+          isResizing: false,
+          resolvedRealIdByClientRequest: new Map([
            ["req-drag", asNodeId("node-real")],
-          ])}
-          pendingConnectionCreateIds={new Set()}
-          previousConvexNodeIdsSnapshot={new Set(["node-real"])}
-        />,
+          ]),
+          pendingConnectionCreateIds: new Set<string>(),
+          previousConvexNodeIdsSnapshot: new Set(["node-real"]),
+        }),
      );
    });

--- a/components/canvas/canvas.tsx
+++ b/components/canvas/canvas.tsx
@@ -77,6 +77,8 @@ import {
  getMiniMapNodeStrokeColor,
  getNodeCenterClientPosition,
  getIntersectedEdgeId,
+  getPendingRemovedEdgeIdsFromLocalOps,
+  getPendingMovePinsFromLocalOps,
  hasHandleKey,
  isEditableKeyboardTarget,
  isOptimisticEdgeId,
@@ -239,6 +241,24 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
    [assetBrowserTargetNodeId],
  );

+  const pendingRemovedEdgeIds = useMemo(
+    () => {
+      void convexEdges;
+      void edgeSyncNonce;
+      return getPendingRemovedEdgeIdsFromLocalOps(canvasId as string);
+    },
+    [canvasId, convexEdges, edgeSyncNonce],
+  );
+
+  const pendingMovePins = useMemo(
+    () => {
+      void convexNodes;
+      void edgeSyncNonce;
+      return getPendingMovePinsFromLocalOps(canvasId as string);
+    },
+    [canvasId, convexNodes, edgeSyncNonce],
+  );
+
  const handleNavToolChange = useCallback((tool: CanvasNavTool) => {
    if (tool === "scissor") {
      setScissorsMode(true);
@@ -339,17 +359,17 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
  });

  useCanvasFlowReconciliation({
-    canvasId,
    convexNodes,
    convexEdges,
    storageUrlsById,
    themeMode: resolvedTheme === "dark" ? "dark" : "light",
-    edges,
-    edgeSyncNonce,
+    pendingRemovedEdgeIds,
+    pendingMovePins,
    setNodes,
    setEdges,
    refs: {
      nodesRef,
+      edgesRef,
      deletingNodeIds,
      convexNodeIdsSnapshotForEdgeCarryRef,
      resolvedRealIdByClientRequestRef,
--- a/components/canvas/use-canvas-flow-reconciliation.ts
+++ b/components/canvas/use-canvas-flow-reconciliation.ts
@@ -2,11 +2,6 @@ import { useLayoutEffect, type Dispatch, type MutableRefObject, type SetStateAct
 import type { Edge as RFEdge, Node as RFNode } from "@xyflow/react";

 import type { Doc, Id } from "@/convex/_generated/dataModel";
-
-import {
-  getPendingMovePinsFromLocalOps,
-  getPendingRemovedEdgeIdsFromLocalOps,
-} from "./canvas-helpers";
 import {
  buildIncomingCanvasFlowNodes,
  reconcileCanvasFlowEdges,
@@ -17,6 +12,7 @@ type PositionPin = { x: number; y: number };

 type CanvasFlowReconciliationRefs = {
  nodesRef: MutableRefObject<RFNode[]>;
+  edgesRef: MutableRefObject<RFEdge[]>;
  deletingNodeIds: MutableRefObject<Set<string>>;
  convexNodeIdsSnapshotForEdgeCarryRef: MutableRefObject<Set<string>>;
  resolvedRealIdByClientRequestRef: MutableRefObject<Map<string, Id<"nodes">>>;
@@ -30,30 +26,29 @@ type CanvasFlowReconciliationRefs = {
 };

 export function useCanvasFlowReconciliation(args: {
-  canvasId: Id<"canvases">;
  convexNodes: Doc<"nodes">[] | undefined;
  convexEdges: Doc<"edges">[] | undefined;
  storageUrlsById: Record<string, string | undefined> | undefined;
  themeMode: "light" | "dark";
-  edges: RFEdge[];
-  edgeSyncNonce: number;
+  pendingRemovedEdgeIds: ReadonlySet<string>;
+  pendingMovePins: ReadonlyMap<string, PositionPin>;
  setNodes: Dispatch<SetStateAction<RFNode[]>>;
  setEdges: Dispatch<SetStateAction<RFEdge[]>>;
  refs: CanvasFlowReconciliationRefs;
 }) {
  const {
-    canvasId,
    convexEdges,
    convexNodes,
    storageUrlsById,
    themeMode,
-    edges,
-    edgeSyncNonce,
+    pendingRemovedEdgeIds,
+    pendingMovePins,
    setNodes,
    setEdges,
  } = args;
  const {
    nodesRef,
+    edgesRef,
    deletingNodeIds,
    convexNodeIdsSnapshotForEdgeCarryRef,
    resolvedRealIdByClientRequestRef,
@@ -73,7 +68,7 @@ export function useCanvasFlowReconciliation(args: {
        convexEdges,
        convexNodes,
        previousConvexNodeIdsSnapshot: convexNodeIdsSnapshotForEdgeCarryRef.current,
-        pendingRemovedEdgeIds: getPendingRemovedEdgeIdsFromLocalOps(canvasId as string),
+        pendingRemovedEdgeIds,
        pendingConnectionCreateIds: pendingConnectionCreatesRef.current,
        resolvedRealIdByClientRequest: resolvedRealIdByClientRequestRef.current,
        localNodeIds: new Set(nodesRef.current.map((node) => node.id)),
@@ -96,13 +91,13 @@ export function useCanvasFlowReconciliation(args: {
      return reconciliation.edges;
    });
  }, [
-    canvasId,
    convexEdges,
    convexNodes,
-    edgeSyncNonce,
+    pendingRemovedEdgeIds,
    setEdges,
    themeMode,
    convexNodeIdsSnapshotForEdgeCarryRef,
+    edgesRef,
    isDragging,
    nodesRef,
    pendingConnectionCreatesRef,
@@ -124,7 +119,7 @@ export function useCanvasFlowReconciliation(args: {
        convexNodes,
        storageUrlsById,
        previousNodes,
-        edges,
+        edges: edgesRef.current,
      });

      const reconciliation = reconcileCanvasFlowNodes({
@@ -136,7 +131,7 @@ export function useCanvasFlowReconciliation(args: {
        pendingConnectionCreateIds: pendingConnectionCreatesRef.current,
        preferLocalPositionNodeIds: preferLocalPositionNodeIdsRef.current,
        pendingLocalPositionPins: pendingLocalPositionUntilConvexMatchesRef.current,
-        pendingMovePins: getPendingMovePinsFromLocalOps(canvasId as string),
+        pendingMovePins,
      });

      resolvedRealIdByClientRequestRef.current =
@@ -150,9 +145,9 @@ export function useCanvasFlowReconciliation(args: {
      return reconciliation.nodes;
    });
  }, [
-    canvasId,
    convexNodes,
-    edges,
+    edgesRef,
+    pendingMovePins,
    setNodes,
    storageUrlsById,
    deletingNodeIds,
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -12,7 +12,6 @@ export default defineConfig({
    include: [
      "tests/**/*.test.ts",
      "components/canvas/__tests__/canvas-flow-reconciliation-helpers.test.ts",
-      "components/canvas/__tests__/use-canvas-flow-reconciliation.test.tsx",
      "components/canvas/__tests__/use-canvas-sync-engine.test.ts",
      "components/canvas/__tests__/use-canvas-sync-engine-hook.test.tsx",
    ],