From 6d04f49443780a7a49fa5de9c4e06bab8a83fffd Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 13 Sep 2023 17:50:51 -0300
Subject: [PATCH] fix(reactflowUtils.ts): fix nullability issues and improve
 variable names for better readability refactor(reactflowUtils.ts): update
 targetHandle and sourceHandle to use JSON stringified values for better
 compatibility

---
 src/frontend/src/utils/reactflowUtils.ts | 85 ++++++++++++------------
 1 file changed, 42 insertions(+), 43 deletions(-)

diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 049634306..1fd794140 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -702,66 +702,65 @@ export function ungroupNode(
   groupNode: NodeDataType,
   BaseFlow: ReactFlowJsonObject
 ) {
-  const { template } = groupNode.node;
-  const { flow } = groupNode.node;
-  const gNodes: NodeType[] = flow.data.nodes;
-  const gEdges = flow.data.edges;
+  const { template,flow } = groupNode.node!;
+  const gNodes: NodeType[] = flow!.data!.nodes;
+  const gEdges = flow!.data!.edges;
   //redirect edges to correct proxy node
   let updatedEdges: Edge[] = [];
   BaseFlow.edges.forEach((edge) => {
     let newEdge = _.cloneDeep(edge);
     if (newEdge.target === groupNode.id) {
-      if (newEdge.targetHandle.split("|").length > 3) {
-        let type = newEdge.targetHandle.split("|")[0];
-        let field = newEdge.targetHandle.split("|")[4];
-        let proxy = newEdge.targetHandle.split("|")[3];
-        let node = gNodes.find((n) => n.id === proxy);
-        console.log(node);
+      const targetHandle:targetHandleType = newEdge.data.targetHandle;
+      if (targetHandle.proxy) {
+        let type = targetHandle.type;
+        let field = targetHandle.proxy.field;
+        let proxyId = targetHandle.proxy.id;
+        let inputTypes = targetHandle.inputTypes;
+        let node:NodeType = gNodes.find((n) => n.id === proxyId)!;
         if (node) {
-          newEdge.target = proxy;
-          if (node.type === "groupNode") {
-            newEdge.targetHandle =
-              type +
-              "|" +
-              field +
-              "|" +
-              proxy +
-              "|" +
-              node.data.node.template[field].proxy.id +
-              "|" +
-              node.data.node.template[field].proxy.field;
-          } else {
-            newEdge.targetHandle = type + "|" + field + "|" + proxy;
+          newEdge.target = proxyId;
+          let newTargetHandle: targetHandleType = {
+            fieldName: field,
+            type,
+            id: proxyId}
+          if (node.data.node?.flow) {
+            newTargetHandle.proxy = 
+              {field:node.data.node.template[field].proxy?.field!,
+                id:node.data.node.template[field].proxy?.id!}
+            }
+            if(inputTypes){
+              newTargetHandle.inputTypes = inputTypes;
+            }
+            newEdge.targetHandle = scapedJSONStringfy(newTargetHandle);
           }
-          updatedEdges.push(newEdge);
         }
       }
-    }
     if (newEdge.source === groupNode.id) {
-      const lastNode = _.cloneDeep(findLastNode(flow.data));
-      newEdge.source = lastNode.id;
-      let sourceHandle = newEdge.sourceHandle.split("|");
-      sourceHandle[1] = lastNode.id;
-      newEdge.sourceHandle = sourceHandle.join("|");
-      updatedEdges.push(newEdge);
+      const lastNode = _.cloneDeep(findLastNode(flow!.data!));
+      newEdge.source = lastNode!.id;
+      let newSourceHandle: sourceHandleType = scapeJSONParse(newEdge.sourceHandle!);
+      newSourceHandle.id = lastNode!.id;
+      newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle);
     }
-  });
+    updatedEdges.push(newEdge);
+  });  
+  //update template values
   Object.keys(template).forEach((key) => {
-    let { field, id } = template[key].proxy;
+    let { field, id } = template[key].proxy!;
     let nodeIndex = gNodes.findIndex((n) => n.id === id);
     if (nodeIndex !== -1) {
       let display_name: string;
-      let show = gNodes[nodeIndex].data.node.template[field].show;
-      let advanced = gNodes[nodeIndex].data.node.template[field].advanced;
-      if (gNodes[nodeIndex].data.node.template[field].display_name) {
-        display_name = gNodes[nodeIndex].data.node.template[field].display_name;
+      let show = gNodes[nodeIndex].data.node!.template[field].show;
+      let advanced = gNodes[nodeIndex].data.node!.template[field].advanced;
+      if (gNodes[nodeIndex].data.node!.template[field].display_name) {
+        display_name = gNodes[nodeIndex].data.node!.template[field].display_name;
       } else {
-        display_name = gNodes[nodeIndex].data.node.template[field].name;
+        display_name = gNodes[nodeIndex].data.node!.template[field].name;
       }
-      gNodes[nodeIndex].data.node.template[field] = template[key];
-      gNodes[nodeIndex].data.node.template[field].show = show;
-      gNodes[nodeIndex].data.node.template[field].advanced = advanced;
-      gNodes[nodeIndex].data.node.template[field].display_name = display_name;
+      gNodes[nodeIndex].data.node!.template[field] = template[key];
+      gNodes[nodeIndex].data.node!.template[field].show = show;
+      gNodes[nodeIndex].data.node!.template[field].advanced = advanced;
+      gNodes[nodeIndex].data.node!.template[field].display_name = display_name;
     }
   });