update group node function to reconnect edges when create groupNode

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -24,6 +24,7 @@ import {
   generateNodeFromFlow,
   getNodeId,
   isValidConnection,
+  reconnectEdges,
   validateSelection,
 } from "../../../../utils/reactflowUtils";
 import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
@@ -379,16 +380,21 @@ export default function Page({
                       if (
                         validateSelection(lastSelection!, edges).length === 0
                       ) {
-                        const { newFlow } = generateFlow(
+                        const { newFlow, removedEdges } = generateFlow(
                           lastSelection!,
                           nodes,
                           edges,
                           getRandomName()
                         );
+                        console.log("removed edges", removedEdges);
                         const newGroupNode = generateNodeFromFlow(
                           newFlow,
                           getNodeId
                         );
+                        const newEdges = reconnectEdges(
+                          newGroupNode,
+                          removedEdges
+                        );
                         setNodes((oldNodes) => [
                           ...oldNodes.filter(
                             (oldNodes) =>
@@ -399,16 +405,17 @@ export default function Page({
                           ),
                           newGroupNode,
                         ]);
-                        setEdges((oldEdges) =>
+                        setEdges((oldEdges) => [
-                          oldEdges.filter(
+                          ...oldEdges.filter(
                             (oldEdge) =>
                               !lastSelection!.nodes.some(
                                 (selectionNode) =>
                                   selectionNode.id === oldEdge.target ||
                                   selectionNode.id === oldEdge.source
                               )
-                          )
+                          ),
-                        );
+                          ...newEdges,
+                        ]);
                       } else {
                         setErrorData({
                           title: "Invalid selection",

src/frontend/src/utils/reactflowUtils.ts

@@ -600,8 +600,7 @@ export function generateFlow(
   const newFlowData = { nodes, edges, viewport: { zoom: 1, x: 0, y: 0 } };
   const uid = new ShortUniqueId({ length: 5 });
   /*	remove edges that are not connected to selected nodes on both ends
-		in future we can save this edges to when ungrouping reconect to the old nodes
+   */
-	*/
   newFlowData.edges = selection.edges.filter(
     (edge) =>
       selection.nodes.some((node) => node.id === edge.target) &&
@@ -622,12 +621,50 @@ export function generateFlow(
   // in the future we can use a better aproach using a set
   return {
     newFlow,
-    removedEdges: selection.edges.filter(
+    removedEdges: edges.filter(
-      (edge) => !newFlowData.edges.includes(edge)
+      (edge) =>
+        (selection.nodes.some((node) => node.id === edge.target) ||
+          selection.nodes.some((node) => node.id === edge.source)) &&
+        newFlowData.edges.every((e) => e.id !== edge.id)
     ),
   };
 }
 
+export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) {
+  console.log("excluded", excludedEdges);
+  let newEdges = cloneDeep(excludedEdges);
+  if (!groupNode.data.node!.flow) return [];
+  const { nodes, edges } = groupNode.data.node!.flow!.data!;
+  const lastNode = findLastNode(groupNode.data.node!.flow!.data!);
+  newEdges.forEach((edge) => {
+    if (lastNode && edge.source === lastNode.id) {
+      edge.source = groupNode.id;
+      let newSourceHandle: sourceHandleType = scapeJSONParse(
+        edge.sourceHandle!
+      );
+      newSourceHandle.id = groupNode.id;
+      edge.sourceHandle = scapedJSONStringfy(newSourceHandle);
+      edge.data.sourceHandle = newSourceHandle;
+    }
+    if (nodes.some((node) => node.id === edge.target)) {
+      const targetNode = nodes.find((node) => node.id === edge.target)!;
+      console.log("targetNode", targetNode);
+      const targetHandle: targetHandleType = scapeJSONParse(edge.targetHandle!);
+      console.log("targetHandle", targetHandle);
+      const proxy = { id: targetNode.id, field: targetHandle.fieldName };
+      let newTargetHandle: targetHandleType = cloneDeep(targetHandle);
+      newTargetHandle.id = groupNode.id;
+      newTargetHandle.proxy = proxy;
+      edge.target = groupNode.id;
+      newTargetHandle.fieldName = targetHandle.fieldName + "_" + targetNode.id;
+      edge.targetHandle = scapedJSONStringfy(newTargetHandle);
+      edge.data.targetHandle = newTargetHandle;
+    }
+  });
+  console.log(newEdges);
+  return newEdges;
+}
+
 export function filterFlow(
   selection: OnSelectionChangeParams,
   setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,