From 4afccac3f30d256f7f8d1c24942eb1841cf6e3be Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Wed, 13 Aug 2025 10:49:37 -0700 Subject: [PATCH 1/3] Fix tooltip zIndex to appear on top of maps and other canvas items --- client/src/components/Canvas/CanvasComponents/Tooltip.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Canvas/CanvasComponents/Tooltip.jsx b/client/src/components/Canvas/CanvasComponents/Tooltip.jsx index c22f943..0823d53 100644 --- a/client/src/components/Canvas/CanvasComponents/Tooltip.jsx +++ b/client/src/components/Canvas/CanvasComponents/Tooltip.jsx @@ -41,7 +41,7 @@ export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) py={1} borderRadius="md" whiteSpace="nowrap" - zIndex={10} + zIndex="overlay" // zIndex = 1300 > {content} From 5e2364334f95af60db760d80d3033a6c675cb6b2 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Wed, 13 Aug 2025 12:27:47 -0700 Subject: [PATCH 2/3] Prevent Tooltip from displaying when Sidebar toggles between The Home sidebar and the Personal sidebar while closed --- .../Canvas/CanvasComponents/Tooltip.jsx | 2 +- client/src/components/Sidebar/Sidebar.jsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/client/src/components/Canvas/CanvasComponents/Tooltip.jsx b/client/src/components/Canvas/CanvasComponents/Tooltip.jsx index 0823d53..4c73b74 100644 --- a/client/src/components/Canvas/CanvasComponents/Tooltip.jsx +++ b/client/src/components/Canvas/CanvasComponents/Tooltip.jsx @@ -3,7 +3,7 @@ import { chakra, useSlotRecipe } from "@chakra-ui/react"; export default function Tooltip ({tooltipkey, content, sidebarIsOpen, children}) { - const [isVisible, setIsVisible] = useState(!sidebarIsOpen); + const [isVisible, setIsVisible] = useState(false); const recipe = useSlotRecipe({ key: "sidebar" }); const styles = recipe(); const timeoutId = useRef(null); diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx index a403f76..57b311f 100644 --- a/client/src/components/Sidebar/Sidebar.jsx +++ b/client/src/components/Sidebar/Sidebar.jsx @@ -19,21 +19,21 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) { const styles = recipe(); const { toggleColorMode } = useColorMode(); - // this list of btns will come from the db (not every usr will have access to admin) - let buttons = [ - {icon: FaHome, name: "Home", view: "mydashboard"}, - {icon: FaGlobeAmericas, name: "Global Map", view: "global"}, - {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"}, - {icon: FaVolcano, name: "Volcano", view: "volcano"}, - {icon: HiUsers, name: "Admin", view: "admin"} - ]; - + let buttons = []; // Different Sidebar Button Options for Settings View if (view === "settings" || view === "personal" || view === "security") { buttons = [ {icon: IoPersonCircleSharp, name: "Personal Info", view: "personal"}, {icon: MdOutlineSecurity, name: "Security", view: "security"}, ] + } else { + buttons = [ + {icon: FaHome, name: "Home", view: "mydashboard"}, + {icon: FaGlobeAmericas, name: "Global Map", view: "global"}, + {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"}, + {icon: FaVolcano, name: "Volcano", view: "volcano"}, + {icon: HiUsers, name: "Admin", view: "admin"} + ]; }; const toggleSidebar = () => { From 846afa3eaca17cfd80c8a815e4d7ec535b9a7f5b Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Wed, 13 Aug 2025 12:55:33 -0700 Subject: [PATCH 3/3] Add useMemo to sidebar button function to prevent unecessary remounting of components --- client/src/components/Sidebar/Sidebar.jsx | 21 ++++++++++----------- client/src/constants/viewKeys.js | 3 +++ 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx index 57b311f..70d35cd 100644 --- a/client/src/components/Sidebar/Sidebar.jsx +++ b/client/src/components/Sidebar/Sidebar.jsx @@ -9,7 +9,7 @@ import { HiUsers } from "react-icons/hi2"; import { VscThreeBars } from "react-icons/vsc"; import { MdOutlineSecurity } from "react-icons/md"; import { IoPersonCircleSharp } from "react-icons/io5"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import { DASHBOARD_VIEWS } from "@/constants/viewKeys"; export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) { @@ -19,22 +19,21 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) { const styles = recipe(); const { toggleColorMode } = useColorMode(); - let buttons = []; - // Different Sidebar Button Options for Settings View - if (view === "settings" || view === "personal" || view === "security") { - buttons = [ - {icon: IoPersonCircleSharp, name: "Personal Info", view: "personal"}, - {icon: MdOutlineSecurity, name: "Security", view: "security"}, - ] - } else { - buttons = [ + const buttons = useMemo(() => { + if (["settings", "personal", "security"].includes(view)) { + return [ + {icon: IoPersonCircleSharp, name: "Personal Info", view: "personal"}, + {icon: MdOutlineSecurity, name: "Security", view: "security"}, + ]; + } + return [ {icon: FaHome, name: "Home", view: "mydashboard"}, {icon: FaGlobeAmericas, name: "Global Map", view: "global"}, {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"}, {icon: FaVolcano, name: "Volcano", view: "volcano"}, {icon: HiUsers, name: "Admin", view: "admin"} ]; - }; + }, [view]); const toggleSidebar = () => { if (isOpen) setIsOpen(false); diff --git a/client/src/constants/viewKeys.js b/client/src/constants/viewKeys.js index 02cf9fc..987eb9e 100644 --- a/client/src/constants/viewKeys.js +++ b/client/src/constants/viewKeys.js @@ -12,4 +12,7 @@ export const VIEW_LABELS = { regional: "Regional Map", volcano: "Volcano", admin: "Admin", + settings: "Settings", + personal: "Personal Info", + security: "Security", }; \ No newline at end of file