From 35aa0347a9cb46e6b4189e32d07b86bb22659919 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Mon, 21 Jul 2025 14:27:53 -0700
Subject: [PATCH] Save point, page renders and is functional

---
 client/src/App.jsx                            | 14 +++----
 .../src/components/layout/Canvas/Canvas.jsx   |  8 ++--
 .../layout/Canvas/views/WidgetCanvas.jsx      | 42 +++++++++++++++++++
 3 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index a2cbd81..7044e94 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -5,8 +5,8 @@ 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';
+// import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx';
+// import { GridLayout } from 'react-grid-layout';
 
 
 function App() {
@@ -42,21 +42,21 @@ function App() {
       <GridItem colSpan={1}>
         <Sidebar />
       </GridItem>
-      <GridItem colSpan={1}>
+      {/* <GridItem colSpan={1}> */}
       {/* <Grid
         templateRows="repeat(12, 1fr)"
         templateColumns="repeat(4, 1fr)"
         height="100%"
         width="100%"
       > */}
-        <GridItem colSpan={1}>
-          <Canvas />
-        </GridItem> 
+      <GridItem colSpan={1}>
+        <Canvas />
+      </GridItem> 
         {/* <GridItem colSpan={4} rowSpan={5}>
           <Canvas />
         </GridItem> */}
       {/* </Grid> */}
-      </GridItem>
+      {/* </GridItem> */}
     </Grid>
   );
 }
diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index d1fbf6d..ef6e2a8 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -5,8 +5,8 @@ import { useState } from "react";
 import { Box } from "@chakra-ui/react";
 import CanvasHeader from "./CanvasHeader";
 import WidgetCanvas from "./views/WidgetCanvas";
-import MapCanvas from "./views/MapCanvas";
-import AdminCanvas from "./views/AdminCanvas";
+// import MapCanvas from "./views/MapCanvas";
+// import AdminCanvas from "./views/AdminCanvas";
 
 export default function Canvas() {
     const [view, setView] = useState("widget");
@@ -15,8 +15,8 @@ export default function Canvas() {
         <Box height="100%" width="100%">
             <CanvasHeader onSwitchView={setView} />
             {view === "widget" && <WidgetCanvas />}
-            {view === "map" && <MapCanvas />}
-            {view === "admin" && <AdminCanvas />}
+            {/* {view === "map" && <MapCanvas />} */}
+            {/* {view === "admin" && <AdminCanvas />} */}
         </Box>
     );
 }
diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
index e69de29..2395ae8 100644
--- a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/WidgetCanvas.jsx
@@ -0,0 +1,42 @@
+// 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';
+import Widget from '../Widget.jsx';
+import { Box } from '@chakra-ui/react';
+
+export default function WidgetCanvas() {
+    // 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
+        >
+            {layout.map((item) => (
+                <div key={item.i} style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                    <Widget title="VDAP Widget" />
+                </div>
+            ))}
+        </GridLayout>
+    );
+}