src/visualProgrammingUI/VisProgStores.tsx

@@ -38,7 +38,7 @@ const initialEdges = [
 ];
 
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
-const useStore = create<FlowState>((set, get) => ({
+const useFlowStore = create<FlowState>((set, get) => ({
     nodes: initialNodes,
     edges: initialEdges,
     edgeReconnectSuccessful: true,
@@ -52,6 +52,7 @@ const useStore = create<FlowState>((set, get) => ({
             edges: applyEdgeChanges(changes, get().edges)
         });
     },
+    // handles connection of newly created edges
     onConnect: (connection) => {
         set({
             edges: addEdge(connection, get().edges)
@@ -87,6 +88,7 @@ const useStore = create<FlowState>((set, get) => ({
     setEdges: (edges) => {
         set({ edges });
     },
-}));
+}),
+);
 
-export default useStore;
+export default useFlowStore;

src/visualProgrammingUI/VisProgUI.tsx

@@ -19,7 +19,7 @@ import {
 
 import { Sidebar } from './components/DragDropSidebar.tsx';
 
-import useStore from "./VisProgStores.tsx";
+import useFlowStore from "./VisProgStores.tsx";
 import {useShallow} from "zustand/react/shallow";
 import type {FlowState} from "./VisProgTypes.tsx";
 
@@ -33,10 +33,6 @@ const nodeTypes = {
     norm: NormNode
 };
 
-
-
-
-
 const defaultEdgeOptions = {
     type: 'default',
     markerEnd: {
@@ -60,13 +56,10 @@ const selector = (state: FlowState) => ({
 
 const VisProgUI = ()=>  {
 
-    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useStore(
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useFlowStore(
         useShallow(selector),
     );
 
-    // handles connection of newly created edges
-
-
     return (
         <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '80vh'}}>
             <div style={{outlineStyle: 'solid', borderRadius: '10pt',width: '90%', height:'100%' }}>