add default labels visibility in dataset app config + selective labels rendering optimization

.gitignore

@@ -29,3 +29,5 @@ dist/
 coverage.xml
 .coverage.*
 pyvenv.cfg
+
+.env

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

@@ -1,14 +1,14 @@
+import { useTrackEvent } from "@fiftyone/analytics";
 import { subscribe } from "@fiftyone/relay";
 import { isModalActive } from "@fiftyone/state";
 import React, { useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 import ColorModal from "./ColorModal/ColorModal";
 import { activeColorEntry } from "./ColorModal/state";
+import EventTracker from "./EventTracker";
 import Modal from "./Modal";
 import SamplesContainer from "./SamplesContainer";
-import EventTracker from "./EventTracker";
-import { useTrackEvent } from "@fiftyone/analytics";
 
 const Container = styled.div`
   height: 100%;

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

@@ -4,6 +4,7 @@ import { LRUCache } from "lru-cache";
 import { useEffect, useMemo } from "react";
 import uuid from "react-uuid";
 import { useRecoilValue } from "recoil";
+import { gridActivePathsLUT } from "../Sidebar/useShouldReloadSample";
 import { gridAt, gridOffset, gridPage } from "./recoil";
 
 const MAX_LRU_CACHE_ITEMS = 510;
@@ -64,27 +65,30 @@ export default function useRefreshers() {
     return uuid();
   }, [layoutReset, pageReset]);
 
-  useEffect(
-    () =>
-      subscribe(({ event }, { reset }) => {
-        if (event === "fieldVisibility") return;
+  useEffect(() => {
+    const unsubscribe = subscribe(({ event }, { reset }) => {
+      if (event === "fieldVisibility") return;
 
-        // if not a modal page change, reset the grid location
-        reset(gridAt);
-        reset(gridPage);
-        reset(gridOffset);
-      }),
-    []
-  );
+      // if not a modal page change, reset the grid location
+      reset(gridAt);
+      reset(gridPage);
+      reset(gridOffset);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
 
   const lookerStore = useMemo(() => {
     /** LOOKER STORE REFRESHER */
     reset;
     /** 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,

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()) {