diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx index 205ed7b1..84c31996 100644 --- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx +++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx @@ -317,7 +317,7 @@ function FlowRenderer({ newNodes.push(node); if (previous) { const newEdge = { - id: `edge-${previous}-${id}`, + id: nanoid(), type: "edgeWithAddButton", source: previous, target: id, @@ -329,7 +329,7 @@ function FlowRenderer({ } if (next) { const newEdge = { - id: `edge-${id}-${next}`, + id: nanoid(), type: connectingEdgeType, source: id, target: next, diff --git a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts index d8384bba..79be6e0b 100644 --- a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts +++ b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts @@ -376,7 +376,10 @@ function getElements(blocks: Array): { const nodes: Array = []; const edges: Array = []; - data.forEach((d) => { + const startNodeId = nanoid(); + nodes.push(startNode(startNodeId)); + + data.forEach((d, index) => { const node = convertToNode( { id: d.id, @@ -388,6 +391,9 @@ function getElements(blocks: Array): { if (d.previous) { edges.push(edgeWithAddButton(d.previous, d.id)); } + if (index === 0) { + edges.push(edgeWithAddButton(startNodeId, d.id)); + } }); const loopBlocks = data.filter((d) => d.block.block_type === "for_loop"); @@ -411,18 +417,15 @@ function getElements(blocks: Array): { } }); - const startNodeId = nanoid(); const adderNodeId = nanoid(); - if (nodes.length === 0) { - nodes.push(startNode(startNodeId)); + if (data.length === 0) { nodes.push(nodeAdderNode(adderNodeId)); edges.push(defaultEdge(startNodeId, adderNodeId)); } else { const firstNode = data.find( (d) => d.previous === null && d.parentId === null, ); - nodes.push(startNode(startNodeId)); edges.push(edgeWithAddButton(startNodeId, firstNode!.id)); const lastNode = data.find((d) => d.next === null && d.parentId === null)!; edges.push(defaultEdge(lastNode.id, adderNodeId));