simplify (#4686)

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/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"];