Refactor: moved Widget and CanvasHeader code into Canvas.jsx to handle both as a parent element

client/src/App.jsx

@@ -1,15 +1,34 @@
 import { useState } from 'react'
 import Header from './components/layout/Header/Header.jsx';
 import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
-import Widget from './components/layout/Canvas/Widget.jsx'
-import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
-import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx'
+import Canvas from './components/layout/Canvas/Canvas.jsx';
+import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
+
+// REMOVE AFTER TESTING
+import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx';
+import { GridLayout } from 'react-grid-layout';
 
 
 function App() {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
 
+  // TEST TEST TEST
+//   return (
+//     <Box>
+//       <Canvas /> {/* ← This should render something visible */}
+//       {/* <GridLayout>
+//         {layout.map((item) => (
+//           <div key={item.i}>
+//             <Widget title="VDAP Widget" />
+//           </div>
+//         ))}
+//       </GridLayout> */}
+//     </Box>
+//   );
+// }
+  
+
   return (
     <Grid css={styles}
       templateRows="1fr 11fr"
@@ -24,19 +43,19 @@ function App() {
         <Sidebar />
       </GridItem>
       <GridItem colSpan={1}>
-        <Grid
+      {/* <Grid
         templateRows="repeat(12, 1fr)"
         templateColumns="repeat(4, 1fr)"
         height="100%"
         width="100%"
-        >
-          <GridItem colSpan={4} rowSpan={1}>
-            <CanvasHeader />
+      > */}
+        <GridItem colSpan={1}>
+          <Canvas />
         </GridItem> 
-          <GridItem colSpan={4} rowSpan={5}>
-            <Widget />
-          </GridItem>
-        </Grid>
+        {/* <GridItem colSpan={4} rowSpan={5}>
+          <Canvas />
+        </GridItem> */}
+      {/* </Grid> */}
       </GridItem>
     </Grid>
   );

client/src/components/layout/Canvas/Canvas.jsx

@@ -0,0 +1,45 @@
+// This component defines a generic Widget that can be dynamically resized and 
+// dragged inside the canvas
+// Content not included, must be populated using custom charts plots and notifications
+import { useState } from 'react';
+import CanvasHeader from './CanvasHeader';
+import GridLayout from 'react-grid-layout';
+import Widget from './Widget.jsx';
+import { Box } from '@chakra-ui/react';
+
+export default function Canvas() {
+    // Define widgets initial position and size
+    // TODO Add dynamic adding/deleting of widgets via options button 
+    const [layout, setLayout] = useState([
+        { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
+        { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
+        { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
+    ]);
+
+    const onLayoutChange = (newLayout) => { 
+        setLayout(newLayout);
+        console.log('Updated layout:', newLayout)
+    };
+
+    return (
+        <Box height="100%" width="100%">
+            <CanvasHeader />
+            <GridLayout
+                className="layout"
+                layout={layout}
+                cols={12} // Total columns in grid
+                rowHeight={30} //Height of a single row in px
+                width={1200} // Total width of the grid
+                margin={[10, 10]} // [horizontal, vertical] gap
+                onLayoutChange={onLayoutChange}
+                draggableHandle=".widget-handle" // Make only the header draggable
+            >
+                {layout.map((item) => (
+                    <div key={item.i} style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                        <Widget title="VDAP Widget" />
+                    </div>
+                ))}
+            </GridLayout>
+        </Box>
+    );
+}

client/src/components/layout/Canvas/Widget.jsx

@@ -1,57 +1,76 @@
-// This component defines a generic Widget that can be dynamically resized and 
-// dragged inside the canvas
-// Content not included, must be populated using custom charts plots and notifications
-
-import { useState } from 'react';
-import GridLayout from 'react-grid-layout';
-
-export default function Widget() {
-    // Define widgets initial position and size
-    // TODO Add dynamic adding/deleting of widgets via options button 
-    const [layout, setLayout] = useState([
-        { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
-        { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
-        { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
-    ]);
-
-    const onLayoutChange = (newLayout) => { 
-        setLayout(newLayout);
-        console.log('Updated layout:', newLayout)
-    };
-
+// Widget.jsx
+export default function Widget({ title }) {
     return (
-        <GridLayout
-            className="layout"
-            layout={layout}
-            cols={12} // Total columns in grid
-            rowHeight={30} //Height of a single row in px
-            width={1200} // Total width of the grid
-            margin={[10, 10]} // [horizontal, vertical] gap
-            onLayoutChange={onLayoutChange}
-            draggableHandle=".widget-handle" // Make only the header draggable
+      <>
+        <div
+          className="widget-handle"
+          style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
         >
-            <div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-                    VDAP Widget
+          {title}
         </div>
         <div style={{ padding: '8px' }}>
           This is the widget content - drag or resize me!
         </div>
-            </div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-                    VDAP Widget
-                </div>
-                <div style={{ padding: '8px' }}>
-                    This is the widget content - drag or resize me!
-                </div>
-            </div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
-                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
-                    VDAP Widget
-                </div>
-                <div style={{ padding: '8px' }}>
-                    This is the widget content - drag or resize me!
-                </div>
-            </div>
-        </GridLayout>
+      </>
     );
   }
+
+// The below code has been moved to Canvas.jsx   
+
+// // This component defines a generic Widget that can be dynamically resized and 
+// // dragged inside the canvas
+// // Content not included, must be populated using custom charts plots and notifications
+
+// import { useState } from 'react';
+// import GridLayout from 'react-grid-layout';
+
+// export default function Widget() {
+//     // Define widgets initial position and size
+//     // TODO Add dynamic adding/deleting of widgets via options button 
+//     const [layout, setLayout] = useState([
+//         { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
+//         { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
+//         { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
+//     ]);
+
+//     const onLayoutChange = (newLayout) => { 
+//         setLayout(newLayout);
+//         console.log('Updated layout:', newLayout)
+//     };
+
+//     return (
+//         <GridLayout
+//             className="layout"
+//             layout={layout}
+//             cols={12} // Total columns in grid
+//             rowHeight={30} //Height of a single row in px
+//             width={1200} // Total width of the grid
+//             margin={[10, 10]} // [horizontal, vertical] gap
+//             onLayoutChange={onLayoutChange}
+//             draggableHandle=".widget-handle" // Make only the header draggable
+//         >
+//             <div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
+//                 <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
+//                     VDAP Widget
+//                 </div>
+//                 <div style={{ padding: '8px' }}>
+//                     This is the widget content - drag or resize me!
+//                 </div>
+//             </div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
+//                 <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
+//                     VDAP Widget
+//                 </div>
+//                 <div style={{ padding: '8px' }}>
+//                     This is the widget content - drag or resize me!
+//                 </div>
+//             </div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
+//                 <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
+//                     VDAP Widget
+//                 </div>
+//                 <div style={{ padding: '8px' }}>
+//                     This is the widget content - drag or resize me!
+//                 </div>
+//             </div>
+//         </GridLayout>
+//     );
+// }