merge develop

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

@@ -1,18 +1,23 @@
-import React, { useState } from "react";
-import { Snackbar, Button, SnackbarContent } from "@mui/material";
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import BoltIcon from '@mui/icons-material/Bolt'; // Icon for the lightning bolt
+import React from "react";
+import { atom, useRecoilState } from "recoil";
+import { Box, Snackbar, SnackbarContent } from "@mui/material";
 
 // Define types for the props
 interface ToastProps {
-  action: React.ReactNode;   // Accepts any valid React component, element, or JSX
-  message: React.ReactNode;  // Accepts any valid React component, element, or JSX
+  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
 }
 
-const Toast: React.FC<ToastProps> = ({ action, message, duration = 5000 }) => {
-  const [open, setOpen] = useState(true);
+const toastStateAtom = atom({
+  key: "toastOpenState",
+  default: true,
+});
+
+const Toast: React.FC<ToastProps> = ({message, primary, secondary, duration = 5000 }) => {
+
+  const [open, setOpen] = useRecoilState(toastStateAtom); // State management for toast visibility
 
   const handleClose = (event, reason) => {
     if (reason === "clickaway") {
@@ -21,6 +26,15 @@ const Toast: React.FC<ToastProps> = ({ action, message, duration = 5000 }) => {
     setOpen(false);
   };
 
+  const action = (
+    <div>
+      <Box display="flex" justifyContent="flex-end">
+        {primary(setOpen)} {/* Pass setOpen to primary button */}
+        {secondary(setOpen)} {/* Pass setOpen to secondary button */}
+      </Box>
+    </div>
+  );
+
   return (
     <Snackbar
       anchorOrigin={{ vertical: "bottom", horizontal: "center" }}

app/packages/components/src/components/Toast/index.ts

@@ -1 +1 @@
-export {default as Toast} from "./Toast";
+export { default } from "./Toast";

app/packages/components/src/components/index.ts

@@ -37,6 +37,6 @@ export { default as TabOption } from "./TabOption";
 export { default as TextField } from "./TextField";
 export { default as ThemeProvider, useFont, useTheme } from "./ThemeProvider";
 export { default as Tooltip } from "./Tooltip";
-export { Toast } from "./Toast";
+export { default as Toast } from "./Toast";
 
 export * from "./types";

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

@@ -1,9 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { ObjectSchemaType, ViewPropsType } from "../utils/types";
-import {
-  DEFAULT_FRAME_NUMBER,
-  GLOBAL_TIMELINE_ID,
-} from "@fiftyone/playback/src/lib/constants";
+import { DEFAULT_FRAME_NUMBER } from "@fiftyone/playback/src/lib/constants";
 import { BufferManager, BufferRange } from "@fiftyone/utilities";
 import { usePanelEvent } from "@fiftyone/operators";
 import { usePanelId, useSetPanelStateById } from "@fiftyone/spaces";
@@ -13,7 +10,7 @@ import _ from "lodash";
 export default function FrameLoaderView(props: ViewPropsType) {
   const { schema, path, data } = props;
   const { view = {} } = schema;
-  const { on_load_range, timeline_id, target } = view;
+  const { on_load_range, target, timeline_name } = view;
   const panelId = usePanelId();
   const triggerEvent = usePanelEvent();
   const setPanelState = useSetPanelStateById(true);
@@ -76,14 +73,14 @@ export default function FrameLoaderView(props: ViewPropsType) {
     [data, setPanelState, panelId, target]
   );
 
-  const { isTimelineInitialized, subscribe } = useTimeline();
+  const { isTimelineInitialized, subscribe } = useTimeline(timeline_name);
   const [subscribed, setSubscribed] = useState(false);
 
   React.useEffect(() => {
     if (subscribed) return;
     if (isTimelineInitialized) {
       subscribe({
-        id: timeline_id || GLOBAL_TIMELINE_ID,
+        id: panelId,
         loadRange,
         renderFrame: myRenderFrame,
       });

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

@@ -2,7 +2,7 @@ import { Box, BoxProps } from "@mui/material";
 import React from "react";
 import { HeaderView } from ".";
 import {
-  getAdjustedLayoutWidth,
+  getAdjustedLayoutDimensions,
   getComponentProps,
   getGridSx,
   getPath,
@@ -21,12 +21,13 @@ export default function GridView(props: ViewPropsType) {
   const propertiesAsArray = Object.entries(properties).map(([id, property]) => {
     return { id, ...property };
   });
-  const height = props?.layout?.height as number;
   const parsedGap = parseGap(gap);
-  const width = getAdjustedLayoutWidth(
-    props?.layout?.width,
-    parsedGap
-  ) as number;
+  const { height, width } = getAdjustedLayoutDimensions({
+    height: props?.layout?.height,
+    width: props?.layout?.width,
+    gap: parsedGap,
+    orientation,
+  });
 
   const baseGridProps: BoxProps = {
     sx: { gap: parsedGap, ...getGridSx(view) },

app/packages/core/src/plugins/SchemaIO/utils/layout.ts

@@ -179,11 +179,30 @@ export function parseGap(gap: number | string) {
   return 0;
 }
 
-export function getAdjustedLayoutWidth(layoutWidth?: number, gap?: number) {
-  if (typeof gap === "number" && typeof layoutWidth === "number") {
-    return layoutWidth - gap * 8;
+export function getAdjustedLayoutDimension(value?: number, gap?: number) {
+  if (typeof gap === "number" && typeof value === "number") {
+    return value - gap * 8;
   }
-  return layoutWidth;
+  return value;
+}
+
+export function getAdjustedLayoutDimensions({
+  height,
+  width,
+  gap,
+  orientation,
+}: {
+  height?: number;
+  width?: number;
+  gap?: number;
+  orientation?: string;
+}) {
+  const adjustedHeight = getAdjustedLayoutDimension(height, gap);
+  const adjustedWidth = getAdjustedLayoutDimension(width, gap);
+  if (orientation === "horizontal") {
+    return { height, width: adjustedWidth };
+  }
+  return { height: adjustedHeight, width };
 }
 
 type PaddingSxType = {

app/packages/operators/src/CustomPanel.tsx

@@ -118,6 +118,7 @@ export function defineCustomPanel({
   on_change_selected_labels,
   on_change_extended_selection,
   on_change_group_slice,
+  on_change_spaces,
   panel_name,
   panel_label,
 }) {
@@ -135,6 +136,7 @@ export function defineCustomPanel({
       onChangeSelectedLabels={on_change_selected_labels}
       onChangeExtendedSelection={on_change_extended_selection}
       onChangeGroupSlice={on_change_group_slice}
+      onChangeSpaces={on_change_spaces}
       dimensions={dimensions}
       panelName={panel_name}
       panelLabel={panel_label}

app/packages/operators/src/hooks.ts

@@ -28,6 +28,8 @@ function useOperatorThrottledContextSetter() {
   const groupSlice = useRecoilValue(fos.groupSlice);
   const currentSample = useCurrentSample();
   const setContext = useSetRecoilState(operatorThrottledContext);
+  const spaces = useRecoilValue(fos.sessionSpaces);
+  const workspaceName = spaces._name;
   const setThrottledContext = useMemo(() => {
     return debounce(
       (context) => {
@@ -49,6 +51,8 @@ function useOperatorThrottledContextSetter() {
       currentSample,
       viewName,
       groupSlice,
+      spaces,
+      workspaceName,
     });
   }, [
     setThrottledContext,
@@ -61,6 +65,8 @@ function useOperatorThrottledContextSetter() {
     currentSample,
     viewName,
     groupSlice,
+    spaces,
+    workspaceName,
   ]);
 }
 

app/packages/operators/src/operators.ts

@@ -1,5 +1,6 @@
 import { AnalyticsInfo, usingAnalytics } from "@fiftyone/analytics";
-import { ServerError, getFetchFunction, isNullish } from "@fiftyone/utilities";
+import { SpaceNode, spaceNodeFromJSON, SpaceNodeJSON } from "@fiftyone/spaces";
+import { getFetchFunction, isNullish, ServerError } from "@fiftyone/utilities";
 import { CallbackInterface } from "recoil";
 import { QueueItemStatus } from "./constants";
 import * as types from "./types";
@@ -92,6 +93,8 @@ export type RawContext = {
   };
   groupSlice: string;
   queryPerformance?: boolean;
+  spaces: SpaceNodeJSON;
+  workspaceName: string;
 };
 
 export class ExecutionContext {
@@ -140,6 +143,12 @@ export class ExecutionContext {
   public get queryPerformance(): boolean {
     return Boolean(this._currentContext.queryPerformance);
   }
+  public get spaces(): SpaceNode {
+    return spaceNodeFromJSON(this._currentContext.spaces);
+  }
+  public get workspaceName(): string {
+    return this._currentContext.workspaceName;
+  }
 
   getCurrentPanelId(): string | null {
     return this.params.panel_id || this.currentPanel?.id || null;
@@ -548,6 +557,8 @@ async function executeOperatorAsGenerator(
       view: currentContext.view,
       view_name: currentContext.viewName,
       group_slice: currentContext.groupSlice,
+      spaces: currentContext.spaces,
+      workspace_name: currentContext.workspaceName,
     },
     "json-stream"
   );
@@ -712,6 +723,8 @@ export async function executeOperatorWithContext(
           view_name: currentContext.viewName,
           group_slice: currentContext.groupSlice,
           query_performance: currentContext.queryPerformance,
+          spaces: currentContext.spaces,
+          workspace_name: currentContext.workspaceName,
         }
       );
       result = serverResult.result;
@@ -815,6 +828,8 @@ export async function resolveRemoteType(
       view: currentContext.view,
       view_name: currentContext.viewName,
       group_slice: currentContext.groupSlice,
+      spaces: currentContext.spaces,
+      workspace_name: currentContext.workspaceName,
     }
   );
 
@@ -889,6 +904,8 @@ export async function resolveExecutionOptions(
       view: currentContext.view,
       view_name: currentContext.viewName,
       group_slice: currentContext.groupSlice,
+      spaces: currentContext.spaces,
+      workspace_name: currentContext.workspaceName,
     }
   );
 
@@ -920,6 +937,8 @@ export async function fetchRemotePlacements(ctx: ExecutionContext) {
       current_sample: currentContext.currentSample,
       view_name: currentContext.viewName,
       group_slice: currentContext.groupSlice,
+      spaces: currentContext.spaces,
+      workspace_name: currentContext.workspaceName,
     }
   );
   if (result && result.error) {

app/packages/operators/src/state.ts

@@ -95,6 +95,8 @@ const globalContextSelector = selector({
     const extendedSelection = get(fos.extendedSelection);
     const groupSlice = get(fos.groupSlice);
     const queryPerformance = typeof get(fos.queryPerformance) === "number";
+    const spaces = get(fos.sessionSpaces);
+    const workspaceName = spaces?._name;
 
     return {
       datasetName,
@@ -107,6 +109,8 @@ const globalContextSelector = selector({
       extendedSelection,
       groupSlice,
       queryPerformance,
+      spaces,
+      workspaceName,
     };
   },
 });
@@ -148,6 +152,8 @@ const useExecutionContext = (operatorName, hooks = {}) => {
     extendedSelection,
     groupSlice,
     queryPerformance,
+    spaces,
+    workspaceName,
   } = curCtx;
   const [analyticsInfo] = useAnalyticsInfo();
   const ctx = useMemo(() => {
@@ -166,6 +172,8 @@ const useExecutionContext = (operatorName, hooks = {}) => {
         analyticsInfo,
         groupSlice,
         queryPerformance,
+        spaces,
+        workspaceName,
       },
       hooks
     );
@@ -182,6 +190,8 @@ const useExecutionContext = (operatorName, hooks = {}) => {
     currentSample,
     groupSlice,
     queryPerformance,
+    spaces,
+    workspaceName,
   ]);
 
   return ctx;

app/packages/operators/src/useCustomPanelHooks.ts

@@ -26,6 +26,8 @@ export interface CustomPanelProps {
   onChangeSelectedLabels?: string;
   onChangeExtendedSelection?: string;
   onChangeGroupSlice?: string;
+  onChangeSpaces?: string;
+  onChangeWorkspace?: string;
   dimensions: DimensionsType | null;
   panelName?: string;
   panelLabel?: string;
@@ -136,6 +138,13 @@ export function useCustomPanelHooks(props: CustomPanelProps): CustomPanelHooks {
     ctx.groupSlice,
     props.onChangeGroupSlice
   );
+  useCtxChangePanelEvent(isLoaded, panelId, ctx.spaces, props.onChangeSpaces);
+  useCtxChangePanelEvent(
+    isLoaded,
+    panelId,
+    ctx.workspaceName,
+    props.onChangeWorkspace
+  );
 
   useEffect(() => {
     onLoad();

docs/source/plugins/developing_plugins.rst

@@ -974,6 +974,7 @@ contains the following properties:
 -   `ctx.dataset_name`:  the name of the current dataset
 -   `ctx.dataset` - the current |Dataset| instance
 -   `ctx.view` - the current |DatasetView| instance
+-   `ctx.spaces` - the current :ref:`Spaces layout <app-spaces>` in the App
 -   `ctx.current_sample` - the ID of the active sample in the App modal, if any
 -   `ctx.selected` - the list of currently selected samples in the App, if any
 -   `ctx.selected_labels` - the list of currently selected labels in the App,
@@ -1996,6 +1997,19 @@ subsequent sections.
             ctx.panel.set_state("event", "on_change_view")
             ctx.panel.set_data("event_data", event)
 
+        def on_change_spaces(self, ctx):
+            """Implement this method to set panel state/data when the current
+            spaces layout changes.
+
+            The current spaces layout will be available via ``ctx.spaces``.
+            """
+            event = {
+                "data": ctx.spaces,
+                "description": "the current spaces layout",
+            }
+            ctx.panel.set_state("event", "on_change_spaces")
+            ctx.panel.set_data("event_data", event)
+
         def on_change_current_sample(self, ctx):
             """Implement this method to set panel state/data when a new sample
             is loaded in the Sample modal.