Merge release/v1.1.0 to develop

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,9 @@ function Grid() {
       retainItems: true,
       rowAspectRatioThreshold: threshold,
       get: (next) => page(next),
-      render: (id, element, dimensions, soft, hide) => {
+      render: (id, element, dimensions, zooming) => {
         if (lookerStore.has(id.description)) {
-          const looker = lookerStore.get(id.description);
-          hide ? looker?.disable() : looker?.attach(element, dimensions);
-
+          lookerStore.get(id.description)?.attach(element, dimensions);
           return;
         }
 
@@ -84,7 +82,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/useRefreshers.ts

@@ -7,7 +7,6 @@ import { useRecoilValue } from "recoil";
 import { gridAt, gridOffset, gridPage } from "./recoil";
 
 const MAX_LRU_CACHE_ITEMS = 510;
-const MAX_LRU_CACHE_SIZE = 1e9;
 
 export default function useRefreshers() {
   const cropToContent = useRecoilValue(fos.cropToContent(false));

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

@@ -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/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);
     }
   }
 

app/packages/spotlight/src/section.ts

@@ -45,8 +45,8 @@ export default class Section<K, V> {
   readonly #width: number;
 
   #direction: DIRECTION;
-  #dirty: Set<Row<K, V>> = new Set();
   #end: Edge<K, V>;
+  #itemIds = new Set<string>();
   #nextMap: WeakMap<ID, ID> = new WeakMap();
   #previousMap: WeakMap<ID, ID> = new WeakMap();
   #shown: Set<Row<K, V>> = new Set();
@@ -129,7 +129,6 @@ export default class Section<K, V> {
     target,
     threshold,
     top,
-    updater,
     zooming,
   }: {
     config: SpotlightConfig<K, V>;
@@ -181,14 +180,8 @@ export default class Section<K, V> {
           break;
         }
 
-        if (this.#dirty.has(row) && !zooming && updater) {
-          row.updateItems(updater);
-          this.#dirty.delete(row);
-        }
-
         row.show(
           this.#container,
-          this.#dirty.has(row) && zooming,
           this.#direction === DIRECTION.FORWARD ? TOP : BOTTOM,
           zooming,
           config
@@ -225,7 +218,6 @@ export default class Section<K, V> {
 
   updateItems(updater: (id: ID) => void) {
     for (const row of this.#shown) row.updateItems(updater);
-    for (const row of this.#rows) !this.#shown.has(row) && this.#dirty.add(row);
   }
 
   async first(
@@ -308,7 +300,9 @@ export default class Section<K, V> {
 
     renderer(() => {
       const { rows, remainder } = this.#tile(
-        [...end.remainder, ...data.items],
+        [...end.remainder, ...data.items].filter(
+          (i) => !this.#itemIds.has(i.id.description)
+        ),
         this.#height,
         data.next === null,
         data.focus,
@@ -350,6 +344,7 @@ export default class Section<K, V> {
         edge: newEnd,
         width: this.#width,
       });
+
       this.#end = this.#start;
       this.#start = newEnd;
 
@@ -452,6 +447,10 @@ export default class Section<K, V> {
         rowItems.reverse();
       }
 
+      for (const i of rowItems) {
+        this.#itemIds.add(i.id.description);
+      }
+
       const row = new Row({
         config: this.#config,
         dangle:

app/packages/spotlight/src/types.ts

@@ -38,8 +38,7 @@ export type Render = (
   id: ID,
   element: HTMLDivElement,
   dimensions: [number, number],
-  soft: boolean,
-  disable: boolean
+  zooming: boolean
 ) => void;
 
 export interface Response<K, V> {