Merge branch 'main' into 'dashboardCanvas/Widget/add-widgets-menu'

# Conflicts:
#   client/src/components/layout/Canvas/views/DashboardCanvas.jsx

client/src/App.jsx

@@ -1,4 +1,6 @@
 import Dashboard from './components/layout/Dashboard.jsx'
+import 'leaflet/dist/leaflet.css';
+
 
 function App() {
   return (

client/src/components/layout/Canvas/Canvas.jsx

@@ -12,7 +12,7 @@ import SettingsCanvas from "./views/SettingsCanvas"
 import { DashboardCanvas } from "./views/DashboardCanvas";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
-export default function Canvas({ view, setView, layout, setLayout, onLayoutChange, darkMode }) {
+export default function Canvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, setView, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView, darkMode }) {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
 
@@ -21,11 +21,20 @@ export default function Canvas({ view, setView, layout, setLayout, onLayoutChang
             {/* Check if view is a tab inside the Canvas Header */}
             { DASHBOARD_VIEWS.includes(view) && (
                 <DashboardCanvas
+                    darkMode={ darkMode }
                     view={ view }
                     setView={ setView }
                     layout={ layout }
                     setLayout={ setLayout }
+                    originalLayout={ originalLayout }
+                    setOriginalLayout={ setOriginalLayout }
                     onLayoutChange={ onLayoutChange }
+                    onChangeView={ onChangeView }
+                    onCancel={ onCancel }
+                    isEditable={ isEditable }
+                    setIsEditable={ setIsEditable }
+                    isDelete={ isDelete }
+                    setIsDelete={ setIsDelete }
                 />
             )}
             {view === "global" && <GlobalMapCanvas />}

client/src/components/layout/Canvas/views/DashboardCanvas.jsx

@@ -29,42 +29,37 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
         static: false
       }
     ]);
+    onEditWidgets();
   };
 
-  useEffect(() => {
-    console.log("static change effect");
-    setLayout(prevLayout => 
-      prevLayout.map(item => ({
-        ...item,
-        static: !isEditable  // static false means resizable/editable
-      }))
-    );
-  }, [isEditable]);
-
   const onEditWidgets = () => {
     console.log("widgets are now editable");
     setOriginalLayout(layout); // Backup layout before editing
+    
+    // Set all widgets to editable, static: false
+    setLayout(prevLayout =>
+      prevLayout.map(item => ({
+        ...item, 
+        static: false
+      }))
+    );
     setIsEditable(true); // Enable edit mode
   }
 
   const onSave = () => {
     console.log("saving widgets...");
-    setIsEditable(false);
-    setIsDelete(false);
-    setOriginalLayout([]) // Clear backup layout
-  }
 
