lots of file surgery, it works

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

@@ -1,23 +1,22 @@
 // This Canvas component will be used to dynamically populate 
 // the main canvas section of the web App with a default state
-// of 'DashboardCanvas' 
+// of 'WidgetCanvas' 
 
 import { Box } from "@chakra-ui/react";
 import GlobalMapCanvas from "./views/GlobalMapCanvas";
 import RegionalMapCanvas from "./views/RegionalMapCanvas";
 import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
-import { MyDashboardCanvas } from "./views/MyDashboardCanvas";
+import { DashboardCanvas } from "./views/DashboardCanvas";
 
 export default function Canvas({ view }) {
-  return (
+    return (
-    <Box height="100%" width="100%">
+        <Box height="100%" width="100%">
-      {view === "widget" && <MyDashboardCanvas />}
+            {view === "widget" && <DashboardCanvas />}
-      {view === "global" && <GlobalMapCanvas />}
+            {view === "global" && <GlobalMapCanvas />}
-      {view === "regional" && <RegionalMapCanvas />}
+            {view === "regional" && <RegionalMapCanvas />}
-      {view === "volcano" && <VolcanoCanvas />}
+            {view === "volcano" && <VolcanoCanvas />}
-      {view === "admin" && <AdminCanvas />}
+            {view === "admin" && <AdminCanvas />}
-    </Box>
+        </Box>
-  );
+    );
 }
-

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

@@ -5,22 +5,7 @@
 import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 
-export function SettingsButton(props) {
+export function SettingsButton({onAddWidget, onEditWidgdets, onRemoveWidgets}) {    
-    const handleAddWidget = () => {
-        console.log("Add Widget clicked");
-        // TODO: Implement widget-adding logic
-    }
-
-    const handleEditWidgdets = () => {
-        console.log("Edit Widgets clicked")
-        // TODO: Implement widget-editing logic
-    }
-
-    const handleDeleteWidgets = () => {
-        console.log("Delete Widgets clicked");
-        // TODO: Implement widget-deletion logic
-    }
-    
     return (
         // This uses Chakra's built in menu component
         <Menu.Root>
@@ -32,10 +17,10 @@ export function SettingsButton(props) {
             <Portal>
                 <Menu.Positioner>
                     <Menu.Content>
-                        <Menu.Item onClick={handleAddWidget} value="addwidget">Add Widget</Menu.Item>
+                        <Menu.Item onClick={onAddWidget} value="addwidget">Add Widget</Menu.Item>
-                        <Menu.Item onClick={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
+                        <Menu.Item onClick={onEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
                         <Menu.Item 
-                            onClick={handleDeleteWidgets}
+                            onClick={onRemoveWidgets}
                             color="fg.error"
                             _hover={{ bg: "bg.error", color: "fg.error "}}
                         >

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

@@ -6,9 +6,43 @@ import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
 import { Gas } from "./DashboardCanvasNav/Gas";
 import { Seismic } from "./DashboardCanvasNav/Seismic";
 import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
+import { useState } from "react";
+
+export function DashboardCanvas() {
+  const [layout, setLayout] = useState([
+    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
+  ]);
+
+  const [newCounter, setNewCounter] = useState(3);
+
+  const onAddWidget = () => {
+    const newId = newCounter.toString();
+    setLayout(prev => [
+    ...prev,
+    {
+      i: newId,
+      x: (prev.length * 3) % 12,
+      y: Infinity, 
+      w: 3, 
+      h: 3
+    }
+    ]);
+    setNewCounter(prev => prev + 1);
+  };
+
+  const onRemoveWidget = (id) => {
+    setLayout(prev => prev.filter(w => w.i !== id));
+  }
+
+  const onLayoutChange = (newLayout) => { 
+    setLayout(newLayout);
+    console.log('Updated layout:', newLayout)
+  };
 
-export function MyDashboardCanvas() {
   return (
+    /* HEADER */
     <Tabs.Root defaultValue="my dashboard">
       <Flex 
         as="header"
@@ -40,12 +74,20 @@ export function MyDashboardCanvas() {
 
         <HStack>
           <SearchBar />
-          <SettingsButton />
+          <SettingsButton 
+            onAddWidget={ onAddWidget }
+            // onEditWidgets={ onEditWidgets }
+            onDeleteWidgets={ onRemoveWidget }
+          />
         </HStack>
       </Flex>
 
+      {/* CANVAS */}
       <Tabs.Content value="my dashboard">
-        <WidgetCanvas />
+        <WidgetCanvas 
+          layout={layout}
+          onLayoutChange={onLayoutChange}
+        />
       </Tabs.Content>
       <Tabs.Content value="gas">
         <Gas />

client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx

@@ -7,24 +7,13 @@ import GridLayout, { WidthProvider } from 'react-grid-layout';
 import Widget from '../../components/Widget.jsx';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 
-export default function WidgetCanvas() {
+export default function WidgetCanvas({layout, onLayoutChange}) {
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
     const recipe = useSlotRecipe({ key: "widget" });
     const styles = recipe(); // using root recipe for widget below
     const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
 
-    const [layout, setLayout] = useState([
-        { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
-        { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
-        { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
-    ]);
-
-    const onLayoutChange = (newLayout) => { 
-        setLayout(newLayout);
-        console.log('Updated layout:', newLayout)
-    };
-
     // don't allow text highlighting when dragging
     const handleDragStart = () => {
         document.body.style.userSelect = "none";