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] 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