Fix code formatting and update dependencies

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

@@ -110,7 +110,15 @@ export default function NodeToolbarComponent({
         break;
       case "ungroup":
         takeSnapshot();
-        expandGroupNode(data.id, updateFlowPosition(position, data.node?.flow!), data.node!.template, nodes, edges, setNodes, setEdges);
+        expandGroupNode(
+          data.id,
+          updateFlowPosition(position, data.node?.flow!),
+          data.node!.template,
+          nodes,
+          edges,
+          setNodes,
+          setEdges
+        );
         break;
       case "override":
         setShowOverrideModal(true);

src/frontend/src/stores/flowsManagerStore.ts

@@ -1,4 +1,5 @@
 import { AxiosError } from "axios";
+import { cloneDeep } from "lodash";
 import { Edge, Node, Viewport, XYPosition } from "reactflow";
 import { create } from "zustand";
 import {
@@ -24,7 +25,6 @@ import useAlertStore from "./alertStore";
 import { useDarkStore } from "./darkStore";
 import useFlowStore from "./flowStore";
 import { useTypesStore } from "./typesStore";
-import { cloneDeep } from "lodash";
 
 let saveTimeoutId: NodeJS.Timeout | null = null;
 
@@ -330,7 +330,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     const currentFlowId = get().currentFlowId;
     // push the current graph to the past state
     const flowStore = useFlowStore.getState();
-    const newState = {nodes: cloneDeep(flowStore.nodes), edges: cloneDeep(flowStore.edges)};
+    const newState = {
+      nodes: cloneDeep(flowStore.nodes),
+      edges: cloneDeep(flowStore.edges),
+    };
     const pastLength = past[currentFlowId]?.length ?? 0;
     if (
       pastLength > 0 &&

src/frontend/src/utils/reactflowUtils.ts

@@ -653,13 +653,19 @@ export function updateFlowPosition(NewPosition: XYPosition, flow: FlowType) {
     x: NewPosition.x - middlePoint.x,
     y: NewPosition.y - middlePoint.y,
   };
-  return {...flow, data: {...flow.data!, nodes: flow.data!.nodes.map((node) => ({
+  return {
+    ...flow,
+    data: {
+      ...flow.data!,
+      nodes: flow.data!.nodes.map((node) => ({
         ...node,
         position: {
           x: node.position.x + deltaPosition.x,
           y: node.position.y + deltaPosition.y,
         },
-  }))}};
+      })),
+    },
+  };
 }
 
 export function concatFlows(
@@ -952,7 +958,7 @@ export function expandGroupNode(
   nodes: Node[],
   edges: Edge[],
   setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
 ) {
   const idsMap = updateIds(flow!.data!);
   updateProxyIdsOnTemplate(template, idsMap);
@@ -1037,14 +1043,9 @@ export function expandGroupNode(
     }
   });
 
-  const filteredNodes = [
+  const filteredNodes = [...nodes.filter((n) => n.id !== id), ...gNodes];
-    ...nodes.filter((n) => n.id !== id),
-    ...gNodes,
-  ];
   const filteredEdges = [
-    ...edges.filter(
+    ...edges.filter((e) => e.target !== id && e.source !== id),
-      (e) => e.target !== id && e.source !== id
-    ),
     ...gEdges,
     ...updatedEdges,
   ];