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

@@ -1,4 +1,4 @@
-import { useDraggable } from '@neodrag/react';
+import {useDraggable} from '@neodrag/react';
 import {
   useReactFlow,
   type XYPosition
@@ -11,7 +11,6 @@ import {
 } from 'react';
 
 
-// improve later to create better automatic IDs
 let id = 0;
 const getId = () => `dndnode_${id++}`;
 
@@ -23,23 +22,23 @@ interface DraggableNodeProps {
   onDrop: (nodeType: string, position: XYPosition) => void;
 }
 
-function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeProps) {
+function DraggableNode({className, children, nodeType, onDrop}: DraggableNodeProps) {
   const draggableRef = useRef<HTMLDivElement>(null);
-    const [position, setPosition] = useState<XYPosition>({ x: 0, y: 0 });
+  const [position, setPosition] = useState<XYPosition>({x: 0, y: 0});
 
 
   // @ts-ignore
   useDraggable(draggableRef, {
     position: position,
-        onDrag: ({ offsetX, offsetY }) => {
+    onDrag: ({offsetX, offsetY}) => {
       // Calculate position relative to the viewport
       setPosition({
         x: offsetX,
         y: offsetY,
       });
     },
-        onDragEnd: ({ event }) => {
-            setPosition({ x: 0, y: 0 });
+    onDragEnd: ({event}) => {
+      setPosition({x: 0, y: 0});
       onDrop(nodeType, {
         x: event.clientX,
         y: event.clientY,
@@ -48,14 +47,15 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
   });
 
   return (
-        <div className={className === "default" ? "draggable-node" :  "draggable-node" + "__" + className} ref={draggableRef}>
+    <div className={className === "default" ? "draggable-node" : "draggable-node" + "__" + className}
+         ref={draggableRef}>
       {children}
     </div>
   );
 }
 
 export function Sidebar() {
-    const { setNodes, screenToFlowPosition } = useReactFlow();
+  const {setNodes, screenToFlowPosition} = useReactFlow();
 
   const handleNodeDrop = useCallback(
     (nodeType: string, screenPosition: XYPosition) => {
@@ -120,11 +120,26 @@ export function Sidebar() {
   );
 
   return (
-        <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'}}>
+    <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>
-            <div className="DraggableNodeContainer" style={{backgroundColor:'canvas', display: 'flex', flexDirection: 'row', gap: '1rem', justifyContent: 'center'}}>
+      <div className="DraggableNodeContainer" style={{
+        backgroundColor: 'canvas',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '1rem',
+        justifyContent: 'center'
+      }}>
         <DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
           phase Node
         </DraggableNode>