Add python panel timeline support

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

@@ -0,0 +1,123 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { ObjectSchemaType, ViewPropsType } from "../utils/types";
+import {
+  DEFAULT_FRAME_NUMBER,
+  GLOBAL_TIMELINE_ID,
+} from "@fiftyone/playback/src/lib/constants";
+import { BufferManager, BufferRange } from "@fiftyone/utilities";
+import { usePanelEvent } from "@fiftyone/operators";
+import {
+  usePanelId,
+  usePanelState,
+  useSetPanelStateById,
+} from "@fiftyone/spaces";
+import { useTimeline } from "@fiftyone/playback/src/lib/use-timeline";
+import _ from "lodash";
+import { useDefaultTimelineName } from "@fiftyone/playback/src/lib/use-default-timeline-name";
+
+export default function FrameLoaderView(props: ViewPropsType) {
+  const { schema, path, data } = props;
+  const { view = {} } = schema;
+  const { on_load_range, timeline_id, target } = view;
+  const { properties } = schema as ObjectSchemaType;
+  const panelId = usePanelId();
+  const [myLocalFrameNumber, setMyLocalFrameNumber] =
+    React.useState(DEFAULT_FRAME_NUMBER);
+  const triggerEvent = usePanelEvent();
+  const setPanelState = useSetPanelStateById(true);
+  const localIdRef = React.useRef<string>();
+  const bufm = useRef(new BufferManager());
+
+  useEffect(() => {
+    localIdRef.current = Math.random().toString(36).substring(7);
+    // console.log("localIdRef", localIdRef.current);
+    if (data?.frames)
+      // console.log("dispatching frames-loaded", localIdRef.current);
+      dispatchEvent(
+        new CustomEvent(`frames-loaded`, {
+          detail: { localId: localIdRef.current },
+        })
+      );
+  }, [data?.signature]); // remove this JSON.strignify
+
+  const loadRange = React.useCallback(
+    async (range: BufferRange) => {
+      if (on_load_range) {
+        // if (!bufm.current.containsRange(range)) {
+        //   // only trigger event if the range is not already in the buffer
+        //   await triggerEvent(panelId, {
+        //     params: { range },
+        //     operator: on_load_range,
+        //   });
+        // }
+        const unp = bufm.current.getUnprocessedBufferRange(range);
+        const isProcessed = unp === null;
+
+        if (!isProcessed) {
+          await triggerEvent(panelId, {
+            params: { range: unp },
+            operator: on_load_range,
+          });
+        }
+        console.log("loading range", range);
+        return new Promise<void>((resolve) => {
+          window.addEventListener(`frames-loaded`, (e) => {
+            // console.log("frames loaded", e, {'current': localIdRef.current, 'detail': e.detail.localId});
+            if (
+              e instanceof CustomEvent &&
+              e.detail.localId === localIdRef.current
+            ) {
+              // console.log("resolving");
+              bufm.current.addNewRange(range);
+              resolve();
+            }
+          });
+        });
+      }
+    },
+    [triggerEvent, on_load_range, localIdRef.current]
+  );
+
+  const [currentFrame, setCurrentFrame] = useState(DEFAULT_FRAME_NUMBER);
+
+  const myRenderFrame = React.useCallback(
+    (frameNumber: number) => {
+      setMyLocalFrameNumber(frameNumber);
+      // console.log("rendering frame", frameNumber, props);
+      setPanelState(panelId, (current) => {
+        const currentData = current.data ? _.cloneDeep(current.data) : {}; // Clone the object
+        const currentFrameData = _.get(currentData, path, { frames: [] })
+          .frames[frameNumber];
+        let updatedData = { ...currentData };
+        _.set(updatedData, target, currentFrameData); // Use lodash set to update safely
+        return { ...current, data: updatedData };
+      });
+      setCurrentFrame(frameNumber);
+    },
+    [data, setPanelState, panelId, target]
+  );
+
+  const { isTimelineInitialized, subscribe } = useTimeline();
+  const [subscribed, setSubscribed] = useState(false);
+
+  React.useEffect(() => {
+    if (subscribed) return;
+    if (isTimelineInitialized) {
+      subscribe({
+        id: timeline_id || GLOBAL_TIMELINE_ID,
+        loadRange,
+        renderFrame: myRenderFrame,
+      });
+      setSubscribed(true);
+    }
+  }, [isTimelineInitialized, loadRange, myRenderFrame, subscribe]);
+
+  return null;
+}

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

@@ -48,3 +48,4 @@ export { default as TagsView } from "./TagsView";
 export { default as TextFieldView } from "./TextFieldView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";
+export { default as FrameLoaderView } from "./FrameLoaderView";

app/packages/embeddings/src/index.ts

@@ -16,5 +16,3 @@ registerComponent({
     priority: BUILT_IN_PANEL_PRIORITY_CONST,
   },
 });
-
-// registerOperator(new OpenEmbeddingsPanel());

app/packages/playback/package.json

@@ -1,5 +1,6 @@
 {
     "name": "@fiftyone/playback",
+    "main": "./index.ts",
     "packageManager": "yarn@3.2.1",
     "devDependencies": {
         "@eslint/compat": "^1.1.1",

app/yarn.lock

@@ -13869,13 +13869,13 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.4.43":
-  version: 8.4.44
-  resolution: "postcss@npm:8.4.44"
+  version: 8.4.45
+  resolution: "postcss@npm:8.4.45"
   dependencies:
     nanoid: ^3.3.7
     picocolors: ^1.0.1
     source-map-js: ^1.2.0
-  checksum: 64d9ce78253696bb64e608a54b362c9ddb537d3b38b58223ebce8260d6110d4e798ef1b3d57d8c28131417d9809187fd51d5c4263113536363444f8635e11bdb
+  checksum: 3223cdad4a9392c0b334ee3ee7e4e8041c631cb6160609cef83c18d2b2580e931dd8068ab13cc6000c1a254d57492ac6c38717efc397c5dcc9756d06bc9c44f3
   languageName: node
   linkType: hard
 

fiftyone/operators/types.py

@@ -2399,6 +2399,20 @@ def to_json(self):
         }
 
 
+class FrameLoaderView(View):
+    """Utility for loading frames and animated panels.
+
+    Args:
+        timeline_id (None): the ID of the timeline to load
+        on_load (None): the operator to execute when the frame is loaded
+        on_error (None): the operator to execute when the frame fails to load
+        on_load_range (None): the operator to execute when the frame is loading
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+
 class Container(BaseType):
     """Represents a base container for a container types."""