feat: Updated editor layout to make use of ReactFlow Panel Components

moved the draggable node collection inside the editor and attached it to a panel component inside the editor.

also modified the css by creating seperate classes for the draggable nodes inside the ui element

ref: N25B-114

src/visualProgrammingUI/VisProgUI.css

@@ -37,3 +37,43 @@
     outline: red solid 2pt;
     filter: drop-shadow(0 0 0.25rem red);
 }
+
+.draggable-node {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: black solid 2pt;
+    filter: drop-shadow(0 0 0.75rem black);
+}
+
+.draggable-node__norm {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: forestgreen solid 2pt;
+    filter: drop-shadow(0 0 0.25rem forestgreen);
+}
+
+.draggable-node__phase {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: dodgerblue solid 2pt;
+    filter: drop-shadow(0 0 0.25rem dodgerblue);
+}
+
+.draggable-node__start {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: orange solid 2pt;
+    filter: drop-shadow(0 0 0.25rem orange);
+}
+
+.draggable-node__end {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: red solid 2pt;
+    filter: drop-shadow(0 0 0.25rem red);
+}

src/visualProgrammingUI/VisProgUI.tsx

@@ -104,8 +104,8 @@ const VisProgUI = ()=>  {
     }, [setEdges]);
 
     return (
-        <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '60vh'}}>
+        <div style={{marginInline: 'auto',display: 'flex',justifySelf: 'center', padding:'10px', alignItems: 'center', width: '80vw', height: '80vh'}}>
-            <div style={{outlineStyle: 'solid', borderRadius: '10pt', marginInline: '1em',width: '70%', height:'100%' }}>
+            <div style={{outlineStyle: 'solid', borderRadius: '10pt',width: '90%', height:'100%' }}>
                 <ReactFlow
                     nodes={nodes}
                     edges={edges}
@@ -121,7 +121,7 @@ const VisProgUI = ()=>  {
                     fitView
                     proOptions={{hideAttribution: true }}
                 >
-                    <Panel position="center-right" style={{marginInlineStart: 'auto', marginInlineEnd:'0.5em',backgroundColor: 'canvas' ,marginBottom: 'auto', marginTop:'auto', width: '20%'}}>
+                    <Panel position="top-center" style={{marginInlineStart: 'auto', marginInlineEnd:'auto',backgroundColor: 'canvas' ,marginBottom: '0.5rem', marginTop:'auto', width: '50%', height:'7%'}}>
                         <Sidebar />
                     </Panel>
                     <Controls />

src/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -48,7 +48,7 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
     });
 
     return (
-        <div className={className === "default" ? "default-node" :  "default-node" + "__" + className} ref={draggableRef}>
+        <div className={className === "default" ? "draggable-node" :  "draggable-node" + "__" + className} ref={draggableRef}>
             {children}
         </div>
     );
@@ -120,16 +120,18 @@ export function Sidebar() {
     );
 
     return (
-        <aside style={{padding: '10px 10px',outline: '2.5pt solid black',borderRadius: '5pt', borderColor:'dimgrey',  display:'flex', flexDirection: 'column', gap: '1rem'}}>
+        <aside style={{padding: '10px 10px',outline: '2.5pt solid black',borderRadius: '0pt 0pt 5pt 5pt', borderColor:'dimgrey', backgroundColor:'canvas',  display:'flex', flexDirection: 'column', gap: '1rem'}}>
             <div className="description">
                 You can drag these nodes to the pane to create new nodes.
             </div>
-            <DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
+            <div className="DraggableNodeContainer" style={{backgroundColor:'canvas', display: 'flex', flexDirection: 'row', gap: '1rem', justifyContent: 'center'}}>
-                phase Node
+                <DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
-            </DraggableNode>
+                    phase Node
-            <DraggableNode className="norm" nodeType="norm" onDrop={handleNodeDrop}>
+                </DraggableNode>
-                norm Node
+                <DraggableNode className="norm" nodeType="norm" onDrop={handleNodeDrop}>
-            </DraggableNode>
+                    norm Node
+                </DraggableNode>
+            </div>
         </aside>
     );
 }