Implement Node Manager

Author: camielvs

src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx

@@ -144,6 +144,34 @@ const FlowCanvas = ({
 
   const latestFlowPosRef = useRef<{ x: number; y: number } | null>(null);
 
+  /* Migrate Node Ids */
+  const [migrationCompleted, setMigrationCompleted] = useState(false);
+
+  useEffect(() => {
+    if (!initialCanvasLoaded.current || migrationCompleted) return;
+
+    const needsMigration = nodes.some(
+      (node) =>
+        !nodeManager.isManaged(node.id) &&
+        (node.id.startsWith("task_") ||
+          node.id.startsWith("input_") ||
+          node.id.startsWith("output_")),
+    );
+
+    if (needsMigration) {
+      console.log("Migrating legacy node IDs to stable IDs...");
+      const { updatedNodes, migrationMap } =
+        nodeManager.migrateExistingNodes(nodes);
+
+      setNodes(updatedNodes);
+      setMigrationCompleted(true);
+
+      console.log("Migration completed:", migrationMap);
+    } else {
+      setMigrationCompleted(true);
+    }
+  }, [nodes, nodeManager, migrationCompleted]);
+
   const [showToolbar, setShowToolbar] = useState(false);
   const [replaceTarget, setReplaceTarget] = useState<Node | null>(null);
   const [shiftKeyPressed, setShiftKeyPressed] = useState(false);

src/components/shared/ReactFlow/FlowCanvas/utils/duplicateNodes.ts

@@ -60,7 +60,6 @@ export const duplicateNodes = (
   const graphSpec = componentSpec.implementation.graph;
 
   const nodeIdMap: Record<string, string> = {};
-
   const newTasks: Record<string, TaskSpec> = {};
   const newInputs: Record<string, InputSpec> = {};
   const newOutputs: Record<string, OutputSpec> = {};

src/nodeManager.test.ts

@@ -0,0 +1,72 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { NodeManager } from "./nodeManager";
+
+describe("NodeManager", () => {
+  let nodeManager: NodeManager;
+
+  beforeEach(() => {
+    nodeManager = new NodeManager();
+  });
+
+  describe("stable node ID generation", () => {
+    it("should generate consistent node IDs for the same task", () => {
+      const nodeId1 = nodeManager.getNodeId("test-task", "task");
+      const nodeId2 = nodeManager.getNodeId("test-task", "task");
+
+      expect(nodeId1).toBe(nodeId2);
+      expect(nodeId1).toMatch(/^task_/);
+    });
+
+    it("should generate different IDs for different tasks", () => {
+      const nodeId1 = nodeManager.getNodeId("task-1", "task");
+      const nodeId2 = nodeManager.getNodeId("task-2", "task");
+
+      expect(nodeId1).not.toBe(nodeId2);
+    });
+  });
+
+  describe("task ID updates", () => {
+    it("should update task ID while preserving node ID", () => {
+      const originalNodeId = nodeManager.getNodeId("old-task", "task");
+      nodeManager.updateTaskId("old-task", "new-task");
+
+      const newNodeId = nodeManager.getNodeId("new-task", "task");
+      expect(newNodeId).toBe(originalNodeId);
+
+      const taskId = nodeManager.getTaskId(originalNodeId);
+      expect(taskId).toBe("new-task");
+    });
+  });
+
+  describe("migration", () => {
+    it("should migrate legacy nodes to stable IDs", () => {
+      const legacyNodes = [
+        {
+          id: "task_legacy-task",
+          type: "task",
+          data: {},
+          position: { x: 0, y: 0 },
+        },
+        {
+          id: "input_legacy-input",
+          type: "input",
+          data: {},
+          position: { x: 0, y: 0 },
+        },
+      ];
+
+      const { updatedNodes, migrationMap } =
+        nodeManager.migrateExistingNodes(legacyNodes);
+
+      expect(updatedNodes).toHaveLength(2);
+      expect(updatedNodes[0].id).toMatch(/^task_/);
+      expect(updatedNodes[1].id).toMatch(/^input_/);
+      expect(updatedNodes[0].id).not.toBe("task_legacy-task");
+      expect(updatedNodes[1].id).not.toBe("input_legacy-input");
+
+      expect(migrationMap["task_legacy-task"]).toBe(updatedNodes[0].id);
+      expect(migrationMap["input_legacy-input"]).toBe(updatedNodes[1].id);
+    });
+  });
+});

src/nodeManager.ts

@@ -1,3 +1,4 @@
+import { type Node } from "@xyflow/react";
 import { nanoid } from "nanoid";
 
 import {
@@ -98,4 +99,66 @@ export class NodeManager {
   getAllMappings(): NodeMapping[] {
     return Array.from(this.mappings.values());
   }
+
+  // Migration method for existing nodes
+  migrateExistingNodes(nodes: Node[]): {
+    updatedNodes: Node[];
+    migrationMap: Record<string, string>;
+  } {
+    const updatedNodes: Node[] = [];
+    const migrationMap: Record<string, string> = {};
+
+    for (const node of nodes) {
+      const oldNodeId = node.id;
+      let taskId: string;
+      let nodeType: NodeType;
+
+      // Extract task ID and node type from legacy node ID
+      if (oldNodeId.startsWith("task_")) {
+        taskId = oldNodeId.replace(/^task_/, "");
+        nodeType = "task";
+      } else if (oldNodeId.startsWith("input_")) {
+        taskId = oldNodeId.replace(/^input_/, "");
+        nodeType = "input";
+      } else if (oldNodeId.startsWith("output_")) {
+        taskId = oldNodeId.replace(/^output_/, "");
+        nodeType = "output";
+      } else {
+        // Already migrated or unknown format
+        updatedNodes.push(node);
+        continue;
+      }
+
+      // Get or create stable node ID
+      const stableNodeId = this.getNodeId(taskId, nodeType);
+      migrationMap[oldNodeId] = stableNodeId;
+
+      // Update node with stable ID
+      updatedNodes.push({
+        ...node,
+        id: stableNodeId,
+      });
+    }
+
+    return { updatedNodes, migrationMap };
+  }
+
+  // Batch update for task renames
+  batchUpdateTaskIds(
+    updates: Array<{ oldTaskId: string; newTaskId: string }>,
+  ): void {
+    for (const { oldTaskId, newTaskId } of updates) {
+      this.updateTaskId(oldTaskId, newTaskId);
+    }
+  }
+
+  // Check if a node ID is managed by this NodeManager
+  isManaged(nodeId: string): boolean {
+    return this.mappings.has(nodeId);
+  }
+
+  // Get node type from node ID
+  getNodeType(nodeId: string): NodeType | undefined {
+    return this.mappings.get(nodeId)?.nodeType;
+  }
 }

src/utils/nodes/createInputNode.ts

@@ -4,17 +4,15 @@ import type { IONodeData, NodeData } from "@/types/nodes";
 
 import type { InputSpec } from "../componentSpec";
 import { extractPositionFromAnnotations } from "./extractPositionFromAnnotations";
-import { inputNameToNodeId } from "./nodeIdUtils";
 
 export const createInputNode = (input: InputSpec, nodeData: NodeData) => {
   const { name, annotations } = input;
   const { nodeManager, readOnly } = nodeData;
 
-  const newNodeId = nodeManager?.getNodeId(name, "input");
-  console.log("Creating input node:", { name, nodeId: newNodeId });
+  const nodeId = nodeManager?.getNodeId(name, "input");
+  console.log("Creating input node:", { name, nodeId });
 
   const position = extractPositionFromAnnotations(annotations);
-  const nodeId = inputNameToNodeId(name);
 
   const inputNodeData: IONodeData = {
     spec: input,

src/utils/nodes/createOutputNode.ts

@@ -4,17 +4,15 @@ import type { IONodeData, NodeData } from "@/types/nodes";
 
 import type { OutputSpec } from "../componentSpec";
 import { extractPositionFromAnnotations } from "./extractPositionFromAnnotations";
-import { outputNameToNodeId } from "./nodeIdUtils";
 
 export const createOutputNode = (output: OutputSpec, nodeData: NodeData) => {
   const { name, annotations } = output;
   const { nodeManager, readOnly } = nodeData;
 
-  const newNodeId = nodeManager?.getNodeId(name, "output");
-  console.log("Creating output node:", { name, nodeId: newNodeId });
+  const nodeId = nodeManager?.getNodeId(name, "output");
+  console.log("Creating output node:", { name, nodeId });
 
   const position = extractPositionFromAnnotations(annotations);
-  const nodeId = outputNameToNodeId(name);
 
   const outputNodeData: IONodeData = {
     spec: output,

src/utils/nodes/createTaskNode.ts

@@ -4,7 +4,6 @@ import type { NodeData, TaskNodeData } from "@/types/nodes";
 
 import type { TaskSpec } from "../componentSpec";
 import { extractPositionFromAnnotations } from "./extractPositionFromAnnotations";
-import { taskIdToNodeId } from "./nodeIdUtils";
 import { convertNodeCallbacksToTaskCallbacks } from "./taskCallbackUtils";
 
 export const createTaskNode = (
@@ -14,11 +13,10 @@ export const createTaskNode = (
   const [taskId, taskSpec] = task;
   const { nodeManager, callbacks, connectable, ...data } = nodeData;
 
-  const newNodeId = nodeManager?.getNodeId(taskId, "task");
-  console.log("Creating task node:", { taskId, nodeId: newNodeId });
+  const nodeId = nodeManager.getNodeId(taskId, "task");
+  console.log("Creating task node:", { taskId, nodeId });
 
   const position = extractPositionFromAnnotations(taskSpec.annotations);
-  const nodeId = taskIdToNodeId(taskId);
 
   const ids = { taskId, nodeId };
   const taskCallbacks = convertNodeCallbacksToTaskCallbacks(ids, callbacks);

src/utils/nodes/nodeIdUtils.ts

@@ -1,34 +1,43 @@
-/**
- * Utility functions for converting between node IDs and their corresponding names/identifiers
- */
+import type { NodeManager, NodeType } from "@/nodeManager";
 
-/**
- * Extracts the task ID from a task node ID by removing the "task_" prefix
- */
-export const nodeIdToTaskId = (id: string) => id.replace(/^task_/, "");
+// DEPRECATED: Legacy functions - use NodeManager instead
+export const taskIdToNodeId = (taskId: string): string => `task_${taskId}`; // Legacy
+export const inputNameToNodeId = (inputName: string): string =>
+  `input_${inputName}`; // Legacy
+export const outputNameToNodeId = (outputName: string): string =>
+  `output_${outputName}`; // Legacy
 
-/**
- * Extracts the input name from an input node ID by removing the "input_" prefix
- */
-export const nodeIdToInputName = (id: string) => id.replace(/^input_/, "");
+// RENAMED: For backwards compatibility and clarity
+export const inputNameToInputId = (inputName: string): string => inputName; // 1:1 mapping
+export const outputNameToOutputId = (outputName: string): string => outputName; // 1:1 mapping
+export const inputIdToInputName = (inputId: string): string => inputId; // 1:1 mapping
+export const outputIdToOutputName = (outputId: string): string => outputId; // 1:1 mapping
 
-/**
- * Extracts the output name from an output node ID by removing the "output_" prefix
- */
-export const nodeIdToOutputName = (id: string) => id.replace(/^output_/, "");
+// LEGACY: Keep for backwards compatibility
+export const nodeIdToTaskId = (nodeId: string): string => {
+  return nodeId.replace(/^task_/, "");
+};
 
-/**
- * Creates a task node ID by adding the "task_" prefix to a task ID
- */
-export const taskIdToNodeId = (taskId: string) => `task_${taskId}`;
+export const nodeIdToInputName = (nodeId: string): string => {
+  return nodeId.replace(/^input_/, "");
+};
 
-/**
- * Creates an input node ID by adding the "input_" prefix to an input name
- */
-export const inputNameToNodeId = (inputName: string) => `input_${inputName}`;
+export const nodeIdToOutputName = (nodeId: string): string => {
+  return nodeId.replace(/^output_/, "");
+};
 
-/**
- * Creates an output node ID by adding the "output_" prefix to an output name
- */
-export const outputNameToNodeId = (outputName: string) =>
-  `output_${outputName}`;
+// NEW: NodeManager-aware functions
+export const getTaskIdFromNodeId = (
+  nodeId: string,
+  nodeManager: NodeManager,
+): string | undefined => {
+  return nodeManager.getTaskId(nodeId);
+};
+
+export const getStableNodeId = (
+  taskId: string,
+  nodeType: NodeType,
+  nodeManager: NodeManager,
+): string => {
+  return nodeManager.getNodeId(taskId, nodeType);
+};