From 8a34f11a464dc0aadb5f6053f3c6521616a6d31c Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Mon, 21 Jul 2025 14:12:32 -0700
Subject: [PATCH] Add new 'views' directory that handles what the Canvas
 displays. Refactor Canvas.jsx to act as a router between canvas views. Add
 /views/WidgetCanvas to handle default view

---
 .../src/components/layout/Canvas/Canvas.jsx   | 52 +++++-----------
 .../components/layout/Canvas/CanvasHeader.jsx |  6 +-
 .../src/components/layout/Canvas/Widget.jsx   | 60 -------------------
 .../layout/Header/UserAvatarMenu.jsx          |  2 +-
 4 files changed, 19 insertions(+), 101 deletions(-)

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index 06075a6..d1fbf6d 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -1,45 +1,23 @@
-// 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';
+// This Canvas component will be used to dynamically populate 
+// the main canvas section of the web App with a default state
+// of 'WidgetCanvas' 
+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";
 
 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)
-    };
+    const [view, setView] = useState("widget");
 
     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>
+            <CanvasHeader onSwitchView={setView} />
+            {view === "widget" && <WidgetCanvas />}
+            {view === "map" && <MapCanvas />}
+            {view === "admin" && <AdminCanvas />}
         </Box>
     );
 }
+
diff --git a/client/src/components/layout/Canvas/CanvasHeader.jsx b/client/src/components/layout/Canvas/CanvasHeader.jsx
index 08a61cc..57ff277 100644
--- a/client/src/components/layout/Canvas/CanvasHeader.jsx
+++ b/client/src/components/layout/Canvas/CanvasHeader.jsx
@@ -1,7 +1,7 @@
 import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
-import { CanvasHeaderNav } from "./CanvasHeaderNav.jsx";
-import { SearchBar } from "./SearchBar.jsx";
-import { SettingsButton } from "./SettingsButton.jsx";
+import { CanvasHeaderNav } from "./CanvasHeaderNav";
+import { SearchBar } from "./SearchBar";
+import { SettingsButton } from "./SettingsButton";
 
 
 
diff --git a/client/src/components/layout/Canvas/Widget.jsx b/client/src/components/layout/Canvas/Widget.jsx
index b012bba..489c98c 100644
--- a/client/src/components/layout/Canvas/Widget.jsx
+++ b/client/src/components/layout/Canvas/Widget.jsx
@@ -1,4 +1,3 @@
-// Widget.jsx
 export default function Widget({ title }) {
     return (
       <>
@@ -15,62 +14,3 @@ export default function Widget({ title }) {
     );
   }
 
-// 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>
-//     );
-// }
diff --git a/client/src/components/layout/Header/UserAvatarMenu.jsx b/client/src/components/layout/Header/UserAvatarMenu.jsx
index d7a5850..cbef63d 100644
--- a/client/src/components/layout/Header/UserAvatarMenu.jsx
+++ b/client/src/components/layout/Header/UserAvatarMenu.jsx
@@ -8,7 +8,7 @@ export default function UserAvatarMenu({ name, avatar }) {
                 <Box
                     rounded="full" 
                     tabIndex={0}
-                    _hover={{ boxShadow: "0 0 0 2px rgb(37, 77, 197)" }}
+                    _hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
                 >
                     <Avatar.Root shape="full">
                         <Avatar.Fallback name={name} />