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

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

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 = () => {
-    console.log("canceling changes...");
-    if (originalLayout.length) { 
-      setLayout(originalLayout.map(item => ({
-        ...item, 
+    // Set all widgets back to static: true
+    setLayout(prevLayout => 
+      prevLayout.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;
-
-        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);
+        onChangeView(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() {
-    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>
-    );
+export default function GlobalMapCanvas() {
+  const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
+  return (
+      <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; OpenStreetMap contributors'
+        />
+        <Marker position={position}>
+          <Popup>
+            CVO — Home of the volcanoligists
+          </Popup>
+        </Marker>
+      </MapContainer>
+  );
 }