docs: create-and-check-documentation

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

@@ -6,7 +6,12 @@ import styles from '../../VisProg.module.css';
 import { NodeDefaults, type NodeTypes } from '../NodeRegistry'
 
 /**
- * DraggableNodeProps dictates the type properties of a DraggableNode
+ * Props for a draggable node within the drag-and-drop toolbar.
+ *
+ * @property className - Optional custom CSS classes for styling.
+ * @property children - The visual content or label rendered inside the draggable node.
+ * @property nodeType - The type of node represented (key from `NodeTypes`).
+ * @property onDrop - Function called when the node is dropped on the flow pane.
  */
 interface DraggableNodeProps {
   className?: string;
@@ -16,15 +21,20 @@ interface DraggableNodeProps {
 }
 
 /**
- * Definition of a node inside the drag and drop toolbar.
- * These nodes require an onDrop function that dictates
- * how the node is created in the graph.
+ * A draggable node element used in the drag-and-drop toolbar.
+ *
+ * Integrates with the NeoDrag library to handle drag events.
+ * On drop, it calls the provided `onDrop` function with the node type and drop position.
+ *
+ * @param props - The draggable node configuration.
+ * @returns A React element representing a draggable node.
  */
 function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeProps) {
   const draggableRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState<XYPosition>({ x: 0, y: 0 });
 
-  // @ts-expect-error from the neodrag package — safe to ignore
+  // The NeoDrag hook enables smooth drag functionality for this element.
+  // @ts-expect-error: NeoDrag typing incompatibility — safe to ignore.
   useDraggable(draggableRef, {
     position,
     onDrag: ({ offsetX, offsetY }) => {
@@ -44,16 +54,23 @@ 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.
+ * Adds a new node to the flow graph.
+ *
+ * Handles:
+ * - Automatic node ID generation based on existing nodes of the same type.
+ * - Loading of default data from the `NodeDefaults` registry.
+ * - Integration with the flow store to update global node state.
+ *
+ * @param nodeType - The type of node to create (from `NodeTypes`).
+ * @param position - The XY position in the flow canvas where the node will appear.
  */
 function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
   const { nodes, setNodes } = useFlowStore.getState();
 
-  // Find out if there's any default data about our ndoe
+  // Load any predefined data for this node type.
   const defaultData = NodeDefaults[nodeType] ?? {}
   
-  // Currently, we find out what the Id is by checking the last node and adding one
+  // 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
@@ -77,16 +94,28 @@ function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
 }
 
 /**
- * DndToolbar defines how the drag and drop toolbar component works
- * and includes the default onDrop behavior.
+ * The drag-and-drop toolbar component for the visual programming interface.
+ *
+ * Displays draggable node templates based on entries in `NodeDefaults`.
+ * Each droppable node can be dragged into the flow pane to instantiate it.
+ *
+ * Automatically filters nodes whose `droppable` flag is set to `true`.
+ *
+ * @returns A React element representing the drag-and-drop toolbar.
  */
 export function DndToolbar() {
   const { screenToFlowPosition } = useReactFlow();
 
+  /**
+   * Handles dropping a node onto the flow pane.
+   * Translates screen coordinates into flow coordinates using React Flow utilities.
+   */
   const handleNodeDrop = useCallback(
     (nodeType: keyof typeof NodeTypes, screenPosition: XYPosition) => {
       const flow = document.querySelector('.react-flow');
       const flowRect = flow?.getBoundingClientRect();
+      
+      // Only add the node if it is inside the flow canvas area.
       const isInFlow =
         flowRect &&
         screenPosition.x >= flowRect.left &&
@@ -103,7 +132,7 @@ export function DndToolbar() {
   );
 
 
-  // Map over our default settings to see which of them have their droppable data set to true
+  // Map over the default nodes to get all nodes that can be dropped from the toolbar.
   const droppableNodes = Object.entries(NodeDefaults)
   .filter(([, data]) => data.droppable)
   .map(([type, data]) => ({ 

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

@@ -2,7 +2,12 @@ import { NodeToolbar } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import useFlowStore from "../VisProgStores.tsx";
 
-//Toolbar definitions
+/**
+ * Props for the Toolbar component.
+ *
+ * @property nodeId - The ID of the node this toolbar is attached to.
+ * @property allowDelete - If `true`, the delete button is enabled; otherwise disabled.
+ */
 type ToolbarProps = {
   nodeId: string;
   allowDelete: boolean;
@@ -10,12 +15,12 @@ type ToolbarProps = {
 
 /**
  * Node Toolbar definition:
- * handles: node deleting functionality
- * can be added to any custom node component as a React component
+ * Handles: node deleting functionality
+ * Can be integrated to any custom node component as a React component
  *
- * @param {string} nodeId
- * @param {boolean} allowDelete
- * @returns {React.JSX.Element}
+ * @param {string} nodeId - The ID of the node for which the toolbar is rendered.
+ * @param {boolean} allowDelete - Enables or disables the delete functionality.
+ * @returns {React.JSX.Element} A JSX element representing the toolbar.
  * @constructor
  */
 export function Toolbar({nodeId, allowDelete}: ToolbarProps) {