From 3a185d915db48eef3141be5ac8cb325b6dd5274a Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 2 Aug 2023 22:31:47 -0300
Subject: [PATCH] fix(reactflowUtils.ts): import Edge from reactflow to fix
 type error refactor(reactflowUtils.ts): update updateIds function to handle
 changes in edge sourceHandle and targetHandle properties

---
 src/frontend/src/utils/reactflowUtils.ts | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index f9036ba13..2a264a8b9 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { Connection, ReactFlowInstance } from "reactflow";
+import { Connection, Edge, ReactFlowInstance } from "reactflow";
 import { APITemplateType } from "../types/api";
 import {
   FlowType,
@@ -142,19 +142,13 @@ export function updateIds(newFlow, getNodeId) {
     // Add the new node to the list of nodes in state
   });
 
-  newFlow.edges.forEach((e) => {
+  newFlow.edges.forEach((e: Edge) => {
     e.source = idsMap[e.source];
     e.target = idsMap[e.target];
-    let sourceHandleSplitted = e.sourceHandle.split("|");
-    e.sourceHandle =
-      sourceHandleSplitted[0] +
-      "|" +
-      e.source +
-      "|" +
-      sourceHandleSplitted.slice(2).join("|");
-    let targetHandleSplitted = e.targetHandle.split("|");
-    e.targetHandle =
-      targetHandleSplitted.slice(0, -1).join("|") + "|" + e.target;
+    const sourceHandleObject: sourceHandleType = JSON.parse(e.sourceHandle);
+    e.sourceHandle = JSON.stringify({ ...sourceHandleObject, id: e.source });
+    const targetHandleObject: targetHandleType = JSON.parse(e.targetHandle);
+    e.targetHandle = JSON.stringify({ ...targetHandleObject, id: e.target });
     e.id =
       "reactflow__edge-" +
       e.source +