-  const onCancel = () => {
+    // Set all widgets back to static: true
-    console.log("canceling changes...");
+    setLayout(prevLayout => 
-    if (originalLayout.length) { 
+      prevLayout.map(item => ({
-      setLayout(originalLayout.map(item => ({
         ...item,
         static: true
-      })));
+    }))
-    };
+  );
+
     setIsEditable(false);
     setIsDelete(false);
-    setOriginalLayout([]); 
+    setOriginalLayout([]); // Clear backup layout
   }
 
   const onDeleteWidgets = () => {
@@ -101,15 +96,7 @@ export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChan
       // Prevent navigation away from 'My Dashboard' while in Edit mode
       onValueChange={(e) => {
         const nextView = e.value;
-
+        onChangeView(nextView); 
-        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 

client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
-import 'leaflet/dist/leaflet.css';
 
 export default function GlobalMapCanvas() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
   return (
-      <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
+      <MapContainer center={position} zoom={3} style={{ height: "100%", width: "100%" }}>
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           attribution='&copy; OpenStreetMap contributors'

client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx

@@ -1,24 +1,19 @@
-import { Box, Text } from '@chakra-ui/react';
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 
-export default function RegionalMapCanvas() {
+export default function GlobalMapCanvas() {
-    return (
+  const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
-        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+  return (
-            <Box 
+      <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
-                bg="bg" 
+        <TileLayer
-                shadow="md" 
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                borderRadius="md"
+          attribution='&copy; OpenStreetMap contributors'
-                p={8}
+        />
-                width="600px"
+        <Marker position={position}>
-                height="100px"
+          <Popup>
-                textAlign="center"
+            CVO — Home of the volcanoligists
-                display="flex"
+          </Popup>
-                alignItems="center"
+        </Marker>
-                justifyContent="center"
+      </MapContainer>
-            >
+  );
-                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
-                    Regional Map Canvas coming soon!
-                </Text>
-            </Box>
-        </Box>
-    );
 }

client/src/components/layout/Dashboard.jsx

@@ -10,15 +10,43 @@ export default function Dashboard() {
   const styles = recipe();
 
   const [darkMode, setDarkMode] = useState(false);
-  // Lifted State - defaults to widget dashboard
+  const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
+  const [isDelete, setIsDelete] = useState(false);
+  const [originalLayout, setOriginalLayout] = useState([]);
   const [view, setView] = useState("widget");
   const [layout, setLayout] = useState([]);
 
+  const onCancel = () => {
+    console.log("canceling changes...");
+    if (originalLayout.length) { 
+      setLayout(originalLayout.map(item => ({
+        ...item, 
+        static: true
+      })));
+    };
+    setIsEditable(false);
+    setIsDelete(false);
+    setOriginalLayout([]); 
+  }
+  
+  // Prevent navigation while in Edit mode without saving or cancelling
+  const handleViewChange = (nextView) => { 
+    if (view === "widget" && isEditable) {
+      const confirmed = window.confirm(
+        "You have unsaved changes. Discard them and continue?"
+      );
+      if (!confirmed) return; 
+      onCancel(); // Discards the layout
+    }
+    setView(nextView);
+  };
+
   return (
     <>
       <Grid css={styles}
         templateRows="1fr 11fr"
-        templateColumns="1fr 20fr"
+        // templateColumns="1fr 20fr"
+        templateColumns="auto 1fr"
         height="100vh"
         width="100vw"
       >
@@ -26,6 +54,7 @@ export default function Dashboard() {
           <Header
             view={ view }
             setView={ setView }
+            onChangeView={ handleViewChange }
           />
         </GridItem>
         <GridItem colSpan={1}>
@@ -33,7 +62,8 @@ export default function Dashboard() {
             darkMode={ darkMode }
             setDarkMode={ setDarkMode }
             view={ view }
-            onChangeView={ setView }
+            onChangeView={ handleViewChange }
+            isEditabe={ isEditable }
           />
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
@@ -43,7 +73,15 @@ export default function Dashboard() {
             setView={ setView }
             layout={ layout }
             setLayout={ setLayout }
+            originalLayout={ originalLayout }
+            setOriginalLayout={ setOriginalLayout }
             onLayoutChange={( newLayout ) => setLayout( newLayout )}
+            onChangeView={ handleViewChange }
+            onCancel={ onCancel }
+            isEditable={ isEditable }
+            setIsEditable={ setIsEditable }
+            isDelete={ isDelete }
+            setIsDelete={ setIsDelete }
           />
         </GridItem>
       </Grid>

client/src/components/layout/Header/Header.jsx

@@ -8,7 +8,7 @@ const user = {
   // avatar: "src\\assets\\user_profile.svg"
 }
 
-export default function Header({ view, setView }) {
+export default function Header({ onChangeView }) {
   const recipe = useRecipe({ key: "header" });
   const styles = recipe();
 
@@ -23,8 +23,7 @@ export default function Header({ view, setView }) {
         <UserAvatarMenu 
           name={user.name} 
           avatar={user.avatar} 
-          view={ view }
+          onChangeView={ onChangeView }
-          setView={ setView }
         />
       </Flex>
     </chakra.div>

client/src/components/layout/Header/UserAvatarMenu.jsx

@@ -1,7 +1,7 @@
 import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
 
 
-export default function UserAvatarMenu({ view, setView, name, avatar }) {
+export default function UserAvatarMenu({ onChangeView, name, avatar }) {
 	return (
 		<Menu.Root>
 			<Menu.Trigger focusRing="none">
@@ -21,10 +21,10 @@ export default function UserAvatarMenu({ view, setView, name, avatar }) {
 				{/* zIndex: overlay = 1300 */}
 				<Menu.Positioner zIndex="overlay"> 
 					<Menu.Content>
-						<Menu.Item value="account" onClick={() => setView("account")}>
+						<Menu.Item value="account" onClick={() => onChangeView("account")}>
 							Account
 						</Menu.Item>
-						<Menu.Item value="settings" onClick={() => setView("settings")}>
+						<Menu.Item value="settings" onClick={() => onChangeView("settings")}>
 							Settings
 						</Menu.Item>
 						<Menu.Item value="logout" onClick={() => console.log("Log out triggered")}>

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -1,6 +1,5 @@
 import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
 import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
-// import { Tooltip } from "@/components/ui/tooltip";
 import Tooltip from "../Canvas/components/Tooltip.jsx";
 import { FaVolcano } from "react-icons/fa6";
 import { FaHome } from "react-icons/fa";
@@ -9,7 +8,6 @@ import { FaMapMarkerAlt } from "react-icons/fa";
 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, darkMode, setDarkMode }) {
@@ -35,14 +33,13 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
 
   // Track currrent view from both Sidebar and Canvas when 'view' changes
   useEffect(() => {
-    // console.log("typeof view =", typeof view);
     console.log("Current view = ", view);
 
     const newIndex = buttons.findIndex((btn) => {
       if (btn.view === "widget") {
-        return DASHBOARD_VIEWS.includes(view); // Group match
+        return DASHBOARD_VIEWS.includes(view);
       }
-      return btn.view === view; // Exact match
+      return btn.view === view;
     });
 
     if (newIndex !== -1 ) {
@@ -52,7 +49,6 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
 
   return (
     <Box
-      // key={button.name}
       css={styles.root}
       width={isOpen ? "210px" : "71px"}
       transition="width 0.4s ease"
@@ -76,7 +72,6 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
               key={button.name} 
               css={styles.buttons} 
               onClick={() => {
-                // setActiveButton(idx);
                 onChangeView(button.view); // Trigger state change in Dashboard
               }} 
               bg={activeButton === idx ? "primary":undefined}