Fixed delete not updating node internal

src/frontend/src/contexts/typesContext.tsx

@@ -6,12 +6,13 @@ import {
   useEffect,
   useState,
 } from "react";
-import { Edge, Node, ReactFlowInstance } from "reactflow";
+import { ReactFlowInstance } from "reactflow";
 import { getAll, getHealth } from "../controllers/API";
 import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
 import { alertContext } from "./alertContext";
 import { AuthContext } from "./authContext";
+import { undoRedoContext } from "./undoRedoContext";
 
 //context to share types adn functions from nodes to flow
 
@@ -43,6 +44,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
   const [fetchError, setFetchError] = useState(false);
   const { setLoading } = useContext(alertContext);
   const { getAuthentication } = useContext(AuthContext);
+  const { takeSnapshot } = useContext(undoRedoContext);
   const [getFilterEdge, setFilterEdge] = useState([]);
 
   useEffect(() => {
@@ -98,31 +100,27 @@ export function TypesProvider({ children }: { children: ReactNode }) {
   }
 
   function deleteNode(idx: string | Array<string>) {
-    reactFlowInstance!.setNodes(
-      reactFlowInstance!
-        .getNodes()
-        .filter((node: Node) =>
-          typeof idx === "string" ? node.id !== idx : !idx.includes(node.id)
-        )
-    );
-    reactFlowInstance!.setEdges(
-      reactFlowInstance!
-        .getEdges()
-        .filter((edge) =>
-          typeof idx === "string"
-            ? edge.source !== idx && edge.target !== idx
-            : !idx.includes(edge.source) && !idx.includes(edge.target)
-        )
-    );
+    takeSnapshot();
+    if (reactFlowInstance === null) return;
+    const edges = reactFlowInstance!
+      .getEdges()
+      .filter((edge) =>
+        typeof idx === "string"
+          ? edge.source == idx || edge.target == idx
+          : idx.includes(edge.source) || idx.includes(edge.target)
+      );
+    reactFlowInstance!.deleteElements({
+      nodes:
+        typeof idx === "string" ? [{ id: idx }] : idx.map((id) => ({ id })),
+      edges,
+    });
   }
   function deleteEdge(idx: string | Array<string>) {
-    reactFlowInstance!.setEdges(
-      reactFlowInstance!
-        .getEdges()
-        .filter((edge: Edge) =>
-          typeof idx === "string" ? edge.id !== idx : !idx.includes(edge.id)
-        )
-    );
+    takeSnapshot();
+    reactFlowInstance!.deleteElements({
+      edges:
+        typeof idx === "string" ? [{ id: idx }] : idx.map((id) => ({ id })),
+    });
   }
 
   return (

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

@@ -13,7 +13,6 @@ import ReactFlow, {
   Controls,
   Edge,
   EdgeChange,
-  Node,
   NodeChange,
   NodeDragHandler,
   OnEdgesDelete,
@@ -377,21 +376,6 @@ export default function Page({
     };
   }, []);
 
-  const onDelete = useCallback(
-    (mynodes: Node[]) => {
-      takeSnapshot();
-      setEdges(
-        edges.filter(
-          (edge) =>
-            !mynodes.some(
-              (node) => edge.source === node.id || edge.target === node.id
-            )
-        )
-      );
-    },
-    [takeSnapshot, edges, setEdges]
-  );
-
   const onEdgeUpdateStart = useCallback(() => {
     edgeUpdateSuccessful.current = false;
   }, []);
@@ -482,7 +466,6 @@ export default function Page({
                   onDragOver={onDragOver}
                   onDrop={onDrop}
                   onSelectionChange={onSelectionChange}
-                  onNodesDelete={onDelete}
                   deleteKeyCode={[]}
                   className="theme-attribution"
                   minZoom={0.01}