use more granular strategy for caching

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

@@ -10,9 +10,10 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useRecoilValue } from "recoil";
+import { useRecoilCallback, useRecoilValue } from "recoil";
 import { v4 as uuid } from "uuid";
 import { QP_WAIT, QueryPerformanceToastEvent } from "../QueryPerformanceToast";
+import { gridActivePathsLUT } from "../Sidebar/useShouldReloadSample";
 import { gridCrop, gridSpacing, pageParameters } from "./recoil";
 import useAt from "./useAt";
 import useEscape from "./useEscape";
@@ -46,6 +47,15 @@ function Grid() {
   const setSample = fos.useExpandSample(store);
   const getFontSize = useFontSize(id);
 
+  const getCurrentActiveLabelFields = useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        return snapshot
+          .getLoadable(fos.activeLabelFields({ modal: false }))
+          .getValue();
+      }
+  );
+
   const spotlight = useMemo(() => {
     /** SPOTLIGHT REFRESHER */
     reset;
@@ -61,6 +71,7 @@ function Grid() {
         const looker = lookerStore.get(id.description);
         looker?.destroy();
         lookerStore.delete(id.description);
+        gridActivePathsLUT.delete(id.description);
       },
       detach: (id) => {
         const looker = lookerStore.get(id.description);
@@ -101,6 +112,18 @@ function Grid() {
         );
         lookerStore.set(id.description, looker);
         looker.attach(element, dimensions);
+
+        // initialize active paths tracker
+        const currentActiveLabelFields = getCurrentActiveLabelFields();
+        if (
+          currentActiveLabelFields &&
+          !gridActivePathsLUT.has(id.description)
+        ) {
+          gridActivePathsLUT.set(
+            id.description,
+            new Set(currentActiveLabelFields)
+          );
+        }
       },
       scrollbar: true,
       spacing,

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

@@ -1,10 +1,10 @@
 import { subscribe } from "@fiftyone/relay";
 import * as fos from "@fiftyone/state";
 import { LRUCache } from "lru-cache";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 import uuid from "react-uuid";
 import { useRecoilValue } from "recoil";
-import { useOnSidebarSelectionChange } from "../Sidebar/useOnSidebarSelectionChange";
+import { gridActivePathsLUT } from "../Sidebar/useShouldReloadSample";
 import { gridAt, gridOffset, gridPage } from "./recoil";
 
 const MAX_LRU_CACHE_ITEMS = 510;
@@ -86,28 +86,15 @@ export default function useRefreshers() {
     /** LOOKER STORE REFRESHER */
 
     return new LRUCache<string, fos.Lookers>({
-      dispose: (looker) => {
+      dispose: (looker, id) => {
         looker.destroy();
+        gridActivePathsLUT.delete(id);
       },
       max: MAX_LRU_CACHE_ITEMS,
       noDisposeOnSet: true,
     });
   }, [reset]);
 
-  const lookerStoreRef = useRef(lookerStore);
-  lookerStoreRef.current = lookerStore;
-
-  const gridLabelsToggleTracker = useOnSidebarSelectionChange({ modal: false });
-
-  /**
-   * Refresh all lookers when the labels toggle tracker changes
-   */
-  useEffect(() => {
-    lookerStoreRef.current?.forEach((looker) => {
-      looker.refreshSample();
-    });
-  }, [gridLabelsToggleTracker]);
-
   return {
     lookerStore,
     pageReset,

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

@@ -3,6 +3,7 @@ import * as fos from "@fiftyone/state";
 import type { LRUCache } from "lru-cache";
 import { useEffect } from "react";
 import { useRecoilValue } from "recoil";
+import { useShouldReloadSampleOnActiveFieldsChange } from "../Sidebar/useShouldReloadSample";
 
 export default function useSelect(
   getFontSize: () => number,
@@ -12,6 +13,10 @@ export default function useSelect(
 ) {
   const { init, deferred } = fos.useDeferrer();
 
+  const shouldRefresh = useShouldReloadSampleOnActiveFieldsChange({
+    modal: false,
+  });
+
   const selected = useRecoilValue(fos.selectedSamples);
   useEffect(() => {
     deferred(() => {
@@ -29,6 +34,11 @@ export default function useSelect(
           fontSize,
           selected: selected.has(id.description),
         });
+
+        // rerender looker if active fields have changed and have never been rendered before
+        if (shouldRefresh(id.description)) {
+          instance.refreshSample();
+        }
       });
 
       for (const id of store.keys()) {

app/packages/core/src/components/Sidebar/useShouldReloadSample.ts

@@ -0,0 +1,59 @@
+import { activeLabelFields } from "@fiftyone/state";
+import { useCallback } from "react";
+import { useRecoilValue } from "recoil";
+
+type LookerId = string;
+type CachedLabels = Set<string>;
+
+export const gridActivePathsLUT = new Map<LookerId, CachedLabels>();
+
+export const useShouldReloadSampleOnActiveFieldsChange = ({
+  modal,
+}: {
+  modal: boolean;
+}) => {
+  const activeLabelFieldsValue = useRecoilValue(activeLabelFields({ modal }));
+
+  const shouldRefresh = useCallback(
+    (id: string) => {
+      const thisLookerActiveFields = gridActivePathsLUT.get(id);
+      const currentActiveLabelFields = new Set(activeLabelFieldsValue);
+
+      if (currentActiveLabelFields.size === 0) {
+        return false;
+      }
+
+      // diff the two sets, we only care about net new fields
+      // if there are no new fields, we don't need to update the tracker
+      let hasNewFields = false;
+
+      if (thisLookerActiveFields) {
+        for (const field of currentActiveLabelFields) {
+          if (!thisLookerActiveFields.has(field)) {
+            hasNewFields = true;
+            break;
+          }
+        }
+      } else {
+        hasNewFields = true;
+      }
+
+      if (!hasNewFields) {
+        return false;
+      }
+
+      gridActivePathsLUT.set(
+        id,
+        new Set([
+          ...(thisLookerActiveFields ?? []),
+          ...currentActiveLabelFields,
+        ])
+      );
+
+      return true;
+    },
+    [activeLabelFieldsValue]
+  );
+
+  return shouldRefresh;
+};

app/packages/looker/src/worker/index.ts

@@ -176,6 +176,7 @@ const processLabels = async (
         activePaths.length &&
         activePaths.includes(`${prefix ?? ""}${field}`)
       ) {
+        console.log(">>>painting ", `${prefix ?? ""}${field}`);
         if (painterFactory[cls]) {
           painterPromises.push(
             painterFactory[cls](