From 416873fc08e2e9715bf8d15cd0c9c2bc884ce949 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Tue, 29 Jul 2025 09:59:17 -0700
Subject: [PATCH 1/4] Save point, page is rendering with view tracking

---
 .../src/components/layout/Canvas/Canvas.jsx   |  6 +++--
 .../layout/Canvas/views/DashboardCanvas.jsx   | 13 +++++++---
 client/src/components/layout/Dashboard.jsx    |  5 +++-
 .../src/components/layout/Sidebar/Sidebar.jsx | 26 ++++++++++++++++---
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index 3067854..e097f28 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -9,14 +9,16 @@ import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
 import { DashboardCanvas } from "./views/DashboardCanvas";
 
-export default function Canvas({ view, layout, setLayout, onLayoutChange }) {
+export default function Canvas({ view, setView, layout, setLayout, onLayoutChange }) {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
 
     return (
         <Box height="100%" width="100%">
             {view === "widget" && 
-                <DashboardCanvas 
+                <DashboardCanvas
+                    view={ view }
+                    setView={ setView } 
                     layout={ layout }
                     setLayout={ setLayout }
                     onLayoutChange={ onLayoutChange }
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index 8678a50..239d2bd 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -10,7 +10,7 @@ import { useState, useEffect, useDebugValue } from "react";
 import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
 
-export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
+export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [isDelete, setIsDelete] = useState(false);
   const [newCounter, setNewCounter] = useState(3);
@@ -81,7 +81,12 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
 
   return (
     /* HEADER */
-    <Tabs.Root lazyMount defaultValue="my dashboard">
+    <Tabs.Root 
+      lazyMount 
+      defaultValue="my dashboard"
+      value={ view }
+      onValueChange={ setView }  
+    >
       <Flex 
         as="header"
 				position="sticky"
@@ -94,7 +99,7 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
 				justify="space-between"
       >
         <Tabs.List>
-          <Tabs.Trigger value="my dashboard">
+          <Tabs.Trigger value="widget">
             My Dashboard
           </Tabs.Trigger>
           <Tabs.Trigger value="gas">
@@ -131,7 +136,7 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
       </Flex>
 
       {/* CANVAS */}
-      <Tabs.Content value="my dashboard">
+      <Tabs.Content value="widget">
         <WidgetCanvas 
           layout={layout}
           onLayoutChange={onLayoutChange}
diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx
index 76275d5..cf76695 100644
--- a/client/src/components/layout/Dashboard.jsx
+++ b/client/src/components/layout/Dashboard.jsx
@@ -64,11 +64,14 @@ export default function Dashboard() {
           <Header />
         </GridItem>
         <GridItem colSpan={1}>
-          <Sidebar onChangeView={ setView }/>
+          <Sidebar 
+            view={ view }
+            onChangeView={ setView }/>
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
           <Canvas 
             view={ view }
+            setView={ setView }
             layout={ layout }
             setLayout={ setLayout }
             onLayoutChange={( newLayout ) => setLayout( newLayout )}
diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx
index 1db12b9..6c8ca8d 100644
--- a/client/src/components/layout/Sidebar/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar/Sidebar.jsx
@@ -7,9 +7,10 @@ import { FaGlobeAmericas } from "react-icons/fa";
 import { FaMapMarkerAlt } from "react-icons/fa";
 import { HiUsers } from "react-icons/hi2";
 import { VscThreeBars } from "react-icons/vsc";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
 
-export default function Sidebar({ onChangeView }) {
+export default function Sidebar({ view, onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
 
@@ -30,6 +31,25 @@ export default function Sidebar({ onChangeView }) {
     else setIsOpen(true);
   };
 
+  // Track currrent view from both Sidebar and Canvas when 'view' changes
+  useEffect(() => {
+    console.log("Current view = ", view);
+    const dashboardViews = ["widget", "gas", "seismic", "remote", "activity"];
+
+    const newIndex = buttons.findIndex((btn) => {
+      if (btn.view === "widget") {
+        return dashboardViews.includes(view); // Group match
+      }
+      return btn.view === view; // Exact match
+    });
+
+    if (newIndex !== -1 ) {
+      setActiveButton(newIndex);
+    }
+  }, [view]);
+  
+  
+
   return (
     <Box
       css={styles.root}
@@ -53,7 +73,7 @@ export default function Sidebar({ onChangeView }) {
                   // key={idx} 
                   css={styles.buttons} 
                   onClick={() => {
-                    setActiveButton(idx);
+                    // setActiveButton(idx);
                     onChangeView(button.view); // Trigger state change in Dashboard
                   }} 
                   bg={activeButton === idx ? "primary":undefined} 

From 89c32e4f6ecfd5ba3ef0da9a5758fbe9c9ed6ef5 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Tue, 29 Jul 2025 11:04:29 -0700
Subject: [PATCH 2/4] Add keyViews.js file inside src/constants to track
 current view in Sidebar and Canvas

---
 client/src/components/layout/Canvas/Canvas.jsx    |  7 +++++--
 .../layout/Canvas/views/DashboardCanvas.jsx       | 14 ++++++++------
 client/src/components/layout/Sidebar/Sidebar.jsx  |  8 ++++----
 client/src/constants/viewKeys.js                  | 15 +++++++++++++++
 4 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 client/src/constants/viewKeys.js

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index e097f28..9280c4b 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -8,6 +8,7 @@ import RegionalMapCanvas from "./views/RegionalMapCanvas";
 import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
 import { DashboardCanvas } from "./views/DashboardCanvas";
+import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
 export default function Canvas({ view, setView, layout, setLayout, onLayoutChange }) {
   const recipe = useRecipe({ key: "canvas" });
@@ -15,14 +16,16 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
 
     return (
         <Box height="100%" width="100%">
-            {view === "widget" && 
+            {/* {view === "widget" &&  */}
+            { DASHBOARD_VIEWS.includes(view) && (
                 <DashboardCanvas
                     view={ view }
                     setView={ setView } 
                     layout={ layout }
                     setLayout={ setLayout }
                     onLayoutChange={ onLayoutChange }
-                />}
+                />
+            )}
             {view === "global" && <GlobalMapCanvas />}
             {view === "regional" && <RegionalMapCanvas />}
             {view === "volcano" && <VolcanoCanvas />}
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index 239d2bd..1b5a3a0 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -83,9 +83,11 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
     /* HEADER */
     <Tabs.Root 
       lazyMount 
-      defaultValue="my dashboard"
+      // defaultValue="widget"
       value={ view }
-      onValueChange={ setView }  
+      // onValueChange={ setView }
+      onValueChange={(e) => setView(e.value)}  
+      // onValueChange={(value) => setView(value)}
     >
       <Flex 
         as="header"
@@ -108,10 +110,10 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
           <Tabs.Trigger value="seismic">
             Seismic
           </Tabs.Trigger>
-          <Tabs.Trigger value="remote sensing">
+          <Tabs.Trigger value="remote">
             Remote Sensing
           </Tabs.Trigger>
-                  <Tabs.Trigger value="daily activity">
+                  <Tabs.Trigger value="daily">
             Daily Activity
           </Tabs.Trigger>
         </Tabs.List>
@@ -151,10 +153,10 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
       <Tabs.Content value="seismic">
         <Seismic />
       </Tabs.Content>
-      <Tabs.Content value="remote sensing">
+      <Tabs.Content value="remote">
         <RemoteSensing />
       </Tabs.Content>
-      <Tabs.Content value="daily activity">
+      <Tabs.Content value="daily">
         <DailyActivity />
       </Tabs.Content>
     </Tabs.Root>
diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx
index 6c8ca8d..3ff8794 100644
--- a/client/src/components/layout/Sidebar/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar/Sidebar.jsx
@@ -9,6 +9,7 @@ import { HiUsers } from "react-icons/hi2";
 import { VscThreeBars } from "react-icons/vsc";
 import { useState, useEffect } from "react";
 import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
+import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
 export default function Sidebar({ view, onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
@@ -33,12 +34,13 @@ export default function Sidebar({ view, onChangeView }) {
 
   // Track currrent view from both Sidebar and Canvas when 'view' changes
   useEffect(() => {
+    console.log("typeof view =", typeof view);
     console.log("Current view = ", view);
-    const dashboardViews = ["widget", "gas", "seismic", "remote", "activity"];
+    // const dashboardViews = ["widget", "gas", "seismic", "remote", "daily"];
 
     const newIndex = buttons.findIndex((btn) => {
       if (btn.view === "widget") {
-        return dashboardViews.includes(view); // Group match
+        return DASHBOARD_VIEWS.includes(view); // Group match
       }
       return btn.view === view; // Exact match
     });
@@ -47,8 +49,6 @@ export default function Sidebar({ view, onChangeView }) {
       setActiveButton(newIndex);
     }
   }, [view]);
-  
-  
 
   return (
     <Box
diff --git a/client/src/constants/viewKeys.js b/client/src/constants/viewKeys.js
new file mode 100644
index 0000000..6ae5832
--- /dev/null
+++ b/client/src/constants/viewKeys.js
@@ -0,0 +1,15 @@
+// Main views called from Sidebar
+export const DASHBOARD_VIEWS = ["widget", "gas", "seismic", "remote", "daily"]
+
+// Sub views called from inside DashboardCanvas
+export const VIEW_LABELS = {
+    widget: "My Dashboard",
+    gas: "Gas", 
+    seismic: "Seismic", 
+    remote: "Remote Sensing",
+    daily: "Daily Activity",
+    global: "Global Map",
+    regional: "Regional Map", 
+    volcano: "Volcano", 
+    admin: "Admin",
+};
\ No newline at end of file

From a06a79218c15b314180f34324ecd06d4217feae2 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Tue, 29 Jul 2025 11:51:33 -0700
Subject: [PATCH 3/4] Add tab navigation prevention while in Editable mode

---
 client/src/components/layout/Canvas/Canvas.jsx     |  2 +-
 .../layout/Canvas/views/DashboardCanvas.jsx        | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx
index 9280c4b..d94300e 100644
--- a/client/src/components/layout/Canvas/Canvas.jsx
+++ b/client/src/components/layout/Canvas/Canvas.jsx
@@ -16,7 +16,7 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
 
     return (
         <Box height="100%" width="100%">
-            {/* {view === "widget" &&  */}
+            {/* Check if view is a tab inside the Canvas Header */}
             { DASHBOARD_VIEWS.includes(view) && (
                 <DashboardCanvas
                     view={ view }
diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index 1b5a3a0..70386aa 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -86,8 +86,20 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
       // defaultValue="widget"
       value={ view }
       // onValueChange={ setView }
-      onValueChange={(e) => setView(e.value)}  
       // onValueChange={(value) => setView(value)}
+      // onValueChange={(e) => setView(e.value)}  
+      onValueChange={(e) => {
+        const nextView = e.value;
+
+        if (view === "widget" && isEditable && nextView !== "widget") {
+          const confirmed = window.confirm(
+            "You have unsaved changes. Do you wish to discard them and continue?"
+          );
+          if (!confirmed) return;
+          onCancel();
+        }
+        setView(nextView);
+      }}
     >
       <Flex 
         as="header"

From 80854e4bf3cdee65546c95cb81f024e72ca8d585 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Tue, 29 Jul 2025 12:08:36 -0700
Subject: [PATCH 4/4] Remove garbage comments

---
 .../src/components/layout/Canvas/views/DashboardCanvas.jsx  | 6 ++----
 client/src/components/layout/Sidebar/Sidebar.jsx            | 5 ++---
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
index 70386aa..25effed 100644
--- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx
@@ -83,11 +83,9 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
     /* HEADER */
     <Tabs.Root 
       lazyMount 
-      // defaultValue="widget"
       value={ view }
-      // onValueChange={ setView }
-      // onValueChange={(value) => setView(value)}
-      // onValueChange={(e) => setView(e.value)}  
+
+      // Prevent navigation away from 'My Dashboard' while in Edit mode
       onValueChange={(e) => {
         const nextView = e.value;
 
diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx
index 3ff8794..f527395 100644
--- a/client/src/components/layout/Sidebar/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar/Sidebar.jsx
@@ -70,10 +70,10 @@ export default function Sidebar({ view, onChangeView }) {
         const Icon = button.icon;
         const buttonElement = (
           <Button 
-                  // key={idx} 
+                  key={idx} 
                   css={styles.buttons} 
                   onClick={() => {
-                    // setActiveButton(idx);
+                    setActiveButton(idx);
                     onChangeView(button.view); // Trigger state change in Dashboard
                   }} 
                   bg={activeButton === idx ? "primary":undefined} 
@@ -94,7 +94,6 @@ export default function Sidebar({ view, onChangeView }) {
               </span>
           </Button>
         );
-        // console.log("buttonElement is:", buttonElement)
         console.log("Returning:", !isOpen ? "Tooltip" : "Button", buttonElement);
         return !isOpen ? (
           <Tooltip key={ idx } content={ button.name } placement="right" hasArrow>