Merge pull request #4683 from voxel51/merge/release/v0.25.0

Merge `release/v0.25.0` to `develop`

app/packages/app/src/Sync.tsx

@@ -1,42 +1,42 @@
 import { Loading } from "@fiftyone/components";
 import { usePlugins } from "@fiftyone/plugins";
 import {
-  Writer,
   setDataset,
-  type setDatasetMutation,
   setGroupSlice,
-  type setGroupSliceMutation,
   setSample,
-  type setSampleMutation,
   setSpaces,
-  type setSpacesMutation,
   setView,
+  Writer,
+  type setDatasetMutation,
+  type setGroupSliceMutation,
+  type setSampleMutation,
+  type setSpacesMutation,
   type setViewMutation,
 } from "@fiftyone/relay";
 import * as fos from "@fiftyone/state";
 import {
   SESSION_DEFAULT,
-  type Session,
   stateSubscription,
+  type Session,
 } from "@fiftyone/state";
 import type { Action } from "history";
 import React, { useRef } from "react";
 import { useRelayEnvironment } from "react-relay";
 import { useRecoilValue } from "recoil";
 import {
+  commitMutation,
   type Environment,
   type OperationType,
-  commitMutation,
 } from "relay-runtime";
 import Setup from "./components/Setup";
-import type { IndexPageQuery } from "./pages/__generated__/IndexPageQuery.graphql";
 import type {
   DatasetPageQuery,
   DatasetPageQuery$data,
 } from "./pages/datasets/__generated__/DatasetPageQuery.graphql";
-import { type Entry, useRouterContext } from "./routing";
-import useEventSource from "./useEventSource";
+import type { IndexPageQuery } from "./pages/__generated__/IndexPageQuery.graphql";
+import { useRouterContext, type Entry } from "./routing";
 import { AppReadyState } from "./useEvents/registerEvent";
+import useEventSource from "./useEventSource";
 import useSetters from "./useSetters";
 import useWriters from "./useWriters";
 
@@ -140,7 +140,6 @@ const dispatchSideEffect = ({
   session.selectedLabels = [];
   session.selectedSamples = new Set();
 
-
   const currentDataset: string | undefined =
     // @ts-ignore
     currentEntry.preloadedQuery.variables.name;
@@ -159,7 +158,6 @@ const dispatchSideEffect = ({
     return;
   }
 
-
   // @ts-ignore
   const data: DatasetPageQuery$data = nextEntry.data;
 

app/packages/app/src/useEvents/useSetFieldVisibilityStage.ts

@@ -31,6 +31,7 @@ const useSetFieldVisibilityStage: EventHandlerHook = () => {
           }),
           {
             ...router.get().state,
+            event: "fieldVisibility",
             fieldVisibility: stage,
           }
         );

app/packages/app/src/useSetters/onSetFieldVisibilityStage.ts

@@ -1,9 +1,9 @@
 import {
   setFieldVisibilityStage,
-  type setFieldVisibilityStageMutation,
   subscribeBefore,
+  type setFieldVisibilityStageMutation,
 } from "@fiftyone/relay";
-import { type State, stateSubscription } from "@fiftyone/state";
+import { stateSubscription, type State } from "@fiftyone/state";
 import { DefaultValue } from "recoil";
 import { commitMutation } from "relay-runtime";
 import { pendingEntry } from "../Renderer";
@@ -38,6 +38,7 @@ const onSetFieldVisibilityStage: RegisteredSetter =
       }),
       {
         ...router.get().state,
+        event: "fieldVisibility",
         fieldVisibility: stage,
       }
     );

app/packages/core/src/components/Grid/useRefreshers.ts

@@ -3,16 +3,24 @@ import * as fos from "@fiftyone/state";
 import { useEffect, useMemo } from "react";
 import uuid from "react-uuid";
 import { useRecoilValue } from "recoil";
