Merge branch 'main' into 'add/widgets/conditional-deleting'

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

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

@@ -9,10 +9,15 @@ import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
 import { DashboardCanvas } from "./views/DashboardCanvas";
 
-export default function Canvas({ view }) {
+export default function Canvas({ view, layout, setLayout, onLayoutChange }) {
     return (
         <Box height="100%" width="100%">
-            {view === "widget" && <DashboardCanvas />}
+            {view === "widget" && 
+                <DashboardCanvas 
+                    layout={ layout }
+                    setLayout={ setLayout }
+                    onLayoutChange={ onLayoutChange }
+                />}
             {view === "global" && <GlobalMapCanvas />}
             {view === "regional" && <RegionalMapCanvas />}
             {view === "volcano" && <VolcanoCanvas />}

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

@@ -10,16 +10,10 @@ import { useState, useEffect, useDebugValue } from "react";
 import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
 
-export function DashboardCanvas() {
+export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
-  console.log("rendering dashboardcanvas");
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [isDelete, setIsDelete] = useState(false);
   const [newCounter, setNewCounter] = useState(3);
-  const [layout, setLayout] = useState([
-    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
-    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
-    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
-  ]);
   const [originalLayout, setOriginalLayout] = useState([]);
 
   const onAddWidget = () => {
@@ -85,11 +79,6 @@ export function DashboardCanvas() {
     setLayout(layout => layout.filter(w => w.i !== id));
   }
 
-  const onLayoutChange = (newLayout) => { 
-    setLayout(newLayout);
-    console.log('Updated layout:', newLayout)
-  };
-
   return (
     /* HEADER */
     <Tabs.Root lazyMount defaultValue="my dashboard">
@@ -97,7 +86,7 @@ export function DashboardCanvas() {
         as="header"
 				position="sticky"
 				top="0"
-        zIndex="banner"
+        zIndex="dropdown" // zIndex: 1100
 				bg="base200"
 				px={6}
 				py={3}

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

@@ -14,8 +14,6 @@ export default function RegionalMapCanvas() {
                 display="flex"
                 alignItems="center"
                 justifyContent="center"
-
-            
             >
                 <Text fontsize="2xl" fontWeight="bold" color="gray.700">
                     Regional Map Canvas coming soon!

client/src/components/layout/Dashboard.jsx

@@ -11,6 +11,11 @@ export default function Dashboard() {
 
   // Lifted State - defaults to widget dashboard
   const [view, setView] = useState("widget");
+  const [layout, setLayout] = useState([
+    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
+    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
+    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true }
+  ]);
 
   return (
     <>
@@ -62,7 +67,12 @@ export default function Dashboard() {
           <Sidebar onChangeView={ setView }/>
         </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
-          <Canvas view={ view }/>
+          <Canvas 
+            view={ view }
+            layout={ layout }
+            setLayout={ setLayout }
+            onLayoutChange={( newLayout ) => setLayout( newLayout )}
+          />
         </GridItem> 
       </Grid>
     </>

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

@@ -18,7 +18,8 @@ export default function UserAvatarMenu({ name, avatar }) {
 				</Box>
 			</Menu.Trigger>
 			<Portal>
-				<Menu.Positioner zIndex="popover">
+				{/* zIndex: overlay = 1300 */}
+				<Menu.Positioner zIndex="overlay"> 
 					<Menu.Content>
 						<Menu.Item value="account">Account</Menu.Item>
 						<Menu.Item value="settings">Settings</Menu.Item>

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

@@ -1,5 +1,6 @@
-import { useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
+import { useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton } from "@chakra-ui/react";
 import { ColorModeButton } from "@/components/ui/color-mode";
+import { Tooltip } from "@/components/ui/tooltip";
 import { FaVolcano } from "react-icons/fa6";
 import { RxHamburgerMenu } from "react-icons/rx";
 import { useState } from "react";
@@ -96,8 +97,9 @@ export default function Sidebar({ onChangeView }) {
 
       {buttons.map((button, idx) => {
         const Icon = button.icon;
-        return (
+        const buttonElement = (
-          <Button key={idx} 
+          <Button 
+                  // key={idx} 
                   css={styles.buttons} 
                   onClick={() => {
                     setActiveButton(idx);
@@ -119,9 +121,17 @@ export default function Sidebar({ onChangeView }) {
                 {button.name}
               </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>
+            { buttonElement }
+          </Tooltip>
+        ) : (
+          buttonElement 
+        );
       })}
-      
       <ColorModeButton position="absolute" bottom="2"/>
     </Box>
   );