feat: repositioned Node sidebar to make use of the panel component provided by ReactFlow.

ref: N25B-114

src/visualProgrammingUI/VisProgUI.tsx

@@ -15,7 +15,7 @@ import {
     addEdge,
     MarkerType,
     type Edge,
-    type Connection,
+    type Connection, Panel,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {
@@ -27,6 +27,9 @@ import {
 
 import { Sidebar } from './components/DragDropSidebar.tsx';
 
+// --| config starting params for flow |--
+
+
 const nodeTypes = {
     start: StartNode,
     end: EndNode,
@@ -34,6 +37,8 @@ const nodeTypes = {
     norm: NormNode
 };
 
+
+
 const initialNodes = [
     {
         id: 'start',
@@ -54,6 +59,7 @@ const initialNodes = [
         data: {label: 'End'}
     }
 ];
+
 const initialEdges = [{id: 'start-end', source: 'start', target: 'end'}];
 
 const defaultEdgeOptions = {
@@ -64,30 +70,36 @@ const defaultEdgeOptions = {
     },
 };
 
+// --| 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],
     );
 
+
+    // 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]);
 
@@ -109,18 +121,25 @@ const VisProgUI = ()=>  {
                     fitView
                     proOptions={{hideAttribution: true }}
                 >
+                    <Panel position="center-right" style={{marginInlineStart: 'auto', marginInlineEnd:'0.5em',backgroundColor: 'canvas' ,marginBottom: 'auto', marginTop:'auto', width: '20%'}}>
+                        <Sidebar />
+                    </Panel>
                     <Controls />
                     <Background />
                 </ReactFlow>
             </div>
-            <div style={{width: '20%', height: '100%'}}>
-                <Sidebar />
-            </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,
+ * thus facilitating the addition of node specific functions inside their node definitions
+ */
 function VisualProgrammingUI(){
     return (
         <ReactFlowProvider>