Skip to content

Commit 8c6b0e0

Browse files
camielvscamielvs
committed
Rework TaskInput and TaskOutput logic
1 parent d32734d commit 8c6b0e0

File tree

8 files changed

+263
-92
lines changed

8 files changed

+263
-92
lines changed

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

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,7 @@ interface IONodeProps {
2727
}
2828

2929
const IONode = ({ type, data, selected = false }: IONodeProps) => {
30-
const {
31-
getInputNodeId,
32-
getOutputNodeId,
33-
getTaskInputNodeId,
34-
getTaskOutputNodeId,
35-
} = useNodeManager();
30+
const { getInputNodeId, getOutputNodeId } = useNodeManager();
3631
const { graphSpec, componentSpec } = useComponentSpec();
3732
const { setContent, clearContent } = useContextPanel();
3833

@@ -63,13 +58,12 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
6358
[componentSpec.outputs, spec.name],
6459
);
6560

66-
const nodeId = isInput
67-
? getInputNodeId(inputNameToInputId(spec.name))
68-
: getOutputNodeId(outputNameToOutputId(spec.name));
61+
const inputId = inputNameToInputId(spec.name);
62+
const outputId = outputNameToOutputId(spec.name);
6963

70-
const nodeHandleId = isInput
71-
? getTaskOutputNodeId(inputNameToInputId(spec.name))
72-
: getTaskInputNodeId(outputNameToOutputId(spec.name));
64+
const nodeId = isInput ? getInputNodeId(inputId) : getOutputNodeId(outputId);
65+
66+
const nodeHandleId = `${nodeId}_handle`;
7367

