style: moved all logic from VisProgUI.tsx to VisProg.tsx and the css from VisProgUI.module.css to VisProg.module.css.

made code easier to navigate, by removing an unnecessary set of files through combining logic into a mostly empty file that is suitable for hosting said logic.

BREAKING: removed VisProgUI.module.css and removed VisProgUI.tsx, logic is now in VisProg.module.css and VisProg.tsx respectively

ref: N25B-114

src/pages/VisProgPage/VisProg.tsx

@@ -1,14 +1,137 @@
-import VisProgUI from "./visualProgrammingUI/VisProgUI.tsx";
+import {
+  Background,
+  Controls,
+  Panel,
+  ReactFlow,
+  ReactFlowProvider,
+  MarkerType,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import {useShallow} from 'zustand/react/shallow';
+
+import {
+  StartNode,
+  EndNode,
+  PhaseNode,
+  NormNode
+} from './visualProgrammingUI/components/NodeDefinitions.tsx';
+import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
+import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
+import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
+import styles from './VisProg.module.css'
+
+// --| config starting params for flow |--
+
+/**
+ * contains the types of all nodes that are available in the editor
+ */
+const NODE_TYPES = {
+  start: StartNode,
+  end: EndNode,
+  phase: PhaseNode,
+  norm: NormNode
+};
+
+/**
+ * defines how the default edge looks inside the editor
+ */
+const DEFAULT_EDGE_OPTIONS = {
+  type: 'default',
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    color: '#505050',
+  },
+};
 
 
-//this is your css file where you can style your buttons and such
-//you can still use css parts from App.css, but also overwrite them
+/**
+ * defines what functions in the FlowState store map to which names,
+ * @param state
+ */
+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 |--
+
+/**
+ * Defines the ReactFlow visual programming editor component
+ * any implementations of editor logic should be encapsulated where possible
+ * so the Component definition stays as readable as possible
+ * @constructor
+ */
+const VisProgUI = () => {
+  const {
+    nodes, edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    onReconnect,
+    onReconnectStart,
+    onReconnectEnd
+  } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
+
+  return (
+    <div className={styles.outerEditorContainer}>
+      <div className={styles.innerEditorContainer}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
+          nodeTypes={NODE_TYPES}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onReconnect={onReconnect}
+          onReconnectStart={onReconnectStart}
+          onReconnectEnd={onReconnectEnd}
+          onConnect={onConnect}
+          snapToGrid
+          fitView
+          proOptions={{hideAttribution: true}}
+        >
+          <Panel position="top-center" className={styles.dndPanel}>
+            <DndToolbar/> {/* contains the drag and drop panel for nodes */}
+          </Panel>
+          <Controls/>
+          <Background/>
+        </ReactFlow>
+      </div>
+    </div>
+  );
+};
 
 
+/**
+ * Places the VisProgUI component inside a ReactFlowProvider
+ *
+ * Wrapping the editor component inside a ReactFlowProvider
+ * allows us to access and interact with the components inside the editor, outside the editor definition,
+ * thus facilitating the addition of node specific functions inside their node definitions
+ */
+function VisualProgrammingUI() {
+  return (
+    <ReactFlowProvider>
+      <VisProgUI/>
+    </ReactFlowProvider>
+  );
+}
+
+/**
+ * houses the entire page, so also UI elements
+ * that are not a part of the Visual Programming UI
+ * @constructor
+ */
 function VisProgPage() {
   return (
     <>
-      <VisProgUI/>
+      <VisualProgrammingUI/>
     </>
   )
 }