Add Node Manager

Author: camielvs

src/nodeManager.ts

@@ -0,0 +1,101 @@
+import { nanoid } from "nanoid";
+
+import {
+  type ComponentSpec,
+  isGraphImplementation,
+} from "./utils/componentSpec";
+
+export type NodeType = "task" | "input" | "output";
+
+interface NodeMapping {
+  nodeId: string;
+  taskId: string;
+  nodeType: NodeType;
+  createdAt: number;
+}
+
+export class NodeManager {
+  private mappings = new Map<string, NodeMapping>();
+  private taskToNodeMap = new Map<string, string>();
+
+  // Get stable node ID for a task/input/output
+  getNodeId(taskId: string, nodeType: NodeType): string {
+    const existing = this.taskToNodeMap.get(taskId);
+    if (existing) {
+      return existing;
+    }
+
+    // Generate new stable ID
+    const nodeId = `${nodeType}_${nanoid()}`;
+    const mapping: NodeMapping = {
+      nodeId,
+      taskId,
+      nodeType,
+      createdAt: Date.now(),
+    };
+
+    this.mappings.set(nodeId, mapping);
+    this.taskToNodeMap.set(taskId, nodeId);
+
+    return nodeId;
+  }
+
+  // Update task ID when name changes (keeps same node ID)
+  updateTaskId(oldTaskId: string, newTaskId: string): void {
+    const nodeId = this.taskToNodeMap.get(oldTaskId);
+    if (!nodeId) return;
+
+    const mapping = this.mappings.get(nodeId);
+    if (!mapping) return;
+
+    // Update mappings
+    this.taskToNodeMap.delete(oldTaskId);
+    this.taskToNodeMap.set(newTaskId, nodeId);
+
+    mapping.taskId = newTaskId;
+    this.mappings.set(nodeId, mapping);
+  }
+
+  // Remove node when task is deleted
+  removeNode(taskId: string): void {
+    const nodeId = this.taskToNodeMap.get(taskId);
+    if (!nodeId) return;
+
+    this.mappings.delete(nodeId);
+    this.taskToNodeMap.delete(taskId);
+  }
+
+  // Get task ID from node ID
+  getTaskId(nodeId: string): string | undefined {
+    return this.mappings.get(nodeId)?.taskId;
+  }
+
+  // Sync with component spec to handle external changes
+  syncWithComponentSpec(componentSpec: ComponentSpec): void {
+    const currentTasks = new Set<string>();
+
+    // Collect all current task IDs from spec
+    if (isGraphImplementation(componentSpec.implementation)) {
+      Object.keys(componentSpec.implementation.graph.tasks).forEach(
+        (taskId) => {
+          currentTasks.add(taskId);
+        },
+      );
+    }
+
+    componentSpec.inputs?.forEach((input) => currentTasks.add(input.name));
+    componentSpec.outputs?.forEach((output) => currentTasks.add(output.name));
+
+    // Remove mappings for deleted tasks
+    for (const [taskId] of this.taskToNodeMap) {
+      if (!currentTasks.has(taskId)) {
+        this.removeNode(taskId);
+      }
+    }
+  }
+
+  // Get all mappings (for debugging/persistence)
+  getAllMappings(): NodeMapping[] {
+    return Array.from(this.mappings.values());
+  }
+}

src/providers/ComponentSpecProvider.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
 
 import { type UndoRedo, useUndoRedo } from "@/hooks/useUndoRedo";
+import { NodeManager } from "@/nodeManager";
 import { loadPipelineByName } from "@/services/pipelineService";
 import { USER_PIPELINES_LIST_NAME } from "@/utils/constants";
 import { prepareComponentRefForEditor } from "@/utils/prepareComponentRefForEditor";
@@ -44,6 +45,7 @@ interface ComponentSpecContextType {
   taskStatusMap: Map<string, string>;
   setTaskStatusMap: (taskStatusMap: Map<string, string>) => void;
   undoRedo: UndoRedo;
+  nodeManager: NodeManager;
 }
 
 const ComponentSpecContext = createRequiredContext<ComponentSpecContextType>(
@@ -59,6 +61,7 @@ export const ComponentSpecProvider = ({
   readOnly?: boolean;
   children: ReactNode;
 }) => {
+  const [nodeManager] = useState(() => new NodeManager());
   const [componentSpec, setComponentSpec] = useState<ComponentSpec>(
     spec ?? EMPTY_GRAPH_COMPONENT_SPEC,
   );
@@ -142,15 +145,25 @@ export const ComponentSpecProvider = ({
     [componentSpec, readOnly],
   );
 
-  const updateGraphSpec = useCallback((newGraphSpec: GraphSpec) => {
-    setComponentSpec((prevSpec) => ({
-      ...prevSpec,
-      implementation: {
-        ...prevSpec.implementation,
-        graph: newGraphSpec,
-      },
-    }));
-  }, []);
+  const updateGraphSpec = useCallback(
+    (newGraphSpec: GraphSpec) => {
+      setComponentSpec((prevSpec) => {
+        const newSpec = {
+          ...prevSpec,
+          implementation: {
+            ...prevSpec.implementation,
+            graph: newGraphSpec,
+          },
+        };
+
+        // Sync node manager with new spec
+        nodeManager.syncWithComponentSpec(newSpec);
+
+        return newSpec;
+      });
+    },
+    [nodeManager],
+  );
 
   const value = useMemo(
     () => ({
@@ -167,6 +180,7 @@ export const ComponentSpecProvider = ({
       updateGraphSpec,
       setTaskStatusMap,
       undoRedo,
+      nodeManager,
     }),
     [
       componentSpec,
@@ -182,6 +196,7 @@ export const ComponentSpecProvider = ({
       updateGraphSpec,
       setTaskStatusMap,
       undoRedo,
+      nodeManager,
     ],
   );