7468
const handleHandleClick = useCallback(() => {
7569
if (ENABLE_DEBUG_MODE) {

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,6 @@ import { cn } from "@/lib/utils";
1616
import { useTaskNode } from "@/providers/TaskNodeProvider";
1717
import type { InputSpec, OutputSpec } from "@/utils/componentSpec";
1818
import { ENABLE_DEBUG_MODE } from "@/utils/constants";
19-
import {
20-
inputNameToInputId,
21-
outputNameToOutputId,
22-
} from "@/utils/nodes/nodeIdUtils";
2319

2420
type InputHandleProps = {
2521
input: InputSpec;
@@ -39,7 +35,7 @@ export const InputHandle = ({
3935
onHandleSelectionChange,
4036
}: InputHandleProps) => {
4137
const { getTaskInputNodeId } = useNodeManager();
42-
const { nodeId, state, name } = useTaskNode();
38+
const { taskId, nodeId, state, name } = useTaskNode();
4339

4440
const fromHandle = useConnection((connection) => connection.fromHandle?.id);
4541
const toHandle = useConnection((connection) => connection.toHandle?.id);
@@ -51,7 +47,7 @@ export const InputHandle = ({
5147
const [selected, setSelected] = useState(false);
5248
const [active, setActive] = useState(false);
5349

54-
const handleId = getTaskInputNodeId(inputNameToInputId(input.name));
50+
const handleId = getTaskInputNodeId(taskId, input.name);
5551

5652
const missing = invalid ? "bg-red-700!" : "bg-gray-500!";
5753
const hasValue = value !== undefined && value !== null;
@@ -235,7 +231,7 @@ export const OutputHandle = ({
235231
onHandleSelectionChange,
236232
}: OutputHandleProps) => {
237233
const { getTaskOutputNodeId } = useNodeManager();
238-
const { nodeId, state, name } = useTaskNode();
234+
const { taskId, nodeId, state, name } = useTaskNode();
239235

240236
const fromHandle = useConnection((connection) => connection.fromHandle?.id);
241237
const toHandle = useConnection((connection) => connection.toHandle?.id);
@@ -247,7 +243,7 @@ export const OutputHandle = ({
247243
const [selected, setSelected] = useState(false);
248244
const [active, setActive] = useState(false);
249245

250-
const handleId = getTaskOutputNodeId(outputNameToOutputId(output.name));
246+
const handleId = getTaskOutputNodeId(taskId, output.name);
251247
const hasValue = value !== undefined && value !== "" && value !== null;
252248

253249
const handleHandleClick = useCallback(

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { useTaskNode } from "@/providers/TaskNodeProvider";
1111
import { inputsWithInvalidArguments } from "@/services/componentService";
1212
import type { InputSpec } from "@/utils/componentSpec";
1313
import { ComponentSearchFilter } from "@/utils/constants";
14-
import { inputNameToInputId } from "@/utils/nodes/nodeIdUtils";
1514
import { checkArtifactMatchesSearchFilters } from "@/utils/searchUtils";
1615

1716
import { InputHandle } from "./Handles";
@@ -28,8 +27,8 @@ export function TaskNodeInputs({
2827
expanded,
2928
onBackgroundClick,
3029
}: TaskNodeInputsProps) {
31-
const { getInputNodeId } = useNodeManager();
32-
const { inputs, taskSpec, state, select } = useTaskNode();
30+
const { getTaskInputNodeId } = useNodeManager();
31+
const { taskId, inputs, taskSpec, state, select } = useTaskNode();
3332
const { graphSpec } = useComponentSpec();
3433
const {
3534
highlightSearchFilter,
@@ -147,7 +146,7 @@ export function TaskNodeInputs({
147146
}
148147

149148
const input = inputs.find(
150-
(i) => getInputNodeId(inputNameToInputId(i.name)) === fromHandle?.id,
149+
(i) => getTaskInputNodeId(taskId, i.name) === fromHandle?.id,
151150
);
152151

153152
if (!input) return;

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { isValidFilterRequest } from "@/providers/ComponentLibraryProvider/types
88
import { useTaskNode } from "@/providers/TaskNodeProvider";
99
import type { OutputSpec } from "@/utils/componentSpec";
1010
import { ComponentSearchFilter } from "@/utils/constants";
11-
import { outputNameToOutputId } from "@/utils/nodes/nodeIdUtils";
1211
import { checkArtifactMatchesSearchFilters } from "@/utils/searchUtils";
1312

1413
import { OutputHandle } from "./Handles";
@@ -25,7 +24,7 @@ export function TaskNodeOutputs({
2524
onBackgroundClick,
2625
}: TaskNodeOutputsProps) {
2726
const { getTaskOutputNodeId } = useNodeManager();
28-
const { nodeId, outputs, state, select } = useTaskNode();
27+
const { taskId, nodeId, outputs, state, select } = useTaskNode();
2928
const {
3029
highlightSearchFilter,
3130
resetSearchFilter,
@@ -42,8 +41,7 @@ export function TaskNodeOutputs({
4241
edges.some(
4342
(edge) =>
4443
edge.source === nodeId &&
45-
edge.sourceHandle ===
46-
getTaskOutputNodeId(outputNameToOutputId(output.name)),
44+
edge.sourceHandle === getTaskOutputNodeId(taskId, output.name),
4745
),
4846
);
4947

@@ -141,8 +139,7 @@ export function TaskNodeOutputs({
141139
}
142140

143141
const output = outputs.find(
144-
(o) =>
145-
getTaskOutputNodeId(outputNameToOutputId(o.name)) === fromHandle?.id,
142+
(o) => getTaskOutputNodeId(taskId, o.name) === fromHandle?.id,
146143
);
147144

148145
if (!output) return;

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

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,48 +16,60 @@ import { setTaskArgument } from "./setTaskArgument";
1616

1717
type NodeInfo = {
1818
id: string;
19-
handle?: string;
2019
type?: NodeType;
20+
handle?: {
21+
taskId: string;
22+
handleName: string;
23+
};
2124
};
2225

2326
export const handleConnection = (
2427
graphSpec: GraphSpec,
2528
connection: Connection,
2629
nodeManager: NodeManager,
2730
) => {
28-
const sourceId = nodeManager.getTaskId(connection.source);
29-
const targetId = nodeManager.getTaskId(connection.target);
30-
31-
if (!sourceId || !targetId) {
32-
console.warn("Source or Target ID is missing in the connection.");
31+
const sourceId = nodeManager.getTaskId(connection.source!);
32+
const sourceType = nodeManager.getNodeType(connection.source!);
33+
34+
const targetId = nodeManager.getTaskId(connection.target!);
35+
const targetType = nodeManager.getNodeType(connection.target!);
36+
37+
if (!sourceId || !targetId || !sourceType || !targetType) {
38+
console.error("Could not resolve node information:", {
39+
sourceId,
40+
sourceType,
41+
targetId,
42+
targetType,
43+
});
3344
return graphSpec;
3445
}
3546

3647
if (sourceId === targetId) {
37-
console.warn(
38-
"Source and Target IDs are the same. Self-connections are not allowed.",
39-
);
48+
console.warn("Cannot connect node to itself");
4049
return graphSpec;
4150
}
4251

43-
const sourceHandleId = connection.sourceHandle
44-
? nodeManager.getTaskId(connection.sourceHandle)
45-
: undefined;
52+
let sourceHandleInfo: { taskId: string; handleName: string } | undefined;
53+
let targetHandleInfo: { taskId: string; handleName: string } | undefined;
54+
55+
if (connection.sourceHandle) {
56+
sourceHandleInfo = nodeManager.getHandleInfo(connection.sourceHandle);
57+
}
4658

47-
const targetHandleId = connection.targetHandle
48-
? nodeManager.getTaskId(connection.targetHandle)
49-
: undefined;
59+
if (connection.targetHandle) {
60+
targetHandleInfo = nodeManager.getHandleInfo(connection.targetHandle);
61+
}
5062

5163
const source: NodeInfo = {
5264
id: sourceId,
53-
handle: sourceHandleId,
54-
type: nodeManager.getNodeType(connection.source),
65+
type: sourceType,
66+
handle: sourceHandleInfo,
5567
};
5668

5769
const target: NodeInfo = {
5870
id: targetId,
59-
handle: targetHandleId,
60-
type: nodeManager.getNodeType(connection.target),
71+
type: targetType,
72+
handle: targetHandleInfo,
6173
};
6274

6375
const connectionType = `${source.type}_to_${target.type}` as const;
@@ -73,7 +85,7 @@ export const handleConnection = (
7385
return handleTaskToGraphOutput(graphSpec, source, target);
7486

7587
default:
76-
console.warn("Unsupported connection pattern:", connectionType);
88+
console.error("Unsupported connection pattern:", connectionType);
7789
return graphSpec;
7890
}
7991
};
@@ -83,16 +95,19 @@ const handleGraphInputToTask = (
8395
source: NodeInfo,
8496
target: NodeInfo,
8597
): GraphSpec => {
86-
if (!target.handle) {
87-
console.warn("Handle ID is missing for target task node.");
98+
if (!target.handle?.handleName) {
99+
console.error(
100+
"Target handle name missing for graph input to task connection",
101+
);
88102
return graphSpec;
89103
}
90104

91-
const sourceInputName = inputIdToInputName(source.id);
92-
const targetInputName = inputIdToInputName(target.handle);
105+
const inputId = source.id;
106+
const inputName = inputIdToInputName(inputId);
107+
const targetInputName = target.handle.handleName;
93108

94109
const graphInputArgument: GraphInputArgument = {
95-
graphInput: { inputName: sourceInputName },
110+
graphInput: { inputName },
96111
};
97112

98113
return setTaskArgument(
@@ -108,18 +123,18 @@ const handleTaskToTask = (
108123
source: NodeInfo,
109124
target: NodeInfo,
110125
): GraphSpec => {
111-
if (!source.handle) {
112-
console.warn("Handle ID is missing for source task node.");
126+
if (!source.handle?.handleName) {
127+
console.error("Source handle name missing for task to task connection");
113128
return graphSpec;
114129
}
115130

116-
if (!target.handle) {
117-
console.warn("Handle ID is missing for target task node.");
131+
if (!target.handle?.handleName) {
132+
console.error("Target handle name missing for task to task connection");
118133
return graphSpec;
119134
}
120135

121-
const sourceOutputName = outputIdToOutputName(source.handle);
122-
const targetInputName = inputIdToInputName(target.handle);
136+
const sourceOutputName = source.handle.handleName;
137+
const targetInputName = target.handle.handleName;
123138

124139
const taskOutputArgument: TaskOutputArgument = {
125140
taskOutput: {
@@ -141,12 +156,16 @@ const handleTaskToGraphOutput = (
141156
source: NodeInfo,
142157
target: NodeInfo,
143158
): GraphSpec => {
144-
if (!source.handle) {
145-
console.warn("Handle ID is missing for source task node.");
159+
if (!source.handle?.handleName) {
160+
console.error(
161+
"Source handle name missing for task to graph output connection",
162+
);
146163
return graphSpec;
147164
}
148165

149-
const sourceOutputName = outputIdToOutputName(source.handle);
166+
const sourceOutputName = source.handle.handleName;
167+
const outputId = target.id;
168+
const outputName = outputIdToOutputName(outputId);
150169

151170
const taskOutputArgument: TaskOutputArgument = {
152171
taskOutput: {
@@ -155,5 +174,5 @@ const handleTaskToGraphOutput = (
155174
},
156175
};
157176

158-
return setGraphOutputValue(graphSpec, target.id, taskOutputArgument);
177+
return setGraphOutputValue(graphSpec, outputName, taskOutputArgument);
159178
};

‎src/hooks/useComponentSpecToEdges.ts‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -110,17 +110,22 @@ const createTaskOutputEdge = (
110110
nodeManager: NodeManager,
111111
): Edge => {
112112
const sourceNodeId = nodeManager.getNodeId(taskOutput.taskId, "task");
113-
const sourceOutputId = outputNameToOutputId(taskOutput.outputName);
114-
const sourceHandleNodeId = nodeManager.getNodeId(
115-
sourceOutputId,
113+
const targetNodeId = nodeManager.getNodeId(taskId, "task");
114+
115+
const sourceHandleNodeId = nodeManager.getTaskHandleNodeId(
116+
taskOutput.taskId,
117+
taskOutput.outputName,
116118
"taskOutput",
117119
);
118-
const targetNodeId = nodeManager.getNodeId(taskId, "task");
119-
const targetInputId = inputNameToInputId(inputName);
120-
const targetHandleNodeId = nodeManager.getNodeId(targetInputId, "taskInput");
120+
121+
const targetHandleNodeId = nodeManager.getTaskHandleNodeId(
122+
taskId,
123+
inputName,
124+
"taskInput",
125+
);
121126

122127
return {
123-
id: `${taskOutput.taskId}_${sourceOutputId}-${taskId}_${targetInputId}`,
128+
id: `${taskOutput.taskId}_${taskOutput.outputName}-${taskId}_${inputName}`,
124129
source: sourceNodeId,
125130
sourceHandle: sourceHandleNodeId,
126131
target: targetNodeId,
@@ -139,11 +144,15 @@ const createGraphInputEdge = (
139144
const inputId = inputNameToInputId(graphInput.inputName);
140145
const sourceNodeId = nodeManager.getNodeId(inputId, "input");
141146
const targetNodeId = nodeManager.getNodeId(taskId, "task");
142-
const targetInputId = inputNameToInputId(inputName);
143-
const targetHandleNodeId = nodeManager.getNodeId(targetInputId, "taskInput");
147+
148+
const targetHandleNodeId = nodeManager.getTaskHandleNodeId(
149+
taskId,
150+
inputName,
151+
"taskInput",
152+
);
144153

145154
return {
146-
id: `Input_${inputId}-${taskId}_${targetInputId}`,
155+
id: `Input_${inputId}-${taskId}_${inputName}`,
147156
source: sourceNodeId,
148157
sourceHandle: null,
149158
target: targetNodeId,
@@ -162,18 +171,17 @@ const createOutputEdgesFromGraphSpec = (
162171
const taskOutput = argument.taskOutput;
163172

164173
const sourceNodeId = nodeManager.getNodeId(taskOutput.taskId, "task");
165-
const sourceOutputId = outputNameToOutputId(taskOutput.outputName);
166-
const sourceHandleNodeId = nodeManager.getNodeId(
167-
sourceOutputId,
168-
"taskOutput",
169-
);
170174
const targetOutputId = outputNameToOutputId(outputName);
171175
const targetNodeId = nodeManager.getNodeId(targetOutputId, "output");
172176

173-
// console.log({ sourceNodeId, targetNodeId, sourceHandleNodeId });
177+
const sourceHandleNodeId = nodeManager.getTaskHandleNodeId(
178+
taskOutput.taskId,
179+
taskOutput.outputName,
180+
"taskOutput",
181+
);
174182

175183
const edge: Edge = {
176-
id: `${taskOutput.taskId}_${sourceOutputId}-Output_${targetOutputId}`,
184+
id: `${taskOutput.taskId}_${taskOutput.outputName}-Output_${outputName}`,
177185
source: sourceNodeId,
178186
sourceHandle: sourceHandleNodeId,
179187
target: targetNodeId,

0 commit comments

Comments
 (0)