Release v1.0.2 cherry picks

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

@@ -7,6 +7,7 @@ import {
   overlayToSx,
 } from "../utils";
 import { ViewPropsType } from "../utils/types";
+import { has } from "lodash";
 
 export default function ContainerizedComponent(props: ContainerizedComponent) {
   const { schema, children } = props;
@@ -22,7 +23,11 @@ export default function ContainerizedComponent(props: ContainerizedComponent) {
   }
 
   if (isCompositeView(schema)) {
+    const hasOverlay = !!schema?.view?.overlay;
     const sxForOverlay = overlayToSx[schema?.view?.overlay] || {};
+    if (hasOverlay) {
+      sxForOverlay.zIndex = 999;
+    }
     return (
       <Box sx={{ position: "relative", ...sxForOverlay }}>
         {containerizedChildren}

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

@@ -10,6 +10,8 @@ import { usePanelId, useSetPanelStateById } from "@fiftyone/spaces";
 import { useTimeline } from "@fiftyone/playback/src/lib/use-timeline";
 import _ from "lodash";
 
+const FRAME_LOADED_EVENT = "frames-loaded";
+
 export default function FrameLoaderView(props: ViewPropsType) {
   const { schema, path, data } = props;
   const { view = {} } = schema;
@@ -19,15 +21,16 @@ export default function FrameLoaderView(props: ViewPropsType) {
   const setPanelState = useSetPanelStateById(true);
   const localIdRef = React.useRef<string>();
   const bufm = useRef(new BufferManager());
+  const frameDataRef = useRef<typeof data.frames>(null);
 
   useEffect(() => {
     localIdRef.current = Math.random().toString(36).substring(7);
-    if (data?.frames)
-      window.dispatchEvent(
-        new CustomEvent(`frames-loaded`, {
-          detail: { localId: localIdRef.current },
-        })
-      );
+    if (data?.frames) frameDataRef.current = data.frames;
+    window.dispatchEvent(
+      new CustomEvent(FRAME_LOADED_EVENT, {
+        detail: { localId: localIdRef.current },
+      })
+    );
   }, [data?.signature]);
 
   const loadRange = React.useCallback(
@@ -44,15 +47,22 @@ export default function FrameLoaderView(props: ViewPropsType) {
         }
 
         return new Promise<void>((resolve) => {
-          window.addEventListener(`frames-loaded`, (e) => {
-            if (
-              e instanceof CustomEvent &&
-              e.detail.localId === localIdRef.current
-            ) {
-              bufm.current.addNewRange(range);
-              resolve();
-            }
-          });
+          if (frameDataRef.current) {
+            bufm.current.addNewRange(range);
+            resolve();
+          } else {
+            const onFramesLoaded = (e) => {
+              if (
+                e instanceof CustomEvent &&
+                e.detail.localId === localIdRef.current
+              ) {
+                window.removeEventListener(FRAME_LOADED_EVENT, onFramesLoaded);
+                bufm.current.addNewRange(range);
+                resolve();
+              }
+            };
+            window.addEventListener(FRAME_LOADED_EVENT, onFramesLoaded);
+          }
         });
       }
     },

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

@@ -212,7 +212,6 @@ export default function PlotlyView(props: ViewPropsType) {
   return (
     <Box
       {...getComponentProps(props, "container")}
-      useResizeHandler
       sx={{ height: "100%", width: "100%" }}
     >
       <HeaderView {...props} nested />

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

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { Timeline, useCreateTimeline, useTimeline } from "@fiftyone/playback";
+import { ViewPropsType } from "../utils/types";
+
+const DEFAULT_CONFIG = { loop: false };
+
+export default function TimelineView(props: ViewPropsType) {
+  const { schema } = props;
+  const { view = {} } = schema;
+  const { timeline_name, loop, total_frames } = view;
+
+  const providedConfig = {
+    loop,
+    totalFrames: total_frames,
+  };
+
+  const finalConfig = useMemo(
+    () => ({ ...DEFAULT_CONFIG, ...providedConfig }),
+    [providedConfig]
+  );
+  if (!timeline_name) {
+    throw new Error("Timeline name is required");
+  }
+  if (!finalConfig.totalFrames) {
+    throw new Error("Total frames is required");
+  }
+
+  return <TimelineCreator timelineName={timeline_name} {...finalConfig} />;
+}
+
+export const TimelineCreator = ({ timelineName, totalFrames, loop }) => {
+  const config = useMemo(() => ({ totalFrames, loop }), [totalFrames, loop]);
+  const { isTimelineInitialized } = useCreateTimeline({
+    name: timelineName,
+    config,
+  });
+
+  if (!isTimelineInitialized) {
+    return null;
+  }
+
+  return <Timeline name={timelineName} />;
+};

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

@@ -46,6 +46,6 @@ export { default as TableView } from "./TableView";
 export { default as TabsView } from "./TabsView";
 export { default as TagsView } from "./TagsView";
 export { default as TextFieldView } from "./TextFieldView";
+export { default as TimelineView } from "./TimelineView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";
-export { default as FrameLoaderView } from "./FrameLoaderView";

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/yarn.lock

@@ -1942,6 +1942,7 @@ __metadata:
     "@eslint/compat": ^1.1.1
     eslint: 9.7.0
     eslint-plugin-react: ^7.35.0
+    eslint-plugin-react-hooks: rc
     globals: ^15.8.0
     jotai: ^2.9.3
     jotai-optics: ^0.4.0
@@ -8372,6 +8373,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react-hooks@npm:rc":
+  version: 5.1.0-rc-28668d39-20241023
+  resolution: "eslint-plugin-react-hooks@npm:5.1.0-rc-28668d39-20241023"
+  peerDependencies:
+    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+  checksum: 6ad29212fa76b96488a6eeb9941a9a6111420092cc309417f5569f917e4e40b15ed282172842ca8611466387c3d750ceee07e9e739e4c28e808065eaf9ed2307
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react@npm:^7.31.11":
   version: 7.34.1
   resolution: "eslint-plugin-react@npm:7.34.1"

docs/.gitignore

@@ -1 +1 @@
-/source/user_guide/model_zoo/models.rst
+/source/model_zoo/models.rst

docs/scripts/make_model_zoo_docs.py

@@ -147,25 +147,25 @@
     dataset.apply_model(model, label_field="auto")
 
     session = fo.launch_app(dataset)
-{% elif 'segment-anything' in tags and 'video' in tags  and 'med-SAM' not in tags %}
+{% elif 'med-sam' in name %}
     model = foz.load_zoo_model("{{ name }}")
 
     # Segment inside boxes and propagate to all frames
     dataset.apply_model(
         model,
-        label_field="segmentations",
-        prompt_field="frames.detections",  # can contain Detections or Keypoints
+        label_field="pred_segmentations",
+        prompt_field="frames.gt_detections",
     )
 
     session = fo.launch_app(dataset)
-{% elif 'med-sam' in name %}
+{% elif 'segment-anything' in tags and 'video' in tags %}
     model = foz.load_zoo_model("{{ name }}")
 
     # Segment inside boxes and propagate to all frames
     dataset.apply_model(
         model,
-        label_field="pred_segmentations",
-        prompt_field="frames.gt_detections",
+        label_field="segmentations",
+        prompt_field="frames.detections",  # can contain Detections or Keypoints
     )
 
     session = fo.launch_app(dataset)
@@ -354,7 +354,7 @@ def _render_card_model_content(template, model_name):
 
     tags = ",".join(tags)
 
-    link = "models.html#%s" % zoo_model.name
+    link = "models.html#%s" % zoo_model.name.replace(".", "-")
 
     description = zoo_model.description
 
@@ -423,7 +423,7 @@ def main():
     # Write docs page
 
     docs_dir = "/".join(os.path.realpath(__file__).split("/")[:-2])
-    outpath = os.path.join(docs_dir, "source/user_guide/model_zoo/models.rst")
+    outpath = os.path.join(docs_dir, "source/model_zoo/models.rst")
 
     print("Writing '%s'" % outpath)
     etau.write_file("\n".join(content), outpath)