Merge pull request #4946 from voxel51/feat/clickable-container

add click support to container in OperatorIO
voxel51 · Oct 30, 2024 · 95955c9 · 95955c9
2 parents de79980 + edaf5f7
commit 95955c9
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 11 deletions.
diff --git a/app/packages/components/src/components/ModalBase/ModalBase.tsx b/app/packages/components/src/components/ModalBase/ModalBase.tsx
@@ -71,9 +71,9 @@ const ModalBase: React.FC<ModalBaseProps> = ({
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => {
-    if (!secondaryCallback) {
+    setTimeout(() => {
       setOpen(false);
-    }
+    }, 500); // 500 milliseconds = 0.5 second
   };
 
   if (typeof modal?.textAlign === "string") {
@@ -173,9 +173,15 @@ const ModalBase: React.FC<ModalBaseProps> = ({
         !primaryButtonView.params.tags ||
         primaryButtonView.params.tags.length === 0)
     ) {
-      setPrimaryButtonView({ ...primaryButtonView, disabled: true });
+      setPrimaryButtonView({
+        ...primaryButtonView,
+        disabled: primaryButtonView?.disabled || true,
+      });
     } else {
-      setPrimaryButtonView({ ...primaryButtonView, disabled: false });
+      setPrimaryButtonView({
+        ...primaryButtonView,
+        disabled: primaryButtonView?.disabled || false,
+      });
     }
   }, [primaryButtonView.params]);
 
@@ -198,7 +204,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
       </Box>
       <Modal
         open={open}
-        onClose={handleClose}
+        onClose={() => setOpen(false)}
         aria-labelledby="modal-title"
         aria-describedby="modal-subtitle"
       >

diff --git a/app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx b/app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx
@@ -7,16 +7,22 @@ import {
   overlayToSx,
 } from "../utils";
 import { ViewPropsType } from "../utils/types";
+import { usePanelEvent } from "@fiftyone/operators";
+import { usePanelId } from "@fiftyone/spaces";
 import { has } from "lodash";
 
 export default function ContainerizedComponent(props: ContainerizedComponent) {
-  const { schema, children } = props;
+  const { schema, children, path } = props;
   const container = schema?.view?.container;
   let containerizedChildren = children;
   if (container) {
     const Container = containersByName[container.name];
     if (Container) {
-      containerizedChildren = <Container {...container}>{children}</Container>;
+      containerizedChildren = (
+        <Container {...container} path={path}>
+          {children}
+        </Container>
+      );
     } else {
       console.warn(`Container ${container.name} can not be found`);
     }
@@ -39,14 +45,52 @@ export default function ContainerizedComponent(props: ContainerizedComponent) {
 }
 
 function PaperContainer(props: PaperContainerProps) {
-  const { elevation = 1, children, rounded = true, ...paperProps } = props;
+  const {
+    elevation = 1,
+    children,
+    rounded = true,
+    on_click,
+    params = {},
+    path,
+    prompt,
+    ...paperProps
+  } = props;
+  const panelId = usePanelId();
+  const handleClick = usePanelEvent();
+  const computedParams = { ...params, path };
   const roundedSx = rounded ? {} : { borderRadius: 0 };
   const paddingSx = getPaddingSx(props);
   const marginSx = getMarginSx(props);
+  const hoverProps = on_click
+    ? {
+        "&:hover": {
+          cursor: "pointer",
+          backgroundColor: (theme) => theme.palette.action.hover,
+        },
+      }
+    : {};
+
   return (
     <Paper
-      sx={{ p: 1, m: 0.5, ...roundedSx, ...paddingSx, ...marginSx }}
+      sx={{
+        p: 1,
+        m: 0.5,
+        transition: "background 0.25s ease",
+        ...roundedSx,
+        ...paddingSx,
+        ...marginSx,
+        ...hoverProps,
+      }}
       elevation={elevation}
+      onClick={() => {
+        if (on_click) {
+          handleClick(panelId, {
+            params: computedParams,
+            operator: on_click,
+            prompt,
+          });
+        }
+      }}
       {...paperProps}
     >
       {children}
@@ -63,5 +107,5 @@ const containersByName = { PaperContainer, OutlinedContainer };
 type ContainerizedComponent = PropsWithChildren<ViewPropsType>;
 
 type PaperContainerProps = PropsWithChildren<
-  PaperProps & { rounded?: boolean }
+  PaperProps & { rounded?: boolean; [key: string]: any }
 >;
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
@@ -2671,8 +2671,12 @@ class Container(BaseType):
     def __init__(self, **kwargs):
         self._kwargs = kwargs
 
+    def kwargs_to_json(self):
+        view_kwargs = {**self._kwargs}
+        return _convert_callables_to_operator_uris(view_kwargs)
+
     def to_json(self):
-        return {**super().to_json(), **self._kwargs}
+        return {**super().to_json(), **self.kwargs_to_json()}
 
 
 class PaperContainer(Container):