feat: moved the state handling logic for VisProgUI to a Zustand store

all functional logic and state is now contained within a single Zustand store, and removed from the editor component definition

ref: N25B-162

src/visualProgrammingUI/VisProgUI.tsx

@@ -1,21 +1,13 @@
 import './VisProgUI.css'
 
-import {
-    useCallback,
-    useRef
-} from 'react';
+
 import {
     Background,
     Controls,
     ReactFlow,
     ReactFlowProvider,
-    useNodesState,
-    useEdgesState,
-    reconnectEdge,
-    addEdge,
     MarkerType,
-    type Edge,
-    type Connection, Panel,
+    Panel,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {
@@ -27,6 +19,10 @@ import {
 
 import { Sidebar } from './components/DragDropSidebar.tsx';
 
+import useStore from "./VisProgStores.tsx";
+import {useShallow} from "zustand/react/shallow";
+import type {FlowState} from "./VisProgTypes.tsx";
+
 // --| config starting params for flow |--
 
 
@@ -39,28 +35,7 @@ const nodeTypes = {
 
 
 
-const initialNodes = [
-    {
-        id: 'start',
-        type: 'start',
-        position: {x: 0, y: 0},
-        data: {label: 'start'}
-    },
-    {
-        id: 'genericPhase',
-        type: 'phase',
-        position: {x: 0, y: 150},
-        data: {label: 'Generic Phase', number: 1},
-    },
-    {
-        id: 'end',
-        type: 'end',
-        position: {x: 0, y: 300},
-        data: {label: 'End'}
-    }
-];
 
-const initialEdges = [{id: 'start-end', source: 'start', target: 'end'}];
 
 const defaultEdgeOptions = {
     type: 'default',
@@ -70,38 +45,27 @@ const defaultEdgeOptions = {
     },
 };
 
+const selector = (state: FlowState) => ({
+    nodes: state.nodes,
+    edges: state.edges,
+    onNodesChange: state.onNodesChange,
+    onEdgesChange: state.onEdgesChange,
+    onConnect: state.onConnect,
+    onReconnectStart: state.onReconnectStart,
+    onReconnectEnd: state.onReconnectEnd,
+    onReconnect: state.onReconnect
+});
+
 // --| define ReactFlow editor |--
 
 const VisProgUI = ()=>  {
-    const edgeReconnectSuccessful = useRef(true);
-    const [nodes, , onNodesChange] = useNodesState(initialNodes);
-    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-    // handles connection of newly created edges
-    const onConnect = useCallback(
-        (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
-        [setEdges],
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useStore(
+        useShallow(selector),
     );
 
+    // handles connection of newly created edges
 
-    // Handles initiation of reconnection of edges that are manually disconnected from a node
-    const onReconnectStart = useCallback(() => {
-        edgeReconnectSuccessful.current = false;
-    }, []);
-
-    // handles attempted reconnections of a previously disconnected edge
-    const onReconnect = useCallback((oldEdge: Edge, newConnection: Connection) => {
-        edgeReconnectSuccessful.current = true;
-        setEdges((els) => reconnectEdge(oldEdge, newConnection, els));
-    }, [setEdges]);
-
-    // Drops the edge from the set of edges, removing it from the flow, if no successful reconnection occurred
-    const onReconnectEnd = useCallback((_: unknown, edge: { id: string; }) => {
-        if (!edgeReconnectSuccessful.current) {
-            setEdges((eds) => eds.filter((e) => e.id !== edge.id));
-        }
-        edgeReconnectSuccessful.current = true;
-    }, [setEdges]);
 
     return (
         <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '80vh'}}>
@@ -113,11 +77,11 @@ const VisProgUI = ()=>  {
                     onNodesChange={onNodesChange}
                     onEdgesChange={onEdgesChange}
                     nodeTypes={nodeTypes}
-                    snapToGrid
                     onReconnect={onReconnect}
                     onReconnectStart={onReconnectStart}
                     onReconnectEnd={onReconnectEnd}
                     onConnect={onConnect}
+                    snapToGrid
                     fitView
                     proOptions={{hideAttribution: true }}
                 >