From 9ad6e3b79968c9dcf7e3f3faf0080e59f5d2644c Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Mon, 11 Aug 2025 14:02:58 -0700
Subject: [PATCH 1/3] widget menu refactoring

---
 .../CanvasComponents/FirstWidgetButton.jsx    | 80 ++++++++-----------
 .../CanvasComponents/SettingsButton.jsx       |  8 +-
 .../{AddWidgetMenu.jsx => WidgetMenu.jsx}     | 25 ++----
 3 files changed, 45 insertions(+), 68 deletions(-)
 rename client/src/components/Canvas/CanvasComponents/{AddWidgetMenu.jsx => WidgetMenu.jsx} (50%)

diff --git a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx
index 849cfc2..83c7c9e 100644
--- a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx
+++ b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx
@@ -1,50 +1,36 @@
-import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
-import AlertLevel from './AlertLevelWidget'
-// import AddWidgetMenu from './AddWidgetMenu';
+import { Box, Menu, Portal } from '@chakra-ui/react'
+import WidgetMenu from './WidgetMenu';
 
 export default function FirstWidgetButton({ appendWidget }) {
-    return (
-        <Menu.Root positioning={{ placement: "bottom-middle" }} >
-            <Menu.Trigger asChild>
-                <Box
-                    p={6}
-                    m="auto"
-                    mt={6}
-                    align="center"
-                    textAlign="center"
-                    justify="center"
-                    width="400px"
-                    borderRadius="md" 
-                    boxShadow="md"
-                    border="2px dashed"
-                    borderColor="gray.300"
-                    bg="gray.50"
-                    cursor="pointer"
-                    _hover = {{
-                        bg: "gray.100",
-                        borderColor: "gray.400",
-                        boxShadow: "lg",
-                    }}
-                >
-                    Add First Widget
-                </Box>
-            </Menu.Trigger>
-            <Portal>
-                <Menu.Positioner>
-                    <Menu.Content>
-                        <Menu.Item 
-                            value="AlertLevel" 
-                            onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}
-                        >
-                            Alert Level
-                        </Menu.Item>
-                        <Menu.Item value="co2">CO2</Menu.Item>
-                        <Menu.Item value="ivans">IVANS</Menu.Item>
-                        <Menu.Item value="plume heights">Plume Heights</Menu.Item>
-                        <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
-                    </Menu.Content>
-                </Menu.Positioner>
-            </Portal>
-        </Menu.Root>
-    );
+  const triggerItem = (<>
+    <Menu.Trigger asChild>
+      <Box
+        p={6}
+        m="auto"
+        mt={6}
+        align="center"
+        textAlign="center"
+        justify="center"
+        width="400px"
+        borderRadius="md" 
+        boxShadow="md"
+        border="2px dashed"
+        borderColor="gray.300"
+        bg="gray.50"
+        cursor="pointer"
+        _hover = {{
+          bg: "gray.100",
+          borderColor: "gray.400",
+          boxShadow: "lg",
+        }}
+      >
+        Add Your First Widget
+      </Box>
+    </Menu.Trigger>
+  </>);
+  const positioning = { placement: "bottom-middle" };
+  const WidgetMenuProps = { appendWidget, triggerItem, positioning };
+  return (
+    <WidgetMenu {...WidgetMenuProps} />
+  );
 }
\ No newline at end of file
diff --git a/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx b/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx
index d51904b..b5772c2 100644
--- a/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx
+++ b/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx
@@ -1,9 +1,11 @@
 import { IconButton, Menu, Portal } from "@chakra-ui/react";
+import { IoIosArrowBack } from "react-icons/io";
 import { FiSettings } from "react-icons/fi";
-import AddWidgetMenu from "./AddWidgetMenu";
+import WidgetMenu from "./WidgetMenu";
 
 export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget}) {  
-  const addWidgetMenuProps = { appendWidget }
+  const triggerItem = (<> <Menu.TriggerItem> <IoIosArrowBack /> Add Widget</Menu.TriggerItem> </>);
+  const WidgetMenuProps = { appendWidget, triggerItem }
   return (
     <Menu.Root>
       <Menu.Trigger asChild >
@@ -14,7 +16,7 @@ export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget})
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
-            <AddWidgetMenu {...addWidgetMenuProps}/>
+            <WidgetMenu {...WidgetMenuProps}/>
             <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
             <Menu.Item 
               onClick={onDeleteWidgets}
diff --git a/client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx b/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx
similarity index 50%
rename from client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx
rename to client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx
index 0413971..c02ce80 100644
--- a/client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx
+++ b/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx
@@ -1,13 +1,10 @@
-import { IoIosArrowBack } from "react-icons/io";
 import { Menu, Portal } from "@chakra-ui/react";
 import AlertLevel from "./AlertLevelWidget";
 
