chore: cleanup broken tests, add extra documentation, make sure everything is clean and code style isn't inconsistant

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

@@ -47,12 +47,13 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
  * addNode — adds a new node to the flow using the unified class-based system.
  * Keeps numbering logic for phase/norm nodes.
  */
-  function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
+function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
   const { nodes, setNodes } = useFlowStore.getState();
-  const defaultData = NodeDefaults[nodeType]
-
-  if (!defaultData) throw new Error(`Node type '${nodeType}' not found in registry`);
 
+  // Find out if there's any default data about our ndoe
+  const defaultData = NodeDefaults[nodeType] ?? {}
+  
+  // Currently, we find out what the Id is by checking the last node and adding one
   const sameTypeNodes = nodes.filter((node) => node.type === nodeType);
   const nextNumber =
     sameTypeNodes.length > 0
@@ -63,9 +64,9 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
           return Number.isNaN(lastNum) ? sameTypeNodes.length + 1 : lastNum + 1;
         })()
       : 1;
-
   const id = `${nodeType}-${nextNumber}`;
   
+  // Create new node
   const newNode = {
     id: id,
     type: nodeType,
@@ -104,6 +105,7 @@ export function DndToolbar() {
   );
 
 
+  // Map over our default settings to see which of them have their droppable data set to true
   const droppableNodes = Object.entries(NodeDefaults)
   .filter(([, data]) => data.droppable)
   .map(([type, data]) => ({ 
@@ -111,20 +113,16 @@ export function DndToolbar() {
     data 
   }));
 
-  
-
   return (
     <div className={`flex-col gap-lg padding-md ${styles.innerDndPanel}`}>
       <div className="description">
         You can drag these nodes to the pane to create new nodes.
       </div>
       <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
-        {
-          // Maps over all the nodes that are droppable, and puts them in the panel
-        }
+        {/* Maps over all the nodes that are droppable, and puts them in the panel */}
         {droppableNodes.map(({type, data}) => (
           <DraggableNode
-            className={styles[`draggable-node-${type}`]}
+            className={styles[`draggable-node-${type}`]} // Our current style signature for nodes
             nodeType={type}
             onDrop={handleNodeDrop}
           >