Optimize modal navigation

app/packages/app/src/routing/RouterContext.ts

@@ -69,6 +69,8 @@ export const createRouter = <T extends OperationType>(
 ): Router<T> => {
   const history = isNotebook() ? createMemoryHistory() : createBrowserHistory();
 
+  const getEntryResource = makeGetEntryResource<T>();
+
   let currentEntryResource: Resource<Entry<T>>;
   let nextCurrentEntryResource: Resource<Entry<T>>;
 
@@ -79,17 +81,27 @@ export const createRouter = <T extends OperationType>(
   >();
 
   const update = (location: FiftyOneLocation, action?: Action) => {
-    requestAnimationFrame(() => {
-      for (const [_, [__, onPending]] of subscribers) onPending?.();
-    });
     currentEntryResource.load().then(({ cleanup }) => {
-      nextCurrentEntryResource = getEntryResource<T>(
-        environment,
-        routes,
-        location as FiftyOneLocation,
-        false,
-        handleError
-      );
+      try {
+        nextCurrentEntryResource = getEntryResource({
+          environment,
+          routes,
+          location: location as FiftyOneLocation,
+          hard: false,
+          handleError,
+        });
+      } catch (e) {
+        if (e instanceof Resource) {
+          // skip the page change if a resource is thrown
+          return;
+        }
+
+        throw e;
+      }
+
+      requestAnimationFrame(() => {
+        for (const [_, [__, onPending]] of subscribers) onPending?.();
+      });
 
       const loadingResource = nextCurrentEntryResource;
       loadingResource.load().then((entry) => {
@@ -135,13 +147,13 @@ export const createRouter = <T extends OperationType>(
     load(hard = false) {
       const runUpdate = !currentEntryResource || hard;
       if (!currentEntryResource || hard) {
-        currentEntryResource = getEntryResource(
+        currentEntryResource = getEntryResource({
           environment,
-          routes,
-          history.location as FiftyOneLocation,
           hard,
-          handleError
-        );
+          handleError,
+          location: history.location as FiftyOneLocation,
+          routes,
+        });
       }
       runUpdate && update(history.location as FiftyOneLocation);
       return currentEntryResource.load();
@@ -171,79 +183,114 @@ export const createRouter = <T extends OperationType>(
   };
 };
 
-const getEntryResource = <T extends OperationType>(
-  environment: Environment,
-  routes: RouteDefinition<T>[],
-  location: FiftyOneLocation,
-  hard = false,
-  handleError?: (error: unknown) => void
-): Resource<Entry<T>> => {
-  let route: RouteDefinition<T>;
-  let matchResult: MatchPathResult<T> | undefined = undefined;
-  for (let index = 0; index < routes.length; index++) {
-    route = routes[index];
-    const match = matchPath<T>(
-      location.pathname,
-      route,
-      location.search,
-      location.state
-    );
-
-    if (match) {
-      matchResult = match;
-      break;
+const SKIP_EVENTS = new Set(["modal", "slice"]);
+
+const makeGetEntryResource = <T extends OperationType>() => {
+  let currentLocation: FiftyOneLocation;
+  let currentResource: Resource<Entry<T>>;
+
+  const isReusable = (location: FiftyOneLocation) => {
+    if (currentLocation) {
+      return (
+        SKIP_EVENTS.has(location.state.event || "") ||
+        SKIP_EVENTS.has(currentLocation?.state.event || "")
+      );
     }
-  }
 
-  if (matchResult == null) {
-    throw new NotFoundError({ path: location.pathname });
-  }
+    return false;
+  };
 
-  const fetchPolicy = hard ? "network-only" : "store-or-network";
+  const getEntryResource = ({
+    environment,
+    handleError,
+    hard = false,
+    location,
+    routes,
+  }: {
+    current?: FiftyOneLocation;
+    environment: Environment;
+    routes: RouteDefinition<T>[];
+    location: FiftyOneLocation;
+    hard: boolean;
+    handleError?: (error: unknown) => void;
+  }): Resource<Entry<T>> => {
+    if (isReusable(location)) {
+      // throw the current resource (page) if it can be reused
+      throw currentResource;
+    }
 
-  return new Resource(() => {
-    return Promise.all([route.component.load(), route.query.load()]).then(
-      ([component, concreteRequest]) => {
-        const preloadedQuery = loadQuery(
-          environment,
-          concreteRequest,
-          matchResult.variables || {},
-          {
-            fetchPolicy,
-          }
-        );
-
-        let resolveEntry: (entry: Entry<T>) => void;
-        const promise = new Promise<Entry<T>>((resolve) => {
-          resolveEntry = resolve;
-        });
-        const subscription = fetchQuery(
-          environment,
-          concreteRequest,
-          matchResult.variables || {},
-          { fetchPolicy }
-        ).subscribe({
-          next: (data) => {
-            const { state: _, ...rest } = location;
-            resolveEntry({
-              state: matchResult.variables as LocationState<T>,
-              ...rest,
-              component,
-              data,
-              concreteRequest,
-              preloadedQuery,
-              cleanup: () => {
-                subscription?.unsubscribe();
-              },
-            });
-          },
-          error: (error) => handleError?.(error),
-        });
+    let route: RouteDefinition<T>;
+    let matchResult: MatchPathResult<T> | undefined = undefined;
+    for (let index = 0; index < routes.length; index++) {
+      route = routes[index];
+      const match = matchPath<T>(
+        location.pathname,
+        route,
+        location.search,
+        location.state
+      );
 
-        return promise;
+      if (match) {
+        matchResult = match;
+        break;
       }
-    );
-  });
+    }
+
+    if (matchResult == null) {
+      throw new NotFoundError({ path: location.pathname });
+    }
+
+    const fetchPolicy = hard ? "network-only" : "store-or-network";
+
+    currentLocation = location;
+    currentResource = new Resource(() => {
+      return Promise.all([route.component.load(), route.query.load()]).then(
+        ([component, concreteRequest]) => {
+          const preloadedQuery = loadQuery(
+            environment,
+            concreteRequest,
+            matchResult.variables || {},
+            {
+              fetchPolicy,
+            }
+          );
+
+          let resolveEntry: (entry: Entry<T>) => void;
+          const promise = new Promise<Entry<T>>((resolve) => {
+            resolveEntry = resolve;
+          });
+          const subscription = fetchQuery(
+            environment,
+            concreteRequest,
+            matchResult.variables || {},
+            { fetchPolicy }
+          ).subscribe({
+            next: (data) => {
+              const { state: _, ...rest } = location;
+              resolveEntry({
+                state: matchResult.variables as LocationState<T>,
+                ...rest,
+                component,
+                data,
+                concreteRequest,
+                preloadedQuery,
+                cleanup: () => {
+                  subscription?.unsubscribe();
+                },
+              });
+            },
+            error: (error) => handleError?.(error),
+          });
+
+          return promise;
+        }
+      );
+    });
+
+    return currentResource;
+  };
+
+  return getEntryResource;
 };
 
 export const RouterContext = React.createContext<

app/packages/app/src/routing/matchPath.ts

@@ -10,7 +10,7 @@ const compilePath = (path: string) =>
   });
 
 export type LocationState<T extends OperationType = OperationType> = {
-  event?: "modal";
+  event?: "modal" | "slice";
   fieldVisibility?: State.FieldVisibilityStage;
   groupSlice?: string;
   modalSelector?: ModalSelector;

app/packages/app/src/useEvents/useSetGroupSlice.ts

@@ -15,7 +15,11 @@ const useSetGroupSlice: EventHandlerHook = ({ router, session }) => {
         session.current.sessionGroupSlice = slice;
       });
 
-      router.push(pathname, { ...router.location.state, groupSlice: slice });
+      router.push(pathname, {
+        ...router.location.state,
+        event: "slice",
+        groupSlice: slice,
+      });
     },
     [router, session]
   );

app/packages/app/src/useWriters/onSetGroupSlice.ts

@@ -13,7 +13,11 @@ const onSetGroupSlice: RegisteredWriter<"sessionGroupSlice"> =
 
     const pathname = router.history.location.pathname + string;
 
-    router.push(pathname, { ...router.location.state, groupSlice: slice });
+    router.push(pathname, {
+      ...router.location.state,
+      event: "slice",
+      groupSlice: slice,
+    });
 
     if (env().VITE_NO_STATE) return;
     commitMutation<setGroupSliceMutation>(environment, {

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

@@ -63,13 +63,8 @@ export default function useRefreshers() {
 
   useEffect(
     () =>
-      subscribe(({ event }, { reset }, previous) => {
-        if (
-          event === "fieldVisibility" ||
-          event === "modal" ||
-          previous?.event === "modal"
-        )
-          return;
+      subscribe(({ event }, { reset }) => {
+        if (event === "fieldVisibility") return;
 
         // if not a modal page change, reset the grid location
         reset(gridAt);

app/packages/state/src/recoil/pathData/counts.ts

@@ -146,6 +146,21 @@ export const counts = selectorFamily({
     },
 });
 
+export const gatheredPaths = selectorFamily({
+  key: "gatheredPaths",
+  get:
+    ({
+      embeddedDocType,
+      ftype,
+    }: {
+      embeddedDocType?: string | string[];
+      ftype: string | string[];
+    }) =>
+    ({ get }) => {
+      return [...new Set(gatherPaths(get, ftype, embeddedDocType))];
+    },
+});
+
 export const cumulativeCounts = selectorFamily<
   { [key: string]: number },
   {
@@ -160,7 +175,7 @@ export const cumulativeCounts = selectorFamily<
   get:
     ({ extended, path: key, modal, ftype, embeddedDocType }) =>
     ({ get }) => {
-      return [...new Set(gatherPaths(get, ftype, embeddedDocType))].reduce(
+      return get(gatheredPaths({ ftype, embeddedDocType })).reduce(
         (result, path) => {
           const data = get(counts({ extended, modal, path: `${path}.${key}` }));
           for (const value in data) {

app/packages/state/src/recoil/sidebarExpanded.ts

@@ -1,4 +1,3 @@
-import { subscribe } from "@fiftyone/relay";
 import { DefaultValue, atom, atomFamily, selectorFamily } from "recoil";
 
 export const sidebarExpandedStore = atomFamily<
@@ -7,12 +6,6 @@ export const sidebarExpandedStore = atomFamily<
 >({
   key: "sidebarExpandedStore",
   default: {},
-  effects: [
-    ({ node }) =>
-      subscribe(({ event }, { reset }, previous) => {
-        event !== "modal" && previous?.event !== "modal" && reset(node);
-      }),
-  ],
 });
 
 export const sidebarExpanded = selectorFamily<
@@ -36,13 +29,6 @@ export const sidebarExpanded = selectorFamily<
 export const granularSidebarExpandedStore = atom<{ [key: string]: boolean }>({
   key: "granularSidebarExpandedStore",
   default: {},
-  effects: [
-    ({ node }) =>
-      subscribe(
-        ({ event }, { set }, previous) =>
-          event !== "modal" && previous?.event !== "modal" && set(node, {})
-      ),
-  ],
 });
 
 export const granularSidebarExpanded = selectorFamily<boolean, string>({

e2e-pw/src/oss/poms/grid/index.ts

@@ -1,4 +1,4 @@
-import { expect, Locator, Page } from "src/oss/fixtures";
+import { Locator, Page, expect } from "src/oss/fixtures";
 import { EventUtils } from "src/shared/event-utils";
 import { GridActionsRowPom } from "../action-row/grid-actions-row";
 import { GridSliceSelectorPom } from "../action-row/grid-slice-selector";
@@ -52,9 +52,7 @@
   }
 
   async openNthSample(n: number) {
-    await this.url.pageChange(() =>
-      this.getNthLooker(n).click({ position: { x: 10, y: 80 } })
-    );
+    await this.getNthLooker(n).click({ position: { x: 10, y: 80 } });
   }
 
   async openFirstSample() {
@@ -69,7 +67,7 @@
     return this.getForwardSection()
       .locator("div")
       .last()
       .scrollIntoViewIfNeeded();
   }
 
   async scrollTop() {
@@ -80,7 +78,7 @@
   }
 
   async selectSlice(slice: string) {
-    await this.url.pageChange(() => this.sliceSelector.selectSlice(slice));
+    await this.sliceSelector.selectSlice(slice);
   }
 
   /**
@@ -148,7 +146,7 @@
   }
 
   async isEntryCountTextEqualTo(text: string) {
     return this.gridPom.page.waitForFunction(
       (text_) => {
         return (
           document.querySelector("[data-cy='entry-counts']").textContent ===