fix modal

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

@@ -1,7 +1,7 @@
 import { HelpPanel, JSONPanel } from "@fiftyone/components";
 import { OPERATOR_PROMPT_AREAS, OperatorPromptArea } from "@fiftyone/operators";
 import * as fos from "@fiftyone/state";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import ReactDOM from "react-dom";
 import { useRecoilCallback, useRecoilValue } from "recoil";
 import styled from "styled-components";
@@ -178,12 +178,6 @@ const Modal = () => {
 
   const activeLookerRef = useRef<fos.Lookers>();
 
-  const modalLabelsToggleTracker = useOnSidebarSelectionChange({ modal: true });
-
-  useEffect(() => {
-    activeLookerRef.current?.refreshSample();
-  }, [modalLabelsToggleTracker]);
-
   const addTooltipEventHandler = useTooltipEventHandler();
   const removeTooltipEventHanlderRef = useRef<ReturnType<
     typeof addTooltipEventHandler

app/packages/core/src/components/Modal/use-looker.ts

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { useErrorHandler } from "react-error-boundary";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { v4 as uuid } from "uuid";
+import { useShouldReloadSampleOnActiveFieldsChange } from "../Sidebar/useShouldReloadSample";
 import { useClearSelectedLabels, useShowOverlays } from "./ModalLooker";
 import { useLookerOptionsUpdate, useModalContext } from "./hooks";
 import useKeyEvents from "./use-key-events";
@@ -51,6 +52,20 @@ function useLooker<L extends fos.Lookers>({
     !initialRef.current && looker.updateOptions(lookerOptions);
   }, [looker, lookerOptions]);
 
+  const shouldRefresh = useShouldReloadSampleOnActiveFieldsChange({
+    modal: true,
+  });
+
+  useEffect(() => {
+    if (!looker) {
+      return;
+    }
+
+    if (shouldRefresh(id)) {
+      looker?.refreshSample();
+    }
+  }, [id, lookerOptions.activePaths, looker]);
+
   useEffect(() => {
     /** start refreshers */
     colorScheme;

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

@@ -9,11 +9,11 @@ import { CachedLabels, LookerId } from "./useShouldReloadSample";
  *
  * @returns whether or not looker should be refreshed (true) or not (false)
  */
-export function syncAndCheckRefreshNeeded(
+export const syncAndCheckRefreshNeeded = (
   lookerId: string,
   lut: Map<LookerId, CachedLabels>,
   currentActiveLabelFields: Set<string>
-): boolean {
+) => {
   // if no active fields, no refresh is needed
   if (currentActiveLabelFields.size === 0) {
     return false;
@@ -48,4 +48,4 @@ export function syncAndCheckRefreshNeeded(
   );
 
   return true;
-}
+};

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

@@ -1,12 +1,13 @@
 import { activeLabelFields } from "@fiftyone/state";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { syncAndCheckRefreshNeeded } from "./syncAndCheckRefreshNeeded";
 
 export type LookerId = string;
 export type CachedLabels = Set<string>;
 
 export const gridActivePathsLUT = new Map<LookerId, CachedLabels>();
+export const modalActivePathsLUT = new Map<LookerId, CachedLabels>();
 
 export const useShouldReloadSampleOnActiveFieldsChange = ({
   modal,
@@ -19,12 +20,25 @@ export const useShouldReloadSampleOnActiveFieldsChange = ({
     (id: string) => {
       return syncAndCheckRefreshNeeded(
         id,
-        gridActivePathsLUT,
+        modal ? modalActivePathsLUT : gridActivePathsLUT,
         new Set(activeLabelFieldsValue)
       );
     },
     [activeLabelFieldsValue]
   );
 
+  /**
+   * clear look up table when component unmounts
+   */
+  useEffect(() => {
+    return () => {
+      if (modal) {
+        modalActivePathsLUT.clear();
+      } else {
+        gridActivePathsLUT.clear();
+      }
+    };
+  }, []);
+
   return shouldRefresh;
 };