Fix add widget behavior, widget types and view settings button menu item...

client/src/components/Canvas/views/Home.jsx

@@ -1,10 +1,12 @@
-import { HStack, Flex, Tabs } from "@chakra-ui/react";
+import { useState } from "react";
+import { HStack, Flex, Tabs, Box } from "@chakra-ui/react";
 import MyDashboard from "./HomeTabs/MyDashboard";
 import { SearchBar } from "../CanvasComponents/SearchBar";
 import { SettingsButton } from "../CanvasComponents/SettingsButton";
 import { DailyActivity } from "./HomeTabs/DailyActivity";
 import { Gas } from "./HomeTabs/Gas";
 import { Seismic } from "./HomeTabs/Seismic";
+import { Deformation } from "./HomeTabs/Deformation";
 import { RemoteSensing } from "./HomeTabs/RemoteSensing";
 import { CancelButton } from "../CanvasComponents/CancelButton";
 import { SaveButton } from "../CanvasComponents/SaveButton";
@@ -12,44 +14,103 @@ import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
 import { v4 as uuid } from 'uuid';
 import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
 import { DASHBOARD_TABS } from "@/constants/viewKeys";
+import { WIDGET_REGISTRY } from "@/constants/widgetRegistry";
+import { WIDGET_INSPECTOR_REGISTRY } from "@/constants/widgetInspectorRegistry";
+import WidgetInspector from "../CanvasComponents/WidgetInspector";
 
 export default function Home(props) {
   // deconstructing props
-  const { view, layout, setLayout, setOriginalLayout,  onLayoutChange, onChangeView, onCancel, setOriginalWidgets,
-    isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
+  const { view, layout, setLayout, onLayoutChange, onChangeView, onCancel, isDelete, setIsDelete, 
+    beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
 
-  function appendWidget(name, w, h, minw, minh, maxw, maxh) {
+  const [inspectorOpen, setInspectorOpen] = useState(false);
+  const [inspectorTarget, setInspectorTarget] = useState(null);
+
+  const openInspector = ({ id, widgetKey }) => {
+    setInspectorTarget({ id, widgetKey, view });
+    setInspectorOpen(true);
+  };
+
+  function appendWidget(widgetKey, overrides = {}) {
     beginEditIfNeeded(); // Save state before anything else
-    
+    // Place canvas in edit mode upon adding a new widget 
+    setIsEditable(true);
+    setIsDelete(true);
+
+    const def = WIDGET_REGISTRY[widgetKey];
+    if(!def) { 
+      console.warn("appendWidget: unknown widgetKey:", widgetKey);
+      return;
+    };
+
+    // Widget Inspector Configuration Settings
+    const inspectorDef = WIDGET_INSPECTOR_REGISTRY[widgetKey];
+    const defaultConfig = inspectorDef?.defaultConfig ?? {};
+
     const newID = uuid();      // could be replaced with something else like guid
     const COLS = 16;
-    const W = w ?? 3;
-    const H = h ?? 3; 
 
-    setWidgetArray([           // updating widget array containing info on the types of widgets
-      ...widgetArray,
-      {i: newID, widget: name }
-    ]);
-    // onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
+    if (widgetKey === "gas_measurements") {
+      setInspectorTarget({ view, id: newID, widgetKey });
+      setInspectorOpen(true);
+    }
     
+    const {
+      w = def.defaults.w,
+      h = def.defaults.h,
+      minW = def.defaults.minW,
+      minH = def.defaults.minH,
+      maxW = def.defaults.maxW,
+      maxH = def.defaults.maxH, 
+    } = overrides; 
+
+    // DEBUG
+    console.log("after add:", { widgetKey, layoutLen: layout.length, widgetLen: widgetArray.length });
+
+    // IMPORTANT: use functional updates so you don't rely on stale widgetArray/layout
+    setWidgetArray(prev => [
+      ...prev,
+      { 
+        i: newID, 
+        widgetKey, 
+        // config: JSON.parse(JSON.stringify(defaultConfig)), // Can use this if Safari complains
+        config: structuredClone(defaultConfig)
+      },
+    ]);
+
     setLayout(prev => [
       ...prev,
       {
         i: newID,
-        x: (prev.length * W) % COLS, 
+        x: (prev.length * w) % COLS, 
         y: 0,
-        w: w, 
-        h: h,
-        minW: minw,
-        minH: minh,
-        maxW: maxw,
-        maxH: maxh,
+        w, 
+        h,
+        minW,
+        minH,
+        maxW,
+        maxH,
         static: false,
         resizeHandles: ['se']
       },
     ]);
   }
 
+  function updateWidgetConfig(id, patchOrFn) {
+    setWidgetArray(prev =>
+      prev.map(w => {
+        if (w.i !== id) return w;
+
+        const nextConfig =
+          typeof patchOrFn === "function"
+          ? patchOrFn(w.config ?? {})
+          : {...(w.config ?? {}), ...(patchOrFn ?? {}) };
+
+        return { ...w, config: nextConfig };
+      })
+    );
+  }
+
   const onSave = () => {
     console.log("saving widgets...");
     // Set all widgets back to static: true
@@ -61,8 +122,6 @@ export default function Home(props) {
   );
     setIsEditable(false);
     setIsDelete(false);
-    setOriginalLayout([]); // Clear backup layout
-    setOriginalWidgets([]);
   }
 
   const onEditWidgets = () => {
@@ -97,8 +156,11 @@ export default function Home(props) {
   }
 
   // Prop Forwarding
-  const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget };
-  const settingsButtonProps = { onEditWidgets, appendWidget };
+  const MyDashboardProps = { view, layout, onLayoutChange, isEditable, 
+    beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget, 
+    openInspector 
+  };
+  const settingsButtonProps = { view, onEditWidgets, appendWidget };
   
   return (
     /* HEADER */
@@ -150,10 +212,25 @@ export default function Home(props) {
 
       {/* CANVAS */}
       <Tabs.Content value="mydashboard">
-        <MyDashboard {...MyDashboardProps}/>
+        <Flex height="100%" width="100%" gap="3">
+          <Box flex="1" minW="0">
+            <MyDashboard {...MyDashboardProps}/>
+          </Box>
+
+          {inspectorOpen && inspectorTarget && (
+            <WidgetInspector
+              open={inspectorOpen}
+              onClose={() => setInspectorOpen(false)}
+              target={inspectorTarget}
+              widgetArray={widgetArray}
+              updateWidgetConfig={updateWidgetConfig}
+            />
+          )}
+        </Flex>
       </Tabs.Content>
+      
       <Tabs.Content value="gas">
-        <Gas />
+        <MyDashboard {...MyDashboardProps}/>
       </Tabs.Content>
       <Tabs.Content value="seismic">
         <Seismic />
@@ -164,6 +241,9 @@ export default function Home(props) {
       <Tabs.Content value="daily">
         <DailyActivity />
       </Tabs.Content>
+      <Tabs.Content value="deformation">
+        <Deformation />
+      </Tabs.Content>
     </Tabs.Root>
   );
 }