From b432c8a8ec98f6aa78a4e49a235c072cb9db7b08 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Wed, 23 Jul 2025 11:01:25 -0700
Subject: [PATCH 1/3] Add Dashboard parent component to Header, Siderbar,
 Canvas in order to faciliate lifting state

---
 client/src/App.jsx                         | 45 +------------------
 client/src/components/layout/Dashboard.jsx | 50 ++++++++++++++++++++++
 2 files changed, 52 insertions(+), 43 deletions(-)
 create mode 100644 client/src/components/layout/Dashboard.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index c60c2f9..ad2140b 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,49 +1,8 @@
-import { Global, css } from "@emotion/react";
-import Header from './components/layout/Header/Header.jsx';
-import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
-import Canvas from './components/layout/Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
+import Dashboard from './components/layout/Dashboard.jsx'
 
 function App() {
-  const recipe = useRecipe({ key: "canvas" });
-  const styles = recipe();
-
   return (
-  <>
-    <Global // change the background color of widget shadow when moving
-      styles={css`
-        .react-grid-placeholder {
-          background: #c0d2e3ff !important;
-          border-color: #a9b6c2ff !important;
-          box-shadow: 0 0 10px #c0d2e3ff !important;
-          opacity: 1 !important;
-          border-radius: 5px;
-        }
-
-        .react-resizable-handle-se {
-          position: sticky;
-          right: 0;
-          bottom: 0;
-        }
-      `}
-    />
-    <Grid css={styles}
-      templateRows="1fr 11fr"
-      templateColumns="1fr 20fr"
-      height="100vh"
-      width="100vw"
-    >
-      <GridItem rowSpan={1} colSpan={2}>
-        <Header />
-      </GridItem>
-      <GridItem colSpan={1}>
-        <Sidebar />
-      </GridItem>
-      <GridItem colSpan={1} width="100%">
-        <Canvas />
-      </GridItem> 
-    </Grid>
-    </>
+    <Dashboard />
   );
 }
 
diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx
new file mode 100644
index 0000000..eeb1042
--- /dev/null
+++ b/client/src/components/layout/Dashboard.jsx
@@ -0,0 +1,50 @@
+import { Global, css } from "@emotion/react";
+import Header from './Header/Header.jsx';
+import Sidebar from './Sidebar/Sidebar.jsx';
+import Canvas from './Canvas/Canvas.jsx';
+import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
+
+export default function Dashboard() {
+  const recipe = useRecipe({ key: "canvas" });
+  const styles = recipe();
+
+  return (
+  <>
+    <Global // change the background color of widget shadow when moving
+      styles={css`
+        .react-grid-placeholder {
+          background: #c0d2e3ff !important;
+          border-color: #a9b6c2ff !important;
+          box-shadow: 0 0 10px #c0d2e3ff !important;
+          opacity: 1 !important;
+          border-radius: 5px;
+        }
+
+        .react-resizable-handle-se {
+          position: sticky;
+          right: 0;
+          bottom: 0;
+        }
+      `}
+    />
+    <Grid css={styles}
+      templateRows="1fr 11fr"
+      templateColumns="1fr 20fr"
+      height="100vh"
+      width="100vw"
+    >
+      <GridItem rowSpan={1} colSpan={2}>
+        <Header />
+      </GridItem>
+      <GridItem colSpan={1}>
+        <Sidebar />
+      </GridItem>
+      <GridItem colSpan={1} width="100%">
+        <Canvas />
+      </GridItem> 
+    </Grid>
+    </>
+  );
+}
+
+

From 0ec105d9ec93978abd2c86805d0aedf8d13a4638 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Wed, 23 Jul 2025 11:35:28 -0700
Subject: [PATCH 2/3] Add view and setView props in order to successfully pass
 state from Sidebar to the Canvas inside Dashboard

---
 .../src/components/layout/Canvas/Canvas.jsx   |  6 +++---
 client/src/components/layout/Dashboard.jsx    | 10 +++++++---
 .../src/components/layout/Sidebar/Sidebar.jsx | 19 +++++++++++--------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index ef6e2a8..bfdf7dd 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -8,12 +8,12 @@ import WidgetCanvas from "./views/WidgetCanvas";
 // import MapCanvas from "./views/MapCanvas";
 // import AdminCanvas from "./views/AdminCanvas";
 
