Skip to content

Commit 3fe87e1

Browse files
camielvscamielvs
committed
Add Input Id and Output Id conversions
1 parent a6337e1 commit 3fe87e1

21 files changed

+161
-127
lines changed

‎src/components/Editor/IOEditor/InputValueEditor/InputValueEditor.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { useComponentSpec } from "@/providers/ComponentSpecProvider";
1515
import { useContextPanel } from "@/providers/ContextPanelProvider";
1616
import { type InputSpec } from "@/utils/componentSpec";
1717
import { checkInputConnectionToRequiredFields } from "@/utils/inputConnectionUtils";
18-
import { inputNameToNodeId } from "@/utils/nodes/nodeIdUtils";
18+
import { inputIdToNodeId, inputNameToInputId } from "@/utils/nodes/conversions";
1919

2020
import { NameField, TextField, TypeField } from "./FormFields/FormFields";
2121
import { checkNameCollision } from "./FormFields/utils";
@@ -31,6 +31,12 @@ export const InputValueEditor = ({
3131
disabled = false,
3232
}: InputValueEditorProps) => {
3333
const notify = useToastNotification();
34+
35+
const inputNameToNodeId = useCallback((inputName: string): string => {
36+
const inputId = inputNameToInputId(inputName);
37+
return inputIdToNodeId(inputId);
38+
}, []);
39+
3440
const { transferSelection } = useNodeSelectionTransfer(inputNameToNodeId);
3541
const { componentSpec, setComponentSpec } = useComponentSpec();
3642
const { clearContent } = useContextPanel();

‎src/components/Editor/IOEditor/OutputNameEditor/OutputNameEditor.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ import { useNodeSelectionTransfer } from "@/hooks/useNodeSelectionTransfer";
1111
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
1212
import { useContextPanel } from "@/providers/ContextPanelProvider";
1313
import { type OutputSpec } from "@/utils/componentSpec";
14-
import { outputNameToNodeId } from "@/utils/nodes/nodeIdUtils";
14+
import {
15+
outputIdToNodeId,
16+
outputNameToOutputId,
17+
} from "@/utils/nodes/conversions";
1518

1619
import { type OutputConnectedDetails } from "../../utils/getOutputConnectedDetails";
1720
import { updateOutputNameOnComponentSpec } from "../../utils/updateOutputNameOnComponentSpec";
@@ -29,6 +32,11 @@ export const OutputNameEditor = ({
2932
disabled,
3033
connectedDetails,
3134
}: OutputNameEditorProps) => {
35+
const outputNameToNodeId = useCallback((outputName: string): string => {
36+
const outputId = outputNameToOutputId(outputName);
37+
return outputIdToNodeId(outputId);
38+
}, []);
39+
3240
const { transferSelection } = useNodeSelectionTransfer(outputNameToNodeId);
3341
const { setComponentSpec, componentSpec } = useComponentSpec();
3442
const { clearContent } = useContextPanel();

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useTaskNode } from "@/providers/TaskNodeProvider";
1010
import { inputsWithInvalidArguments } from "@/services/componentService";
1111
import type { InputSpec } from "@/utils/componentSpec";
1212
import { ComponentSearchFilter } from "@/utils/constants";
13-
import { inputNameToNodeId } from "@/utils/nodes/nodeIdUtils";
13+
import { inputIdToNodeId, inputNameToInputId } from "@/utils/nodes/conversions";
1414
import { checkArtifactMatchesSearchFilters } from "@/utils/searchUtils";
1515

1616
import { InputHandle } from "./Handles";
@@ -145,7 +145,7 @@ export function TaskNodeInputs({
145145
}
146146

147147
const input = inputs.find(
148-
(i) => inputNameToNodeId(i.name) === fromHandle?.id,
148+
(i) => inputIdToNodeId(inputNameToInputId(i.name)) === fromHandle?.id,
149149
);
150150

151151
if (!input) return;

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import { isValidFilterRequest } from "@/providers/ComponentLibraryProvider/types
77
import { useTaskNode } from "@/providers/TaskNodeProvider";
88
import type { OutputSpec } from "@/utils/componentSpec";
99
import { ComponentSearchFilter } from "@/utils/constants";
10-
import { outputNameToNodeId } from "@/utils/nodes/nodeIdUtils";
10+
import {
11+
outputIdToNodeId,
12+
outputNameToOutputId,
13+
} from "@/utils/nodes/conversions";
1114
import { checkArtifactMatchesSearchFilters } from "@/utils/searchUtils";
1215

1316
import { OutputHandle } from "./Handles";
@@ -40,7 +43,8 @@ export function TaskNodeOutputs({
4043
edges.some(
4144
(edge) =>
4245
edge.source === nodeId &&
43-
edge.sourceHandle === outputNameToNodeId(output.name),
46+
edge.sourceHandle ===
47+
outputIdToNodeId(outputNameToOutputId(output.name)),
4448
),
4549
);
4650

@@ -138,7 +142,7 @@ export function TaskNodeOutputs({
138142
}
139143

140144
const output = outputs.find(
141-
(o) => outputNameToNodeId(o.name) === fromHandle?.id,
145+
(o) => outputIdToNodeId(outputNameToOutputId(o.name)) === fromHandle?.id,
142146
);
143147

144148
if (!output) return;

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ import type {
88
} from "@/utils/componentSpec";
99
import { DEFAULT_NODE_DIMENSIONS } from "@/utils/constants";
1010
import {
11-
inputNameToNodeId,
11+
inputIdToNodeId,
12+
inputNameToInputId,
1213
nodeIdToTaskId,
13-
outputNameToNodeId,
14+
outputIdToNodeId,
15+
outputNameToOutputId,
1416
taskIdToNodeId,
15-
} from "@/utils/nodes/nodeIdUtils";
17+
} from "@/utils/nodes/conversions";
1618

1719
import addTask from "./addTask";
1820
import { handleConnection } from "./handleConnection";
@@ -112,7 +114,7 @@ export function addAndConnectNode({
112114
return newComponentSpec;
113115
}
114116

115-
targetHandleId = inputNameToNodeId(handleName);
117+
targetHandleId = inputIdToNodeId(inputNameToInputId(handleName));
116118
} else if (toHandleType === "output") {
117119
const handleName = componentRef.spec?.outputs?.find(
118120
(io) => io.type === connectionType,
@@ -121,7 +123,7 @@ export function addAndConnectNode({
121123
return newComponentSpec;
122124
}
123125

124-
targetHandleId = outputNameToNodeId(handleName);
126+
targetHandleId = outputIdToNodeId(outputNameToOutputId(handleName));
125127
}
126128

127129
// 4. Build a Connection object and use handleConnection to add the edge

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ import type {
1010
TaskSpec,
1111
} from "@/utils/componentSpec";
1212
import {
13-
inputNameToNodeId,
14-
outputNameToNodeId,
13+
inputIdToNodeId,
14+
inputNameToInputId,
15+
outputIdToNodeId,
16+
outputNameToOutputId,
1517
taskIdToNodeId,
16-
} from "@/utils/nodes/nodeIdUtils";
18+
} from "@/utils/nodes/conversions";
1719

1820
import { duplicateNodes } from "./duplicateNodes";
1921

@@ -112,7 +114,7 @@ const createMockInputNode = (
112114
inputName: string,
113115
position = { x: 50, y: 50 },
114116
): Node => ({
115-
id: inputNameToNodeId(inputName),
117+
id: inputIdToNodeId(inputNameToInputId(inputName)),
116118
type: "input",
117119
position,
118120
data: {
@@ -128,7 +130,7 @@ const createMockOutputNode = (
128130
outputName: string,
129131
position = { x: 300, y: 300 },
130132
): Node => ({
131-
id: outputNameToNodeId(outputName),
133+
id: outputIdToNodeId(outputNameToOutputId(outputName)),
132134
type: "output",
133135
position,
134136
data: {
@@ -212,7 +214,9 @@ describe("duplicateNodes", () => {
212214

213215
expect(result.newNodes).toHaveLength(1);
214216
expect(result.newNodes[0].type).toBe("input");
215-
expect(result.newNodes[0].id).toBe(inputNameToNodeId("original-input 2"));
217+
expect(result.newNodes[0].id).toBe(
218+
inputIdToNodeId(inputNameToInputId("original-input 2")),
219+
);
216220
expect(result.newNodes[0].position).toEqual({ x: 60, y: 60 });
217221

218222
expect(result.updatedComponentSpec.inputs).toHaveLength(2);
@@ -248,7 +252,7 @@ describe("duplicateNodes", () => {
248252
expect(result.newNodes).toHaveLength(1);
249253
expect(result.newNodes[0].type).toBe("output");
250254
expect(result.newNodes[0].id).toBe(
251-
outputNameToNodeId("original-output 2"),
255+
outputIdToNodeId(outputNameToOutputId("original-output 2")),
252256
);
253257
expect(result.newNodes[0].position).toEqual({ x: 310, y: 310 });
254258

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

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,22 @@ import {
1010
type TaskOutputArgument,
1111
type TaskSpec,
1212
} from "@/utils/componentSpec";
13+
import {
14+
inputIdToInputName,
15+
inputIdToNodeId,
16+
inputNameToInputId,
17+
nodeIdToInputId,
18+
nodeIdToOutputId,
19+
nodeIdToTaskId,
20+
outputIdToNodeId,
21+
outputIdToOutputName,
22+
outputNameToOutputId,
23+
taskIdToNodeId,
24+
} from "@/utils/nodes/conversions";
1325
import { createInputNode } from "@/utils/nodes/createInputNode";
1426
import { createOutputNode } from "@/utils/nodes/createOutputNode";
1527
import { createTaskNode } from "@/utils/nodes/createTaskNode";
1628
import { getNodesBounds } from "@/utils/nodes/getNodesBounds";
17-
import {
18-
inputNameToNodeId,
19-
nodeIdToInputName,
20-
nodeIdToOutputName,
21-
nodeIdToTaskId,
22-
outputNameToNodeId,
23-
taskIdToNodeId,
24-
} from "@/utils/nodes/nodeIdUtils";
2529
import { setPositionInAnnotations } from "@/utils/nodes/setPositionInAnnotations";
2630
import { convertTaskCallbacksToNodeCallbacks } from "@/utils/nodes/taskCallbackUtils";
2731
import {
@@ -102,9 +106,9 @@ export const duplicateNodes = (
102106
(input) => input.name === node.data.label,
103107
);
104108

105-
const newInputId = getUniqueInputName(componentSpec, inputSpec?.name);
106-
107-
const newNodeId = inputNameToNodeId(newInputId);
109+
const newInputName = getUniqueInputName(componentSpec, inputSpec?.name);
110+
const newInputId = inputNameToInputId(newInputName);
111+
const newNodeId = inputIdToNodeId(newInputId);
108112

109113
nodeIdMap[oldNodeId] = newNodeId;
110114

@@ -117,7 +121,7 @@ export const duplicateNodes = (
117121

118122
const newInputSpec = {
119123
...inputSpec,
120-
name: newInputId,
124+
name: newInputName,
121125
annotations: updatedAnnotations,
122126
};
123127

@@ -127,9 +131,12 @@ export const duplicateNodes = (
127131
(output) => output.name === node.data.label,
128132
);
129133

130-
const newOutputId = getUniqueOutputName(componentSpec, outputSpec?.name);
131-
132-
const newNodeId = outputNameToNodeId(newOutputId);
134+
const newOutputName = getUniqueOutputName(
135+
componentSpec,
136+
outputSpec?.name,
137+
);
138+
const newOutputId = outputNameToOutputId(newOutputName);
139+
const newNodeId = outputIdToNodeId(newOutputId);
133140

134141
nodeIdMap[oldNodeId] = newNodeId;
135142

@@ -142,7 +149,7 @@ export const duplicateNodes = (
142149

143150
const newOutputSpec = {
144151
...outputSpec,
145-
name: newOutputId,
152+
name: newOutputName,
146153
annotations: updatedAnnotations,
147154
};
148155

@@ -193,7 +200,7 @@ export const duplicateNodes = (
193200
/* Reconfigure Outputs */
194201
Object.entries(newOutputs).forEach((output) => {
195202
const [outputId] = output;
196-
const newNodeId = outputNameToNodeId(outputId);
203+
const newNodeId = outputIdToNodeId(outputId);
197204
const oldNodeId = Object.keys(nodeIdMap).find(
198205
(key) => nodeIdMap[key] === newNodeId,
199206
);
@@ -202,7 +209,7 @@ export const duplicateNodes = (
202209
return;
203210
}
204211

205-
const oldOutputId = nodeIdToOutputName(oldNodeId);
212+
const oldOutputId = nodeIdToOutputId(oldNodeId);
206213

207214
if (!graphSpec.outputValues) {
208215
return;
@@ -307,9 +314,9 @@ export const duplicateNodes = (
307314

308315
return newNode;
309316
} else if (originalNode.type === "input") {
310-
const newInputId = nodeIdToInputName(newNodeId);
317+
const newInputName = inputIdToInputName(nodeIdToInputId(newNodeId));
311318
const newInputSpec = updatedInputs.find(
312-
(input) => input.name === newInputId,
319+
(input) => input.name === newInputName,
313320
);
314321

315322
if (!newInputSpec) {
@@ -338,9 +345,9 @@ export const duplicateNodes = (
338345

339346
return newNode;
340347
} else if (originalNode.type === "output") {
341-
const newOutputId = nodeIdToOutputName(newNodeId);
348+
const newOutputName = outputIdToOutputName(nodeIdToOutputId(newNodeId));
342349
const newOutputSpec = updatedOutputs.find(
343-
(output) => output.name === newOutputId,
350+
(output) => output.name === newOutputName,
344351
);
345352

346353
if (!newOutputSpec) {
@@ -408,9 +415,11 @@ export const duplicateNodes = (
408415

409416
updatedGraphSpec.tasks[taskId] = newTaskSpec;
410417
} else if (node.type === "input") {
411-
const inputId = nodeIdToInputName(node.id);
418+
const newInputName = inputIdToInputName(nodeIdToInputId(node.id));
412419

413-
const inputSpec = updatedInputs.find((input) => input.name === inputId);
420+
const inputSpec = updatedInputs.find(
421+
(input) => input.name === newInputName,
422+
);
414423

415424
if (!inputSpec) {
416425
return;
@@ -429,17 +438,17 @@ export const duplicateNodes = (
429438
};
430439

431440
const updatedInputIndex = updatedInputs.findIndex(
432-
(input) => input.name === inputId,
441+
(input) => input.name === newInputName,
433442
);
434443

435444
if (updatedInputIndex !== -1) {
436445
updatedInputs[updatedInputIndex] = newInputSpec;
437446
}
438447
} else if (node.type === "output") {
439-
const outputId = nodeIdToOutputName(node.id);
448+
const newOutputName = outputIdToOutputName(nodeIdToOutputId(node.id));
440449

441450
const outputSpec = updatedOutputs.find(
442-
(output) => output.name === outputId,
451+
(output) => output.name === newOutputName,
443452
);
444453

445454
if (!outputSpec) {
@@ -459,7 +468,7 @@ export const duplicateNodes = (
459468
};
460469

461470
const updatedOutputIndex = updatedOutputs.findIndex(
462-
(output) => output.name === outputId,
471+
(output) => output.name === newOutputName,
463472
);
464473

465474
if (updatedOutputIndex !== -1) {
@@ -518,23 +527,23 @@ function reconfigureConnections(
518527

519528
newArgId = newTaskId;
520529
} else if ("graphInput" in argument) {
521-
const oldInputId = argument.graphInput.inputName;
522-
oldNodeId = inputNameToNodeId(oldInputId);
530+
const oldInputName = argument.graphInput.inputName;
531+
oldNodeId = inputIdToNodeId(inputNameToInputId(oldInputName));
523532

524533
if (!("inputs" in componentSpec)) {
525534
throw new Error("ComponentSpec does not contain inputs.");
526535
}
527536

528537
const inputs = componentSpec.inputs || [];
529-
isExternal = inputs.some((input) => input.name === oldInputId);
538+
isExternal = inputs.some((input) => input.name === oldInputName);
530539

531540
const newNodeId = nodeIdMap[oldNodeId];
532541

533542
if (!newNodeId) {
534543
return reconfigureExternalConnection(taskSpec, argKey, mode);
535544
}
536545

537-
const newInputId = nodeIdToInputName(newNodeId);
546+
const newInputId = nodeIdToInputId(newNodeId);
538547

539548
newArgId = newInputId;
540549
}

0 commit comments

Comments
 (0)