-import { gridAt, gridPage } from "./recoil";
+import { gridAt, gridOffset, gridPage } from "./recoil";
 
 export default function useRefreshers() {
   const cropToContent = useRecoilValue(fos.cropToContent(false));
   const datasetName = useRecoilValue(fos.datasetName);
-  const extendedStages = fos.stringifyObj(useRecoilValue(fos.extendedStages));
+  const extendedStagesUnsorted = fos.stringifyObj(
+    useRecoilValue(fos.extendedStagesUnsorted)
+  );
+  const fieldVisibilityStage = fos.stringifyObj(
+    useRecoilValue(fos.fieldVisibilityStage) || {}
+  );
   const filters = fos.stringifyObj(useRecoilValue(fos.filters));
   const groupSlice = useRecoilValue(fos.groupSlice);
   const mediaField = useRecoilValue(fos.selectedMediaField(false));
   const refresher = useRecoilValue(fos.refresher);
+  const similarityParameters = fos.stringifyObj(
+    useRecoilValue(fos.similarityParameters) || {}
+  );
   const shouldRenderImaVidLooker = useRecoilValue(
     fos.shouldRenderImaVidLooker(false)
   );
@@ -21,26 +29,29 @@ export default function useRefreshers() {
   // only reload, attempt to return to the last grid location
   const layoutReset = useMemo(() => {
     cropToContent;
+    fieldVisibilityStage;
     mediaField;
     refresher;
     return uuid();
-  }, [cropToContent, mediaField, refresher]);
+  }, [cropToContent, fieldVisibilityStage, mediaField, refresher]);
 
   // the values reset the page, i.e. return to the top
   const pageReset = useMemo(() => {
     datasetName;
-    extendedStages;
+    extendedStagesUnsorted;
     filters;
     groupSlice;
     shouldRenderImaVidLooker;
+    similarityParameters;
     view;
     return uuid();
   }, [
     datasetName,
-    extendedStages,
+    extendedStagesUnsorted,
     filters,
     groupSlice,
     shouldRenderImaVidLooker,
+    similarityParameters,
     view,
   ]);
 
