Grid LRU caching with Looker size estimates

app/packages/core/src/components/Common/utils.tsx

@@ -68,13 +68,14 @@ export const getFormatter = (fieldType: string, timeZone: string, bounds) => {
         );
       }
 
-      return numeral(v).format(
+      const str = numeral(v).format(
         [INT_FIELD, FRAME_NUMBER_FIELD, FRAME_SUPPORT_FIELD].includes(fieldType)
           ? "0a"
           : bounds[1] - bounds[0] < 0.1
           ? "0.0000a"
           : "0.00a"
       );
+      return str === "NaN" ? v.toString() : str;
     },
   };
 };

app/packages/core/src/components/Filters/NumericFieldFilter/RangeSlider.tsx

@@ -35,9 +35,12 @@ const RangeSlider = ({
   const one = useRecoilValue(state.oneBound({ path, modal }));
   const timeZone = useRecoilValue(fos.timeZone);
   const hasBounds = useRecoilValue(state.hasBounds({ path, modal }));
+  const nonfinitesText = useRecoilValue(state.nonfinitesText({ path, modal }));
 
   if (!hasBounds) {
-    return <Box text="No results" />;
+    return (
+      <Box text={nonfinitesText ? `${nonfinitesText} present` : "No results"} />
+    );
   }
 
   const showSlider = hasBounds && !(excluded && defaultRange);

app/packages/core/src/components/Filters/NumericFieldFilter/state.ts

@@ -1,5 +1,5 @@
 import type { Nonfinite } from "@fiftyone/state";
-import { boundsAtom, nonfiniteAtom, rangeAtom } from "@fiftyone/state";
+import { boundsAtom, nonfiniteData, rangeAtom } from "@fiftyone/state";
 import { selectorFamily } from "recoil";
 
 export const FLOAT_NONFINITES: Nonfinite[] = ["inf", "ninf", "nan"];
@@ -25,14 +25,17 @@ export const hasDefaultRange = selectorFamily({
     },
 });
 
-export const hasNonfinites = selectorFamily({
-  key: "hasNonfinites",
+export const nonfinitesText = selectorFamily({
+  key: "nonfinitesText",
   get:
     (params: { path: string; modal: boolean }) =>
     ({ get }) => {
-      return FLOAT_NONFINITES.every((key) =>
-        get(nonfiniteAtom({ key, ...params }))
+      const data = get(nonfiniteData({ ...params, extended: false }));
+      const result = Object.entries(data).filter(
+        ([k, v]) => k !== "none" && Boolean(v)
       );
+
+      return result.length ? result.map(([key]) => key).join(", ") : null;
     },
 });
 

app/packages/core/src/components/Grid/Grid.tsx

@@ -70,11 +70,10 @@ function Grid() {
       retainItems: true,
       rowAspectRatioThreshold: threshold,
       get: (next) => page(next),
-      render: (id, element, dimensions, soft, hide) => {
-        if (lookerStore.has(id.description)) {
-          const looker = lookerStore.get(id.description);
-          hide ? looker?.disable() : looker?.attach(element, dimensions);
-
+      render: (id, element, dimensions, zooming) => {
+        const cached = lookerStore.get(id.description);
+        if (cached) {
+          cached?.attach(element, dimensions);
           return;
         }
 
@@ -84,7 +83,7 @@ function Grid() {
           throw new Error("bad data");
         }
 
-        if (soft) {
+        if (zooming) {
           // we are scrolling fast, skip creation
           return;
         }

app/packages/core/src/components/Grid/useLookerCache.test.ts

@@ -0,0 +1,47 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import { describe, expect, it } from "vitest";
+import useLookerCache from "./useLookerCache";
+
+class Looker extends EventTarget {
+  destroy = () => undefined;
+  getSizeBytesEstimate = () => 1;
+}
+
+describe("useLookerCache", () => {
+  it("assert intermediate loading", () => {
+    const { result, rerender } = renderHook(
+      (reset) => useLookerCache<Looker>(reset),
+      {
+        initialProps: "one",
+      }
+    );
+    expect(result.current.loadedSize()).toBe(0);
+    expect(result.current.loadingSize()).toBe(0);
+
+    act(() => {
+      const looker = new Looker();
+      result.current.set("one", looker);
+    });
+
+    expect(result.current.loadingSize()).toBe(1);
+    expect(result.current.loadedSize()).toBe(0);
+    expect(result.current.sizeEstimate()).toBe(0);
+
+    act(() => {
+      const looker = result.current.get("one");
+      if (!looker) {
+        throw new Error("looker is missing");
+      }
+
+      looker.dispatchEvent(new Event("load"));
+    });
+    expect(result.current.loadingSize()).toBe(0);
+    expect(result.current.loadedSize()).toBe(1);
+    expect(result.current.sizeEstimate()).toBe(1);
+
+    rerender("two");
+    expect(result.current.loadedSize()).toBe(0);
+    expect(result.current.loadingSize()).toBe(0);
+    expect(result.current.sizeEstimate()).toBe(0);
+  });
+});

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

@@ -0,0 +1,66 @@
+import * as fos from "@fiftyone/state";
+import { LRUCache } from "lru-cache";
+import { useMemo } from "react";
+
+const MAX_LRU_CACHE_ITEMS = 510;
+const MAX_LRU_CACHE_SIZE = 1e9;
+
+interface Lookers extends EventTarget {
+  destroy: () => void;
+  getSizeBytesEstimate: () => number;
+}
+
+export default function useLookerCache<
+  T extends Lookers | fos.Lookers = fos.Lookers
+>(reset: string) {
+  return useMemo(() => {
+    /** CLEAR CACHE WHEN reset CHANGES */
+    reset;
+    /** CLEAR CACHE WHEN reset CHANGES */
+
+    const loaded = new LRUCache<string, T>({
+      dispose: (looker) => looker.destroy(),
+      max: MAX_LRU_CACHE_ITEMS,
+      maxSize: MAX_LRU_CACHE_SIZE,
+      noDisposeOnSet: true,
+      sizeCalculation: (looker) => {
+        console.log(looker.getSizeBytesEstimate());
+        return looker.getSizeBytesEstimate();
+      },
+      updateAgeOnGet: true,
+    });
+
+    // an intermediate mapping while until the "load" event
+    // "load" must occur before requesting the size bytes estimate
+    const loading = new Map<string, T>();
+
+    return {
+      delete: (key: string) => {
+        loading.delete(key);
+        loaded.delete(key);
+      },
+      get: (key: string) => loaded.get(key) ?? loading.get(key),
+      keys: function* () {
+        for (const it of loading.keys()) {
+          yield* it;
+        }
+        for (const it of loaded.keys()) {
+          yield* it;
+        }
+      },
+      loadingSize: () => loading.size,
+      loadedSize: () => loaded.size,
+      set: (key: string, looker: T) => {
+        const onReady = () => {
+          loaded.set(key, looker);
+          loading.delete(key);
+          looker.removeEventListener("load", onReady);
+        };
+
+        looker.addEventListener("load", onReady);
+        loading.set(key, looker);
+      },
+      sizeEstimate: () => loaded.calculatedSize,
+    };
+  }, [reset]);
+}

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

@@ -1,13 +1,10 @@
 import { subscribe } from "@fiftyone/relay";
 import * as fos from "@fiftyone/state";
-import { LRUCache } from "lru-cache";
 import { useEffect, useMemo } from "react";
 import uuid from "react-uuid";
 import { useRecoilValue } from "recoil";
 import { gridAt, gridOffset, gridPage } from "./recoil";
-
-const MAX_LRU_CACHE_ITEMS = 510;
-const MAX_LRU_CACHE_SIZE = 1e9;
+import useLookerCache from "./useLookerCache";
 
 export default function useRefreshers() {
   const cropToContent = useRecoilValue(fos.cropToContent(false));
@@ -78,22 +75,8 @@ export default function useRefreshers() {
     []
   );
 
-  const lookerStore = useMemo(() => {
-    /** LOOKER STORE REFRESHER */
-    reset;
-    /** LOOKER STORE REFRESHER */
-
-    return new LRUCache<string, fos.Lookers>({
-      dispose: (looker) => {
-        looker.destroy();
-      },
-      max: MAX_LRU_CACHE_ITEMS,
-      noDisposeOnSet: true,
-    });
-  }, [reset]);
-
   return {
-    lookerStore,
+    lookerStore: useLookerCache(reset),
     pageReset,
     reset,
   };

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

@@ -1,13 +1,13 @@
 import type Spotlight from "@fiftyone/spotlight";
 import * as fos from "@fiftyone/state";
-import type { LRUCache } from "lru-cache";
 import { useEffect } from "react";
 import { useRecoilValue } from "recoil";
+import type useRefreshers from "./useRefreshers";
 
 export default function useSelect(
   getFontSize: () => number,
   options: ReturnType<typeof fos.useLookerOptions>,
-  store: LRUCache<string, fos.Lookers>,
+  store: ReturnType<typeof useRefreshers>["lookerStore"],
   spotlight?: Spotlight<number, fos.Sample>
 ) {
   const { init, deferred } = fos.useDeferrer();
@@ -16,13 +16,25 @@ export default function useSelect(
   useEffect(() => {
     deferred(() => {
       const fontSize = getFontSize();
+      const retained = new Set<string>();
       spotlight?.updateItems((id) => {
-        store.get(id.description)?.updateOptions({
+        const instance = store.get(id.description);
+        if (!instance) {
+          return;
+        }
+
+        retained.add(id.description);
+        instance.updateOptions({
           ...options,
           fontSize,
           selected: selected.has(id.description),
         });
       });
+
+      for (const id of store.keys()) {
+        if (retained.has(id)) continue;
+        store.delete(id);
+      }
     });
   }, [deferred, getFontSize, options, selected, spotlight, store]);
 

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

@@ -194,6 +194,7 @@ export default function TableView(props: ViewPropsType) {
                             background: isSelected
                               ? selectedCellColor
                               : "unset",
+                            fontSize: "1rem",
                           }}
                           onClick={() => {
                             handleCellClick(rowIndex, columnIndex);
@@ -220,6 +221,7 @@ export default function TableView(props: ViewPropsType) {
                           background: isRowSelected
                             ? selectedCellColor
                             : "unset",
+                          fontSize: "1rem",
                         }}
                       >
                         {currentRowHasActions ? (

app/packages/looker/src/lookers/abstract.ts

@@ -191,7 +191,24 @@ export abstract class AbstractLooker<
     return this.sampleOverlays;
   }
 
-  protected dispatchEvent(eventType: string, detail: any): void {
+  getSizeBytesEstimate() {
+    let size = 1;
+    if (this.state.dimensions && !this.state.error) {
+      const [w, h] = this.state.dimensions;
+      size += w * h * 4;
+    }
+
+    if (!this.sampleOverlays?.length) {
+      return size;
+    }
+
+    for (let index = 0; index < this.sampleOverlays.length; index++) {
+      size += this.sampleOverlays[index].getSizeBytes();
+    }
+    return size;
+  }
+
+  dispatchEvent(eventType: string, detail: any): void {
     if (detail instanceof ErrorEvent) {
       this.updater({ error: detail.error });
       return;
@@ -208,11 +225,18 @@ export abstract class AbstractLooker<
   }
 
   protected dispatchImpliedEvents(
-    { options: prevOtions }: Readonly<State>,
-    { options }: Readonly<State>
+    previous: Readonly<State>,
+    next: Readonly<State>
   ): void {
-    if (options.showJSON !== prevOtions.showJSON) {
-      this.dispatchEvent("options", { showJSON: options.showJSON });
+    if (previous.options.showJSON !== next.options.showJSON) {
+      this.dispatchEvent("options", { showJSON: next.options.showJSON });
+    }
+
+    const wasLoaded = previous.overlaysPrepared && previous.dimensions;
+    const isLoaded = next.overlaysPrepared && next.dimensions;
+
+    if (!wasLoaded && isLoaded) {
+      this.dispatchEvent("load", undefined);
     }
   }
 

app/packages/looker/src/lookers/video.ts

@@ -158,6 +158,19 @@ export class VideoLooker extends AbstractLooker<VideoState, VideoSample> {
     };
   }
 
+  getSizeBytesEstimate() {
+    let size = super.getSizeBytesEstimate();
+    if (!this.firstFrame.overlays?.length) {
+      return size;
+    }
+
+    for (let index = 0; index < this.firstFrame.overlays.length; index++) {
+      size += this.firstFrame.overlays[index].getSizeBytes();
+    }
+
+    return size;
+  }
+
   hasDefaultZoom(state: VideoState, overlays: Overlay<VideoState>[]): boolean {
     const pan = [0, 0];
     const scale = 1;

app/packages/spotlight/src/row.ts

@@ -147,18 +147,10 @@ export default class Row<K, V> {
 
   show(
     element: HTMLDivElement,
-    hidden: boolean,
     attr: typeof BOTTOM | typeof TOP,
-    soft: boolean,
+    zooming: boolean,
     config: SpotlightConfig<K, V>
   ): void {
-    if (hidden !== this.#hidden) {
-      hidden
-        ? this.#container.classList.add(styles.spotlightRowHidden)
-        : this.#container.classList.remove(styles.spotlightRowHidden);
-      this.#hidden = hidden;
-    }
-
     if (!this.attached) {
       this.#container.style[attr] = `${this.#from}px`;
       this.#container.style[attr === BOTTOM ? TOP : BOTTOM] = UNSET;
@@ -171,7 +163,7 @@ export default class Row<K, V> {
 
     for (const { element, item } of this.#row) {
       const width = item.aspectRatio * this.height;
-      config.render(item.id, element, [width, this.height], soft, hidden);
+      config.render(item.id, element, [width, this.height], zooming);
     }
   }