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/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);
+};