-export default function AddWidgetMenu({appendWidget}) {
+export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
   return (
-    <Menu.Root>
-      <Menu.TriggerItem>
-        <IoIosArrowBack /> Add Widget
-      </Menu.TriggerItem>
+    <Menu.Root positioning={positioning}>
+      {triggerItem}
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
@@ -17,18 +14,10 @@ export default function AddWidgetMenu({appendWidget}) {
             >
               Alert Level
             </Menu.Item>
-            <Menu.Item>
-              CO2
-            </Menu.Item>
-            <Menu.Item>
-              IVANS
-            </Menu.Item>
-            <Menu.Item>
-              Plume Heights
-            </Menu.Item>
-            <Menu.Item>
-              Alert Level Changes
-            </Menu.Item>
+            <Menu.Item value="co2">CO2</Menu.Item>
+            <Menu.Item value="ivans">IVANS</Menu.Item>
+            <Menu.Item value="plume heights">Plume Heights</Menu.Item>
+            <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
           </Menu.Content>
         </Menu.Positioner>
       </Portal>

From f8c9a0cc0b802a53fbacc3387b1eeb020379a105 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Mon, 11 Aug 2025 15:10:58 -0700
Subject: [PATCH 2/3] Adding dialogs instead of window messages

---
 .../Canvas/CanvasComponents/WidgetMenu.jsx    |  2 +-
 client/src/components/Canvas/views/Home.jsx   |  4 ++--
 client/src/components/Dashboard.jsx           | 22 ++++++++++++++-----
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx b/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx
index c02ce80..179e0e6 100644
--- a/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx
+++ b/client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx
@@ -10,7 +10,7 @@ export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
           <Menu.Content>
             <Menu.Item 
               value="AlertLevel" 
-              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 4, 7)}  // width and height are passed through here for each widget
+              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
             >
               Alert Level
             </Menu.Item>
diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx
index d44c8c4..d6cb023 100644
--- a/client/src/components/Canvas/views/Home.jsx
+++ b/client/src/components/Canvas/views/Home.jsx
@@ -33,14 +33,14 @@ export default function Home({...props}) {
         resizeHandles: ['se']
       }
     ]);
-    onEditWidgets();
+    // onEditWidgets();
   };
 
   function appendWidget(name, w, h, minw, minh, maxw, maxh) {
     const newID = uuid();      // could be replaced with something else like guid
     setWidgetArray([           // updating widget array containing info on the types of widgets
       ...widgetArray,
-      {i: newID, widget: name }
+      {i: newID, widget: name, resizable: true }
     ]);
     onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
   }
diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
index a9db845..4d4aff0 100644
--- a/client/src/components/Dashboard.jsx
+++ b/client/src/components/Dashboard.jsx
@@ -1,8 +1,9 @@
 import Header from './Header/Header.jsx';
 import Sidebar from './Sidebar/Sidebar.jsx';
 import Canvas from './Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Dialog } from '@chakra-ui/react';
+import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
 import { useState } from 'react';
+import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
 
 export default function Dashboard() {
   const recipe = useRecipe({ key: "dashboard" });
@@ -15,6 +16,7 @@ export default function Dashboard() {
   const [view, setView] = useState("mydashboard");
   const [layout, setLayout] = useState([]);
   const [widgetArray, setWidgetArray] = useState([]);
+  const dialog = useDialog();
 
   const onCancel = () => {
     // This is a test comment
@@ -33,11 +35,19 @@ export default function Dashboard() {
   // Prevent navigation while in Edit mode without saving or cancelling
   const handleViewChange = (nextView) => { 
     if (view === "mydashboard" && isEditable) {
-      const confirmed = window.confirm(
-        "You have unsaved changes. Discard them and continue?"
-      );
-      if (!confirmed) return; 
-      onCancel(); // Discards the layout
+      dialog.open();
+      <DialogPopup dialog={dialog}/>
+      
+      
+      
+      
+      
+      
+      // const confirmed = window.confirm(
+      //   "You have unsaved changes. Discard them and continue?"
+      // );
+      // if (!confirmed) return; 
+      // onCancel();
     }
     setView(nextView);
   };

From f85c64e7f00f689a2c2bbdb9747f4e2b67c39c2e Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Tue, 12 Aug 2025 09:55:57 -0700
Subject: [PATCH 3/3] Dialog popup works

---
 .../Canvas/CanvasComponents/DialogPopup.jsx   | 33 +++++++++++++++++++
 client/src/components/Dashboard.jsx           | 16 ++++-----
 2 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/Canvas/CanvasComponents/DialogPopup.jsx

diff --git a/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx b/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx
new file mode 100644
index 0000000..f7e90cf
--- /dev/null
+++ b/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx
@@ -0,0 +1,33 @@
+import { Dialog, Portal, CloseButton, Button } from "@chakra-ui/react";
+
+export default function DialogPopup({dialog}) {
+  console.log("3. dialog popup")
+  return(
+    <Dialog.RootProvider value={dialog}>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Leave Your Changes Behind?</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <p>
+                Click 'No' to go back and save your changes before navigating away from MyDashboard.
+              </p>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.ActionTrigger asChild>
+                <Button variant="outline">No</Button>
+              </Dialog.ActionTrigger>
+              <Button bg="tomato">Yes</Button>
+            </Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.RootProvider>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
index 4d4aff0..093ae7f 100644
--- a/client/src/components/Dashboard.jsx
+++ b/client/src/components/Dashboard.jsx
@@ -34,15 +34,12 @@ export default function Dashboard() {
   
   // Prevent navigation while in Edit mode without saving or cancelling
   const handleViewChange = (nextView) => { 
+    console.log("1. handling view change")
     if (view === "mydashboard" && isEditable) {
-      dialog.open();
-      <DialogPopup dialog={dialog}/>
-      
-      
-      
-      
-      
-      
+      console.log("2. currently editing");
+      dialog.setOpen(true);
+      return;
+
       // const confirmed = window.confirm(
       //   "You have unsaved changes. Discard them and continue?"
       // );
@@ -62,6 +59,8 @@ export default function Dashboard() {
   const headerProps = { onChangeView: handleViewChange };
   
   return (
+    <> 
+      <DialogPopup dialog={dialog} />
       <Grid css={styles}
         templateRows="1fr 11fr"
         // templateColumns="1fr 20fr"
@@ -79,5 +78,6 @@ export default function Dashboard() {
           <Canvas {...canvasProps}/>
         </GridItem>
       </Grid>
+    </>
   );
 }
\ No newline at end of file