fix bug on expand and ungroup that does not update connected edges with proxy

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -227,7 +227,7 @@ export default function ParameterComponent({
             <Handle
               type={left ? "target" : "source"}
               position={left ? Position.Left : Position.Right}
-              id={scapedJSONStringfy(id)}
+              id={proxy?scapedJSONStringfy({...id,proxy}):scapedJSONStringfy(id)}
               isValidConnection={(connection) =>
                 isValidConnection(connection, reactFlowInstance!)
               }

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -71,9 +71,7 @@ export default function GenericNode({
 
   // New useEffect to watch for changes in sseData and update validation status
   useEffect(() => {
-    const relevantData = data.node?.flow
+    const relevantData = sseData[data.id];
-      ? getGroupStatus(data.node.flow, sseData)
-      : sseData[data.id];
     if (relevantData) {
       // Extract validation information from relevantData and update the validationStatus state
       setValidationStatus(relevantData);
@@ -258,7 +256,7 @@ export default function GenericNode({
                         type: data.node!.template[templateField].type,
                         id: data.id,
                         fieldName: templateField,
-                        Proxy: data.node!.template[templateField].Proxy,
+                        proxy: data.node!.template[templateField].proxy,
                       })}
                       data={data}
                       setData={setData}

src/frontend/src/utils/reactflowUtils.ts

@@ -662,7 +662,6 @@ export function generateNodeTemplate(Flow: FlowType) {
 export function generateNodeFromFlow(flow: FlowType,getNodeId:(type:string)=>string): NodeType {
   const { nodes } = flow.data!;
   const outputNode = _.cloneDeep(findLastNode(flow.data!));
-  // console.log(flow)
   const position = getMiddlePoint(nodes);
   let data = _.cloneDeep(flow);
   const id = getNodeId(outputNode?.data.type!)
@@ -750,6 +749,7 @@ export function ungroupNode(
             fieldName: field,
             type,
             id: proxyId,
+            inputTypes: inputTypes
           };
           if (node.data.node?.flow) {
             newTargetHandle.proxy = {
@@ -757,9 +757,6 @@ export function ungroupNode(
               id: node.data.node.template[field].proxy?.id!,
             };
           }
-          if (inputTypes) {
-            newTargetHandle.inputTypes = inputTypes;
-          }
           newEdge.data.targetHandle = newTargetHandle;
           newEdge.targetHandle = scapedJSONStringfy(newTargetHandle);
         }
@@ -775,7 +772,7 @@ export function ungroupNode(
       newEdge.data.sourceHandle = newSourceHandle;
       newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle);
     }
-    if (newEdge.target === groupNode.id || newEdge.source === groupNode.id) {
+    if (edge.target === groupNode.id || edge.source === groupNode.id) {
       updatedEdges.push(newEdge);
     }
   });
@@ -819,9 +816,8 @@ export function expandGroupNode(
   groupNode: NodeDataType,
   ReactFlowInstance: ReactFlowInstance
 ) {
-  const { template } = _.cloneDeep(groupNode.node!);
+  const { template,flow } = _.cloneDeep(groupNode.node!);
-  const { flow } = groupNode.node!;
+  const gNodes: NodeType[] = flow?.data?.nodes!;
-  const gNodes: NodeType[] = _.cloneDeep(flow!.data!.nodes);
   const gEdges = flow!.data!.edges;
   //redirect edges to correct proxy node
   let updatedEdges: Edge[] = [];
@@ -841,6 +837,7 @@ export function expandGroupNode(
             fieldName: field,
             type,
             id: proxyId,
+            inputTypes: inputTypes
           };
           if (node.data.node?.flow) {
             newTargetHandle.proxy = {
@@ -848,9 +845,6 @@ export function expandGroupNode(
               id: node.data.node.template[field].proxy?.id!,
             };
           }
-          if (inputTypes) {
-            newTargetHandle.inputTypes = inputTypes;
-          }
           newEdge.data.targetHandle = newTargetHandle;
           newEdge.targetHandle = scapedJSONStringfy(newTargetHandle);
         }
@@ -866,7 +860,7 @@ export function expandGroupNode(
       newEdge.data.sourceHandle = newSourceHandle;
       newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle);
     }
-    if (newEdge.target === groupNode.id || newEdge.source === groupNode.id) {
+    if (edge.target === groupNode.id || edge.source === groupNode.id) {
       updatedEdges.push(newEdge);
     }
   });
@@ -875,6 +869,7 @@ export function expandGroupNode(
     let { field, id } = template[key].proxy!;
     let nodeIndex = gNodes.findIndex((n) => n.id === id);
     if (nodeIndex !== -1) {
+      let proxy: { id: string; field: string } | undefined;
       let display_name: string;
       let show = gNodes[nodeIndex].data.node!.template[field].show;
       let advanced = gNodes[nodeIndex].data.node!.template[field].advanced;
@@ -884,11 +879,20 @@ export function expandGroupNode(
       } else {
         display_name = gNodes[nodeIndex].data.node!.template[field].name;
       }
+      if(gNodes[nodeIndex].data.node!.template[field].proxy){
+        proxy = gNodes[nodeIndex].data.node!.template[field].proxy;
+      }
       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].selected = false;
+      if(proxy){
+        gNodes[nodeIndex].data.node!.template[field].proxy = proxy;
+      }
+      else{
+        delete gNodes[nodeIndex].data.node!.template[field].proxy
+      }
     }
   });