Rename to 'InputHandle' and 'OutputHandle'

Author: camielvs

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

@@ -64,10 +64,10 @@ export function addAndConnectNode({
     fromHandleName = fromHandleInfo?.handleName;
     fromHandleType = nodeManager.getNodeType(fromHandle.id);
   } else if (fromNodeType === "input") {
-    fromHandleType = "taskOutput";
+    fromHandleType = "outputHandle";
     fromHandleName = inputIdToInputName(fromTaskId);
   } else if (fromNodeType === "output") {
-    fromHandleType = "taskInput";
+    fromHandleType = "inputHandle";
     fromHandleName = outputIdToOutputName(fromTaskId);
   } else {
     return componentSpec;
@@ -79,13 +79,13 @@ export function addAndConnectNode({
 
   if (
     !fromHandleType ||
-    (fromHandleType !== "taskInput" && fromHandleType !== "taskOutput")
+    (fromHandleType !== "inputHandle" && fromHandleType !== "outputHandle")
   ) {
     return componentSpec;
   }
 
   const adjustedPosition =
-    fromHandleType === "taskInput"
+    fromHandleType === "inputHandle"
       ? { ...position, x: position.x - DEFAULT_NODE_DIMENSIONS.w }
       : position;
 
@@ -126,19 +126,19 @@ export function addAndConnectNode({
   }
 
   let connectionType: TypeSpecType | undefined;
-  if (fromHandleType === "taskInput") {
+  if (fromHandleType === "inputHandle") {
     connectionType = fromComponentSpec?.inputs?.find(
       (io) => io.name === fromHandleName,
     )?.type;
-  } else if (fromHandleType === "taskOutput") {
+  } 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 === "taskInput" ? "taskOutput" : "taskInput";
+    fromHandleType === "inputHandle" ? "outputHandle" : "inputHandle";
 
   const inputHandleName = componentRef.spec?.inputs?.find(
     (io) => io.type === connectionType,
@@ -149,13 +149,13 @@ export function addAndConnectNode({
   )?.name;
 
   const toHandleName =
-    toHandleType === "taskInput" ? inputHandleName : outputHandleName;
+    toHandleType === "inputHandle" ? inputHandleName : outputHandleName;
 
   if (!toHandleName) {
     return newComponentSpec;
   }
 
-  const targetHandleId = nodeManager.getTaskHandleNodeId(
+  const targetHandleId = nodeManager.getHandleNodeId(
     newTaskId,
     toHandleName,
     toHandleType,
@@ -167,7 +167,7 @@ export function addAndConnectNode({
     const fromHandleId = fromHandle.id;
 
     const isReversedConnection =
-      fromHandleType === "taskInput" && toHandleType === "taskOutput";
+      fromHandleType === "inputHandle" && toHandleType === "outputHandle";
 
     const connection: Connection = isReversedConnection
       ? // Drawing from an input handle to a new output handle

src/hooks/useComponentSpecToEdges.ts

@@ -112,16 +112,16 @@ const createTaskOutputEdge = (
   const sourceNodeId = nodeManager.getNodeId(taskOutput.taskId, "task");
   const targetNodeId = nodeManager.getNodeId(taskId, "task");
 
-  const sourceHandleNodeId = nodeManager.getTaskHandleNodeId(
+  const sourceHandleNodeId = nodeManager.getHandleNodeId(
     taskOutput.taskId,
     taskOutput.outputName,
-    "taskOutput",
+    "outputHandle",
   );
 
-  const targetHandleNodeId = nodeManager.getTaskHandleNodeId(
+  const targetHandleNodeId = nodeManager.getHandleNodeId(
     taskId,
     inputName,
-    "taskInput",
+    "inputHandle",
   );
 
   return {
@@ -145,10 +145,10 @@ const createGraphInputEdge = (
   const sourceNodeId = nodeManager.getNodeId(inputId, "input");
   const targetNodeId = nodeManager.getNodeId(taskId, "task");
 
-  const targetHandleNodeId = nodeManager.getTaskHandleNodeId(
+  const targetHandleNodeId = nodeManager.getHandleNodeId(
     taskId,
     inputName,
-    "taskInput",
+    "inputHandle",
   );
 
   return {
@@ -174,10 +174,10 @@ const createOutputEdgesFromGraphSpec = (
       const targetOutputId = outputNameToOutputId(outputName);
       const targetNodeId = nodeManager.getNodeId(targetOutputId, "output");
 
-      const sourceHandleNodeId = nodeManager.getTaskHandleNodeId(
+      const sourceHandleNodeId = nodeManager.getHandleNodeId(
         taskOutput.taskId,
         taskOutput.outputName,
-        "taskOutput",
+        "outputHandle",
       );
 
       const edge: Edge = {

src/hooks/useNodeManager.ts

@@ -28,16 +28,16 @@ export const useNodeManager = () => {
     [nodeManager],
   );
 
-  const getTaskInputNodeId = useCallback(
+  const getInputHandleNodeId = useCallback(
     (taskId: string, inputName: string): string => {
-      return nodeManager.getTaskHandleNodeId(taskId, inputName, "taskInput");
+      return nodeManager.getHandleNodeId(taskId, inputName, "inputHandle");
     },
     [nodeManager],
   );
 
-  const getTaskOutputNodeId = useCallback(
+  const getOutputHandleNodeId = useCallback(
     (taskId: string, outputName: string): string => {
-      return nodeManager.getTaskHandleNodeId(taskId, outputName, "taskOutput");
+      return nodeManager.getHandleNodeId(taskId, outputName, "outputHandle");
     },
     [nodeManager],
   );
@@ -101,8 +101,8 @@ export const useNodeManager = () => {
       getInputNodeId,
       getOutputNodeId,
       getTaskNodeId,
-      getTaskInputNodeId,
-      getTaskOutputNodeId,
+      getInputHandleNodeId,
+      getOutputHandleNodeId,
       getHandleInfo,
 
       // Direct access to NodeManager for advanced use cases
@@ -117,8 +117,8 @@ export const useNodeManager = () => {
       getInputNodeId,
       getOutputNodeId,
       getTaskNodeId,
-      getTaskInputNodeId,
-      getTaskOutputNodeId,
+      getInputHandleNodeId,
+      getOutputHandleNodeId,
       getHandleInfo,
       nodeManager,
     ],

src/nodeManager.ts

@@ -5,14 +5,19 @@ import {
   isGraphImplementation,
 } from "./utils/componentSpec";
 
-export type NodeType = "task" | "input" | "output" | "taskInput" | "taskOutput";
+export type NodeType =
+  | "task"
+  | "input"
+  | "output"
+  | "inputHandle"
+  | "outputHandle";
 
 interface NodeMapping {
   nodeId: string;
   taskId: string;
   nodeType: NodeType;
   createdAt: number;
-  // For TaskInput & TaskOutput:
+  // For InputHandle & OutputHandle:
   parentTaskId?: string;
   handleName?: string;
 }
@@ -38,7 +43,7 @@ export class NodeManager {
     return this.taskToNodeMap.get(nodeType)!;
   }
 
-  private getTaskHandleMapForTask(taskId: string): Map<string, string> {
+  private getHandleMapForTask(taskId: string): Map<string, string> {
     if (!this.taskHandleMap.has(taskId)) {
       this.taskHandleMap.set(taskId, new Map<string, string>());
     }
@@ -68,12 +73,12 @@ export class NodeManager {
     return nodeId;
   }
 
-  getTaskHandleNodeId(
+  getHandleNodeId(
     taskId: string,
     handleName: string,
-    handleType: "taskInput" | "taskOutput",
+    handleType: "inputHandle" | "outputHandle",
   ): string {
-    const taskHandleMap = this.getTaskHandleMapForTask(taskId);
+    const taskHandleMap = this.getHandleMapForTask(taskId);
     const handleKey = `${handleType}:${handleName}`;
     const existing = taskHandleMap.get(handleKey);
 
@@ -233,11 +238,11 @@ export class NodeManager {
         const taskHandleSet = currentTaskHandles.get(taskId)!;
 
         inputs.forEach((input) => {
-          taskHandleSet.add(`taskInput:${input.name}`);
+          taskHandleSet.add(`inputHandle:${input.name}`);
         });
 
         outputs.forEach((output) => {
-          taskHandleSet.add(`taskOutput:${output.name}`);
+          taskHandleSet.add(`outputHandle:${output.name}`);
         });
       });
     }