-export default function Canvas() {
-    const [view, setView] = useState("widget");
+export default function Canvas({ view }) {
+    // const [view, setView] = useState("widget");
 
     return (
         <Box height="100%" width="100%">
-            <CanvasHeader onSwitchView={setView} />
+            <CanvasHeader />
             {view === "widget" && <WidgetCanvas />}
             {/* {view === "map" && <MapCanvas />} */}
             {/* {view === "admin" && <AdminCanvas />} */}
diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx
index eeb1042..11be033 100644
--- a/client/src/components/layout/Dashboard.jsx
+++ b/client/src/components/layout/Dashboard.jsx
@@ -2,12 +2,16 @@ import { Global, css } from "@emotion/react";
 import Header from './Header/Header.jsx';
 import Sidebar from './Sidebar/Sidebar.jsx';
 import Canvas from './Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
+import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
+import { useState } from 'react';
 
 export default function Dashboard() {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
 
+  // Lifted State - defaults to widget dashboard
+  const [view, setView] = useState("widget");
+
   return (
   <>
     <Global // change the background color of widget shadow when moving
@@ -37,10 +41,10 @@ export default function Dashboard() {
         <Header />
       </GridItem>
       <GridItem colSpan={1}>
-        <Sidebar />
+        <Sidebar onChangeView={ setView } />
       </GridItem>
       <GridItem colSpan={1} width="100%">
-        <Canvas />
+        <Canvas view={ view }/>
       </GridItem> 
     </Grid>
     </>
diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx
index 55de0b0..cbcf06b 100644
--- a/client/src/components/layout/Sidebar/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar/Sidebar.jsx
@@ -57,18 +57,18 @@ export const Users = createIcon({
   ),
 });
 
-export default function Sidebar() {
+export default function Sidebar({ onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
+  const [activeButton, setActiveButton] = useState(0)
 
   const buttons = [
-    {icon: PushPin, name: "Dashboard"},
-    {icon: Globe, name: "Global Map"},
-    {icon: MapMarker, name: "Regional Map"},
-    {icon: FaVolcano, name: "Volcano"},
-    {icon: Users, name: "Admin"}
+    {icon: PushPin, name: "Dashboard", view: "widget"},
+    {icon: Globe, name: "Global Map", view: "global"},
+    {icon: MapMarker, name: "Regional Map", view: "regional"},
+    {icon: FaVolcano, name: "Volcano", view: "volcano"},
+    {icon: Users, name: "Admin", view: "admin"}
   ];
   
-  const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
 
@@ -98,7 +98,10 @@ export default function Sidebar() {
         return (
           <Button key={idx} 
                   css={styles.buttons} 
-                  onClick={() => setActiveButton(idx)} 
+                  onClick={() => {
+                    setActiveButton(idx);
+                    onChangeView(button.view); // Trigger state change in Dashboard
+                  }} 
                   bg={activeButton === idx ? "primary":undefined} 
                   justifyContent="flex-start"
           >           

From 43fd246b1fed1bc323027fe836340ac93a8dea63 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Wed, 23 Jul 2025 12:03:06 -0700
Subject: [PATCH 3/3] Add functional links between Sidebar nav buttons and
 Canvas views

---
 .../src/components/layout/Canvas/Canvas.jsx   | 16 +++++++-----
 .../layout/Canvas/views/AdminCanvas.jsx       | 24 +++++++++++++++++
 .../layout/Canvas/views/GlobalMapCanvas.jsx   | 24 +++++++++++++++++
 .../layout/Canvas/views/MapCanvas.jsx         |  0
 .../layout/Canvas/views/RegionalMapCanvas.jsx | 26 +++++++++++++++++++
 .../layout/Canvas/views/VolcanoCanvas.jsx     | 26 +++++++++++++++++++
 6 files changed, 109 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
 delete mode 100644 client/src/components/layout/Canvas/views/MapCanvas.jsx
 create mode 100644 client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
 create mode 100644 client/src/components/layout/Canvas/views/VolcanoCanvas.jsx

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index bfdf7dd..a527aa8 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -1,22 +1,24 @@
 // 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";
+import GlobalMapCanvas from "./views/GlobalMapCanvas";
+import RegionalMapCanvas from "./views/RegionalMapCanvas";
+import VolcanoCanvas from "./views/VolcanoCanvas";
+import AdminCanvas from "./views/AdminCanvas";
 
 export default function Canvas({ view }) {
-    // const [view, setView] = useState("widget");
-
     return (
         <Box height="100%" width="100%">
             <CanvasHeader />
             {view === "widget" && <WidgetCanvas />}
-            {/* {view === "map" && <MapCanvas />} */}
-            {/* {view === "admin" && <AdminCanvas />} */}
+            {view === "global" && <GlobalMapCanvas />}
+            {view === "regional" && <RegionalMapCanvas />}
+            {view === "volcano" && <VolcanoCanvas />}
+            {view === "admin" && <AdminCanvas />}
         </Box>
     );
 }
diff --git a/client/src/components/layout/Canvas/views/AdminCanvas.jsx b/client/src/components/layout/Canvas/views/AdminCanvas.jsx
index e69de29..5cbb749 100644
--- a/client/src/components/layout/Canvas/views/AdminCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/AdminCanvas.jsx
@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function AdminCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Admin Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
new file mode 100644
index 0000000..223f81d
--- /dev/null
+++ b/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx
@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function GlobalMapCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Global Map Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/MapCanvas.jsx b/client/src/components/layout/Canvas/views/MapCanvas.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx b/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
new file mode 100644
index 0000000..7bd3ef7
--- /dev/null
+++ b/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx
@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function RegionalMapCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+
+            
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Regional Map Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}
\ No newline at end of file
diff --git a/client/src/components/layout/Canvas/views/VolcanoCanvas.jsx b/client/src/components/layout/Canvas/views/VolcanoCanvas.jsx
new file mode 100644
index 0000000..ab510f5
--- /dev/null
+++ b/client/src/components/layout/Canvas/views/VolcanoCanvas.jsx
@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function VolcanoCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+
+            
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Volcano Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}
\ No newline at end of file