style: added comments to code and changed name of Sidebar to DndToolbar

BREAKING: renamed Sidebar to DndToolbar.

ref: N25B-114

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -10,11 +10,14 @@ import {
   useState
 } from 'react';
 
-
+// Is used to make sure each subsequent node gets a unique id, so the ReactFlow implementation
+// can distinguish between different nodes.
 let id = 0;
 const getId = () => `dndnode_${id++}`;
 
-
+/**
+ * DraggableNodeProps dictates the type properties of a DraggableNode
+ */
 interface DraggableNodeProps {
   className?: string;
   children: ReactNode;
@@ -22,11 +25,21 @@ interface DraggableNodeProps {
   onDrop: (nodeType: string, position: XYPosition) => void;
 }
 
+/**
+ * Definition of a node inside the drag and drop toolbar,
+ * these nodes require an onDrop function to be supplied
+ * that dictates how the node is created in the graph.
+ *
+ * @param className
+ * @param children
+ * @param nodeType
+ * @param onDrop
+ * @constructor
+ */
 function DraggableNode({className, children, nodeType, onDrop}: DraggableNodeProps) {
   const draggableRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState<XYPosition>({x: 0, y: 0});
 
-
   // @ts-ignore
   useDraggable(draggableRef, {
     position: position,
@@ -54,9 +67,17 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
   );
 }
 
-export function Sidebar() {
+/**
+ * the DndToolbar defines how the drag and drop toolbar component works
+ * and includes the default onDrop behavior through handleNodeDrop
+ * @constructor
+ */
+export function DndToolbar() {
   const {setNodes, screenToFlowPosition} = useReactFlow();
 
+  /**
+   * handleNodeDrop implements the default onDrop behavior
+   */
   const handleNodeDrop = useCallback(
     (nodeType: string, screenPosition: XYPosition) => {
       const flow = document.querySelector('.react-flow');
@@ -120,7 +141,7 @@ export function Sidebar() {
   );
 
   return (
-    <aside style={{
+    <div style={{
       padding: '10px 10px',
       outline: '2.5pt solid black',
       borderRadius: '0pt 0pt 5pt 5pt',
@@ -147,6 +168,6 @@ export function Sidebar() {
           norm Node
         </DraggableNode>
       </div>
-    </aside>
+    </div>
   );
 }

src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx

@@ -2,7 +2,9 @@ import {Handle, NodeToolbar, Position, useReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import '../VisProgUI.css';
 
-// Datatypes for NodeTypes
+// Contains the datatypes for the data inside our NodeTypes
+// this has to be improved or adapted to suit our implementation for computing the graph
+// into a format that is useful for the Control Backend
 
 type defaultNodeData = {
   label: string;