@@ -53,11 +64,17 @@ export default function useRefreshers() {
   useEffect(
     () =>
       subscribe(({ event }, { reset }, previous) => {
-        if (event === "modal" || previous?.event === "modal") return;
+        if (
+          event === "fieldVisibility" ||
+          event === "modal" ||
+          previous?.event === "modal"
+        )
+          return;
 
         // if not a modal page change, reset the grid location
-        reset(gridPage);
         reset(gridAt);
+        reset(gridPage);
+        reset(gridOffset);
       }),
     []
   );

app/packages/core/src/components/Grid/useSpotlightPager.ts

@@ -113,14 +113,23 @@ const useSpotlightPager = ({
   useEffect(() => {
     refresher;
     const current = records.current;
-    return () => {
+    const clear = () => {
       commitLocalUpdate(fos.getCurrentEnvironment(), (store) => {
         for (const id of Array.from(current.keys())) {
           store.get(id)?.invalidateRecord();
         }
         current.clear();
       });
     };
+
+    const unsubscribe = foq.subscribe(
+      ({ event }) => event === "fieldVisibility" && clear()
+    );
+
+    return () => {
+      clear();
+      unsubscribe();
+    };
   }, [refresher]);
 
   return { page, records, store };

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

@@ -1,8 +1,8 @@
 import { PluginComponentType, useActivePlugins } from "@fiftyone/plugins";
 import { isNullish } from "@fiftyone/utilities";
 import { get, isEqual, set } from "lodash";
-import React, { useEffect, useMemo } from "react";
-import { isPathUserChanged, useUnboundState } from "../hooks";
+import { useEffect, useMemo } from "react";
+import { isPathUserChanged } from "../hooks";
 import {
   getComponent,
   getErrorsForView,
@@ -11,6 +11,7 @@ import {
 } from "../utils";
 import { AncestorsType, SchemaType, ViewPropsType } from "../utils/types";
 import ContainerizedComponent from "./ContainerizedComponent";
+import { useUnboundState } from "@fiftyone/state";
 
 export default function DynamicIO(props: ViewPropsType) {
   const { schema, onChange } = props;

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

@@ -1,3 +1,2 @@
 export * from "./useKey";
 export * from "./context";
-export * from "./useUnboundState";

app/packages/operators/src/useCustomPanelHooks.ts

@@ -10,6 +10,7 @@ import { executeOperator } from "./operators";
 import { useGlobalExecutionContext } from "./state";
 import usePanelEvent from "./usePanelEvent";
 import { memoizedDebounce } from "./utils";
+import { useUnboundState } from "@fiftyone/state";
 
 export interface CustomPanelProps {
   panelId: string;
@@ -77,6 +78,7 @@ export function useCustomPanelHooks(props: CustomPanelProps): CustomPanelHooks {
     return panelStateLocal?.loaded;
   }, [panelStateLocal?.loaded]);
   const triggerPanelEvent = usePanelEvent();
+  const lazyState = useUnboundState({ panelState });
 
   const onLoad = useCallback(() => {
     if (props.onLoad && !isLoaded) {
@@ -186,14 +188,16 @@ export function useCustomPanelHooks(props: CustomPanelProps): CustomPanelHooks {
   const handlePanelStatePathChange = useMemo(() => {
     return (path, value, schema, state) => {
       if (schema?.onChange) {
+        const { panelState } = lazyState;
+        const currentPanelState = merge({}, panelState?.state, state);
         triggerPanelEvent(panelId, {
           operator: schema.onChange,
           params: { path, value },
-          currentPanelState: state,
+          currentPanelState,
         });
       }
     };
-  }, [panelId, triggerPanelEvent]);
+  }, [panelId, triggerPanelEvent, lazyState]);
 
   const handlePanelStatePathChangeDebounced = useMemo(() => {
     return memoizedDebounce(

app/packages/relay/src/Writer.tsx

@@ -10,7 +10,7 @@ import { datasetQuery } from "./queries";
 import { SelectorEffectContext, Setter } from "./selectorWithEffect";
 
 export interface PageQuery<T extends OperationType> {
-  event?: "modal";
+  event?: "fieldVisibility" | "modal";
   preloadedQuery: PreloadedQuery<T>;
   concreteRequest: ConcreteRequest;
   data: T["response"];

app/packages/state/src/hooks/index.ts

@@ -48,3 +48,4 @@ export { default as useTooltip } from "./useTooltip";
 export { default as useUpdateSamples } from "./useUpdateSamples";
 export { default as withSuspense } from "./withSuspense";
 export { default as useKeyDown } from "./useKeyDown";
+export { default as useUnboundState } from "./useUnboundState";

app/packages/core/src/plugins/SchemaIO/hooks/useUnboundState.ts → app/packages/state/src/hooks/useUnboundState.ts

@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react";
  * The hook can be used to get the latest value of the state without
  * re-rendering the component.
  */
-export function useUnboundState<State>(value: State): State {
+export default function useUnboundState<State>(value: State): State {
   const stateRef = useRef(value);
 
   useEffect(() => {

docs/source/cli/index.rst

@@ -843,17 +843,19 @@ List operators that you've downloaded or created locally.
 
 .. code-block:: text
 
-    fiftyone operators list [-h] [-e] [-d] [-n]
+    fiftyone operators list [-h] [-e] [-d] [-o] [-p] [-n]
 
 **Arguments**
 
 .. code-block:: text
 
     optional arguments:
-      -h, --help        show this help message and exit
-      -e, --enabled     only show enabled operators
-      -d, --disabled    only show disabled operators
-      -n, --names-only  only show names
+      -h, --help            show this help message and exit
+      -e, --enabled         only show enabled operators
+      -d, --disabled        only show disabled operators
+      -o, --operators-only  only show operators
+      -p, --panels-only     only show panels
+      -n, --names-only      only show names
 
 **Examples**
 
@@ -872,6 +874,11 @@ List operators that you've downloaded or created locally.
     # List disabled operators
     fiftyone operators list --disabled
 
+.. code-block:: shell
+
+    # Only list panels
+    fiftyone operators list --panels-only
+
 .. _cli-fiftyone-operators-info:
 
 Operator info