Fix inability to delete edges

Author: camielvs

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

@@ -28,7 +28,7 @@ interface IONodeProps {
 }
 
 const IONode = ({ type, data, selected = false }: IONodeProps) => {
-  const { getInputNodeId, getOutputNodeId } = useNodeManager();
+  const { getNodeId, getHandleNodeId } = useNodeManager();
   const { graphSpec, componentSpec } = useComponentSpec();
   const { setContent, clearContent } = useContextPanel();
 
@@ -59,11 +59,13 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
     [componentSpec.outputs, spec.name],
   );
 
-  const nodeId = isInput
-    ? getInputNodeId(inputNameToInputId(spec.name))
-    : getOutputNodeId(outputNameToOutputId(spec.name));
+  const inputId = inputNameToInputId(spec.name);
+  const outputId = outputNameToOutputId(spec.name);
+  const id = isInput ? inputId : outputId;
 
-  const nodeHandleId = `${nodeId}_handle`;
+  const nodeId = getNodeId(id, type);
+  const handleNodeType = isInput ? "outputHandle" : "inputHandle";
+  const nodeHandleId = getHandleNodeId(id, "handle", handleNodeType);
 
   const handleHandleClick = useCallback(() => {
     if (ENABLE_DEBUG_MODE) {

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/Handles.tsx

@@ -34,7 +34,7 @@ export const InputHandle = ({
   onLabelClick,
   onHandleSelectionChange,
 }: InputHandleProps) => {
-  const { getTaskInputNodeId } = useNodeManager();
+  const { getInputHandleNodeId } = useNodeManager();
   const { taskId, nodeId, state, name } = useTaskNode();
 
   const fromHandle = useConnection((connection) => connection.fromHandle?.id);
@@ -47,7 +47,7 @@ export const InputHandle = ({
   const [selected, setSelected] = useState(false);
   const [active, setActive] = useState(false);
 
-  const handleId = getTaskInputNodeId(taskId, input.name);
+  const handleId = getInputHandleNodeId(taskId, input.name);
 
   const missing = invalid ? "bg-red-700!" : "bg-gray-500!";
   const hasValue = value !== undefined && value !== null;
@@ -230,7 +230,7 @@ export const OutputHandle = ({
   onLabelClick,
   onHandleSelectionChange,
 }: OutputHandleProps) => {
-  const { getTaskOutputNodeId } = useNodeManager();
+  const { getOutputHandleNodeId } = useNodeManager();
   const { taskId, nodeId, state, name } = useTaskNode();
 
   const fromHandle = useConnection((connection) => connection.fromHandle?.id);
@@ -243,7 +243,7 @@ export const OutputHandle = ({
   const [selected, setSelected] = useState(false);
   const [active, setActive] = useState(false);
 
-  const handleId = getTaskOutputNodeId(taskId, output.name);
+  const handleId = getOutputHandleNodeId(taskId, output.name);
   const hasValue = value !== undefined && value !== "" && value !== null;
 
   const handleHandleClick = useCallback(

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeInputs.tsx

@@ -27,7 +27,7 @@ export function TaskNodeInputs({
   expanded,
   onBackgroundClick,
 }: TaskNodeInputsProps) {
-  const { getTaskInputNodeId } = useNodeManager();
+  const { getInputHandleNodeId } = useNodeManager();
   const { taskId, inputs, taskSpec, state, select } = useTaskNode();
   const { graphSpec } = useComponentSpec();
   const {
@@ -146,7 +146,7 @@ export function TaskNodeInputs({
     }
 
     const input = inputs.find(
-      (i) => getTaskInputNodeId(taskId, i.name) === fromHandle?.id,
+      (i) => getInputHandleNodeId(taskId, i.name) === fromHandle?.id,
     );
 
     if (!input) return;

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeOutputs.tsx

@@ -23,7 +23,7 @@ export function TaskNodeOutputs({
   expanded,
   onBackgroundClick,
 }: TaskNodeOutputsProps) {
-  const { getTaskOutputNodeId } = useNodeManager();
+  const { getOutputHandleNodeId } = useNodeManager();
   const { taskId, nodeId, outputs, state, select } = useTaskNode();
   const {
     highlightSearchFilter,
@@ -41,7 +41,7 @@ export function TaskNodeOutputs({
     edges.some(
       (edge) =>
         edge.source === nodeId &&
-        edge.sourceHandle === getTaskOutputNodeId(taskId, output.name),
+        edge.sourceHandle === getOutputHandleNodeId(taskId, output.name),
     ),
   );
 
@@ -139,7 +139,7 @@ export function TaskNodeOutputs({
     }
 
     const output = outputs.find(
-      (o) => getTaskOutputNodeId(taskId, o.name) === fromHandle?.id,
+      (o) => getOutputHandleNodeId(taskId, o.name) === fromHandle?.id,
     );
 
     if (!output) return;

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

@@ -1,6 +1,6 @@
 import type { Connection, Handle } from "@xyflow/react";
 
-import type { NodeManager } from "@/nodeManager";
+import type { NodeManager, NodeType } from "@/nodeManager";
 import {
   type ComponentReference,
   type ComponentSpec,
@@ -48,57 +48,44 @@ export function addAndConnectNode({
     return componentSpec;
   }
 
-  const isTaskHandle = nodeManager.isManaged(fromHandle.id);
-  let fromHandleType: "input" | "output";
-  let fromHandleName: string | undefined;
-  let fromTaskId: string | undefined;
+  const fromNodeId = fromHandle.nodeId;
+  const fromNodeType = nodeManager.getNodeType(fromNodeId);
+  const fromTaskId = nodeManager.getRefId(fromNodeId);
 
-  if (isTaskHandle) {
-    // Handle is managed by NodeManager (task handle)
-    const fromHandleInfo = nodeManager.getHandleInfo(fromHandle.id);
-    const fromNodeType = nodeManager.getNodeType(fromHandle.id);
+  if (!fromTaskId) {
+    return componentSpec;
+  }
 
-    if (!fromHandleInfo || !fromNodeType) {
-      return componentSpec;
-    }
+  let fromHandleType: NodeType | undefined;
+  let fromHandleName: string | undefined;
 
-    fromHandleType = fromNodeType === "taskInput" ? "input" : "output";
-    fromHandleName = fromHandleInfo.handleName;
-    fromTaskId = fromHandleInfo.taskId;
+  if (fromNodeType === "task") {
+    const fromHandleInfo = nodeManager.getHandleInfo(fromHandle.id);
+    fromHandleName = fromHandleInfo?.handleName;
+    fromHandleType = nodeManager.getNodeType(fromHandle.id);
+  } else if (fromNodeType === "input") {
+    fromHandleType = "outputHandle";
+    fromHandleName = inputIdToInputName(fromTaskId);
+  } else if (fromNodeType === "output") {
+    fromHandleType = "inputHandle";
+    fromHandleName = outputIdToOutputName(fromTaskId);
   } else {
-    // Simple IO node handle - get info from the source node, not the handle
-    const fromNodeId = fromHandle.nodeId;
-    const fromNodeType = nodeManager.getNodeType(fromNodeId);
-
-    if (!fromNodeType) {
-      return componentSpec;
-    }
-
-    if (fromNodeType === "input") {
-      fromHandleType = "output";
-      const inputId = nodeManager.getTaskId(fromNodeId);
-      if (inputId) {
-        fromHandleName = inputIdToInputName(inputId);
-        fromTaskId = inputId;
-      }
-    } else if (fromNodeType === "output") {
-      fromHandleType = "input";
-      const outputId = nodeManager.getTaskId(fromNodeId);
-      if (outputId) {
-        fromHandleName = outputIdToOutputName(outputId);
-        fromTaskId = outputId;
-      }
-    } else {
-      return componentSpec;
-    }
+    return componentSpec;
+  }
+
+  if (!fromHandleName) {
+    return componentSpec;
   }
 
-  if (!fromTaskId || !fromHandleName) {
+  if (
+    !fromHandleType ||
+    (fromHandleType !== "inputHandle" && fromHandleType !== "outputHandle")
+  ) {
     return componentSpec;
   }
 
   const adjustedPosition =
-    fromHandleType === "input"
+    fromHandleType === "inputHandle"
       ? { ...position, x: position.x - DEFAULT_NODE_DIMENSIONS.w }
       : position;
 
@@ -129,7 +116,7 @@ export function addAndConnectNode({
   // 3. Determine the connection data type and find the first matching handle on the new node
   let fromComponentSpec: ComponentSpec | undefined;
 
-  if (isTaskHandle) {
+  if (fromNodeType === "task") {
     // Get spec from task
     const fromTaskSpec = graphSpec.tasks[fromTaskId];
     fromComponentSpec = fromTaskSpec?.componentRef.spec;
@@ -139,55 +126,48 @@ export function addAndConnectNode({
   }
 
   let connectionType: TypeSpecType | undefined;
-  if (fromHandleType === "input") {
+  if (fromHandleType === "inputHandle") {
     connectionType = fromComponentSpec?.inputs?.find(
       (io) => io.name === fromHandleName,
     )?.type;
-  } else if (fromHandleType === "output") {
+  } else if (fromHandleType === "outputHandle") {
     connectionType = fromComponentSpec?.outputs?.find(
       (io) => io.name === fromHandleName,
     )?.type;
   }
 
   // Find the first matching handle on the new node
-  const toHandleType = fromHandleType === "input" ? "output" : "input";
-  let targetHandleId: string | undefined;
-
-  if (toHandleType === "input") {
-    const handleName = componentRef.spec?.inputs?.find(
-      (io) => io.type === connectionType,
-    )?.name;
-    if (!handleName) {
-      return newComponentSpec;
-    }
-
-    targetHandleId = nodeManager.getTaskHandleNodeId(
-      newTaskId,
-      handleName,
-      "taskInput",
-    );
-  } else if (toHandleType === "output") {
-    const handleName = componentRef.spec?.outputs?.find(
-      (io) => io.type === connectionType,
-    )?.name;
-    if (!handleName) {
-      return newComponentSpec;
-    }
-
-    targetHandleId = nodeManager.getTaskHandleNodeId(
-      newTaskId,
-      handleName,
-      "taskOutput",
-    );
+  const toHandleType =
+    fromHandleType === "inputHandle" ? "outputHandle" : "inputHandle";
+
+  const inputHandleName = componentRef.spec?.inputs?.find(
+    (io) => io.type === connectionType,
+  )?.name;
+
+  const outputHandleName = componentRef.spec?.outputs?.find(
+    (io) => io.type === connectionType,
+  )?.name;
+
+  const toHandleName =
+    toHandleType === "inputHandle" ? inputHandleName : outputHandleName;
+
+  if (!toHandleName) {
+    return newComponentSpec;
   }
 
+  const targetHandleId = nodeManager.getHandleNodeId(
+    newTaskId,
+    toHandleName,
+    toHandleType,
+  );
+
   // 4. Build a Connection object and use handleConnection to add the edge
   if (targetHandleId) {
     const fromNodeId = fromHandle.nodeId;
     const fromHandleId = fromHandle.id;
 
     const isReversedConnection =
-      fromHandleType === "input" && toHandleType === "output";
+      fromHandleType === "inputHandle" && toHandleType === "outputHandle";
 
     const connection: Connection = isReversedConnection
       ? // Drawing from an input handle to a new output handle

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

@@ -72,7 +72,7 @@ export const duplicateNodes = (
     const oldNodeId = node.id;
 
     if (node.type === "task") {
-      const oldTaskId = nodeManager.getTaskId(oldNodeId);
+      const oldTaskId = nodeManager.getRefId(oldNodeId);
       if (!oldTaskId) {
         console.warn("Could not find taskId for node:", node);
         return;
@@ -215,7 +215,7 @@ export const duplicateNodes = (
         return;
       }
 
-      const oldOutputId = nodeManager.getTaskId(oldNodeId);
+      const oldOutputId = nodeManager.getRefId(oldNodeId);
 
       if (!graphSpec.outputValues || !oldOutputId) {
         return;
@@ -240,7 +240,7 @@ export const duplicateNodes = (
           const oldTaskId = updatedOutputValue.taskOutput.taskId;
           const oldTaskNodeId = nodeManager.getNodeId(oldTaskId, "task");
           if (oldTaskNodeId in nodeIdMap) {
-            const newTaskId = nodeManager.getTaskId(nodeIdMap[oldTaskNodeId]);
+            const newTaskId = nodeManager.getRefId(nodeIdMap[oldTaskNodeId]);
             if (!newTaskId) {
               return;
             }
@@ -295,7 +295,7 @@ export const duplicateNodes = (
         return null;
       }
 
-      const newId = nodeManager.getTaskId(newNodeId);
+      const newId = nodeManager.getRefId(newNodeId);
 
       if (!newId) {
         return null;
@@ -412,7 +412,7 @@ export const duplicateNodes = (
         y: node.position.y + offset.y,
       };
 
-      const newId = nodeManager.getTaskId(node.id);
+      const newId = nodeManager.getRefId(node.id);
 
       if (!newId) {
         return null;
@@ -537,7 +537,7 @@ function reconfigureConnections(
       return reconfigureExternalConnection(taskSpec, argKey, mode);
     }
 
-    const newTaskId = nodeManager.getTaskId(newNodeId);
+    const newTaskId = nodeManager.getRefId(newNodeId);
 
     newArgId = newTaskId;
   } else if ("graphInput" in argument) {
@@ -557,7 +557,7 @@ function reconfigureConnections(
       return reconfigureExternalConnection(taskSpec, argKey, mode);
     }
 
-    const newInputId = nodeManager.getTaskId(newNodeId);
+    const newInputId = nodeManager.getRefId(newNodeId);
 
     newArgId = newInputId;
   }

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

@@ -1,6 +1,6 @@
 import type { Connection } from "@xyflow/react";
 
-import type { NodeManager, NodeType } from "@/nodeManager";
+import type { HandleInfo, NodeManager, NodeType } from "@/nodeManager";
 import type {
   GraphInputArgument,
   GraphSpec,
@@ -17,21 +17,18 @@ import { setTaskArgument } from "./setTaskArgument";
 type NodeInfo = {
   id: string;
   type?: NodeType;
-  handle?: {
-    taskId: string;
-    handleName: string;
-  };
+  handle?: HandleInfo;
 };
 
 export const handleConnection = (
   graphSpec: GraphSpec,
   connection: Connection,
   nodeManager: NodeManager,
 ) => {
-  const sourceId = nodeManager.getTaskId(connection.source!);
+  const sourceId = nodeManager.getRefId(connection.source!);
   const sourceType = nodeManager.getNodeType(connection.source!);
 
-  const targetId = nodeManager.getTaskId(connection.target!);
+  const targetId = nodeManager.getRefId(connection.target!);
   const targetType = nodeManager.getNodeType(connection.target!);
 
   if (!sourceId || !targetId || !sourceType || !targetType) {
@@ -49,8 +46,8 @@ export const handleConnection = (
     return graphSpec;
   }
 
-  let sourceHandleInfo: { taskId: string; handleName: string } | undefined;
-  let targetHandleInfo: { taskId: string; handleName: string } | undefined;
+  let sourceHandleInfo: HandleInfo | undefined;
+  let targetHandleInfo: HandleInfo | undefined;
 
   if (connection.sourceHandle) {
     sourceHandleInfo = nodeManager.getHandleInfo(connection.sourceHandle);