fix state issue

voxel51 · Jul 9, 2024 · a61215e · a61215e
1 parent d6d08a7
commit a61215e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/app/packages/core/src/plugins/SchemaIO/components/DashboardView.tsx b/app/packages/core/src/plugins/SchemaIO/components/DashboardView.tsx
@@ -7,7 +7,7 @@ import {
   IconButton,
 } from "@mui/material";
 import React, { useState, useEffect, useCallback } from "react";
-import { HeaderView } from ".";
+import { Button, HeaderView } from ".";
 import { getComponentProps, getPath, getProps } from "../utils";
 import { ObjectSchemaType, ViewPropsType } from "../utils/types";
 import DynamicIO from "./DynamicIO";
@@ -117,9 +117,13 @@ export default function DashboardView(props: ViewPropsType) {
           width={GRID_WIDTH}
           onDragStart={() => setIsDragging(true)}
           onDragStop={() => setIsDragging(false)}
+          resizeHandles={["ne"]}
           isDraggable={!isDragging}
           isResizable={!isDragging} // Allow resizing
-          draggableHandle=".drag-handle" // Specify the drag handle class
+          draggableHandle=".drag-handle"
+          resizeHandle={(axis, ref) => {
+            return <ResizeHandle {...{ axis, ref }} />;
+          }}
         >
           {propertiesAsArray.map((property) => {
             const { id } = property;
@@ -159,10 +163,10 @@ export default function DashboardView(props: ViewPropsType) {
                   parentSchema={schema}
                   relativePath={id}
                 />
-                <ResizeHandle className="react-resizable-handle" />
               </Box>
             );
           })}
+          <Button>Add</Button>
         </GridLayout>
       </Box>
     </Box>

diff --git a/app/packages/operators/src/built-in-operators.ts b/app/packages/operators/src/built-in-operators.ts
@@ -11,11 +11,12 @@ import {
 import * as fos from "@fiftyone/state";
 import * as types from "./types";
 
+import { useTrackEvent } from "@fiftyone/analytics";
 import { LOAD_WORKSPACE_OPERATOR } from "@fiftyone/spaces/src/components/Workspaces/constants";
 import { toSlug } from "@fiftyone/utilities";
 import copyToClipboard from "copy-to-clipboard";
-import { merge } from "lodash";
-import { useSetRecoilState, useRecoilCallback } from "recoil";
+import { merge, set as setValue } from "lodash";
+import { useRecoilCallback, useSetRecoilState } from "recoil";
 import { useOperatorExecutor } from ".";
 import useRefetchableSavedViews from "../../core/src/hooks/useRefetchableSavedViews";
 import registerPanel from "./Panel/register";
@@ -30,7 +31,6 @@ import {
 } from "./operators";
 import { useShowOperatorIO } from "./state";
 import usePanelEvent from "./usePanelEvent";
-import { useTrackEvent } from "@fiftyone/analytics";
 
 //
 // BUILT-IN OPERATORS
@@ -885,15 +885,27 @@ class PatchPanelData extends Operator {
 
 function useUpdatePanelStatePartial(local?: boolean) {
   const setPanelStateById = useSetPanelStateById(local);
-  return (ctx, { targetPartial = "state", targetParam, patch, clear }) => {
+  return (
+    ctx,
+    { targetPartial = "state", targetParam, patch, clear, deepMerge, set }
+  ) => {
     targetParam = targetParam || targetPartial;
     setTimeout(() => {
       setPanelStateById(ctx.getCurrentPanelId(), (current = {}) => {
         const currentCustomPanelState = current?.[targetPartial] || {};
         let updatedState;
         const param = ctx.params[targetParam];
-        if (patch) {
+        if (set) {
+          // go through each "param" which is a path and set it in the state
+          for (let [path, value] of Object.entries(param)) {
+            updatedState = { ...currentCustomPanelState };
+            setValue(updatedState, path, value);
+          }
+        } else if (deepMerge) {
           updatedState = merge({}, currentCustomPanelState, param);
+        } else if (patch) {
+          // patch = shallow merge
+          updatedState = { ...currentCustomPanelState, ...param };
         } else if (clear) {
           updatedState = {};
         } else {