Merge branch 'release/v1.0.2' into fix/release-event-listener-adder

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/components/src/components/AdaptiveMenu/index.tsx

@@ -53,8 +53,10 @@ export default function AdaptiveMenu(props: AdaptiveMenuPropsType) {
     if (!containerElem) return;
     hideOverflowingNodes(containerElem, (_: number, lastVisibleItemId) => {
       const lastVisibleItem = itemsById[lastVisibleItemId];
-      const computedHidden = items.length - lastVisibleItem.index - 1;
-      setHidden(computedHidden);
+      if (lastVisibleItem?.index) {
+        const computedHidden = items.length - lastVisibleItem.index - 1;
+        setHidden(computedHidden);
+      }
     });
   }
 

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/looker/src/lookers/abstract.ts

@@ -397,12 +397,12 @@ export abstract class AbstractLooker<
     const argsWithSignal: AddEventListenerOptions =
       typeof optionsOrUseCapture === "boolean"
         ? {
-            signal: this.abortController.signal,
+            signal: this.abortController?.signal,
             capture: optionsOrUseCapture,
           }
         : {
             ...(optionsOrUseCapture ?? {}),
-            signal: this.abortController.signal,
+            signal: this.abortController?.signal,
           };
     this.eventTarget.addEventListener(eventType, handler, argsWithSignal);
   }

app/packages/looker/src/lookers/imavid/ima-vid-frame-samples.ts

@@ -88,7 +88,7 @@ export class ImaVidFrameSamples {
           sample.image = image;
           resolve(sampleId);
         },
-        { signal: this.abortController.signal }
+        { signal: this.abortController?.signal }
       );
 
       image.addEventListener(
@@ -105,7 +105,7 @@ export class ImaVidFrameSamples {
           // setting src should trigger the load event
           image.src = BASE64_BLACK_IMAGE;
         },
-        { signal: this.abortController.signal }
+        { signal: this.abortController?.signal }
       );
 
       image.src = source;

app/packages/looker/src/util.ts

@@ -462,7 +462,7 @@ export const createWorker = (
     (error) => {
       dispatchEvent("error", error);
     },
-    { signal: abortController.signal }
+    { signal: abortController?.signal }
   );
 
   worker.addEventListener(
@@ -475,7 +475,7 @@ export const createWorker = (
         dispatchEvent("error", new ErrorEvent("error", { error }));
       }
     },
-    { signal: abortController.signal }
+    { signal: abortController?.signal }
   );
 
   worker.postMessage({
@@ -496,7 +496,7 @@ export const createWorker = (
 
       listeners[method].forEach((callback) => callback(worker, args));
     },
-    { signal: abortController.signal }
+    { signal: abortController?.signal }
   );
   return worker;
 };

app/packages/spotlight/src/index.ts

@@ -104,7 +104,8 @@ export default class Spotlight<K, V> extends EventTarget {
 
   destroy(): void {
     if (!this.attached) {
-      throw new Error("spotlight is not attached");
+      console.error("spotlight is not attached");
+      return;
     }
 
     this.#backward?.remove();