refactor(tabsContext.tsx): rename processFlowEdges and processFlowNodes functions to processDataFromFlow to improve clarity and consistency

refactor(tabsContext.tsx): remove console.log statement for old edges
refactor(tabsContext.tsx): add comments to indicate updating edges colors and baseclasses in edges
refactor(tabsContext.tsx): add comments to indicate updating baseclasses in edges
refactor(tabsContext.tsx): add comments to indicate adding animation to text type edges
refactor(tabsContext.tsx): update updateIds function to handle GroupNode type nodes
refactor(reactflowUtils.ts): update updateIds function to handle GroupNode type nodes
refactor(reactflowUtils.ts): update updateIds function to handle sourceHandle and targetHandle ids in edges

src/frontend/src/contexts/tabsContext.tsx

@@ -168,8 +168,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         if (!flow.data) {
           return;
         }
-        processFlowEdges(flow);
+        processDataFromFlow(flow, false);
-        processFlowNodes(flow);
       } catch (e) {}
     });
   }
@@ -177,10 +176,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   function processFlowEdges(flow: FlowType) {
     if (!flow.data || !flow.data.edges) return;
     if (checkOldEdgesHandles(flow.data.edges)) {
-      console.log("old edges");
       const newEdges = updateEdgesHandleIds(flow.data);
       flow.data.edges = newEdges;
     }
+    //update edges colors
     flow.data.edges.forEach((edge) => {
       edge.className = "";
       edge.style = { stroke: "#555" };
@@ -208,6 +207,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       if (Object.keys(template["template"]).length > 0) {
         updateDisplay_name(node, template);
         updateNodeBaseClasses(node, template);
+        //update baseclasses in edges
         updateNodeEdges(flow, node, template);
         updateNodeDescription(node, template);
         updateNodeTemplate(node, template);
@@ -523,14 +523,15 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const processDataFromFlow = (flow: FlowType) => {
+  const processDataFromFlow = (flow: FlowType, refreshIds = true) => {
     let data = flow?.data ? flow.data : null;
     if (data) {
       processFlowEdges(flow);
       processFlowNodes(flow);
+      //add animation to text type edges
       updateEdges(data.edges);
-      updateNodes(data.nodes, data.edges);
+      // updateNodes(data.nodes, data.edges);
-      updateIds(data, getNodeId); // Assuming updateIds is defined elsewhere
+      if (refreshIds) updateIds(data, getNodeId); // Assuming updateIds is defined elsewhere
     }
 
     return data;

src/frontend/src/utils/reactflowUtils.ts

@@ -163,7 +163,7 @@ export function updateIds(
 
   newFlow.nodes.forEach((node: NodeType) => {
     // Generate a unique node ID
-    let newId = getNodeId(node.data.type);
+    let newId = getNodeId(node.data.node?.flow ? "GroupNode" : node.data.type);
     idsMap[node.id] = newId;
     node.id = newId;
     node.data.id = newId;
@@ -180,6 +180,9 @@ export function updateIds(
       ...sourceHandleObject,
       id: edge.source,
     });
+    if (edge.data?.sourceHandle?.id) {
+      edge.data.sourceHandle.id = edge.source;
+    }
     const targetHandleObject: targetHandleType = scapeJSONParse(
       edge.targetHandle!
     );
@@ -187,6 +190,9 @@ export function updateIds(
       ...targetHandleObject,
       id: edge.target,
     });
+    if (edge.data?.targetHandle?.id) {
+      edge.data.targetHandle.id = edge.target;
+    }
     edge.id =
       "reactflow__edge-" +
       edge.source +