From 5f17293ac6c74eee2cceee26b53ad0285b463adf Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 25 Jul 2025 13:19:09 -0700 Subject: [PATCH 1/4] Add persistant widget state across sidebar 'dashboard' button and canvas header nav 'my dashboard' button --- .../src/components/layout/Canvas/Canvas.jsx | 9 +++++++-- .../layout/Canvas/views/DashboardCanvas.jsx | 20 +++++++++---------- .../layout/Canvas/views/RegionalMapCanvas.jsx | 2 -- client/src/components/layout/Dashboard.jsx | 17 +++++++++++++++- 4 files changed, 33 insertions(+), 15 deletions(-) diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index 96e61d2..bf4779e 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/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 ( - {view === "widget" && } + {view === "widget" && + } {view === "global" && } {view === "regional" && } {view === "volcano" && } diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx index 6a67254..868fcda 100644 --- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx +++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx @@ -8,14 +8,14 @@ import { Seismic } from "./DashboardCanvasNav/Seismic"; import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing"; import { useState, useEffect } from "react"; -export function DashboardCanvas() { +export function DashboardCanvas({ layout, setLayout, onLayoutChange }) { const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa) 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 [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([]); useEffect(() => { @@ -68,10 +68,10 @@ export function DashboardCanvas() { setLayout(prev => prev.filter(w => w.i !== id)); } - const onLayoutChange = (newLayout) => { - setLayout(newLayout); - console.log('Updated layout:', newLayout) - }; + // const onLayoutChange = (newLayout) => { + // setLayout(newLayout); + // console.log('Updated layout:', newLayout) + // }; return ( /* HEADER */ diff --git a/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx b/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx index 7bd3ef7..259e2fc 100644 --- a/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx +++ b/client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx @@ -14,8 +14,6 @@ export default function RegionalMapCanvas() { display="flex" alignItems="center" justifyContent="center" - - > Regional Map Canvas coming soon! diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx index 9e2710d..0cee7a6 100644 --- a/client/src/components/layout/Dashboard.jsx +++ b/client/src/components/layout/Dashboard.jsx @@ -11,6 +11,16 @@ 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 } + ]); + + const onLayoutChange = (newLayout) => { + setLayout(newLayout); + console.log('Updated layout:', newLayout) + }; return ( <> @@ -62,7 +72,12 @@ export default function Dashboard() { - + setLayout( newLayout )} + /> From 20998e43af4e5ff3e1f771534cb053cee2985f9f Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 25 Jul 2025 13:25:49 -0700 Subject: [PATCH 2/4] Clean garbage comments from refactor --- .../layout/Canvas/views/DashboardCanvas.jsx | 18 ------------------ client/src/components/layout/Dashboard.jsx | 5 ----- 2 files changed, 23 deletions(-) diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx index 868fcda..de6d6fc 100644 --- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx +++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx @@ -11,11 +11,6 @@ import { useState, useEffect } from "react"; export function DashboardCanvas({ layout, setLayout, onLayoutChange }) { const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa) 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([]); useEffect(() => { @@ -68,11 +63,6 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) { setLayout(prev => prev.filter(w => w.i !== id)); } - // const onLayoutChange = (newLayout) => { - // setLayout(newLayout); - // console.log('Updated layout:', newLayout) - // }; - return ( /* HEADER */ @@ -105,14 +95,6 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) { - {/* - - - */} {isEditable ? ( <> diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx index 0cee7a6..3776da6 100644 --- a/client/src/components/layout/Dashboard.jsx +++ b/client/src/components/layout/Dashboard.jsx @@ -17,11 +17,6 @@ export default function Dashboard() { { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true } ]); - const onLayoutChange = (newLayout) => { - setLayout(newLayout); - console.log('Updated layout:', newLayout) - }; - return ( <> Date: Mon, 28 Jul 2025 11:12:03 -0700 Subject: [PATCH 3/4] Add tooltip messaging on sidebar when closed --- .../src/components/layout/Sidebar/Sidebar.jsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx index 65fd73b..1b97ee9 100644 --- a/client/src/components/layout/Sidebar/Sidebar.jsx +++ b/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 ( - - ) + ); + // console.log("buttonElement is:", buttonElement) + console.log("Returning:", !isOpen ? "Tooltip" : "Button", buttonElement); + return !isOpen ? ( + + { buttonElement } + + ) : ( + buttonElement + ); })} - ); From 9d6a4b356f30501735b35abf5c59bf319bcfc746 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 28 Jul 2025 11:44:25 -0700 Subject: [PATCH 4/4] Fix competiting zIndex values between the Canvas Header and the Avatar dropdown menu --- client/src/components/layout/Canvas/views/DashboardCanvas.jsx | 2 +- client/src/components/layout/Header/UserAvatarMenu.jsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx index de6d6fc..549584e 100644 --- a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx +++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx @@ -70,7 +70,7 @@ export function DashboardCanvas({ layout, setLayout, onLayoutChange }) { as="header" position="sticky" top="0" - zIndex="banner" + zIndex="dropdown" // zIndex: 1100 bg="base200" px={6} py={3} diff --git a/client/src/components/layout/Header/UserAvatarMenu.jsx b/client/src/components/layout/Header/UserAvatarMenu.jsx index c4eb8a0..a4960cf 100644 --- a/client/src/components/layout/Header/UserAvatarMenu.jsx +++ b/client/src/components/layout/Header/UserAvatarMenu.jsx @@ -18,7 +18,8 @@ export default function UserAvatarMenu({ name, avatar }) { - + {/* zIndex: overlay = 1300 */} + Account Settings