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

@@ -64,7 +64,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/utils/nodes/createInputNode.ts

@@ -3,19 +3,16 @@ import { type Node } from "@xyflow/react";
 import type { IONodeData, NodeData } from "@/types/nodes";
 
 import type { InputSpec } from "../componentSpec";
-import { inputIdToNodeId, inputNameToInputId } from "./conversions";
 import { extractPositionFromAnnotations } from "./extractPositionFromAnnotations";
 
 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 inputId = inputNameToInputId(name);
-  const nodeId = inputIdToNodeId(inputId);
 
   const inputNodeData: IONodeData = {
     spec: input,

src/utils/nodes/createOutputNode.ts

@@ -3,19 +3,16 @@ import { type Node } from "@xyflow/react";
 import type { IONodeData, NodeData } from "@/types/nodes";
 
 import type { OutputSpec } from "../componentSpec";
-import { outputIdToNodeId, outputNameToOutputId } from "./conversions";
 import { extractPositionFromAnnotations } from "./extractPositionFromAnnotations";
 
 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 outputId = outputNameToOutputId(name);
-  const nodeId = outputIdToNodeId(outputId);
 
   const outputNodeData: IONodeData = {
     spec: output,

src/utils/nodes/createTaskNode.ts

@@ -3,7 +3,6 @@ import { type Node } from "@xyflow/react";
 import type { NodeData, TaskNodeData } from "@/types/nodes";
 
 import type { TaskSpec } from "../componentSpec";
-import { taskIdToNodeId } from "./conversions";
 import { extractPositionFromAnnotations } from "./extractPositionFromAnnotations";
 import { convertNodeCallbacksToTaskCallbacks } from "./taskCallbackUtils";
 
@@ -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

@@ -0,0 +1,43 @@
+import type { NodeManager, NodeType } from "@/nodeManager";
+
+// 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
+
+// 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
+
+// LEGACY: Keep for backwards compatibility
+export const nodeIdToTaskId = (nodeId: string): string => {
+  return nodeId.replace(/^task_/, "");
+};
+
+export const nodeIdToInputName = (nodeId: string): string => {
+  return nodeId.replace(/^input_/, "");
+};
+
+export const nodeIdToOutputName = (nodeId: string): string => {
+  return nodeId.replace(/^output_/, "");
+};
+
+// 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);
+};