Merge branch 'improve-modal-perf' of github.com:voxel51/fiftyone into…

… improve-modal-perf

app/packages/components/src/components/Toast/Toast.tsx

@@ -2,20 +2,57 @@ import React from "react";
 import { atom, useRecoilState } from "recoil";
 import { Box, Snackbar, SnackbarContent } from "@mui/material";
 
-// Define types for the props
 interface ToastProps {
   message: React.ReactNode;
-  primary: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
-  secondary: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
-  duration?: number;         // Optional duration, with a default value
+  primary?: any;
+  secondary?: any;
+  duration?: number;
+  layout?: {
+    vertical?: "top" | "bottom";
+    horizontal?: "left" | "center" | "right";
+    height?: number | string;
+    top?: number | string;
+    bottom?: number | string;
+    backgroundColor?: string;
+    color?: string;
+    fontSize?: string;
+    textAlign?: string;
+  };
 }
 
 const toastStateAtom = atom({
   key: "toastOpenState",
   default: true,
 });
 
-const Toast: React.FC<ToastProps> = ({message, primary, secondary, duration = 5000 }) => {
+const Toast: React.FC<ToastProps> = ({
+  message,
+  primary,
+  secondary,
+  duration = 5000,
+  layout = {},
+}) => {
+  const snackbarStyle = {
+    height: layout?.height || 5,
+    ...(layout?.top && {
+      top: {
+        xs: layout.top,
+        sm: layout.top,
+        md: layout.top,
+        lg: layout.top,
+        xl: layout.top,
+      },
+    }),
+    ...(layout?.bottom && {
+      bottom: {
+        xs: layout.bottom,
+        sm: layout.bottom,
+        md: layout.bottom,
+        lg: layout.bottom,
+        xl: layout.bottom,
+      },
+    }),
+  };
 
   const [open, setOpen] = useRecoilState(toastStateAtom); // State management for toast visibility
 
@@ -29,27 +66,38 @@ const Toast: React.FC<ToastProps> = ({message, primary, secondary, duration = 50
   const action = (
     <div>
       <Box display="flex" justifyContent="flex-end">
-        {primary(setOpen)} {/* Pass setOpen to primary button */}
-        {secondary(setOpen)} {/* Pass setOpen to secondary button */}
+        {/* note: Not implemented within Python Panels context */}
+        {primary && primary(setOpen)} {/* Pass setOpen to primary button */}
+        {secondary && secondary(setOpen)}{" "}
+        {/* Pass setOpen to secondary button */}
       </Box>
     </div>
   );
 
   return (
     <Snackbar
-      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      anchorOrigin={{
+        vertical: layout?.vertical || "bottom",
+        horizontal: layout?.horizontal || "center",
+      }}
       open={open}
       onClose={handleClose}
       autoHideDuration={duration}
-      sx={{ height: 5 }}
+      sx={snackbarStyle}
     >
       <SnackbarContent
         message={message}
         action={action}
-        style={{ backgroundColor: "#333", color: "#fff" }}
+        sx={{
+          backgroundColor: layout?.backgroundColor || "#333",
+          color: layout?.color || "#fff",
+          fontSize: layout?.fontSize || "14px",
+          display: "block",
+          textAlign: layout?.textAlign || "left",
+        }}
       />
     </Snackbar>
   );
-}
+};
 
 export default Toast;

app/packages/core/src/plugins/SchemaIO/components/GridView.tsx

@@ -39,10 +39,7 @@ export default function GridView(props: ViewPropsType) {
   };
 
   return (
-    <Box
-      {...getComponentProps(props, "container")}
-      sx={{ width: "100%", boxSizing: "border-box", padding: 1 }}
-    >
+    <Box {...getComponentProps(props, "container")}>
       <HeaderView {...props} divider nested />
       <Box {...getProps(props, "grid", baseGridProps)}>
         {propertiesAsArray.map((property) => {

app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Toast } from "@fiftyone/components";
+
+export default function ToastView(props) {
+  const { schema } = props;
+  const { view = {} } = schema;
+  const { message, duration, layout } = view;
+
+  return <Toast message={message} duration={duration} layout={layout} />;
+}

app/packages/core/src/plugins/SchemaIO/components/index.ts

@@ -50,5 +50,6 @@ export { default as TabsView } from "./TabsView";
 export { default as TagsView } from "./TagsView";
 export { default as TextView } from "./TextView";
 export { default as TextFieldView } from "./TextFieldView";
+export { default as ToastView } from "./ToastView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";

app/packages/looker-3d/package.json

@@ -12,7 +12,7 @@
     "files": [
         "dist"
     ],
-    "main": "src/Looker3d.tsx",
+    "main": "./src/index.ts",
     "dependencies": {
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
@@ -45,8 +45,5 @@
         "@react-spring/web": "*",
         "recoil": "*"
     },
-    "fiftyone": {
-        "script": "dist/index.umd.js"
-    },
     "packageManager": "yarn@3.2.1"
 }

app/packages/looker-3d/src/index.ts

@@ -0,0 +1 @@
+export * from "./Looker3d";

app/packages/operators/src/types.ts

@@ -1196,6 +1196,20 @@ export class ModalView extends Button {
   }
 }
 
+/**
+ * Operator class for describing a ToastView {@link View} for an
+ * operator type.
+ */
+export class ToastView extends View {
+  constructor(options: ViewProps) {
+    super(options);
+    this.name = "ToastView";
+  }
+  static fromJSON(json) {
+    return new ToastView(json);
+  }
+}
+
 /**
  * Places where you can have your operator placement rendered.
  */
@@ -1267,6 +1281,7 @@ const VIEWS = {
   LazyFieldView,
   PillBadgeView,
   ModalView,
+  ToastView,
 };
 
 export function typeFromJSON({ name, ...rest }): ANY_TYPE {

app/packages/playback/eslint.config.mjs

@@ -1,12 +1,19 @@
+import { fixupConfigRules } from "@eslint/compat";
+import hooksPlugin from "eslint-plugin-react-hooks";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
 import globals from "globals";
 import tseslint from "typescript-eslint";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-import { fixupConfigRules } from "@eslint/compat";
 
 export default [
   { files: ["lib/**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
   { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
   { languageOptions: { globals: globals.browser } },
   ...tseslint.configs.recommended,
   ...fixupConfigRules(pluginReactConfig),
+  {
+    plugins: {
+      "react-hooks": hooksPlugin,
+    },
+    rules: hooksPlugin.configs.recommended.rules,
+  },
 ];

app/packages/playback/package.json

@@ -6,6 +6,7 @@
         "@eslint/compat": "^1.1.1",
         "eslint": "9.7.0",
         "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-react-hooks": "rc",
         "globals": "^15.8.0",
         "prettier": "^3.3.3",
         "typescript": "^5.5.4",

app/packages/playback/src/views/Timeline.tsx

@@ -26,14 +26,16 @@ interface TimelineProps {
  */
 export const Timeline = React.memo(
   React.forwardRef<HTMLDivElement, TimelineProps>(
-    ({ name, style, controlsStyle }, ref) => {
+    (timelineProps: TimelineProps, ref) => {
+      const { name, style, controlsStyle } = timelineProps;
+
       const { playHeadState, config, play, pause, setSpeed } =
         useTimeline(name);
       const frameNumber = useFrameNumber(name);
 
-      const { getSeekValue, seekTo } = useTimelineVizUtils();
+      const { getSeekValue, seekTo } = useTimelineVizUtils(name);
 
-      const seekBarValue = React.useMemo(() => getSeekValue(), [frameNumber]);
+      const seekBarValue = React.useMemo(() => getSeekValue(), [getSeekValue]);
 
       const { loaded, loading } = useTimelineBuffers(name);
 
@@ -52,15 +54,15 @@ export const Timeline = React.memo(
             detail: { timelineName: name, start: true },
           })
         );
-      }, [pause]);
+      }, [pause, name]);
 
       const onSeekEnd = React.useCallback(() => {
         dispatchEvent(
           new CustomEvent("seek", {
             detail: { timelineName: name, start: false },
           })
         );
-      }, []);
+      }, [name]);
 
       const [isHoveringSeekBar, setIsHoveringSeekBar] = React.useState(false);
 

app/packages/plugins/src/externalize.ts

@@ -1,9 +1,14 @@
+import * as foa from "@fiftyone/aggregations";
 import * as foc from "@fiftyone/components";
+import * as fof from "@fiftyone/flashlight";
+import * as fol from "@fiftyone/looker";
 import * as foo from "@fiftyone/operators";
+import * as fopb from "@fiftyone/playback";
+import * as fop from "@fiftyone/plugins";
+import * as fosp from "@fiftyone/spaces";
+import * as fosl from "@fiftyone/spotlight";
 import * as fos from "@fiftyone/state";
 import * as fou from "@fiftyone/utilities";
-import * as fosp from "@fiftyone/spaces";
-import * as fop from "@fiftyone/plugins";
 import * as mui from "@mui/material";
 import React from "react";
 import ReactDOM from "react-dom";
@@ -21,8 +26,19 @@ declare global {
     __foo__: typeof foo;
     __fosp__: typeof fosp;
     __fop__: typeof fop;
+    __foa__: typeof foa;
+    __fol__: typeof fol;
+    __fopb__: typeof fopb;
+    __fosl__: typeof fosl;
+    __fof__: typeof fof;
     __mui__: typeof mui;
     __styled__: typeof styled;
+
+    // todo: the following cannot be externalized because of unknown reason
+    // __focore__: typeof focore;
+    // __fol3d__: typeof fol3d;
+    // __fom__: typeof fom;
+    // __foe__: typeof foe;
   }
 }
 
@@ -39,5 +55,15 @@ if (typeof window !== "undefined") {
   window.__fosp__ = fosp;
   window.__mui__ = mui;
   window.__fop__ = fop;
+  window.__foa__ = foa;
+  window.__fol__ = fol;
+  window.__fopb__ = fopb;
+  window.__fosl__ = fosl;
+  window.__fof__ = fof;
   window.__styled__ = styled;
+  // todo: the following cannot be externalized because of unknown reason
+  // window.__fol3d__ = fol3d;
+  // window.__foe__ = foe;
+  // window.__fom__ = fom;
+  // window.__focore__ = focore;
 }