src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -93,6 +93,12 @@ const useFlowStore = create<FlowState>((set, get) => ({
         edgeReconnectSuccessful: true
       });
     },
+    deleteNode: (nodeId: string) => {
+      set({
+        nodes: get().nodes.filter((n) => n.id !== nodeId),
+        edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId)
+      });
+    },
     setNodes: (nodes) => {
       set({nodes});
     },

src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx

@@ -28,6 +28,7 @@ export type FlowState = {
   onReconnect: OnReconnect;
   onReconnectStart: () => void;
   onReconnectEnd: (_: unknown, edge: { id: string }) => void;
+  deleteNode: (nodeId: string) => void;
   setNodes: (nodes: AppNode[]) => void;
   setEdges: (edges: Edge[]) => void;
 };

src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -1,6 +1,7 @@
-import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
+import {Handle, NodeToolbar, Position} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import styles from '../../VisProg.module.css';
+import useFlowStore from "../VisProgStores.tsx";
 
 // Contains the datatypes for the data inside our NodeTypes
 // this has to be improved or adapted to suit our implementation for computing the graph
@@ -27,15 +28,14 @@ type ToolbarProps = {
 };
 
 export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
-  const {setNodes, setEdges} = useReactFlow();
+  const {deleteNode} = useFlowStore();
 
-  const handleDelete = () => {
+  const deleteParentNode = ()=> {
-    setNodes((nds) => nds.filter((n) => n.id !== nodeId));
+    deleteNode(nodeId);
-    setEdges((eds) => eds.filter((e) => e.source !== nodeId && e.target !== nodeId));
+  }
-  };
   return (
     <NodeToolbar>
-      <button className="Node-toolbar__deletebutton" onClick={handleDelete} disabled={!allowDelete}>delete</button>
+      <button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
     </NodeToolbar>);
 }