src/pages/VisProgPage/visualProgrammingUI/VisProgUI.css

@@ -1,3 +1,34 @@
+/* editor UI */
+
+.outer-editor-container {
+    margin-inline: auto;
+    display: flex;
+    justify-self: center;
+    padding: 10px;
+    align-items: center;
+    width: 80vw;
+    height: 80vh;
+}
+
+.inner-editor-container {
+    outline-style: solid;
+    border-radius: 10pt;
+    width: 90%;
+    height: 100%;
+}
+
+.dnd-panel {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    background-color: canvas;
+    margin-bottom: 0.5rem;
+    margin-top:auto;
+    width: 50%;
+    height:7%;
+}
+
+/* Node Styles */
+
 .default-node {
     padding: 10px 15px;
     background-color: canvas;

src/pages/VisProgPage/visualProgrammingUI/VisProgUI.tsx

@@ -24,14 +24,20 @@ import type {FlowState} from './VisProgTypes.tsx';
 
 // --| config starting params for flow |--
 
-const nodeTypes = {
+/**
+ * contains the types of all nodes that are available in the editor
+ */
+const NODE_TYPES = {
   start: StartNode,
   end: EndNode,
   phase: PhaseNode,
   norm: NormNode
 };
 
-const defaultEdgeOptions = {
+/**
+ * defines how the default edge looks inside the editor
+ */
+const DEFAULT_EDGE_OPTIONS = {
   type: 'default',
   markerEnd: {
     type: MarkerType.ArrowClosed,
@@ -53,19 +59,24 @@ const selector = (state: FlowState) => ({
 // --| define ReactFlow editor |--
 
 const VisProgUI = () => {
-
+  const {
-    const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd } = useFlowStore(
+    nodes, edges,
-        useShallow(selector),
+    onNodesChange,
-    );
+    onEdgesChange,
+    onConnect,
+    onReconnect,
+    onReconnectStart,
+    onReconnectEnd
+  } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
 
   return (
-        <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '80vh'}}>
+    <div className={'outer-editor-container'}>
-            <div style={{outlineStyle: 'solid', borderRadius: '10pt',width: '90%', height:'100%' }}>
+      <div className={'inner-editor-container'}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
-                    defaultEdgeOptions={defaultEdgeOptions}
+          defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
-                    nodeTypes={nodeTypes}
+          nodeTypes={NODE_TYPES}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onReconnect={onReconnect}
@@ -76,8 +87,8 @@ const VisProgUI = ()=>  {
           fitView
           proOptions={{hideAttribution: true}}
         >
-                    <Panel position="top-center" style={{marginInlineStart: 'auto', marginInlineEnd:'auto',backgroundColor: 'canvas' ,marginBottom: '0.5rem', marginTop:'auto', width: '50%', height:'7%'}}>
+          <Panel position="top-center" className={'dnd-panel'}>
-                        <Sidebar />
+            <Sidebar/> {/* contains the drag and drop panel for nodes */}
           </Panel>
           <Controls/>
           <Background/>
@@ -88,7 +99,8 @@ const VisProgUI = ()=>  {
 };
 
 
-/* --| Places the VisProgUI component inside a ReactFlowProvider
+/**
+ * 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,