wip: improve modal perf

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

@@ -125,12 +125,11 @@ function Grid() {
 
     element && spotlight.attach(element);
     spotlight.addEventListener("load", mount);
-    spotlight.addEventListener("rowchange", set);
 
     return () => {
       freeVideos();
       spotlight.removeEventListener("load", mount);
-      spotlight.removeEventListener("rowchange", set);
+
       spotlight.destroy();
       document.dispatchEvent(new CustomEvent("grid-unmount"));
     };

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

@@ -53,6 +53,7 @@ export default function useAt(pageReset: string) {
   const set = useRecoilTransaction_UNSTABLE(
     ({ set }) =>
       ({ at, page, offset }: { at: ID; page: number; offset: number }) => {
+        console.log("SCROLL");
         set(gridPage, page);
         set(gridAt, at.description);
         set(gridOffset, offset);

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

@@ -13,18 +13,6 @@ export default function useSelect(
   const { init, deferred } = fos.useDeferrer();
 
   const selected = useRecoilValue(fos.selectedSamples);
-  useEffect(() => {
-    deferred(() => {
-      const fontSize = getFontSize();
-      spotlight?.updateItems((id) => {
-        store.get(id)?.updateOptions({
-          ...options,
-          fontSize,
-          selected: selected.has(id.description),
-        });
-      });
-    });
-  }, [deferred, getFontSize, options, selected, spotlight, store]);
 
   useEffect(() => {
     return spotlight ? init() : undefined;

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

@@ -7,12 +7,13 @@ import { useRecoilCallback, useRecoilValue } from "recoil";
 import styled from "styled-components";
 import { ModalActionsRow } from "../Actions";
 import Sidebar from "../Sidebar";
-import { useLookerHelpers } from "./hooks";
-import { modalContext } from "./modal-context";
 import ModalNavigation from "./ModalNavigation";
 import { ModalSpace } from "./ModalSpace";
 import { TooltipInfo } from "./TooltipInfo";
+import { useLookerHelpers } from "./hooks";
+import { modalContext } from "./modal-context";
 import { useModalSidebarRenderEntry } from "./use-sidebar-render-entry";
+import { ModalSample } from "./ModalSamplePlugin";
 
 const ModalWrapper = styled.div`
   position: fixed;
@@ -104,6 +105,10 @@ const Modal = () => {
         }
 
         clearModal();
+        activeLookerRef.current?.removeEventListener(
+          "close",
+          modalCloseHandler
+        );
       },
     [clearModal, jsonPanel, helpPanel]
   );
@@ -178,21 +183,13 @@ const Modal = () => {
   const onLookerSetSubscribers = useRef<((looker: fos.Lookers) => void)[]>([]);
 
   const onLookerSet = useCallback((looker: fos.Lookers) => {
-    onLookerSetSubscribers.current.forEach((sub) => sub(looker));
-
-    looker.addEventListener("close", modalCloseHandler);
-  }, []);
-
-  // cleanup effect
-  useEffect(() => {
-    return () => {
-      activeLookerRef.current?.removeEventListener("close", modalCloseHandler);
-    };
+    // onLookerSetSubscribers.current.forEach((sub) => sub(looker));
+    // looker.addEventListener("close", modalCloseHandler);
   }, []);
 
   const setActiveLookerRef = useCallback(
     (looker: fos.Lookers) => {
-      activeLookerRef.current = looker;
+      // activeLookerRef.current = looker;
       onLookerSet(looker);
     },
     [onLookerSet]
@@ -217,7 +214,8 @@ const Modal = () => {
           <OperatorPromptArea area={OPERATOR_PROMPT_AREAS.DRAWER_LEFT} />
           <ModalNavigation onNavigate={onNavigate} />
           <SpacesContainer>
-            <ModalSpace />
+            {/* <ModalSpace /> */}
+            <ModalSample />
           </SpacesContainer>
           <SidebarContainer>
             <SidebarPanelBlendInDiv />

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

@@ -73,7 +73,7 @@ const ModalNavigation = ({ onNavigate }: { onNavigate: () => void }) => {
     onNavigate();
     const result = await navigation?.previous();
     setModal(result);
-  }, [onNavigate, navigation, setModal]);
+  }, [navigation, onNavigate, setModal]);
 
   const keyboardHandler = useCallback(
     (e: KeyboardEvent) => {

app/packages/core/src/components/Modal/hooks.ts

@@ -1,16 +1,25 @@
 import * as fos from "@fiftyone/state";
 import { useHelpPanel, useJSONPanel } from "@fiftyone/state";
-import { useCallback, useContext } from "react";
+import { useCallback, useContext, useRef } from "react";
 import { useRecoilCallback } from "recoil";
 import { modalContext } from "./modal-context";
 
 export const useLookerHelpers = () => {
   const jsonPanel = useJSONPanel();
   const helpPanel = useHelpPanel();
+
+  // todo: jsonPanel and helpPanel are not referentially stable
+  // so use refs here
+  const jsonPanelRef = useRef(jsonPanel);
+  const helpPanelRef = useRef(helpPanel);
+
+  jsonPanelRef.current = jsonPanel;
+  helpPanelRef.current = helpPanel;
+
   const onNavigate = useCallback(() => {
-    jsonPanel.close();
-    helpPanel.close();
-  }, [helpPanel, jsonPanel]);
+    jsonPanelRef.current?.close();
+    helpPanelRef.current?.close();
+  }, []);
 
   return {
     jsonPanel,

app/packages/core/src/components/Modal/use-key-events.ts

@@ -1,8 +1,7 @@
 import type { Lookers } from "@fiftyone/state";
 import { hoveredSample } from "@fiftyone/state";
 import type { MutableRefObject } from "react";
-import { useEffect, useRef } from "react";
-import { selector, useRecoilValue } from "recoil";
+import { selector } from "recoil";
 
 export const hoveredSampleId = selector<string>({
   key: "hoveredSampleId",
@@ -16,25 +15,23 @@ export default function (
   id: string,
   looker: Lookers
 ) {
-  const hoveredId = useRecoilValue(hoveredSampleId);
-  const ready = useRef(false);
-
-  useEffect(() => {
-    if (ref.current) {
-      // initial call should wait for load event
-      const update = () => {
-        looker.updateOptions({
-          shouldHandleKeyEvents: id === hoveredId,
-        });
-        ready.current = true;
-
-        looker.removeEventListener("load", update);
-      };
-      looker.addEventListener("load", update);
-    } else if (ready.current) {
-      looker.updateOptions({
-        shouldHandleKeyEvents: id === hoveredId,
-      });
-    }
-  }, [hoveredId, id, looker, ref]);
+  // const hoveredId = useRecoilValue(hoveredSampleId);
+  // const ready = useRef(false);
+  // useEffect(() => {
+  //   if (ref.current) {
+  //     // initial call should wait for load event
+  //     const update = () => {
+  //       looker.updateOptions({
+  //         shouldHandleKeyEvents: id === hoveredId,
+  //       });
+  //       ready.current = true;
+  //       looker.removeEventListener("load", update);
+  //     };
+  //     looker.addEventListener("load", update);
+  //   } else if (ready.current) {
+  //     looker.updateOptions({
+  //       shouldHandleKeyEvents: id === hoveredId,
+  //     });
+  //   }
+  // }, [hoveredId, id, looker, ref]);
 }

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

@@ -1,10 +1,10 @@
 import * as fos from "@fiftyone/state";
 import React, { useEffect, useRef, useState } from "react";
 import { useErrorHandler } from "react-error-boundary";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilValue } from "recoil";
 import { v4 as uuid } from "uuid";
 import { useClearSelectedLabels, useShowOverlays } from "./ModalLooker";
-import { useLookerOptionsUpdate, useModalContext } from "./hooks";
+import { useLookerOptionsUpdate } from "./hooks";
 import useKeyEvents from "./use-key-events";
 import { shortcutToHelpItems } from "./utils";
 
@@ -18,28 +18,26 @@ function useLooker<L extends fos.Lookers>({
   const [id] = useState(() => uuid());
   const initialRef = useRef<boolean>(true);
   const ref = useRef<HTMLDivElement>(null);
-  const [reset, setReset] = useState(false);
   const lookerOptions = fos.useLookerOptions(true);
+  const [reset, setReset] = useState(false);
   const createLooker = fos.useCreateLooker(
     true,
     false,
     lookerOptions,
     undefined,
     true
   );
-  const selectedMediaField = useRecoilValue(fos.selectedMediaField(true));
-  const colorScheme = useRecoilValue(fos.colorScheme);
   const looker = React.useMemo(() => {
     /** start refreshers */
     reset;
-    selectedMediaField;
     /** end refreshers */
 
     return createLooker.current(sample);
-  }, [createLooker, reset, sample, selectedMediaField]) as L;
+  }, [createLooker, reset, sample]) as L;
   const handleError = useErrorHandler();
   const updateLookerOptions = useLookerOptionsUpdate();
-
+  const selectedMediaField = useRecoilValue(fos.selectedMediaField(true));
+  const colorScheme = useRecoilValue(fos.colorScheme);
   fos.useEventHandler(looker, "clear", useClearSelectedLabels());
   fos.useEventHandler(looker, "error", (event) => handleError(event.detail));
   fos.useEventHandler(looker, "options", (e) => updateLookerOptions(e.detail));
@@ -59,27 +57,8 @@ function useLooker<L extends fos.Lookers>({
     !initialRef.current && looker.updateSample(sample.sample);
   }, [colorScheme, looker, sample]);
 
-  useEffect(() => {
-    initialRef.current = false;
-  }, []);
-
-  useEffect(() => {
-    ref.current?.dispatchEvent(
-      new CustomEvent("looker-attached", { bubbles: true })
-    );
-  }, []);
-
-  useEffect(() => {
-    looker.attach(id);
-  }, [looker, id]);
-
-  useEffect(() => {
-    return () => looker?.destroy();
-  }, [looker]);
-
   const jsonPanel = fos.useJSONPanel();
   const helpPanel = fos.useHelpPanel();
-
   fos.useEventHandler(
     looker,
     "panels",
@@ -94,7 +73,6 @@ function useLooker<L extends fos.Lookers>({
           helpPanel[showHelp](shortcutToHelpItems(SHORTCUTS));
         }
       }
-
       updateLookerOptions({}, (updatedOptions) =>
         looker.updateOptions(updatedOptions)
       );
@@ -103,21 +81,30 @@ function useLooker<L extends fos.Lookers>({
 
   useKeyEvents(initialRef, sample.sample._id, looker);
 
-  const setModalLooker = useSetRecoilState(fos.modalLooker);
+  useEffect(() => {
+    ref.current?.dispatchEvent(
+      new CustomEvent("looker-attached", { bubbles: true })
+    );
+  }, []);
+  useEffect(() => {
+    initialRef.current = false;
+  }, []);
 
-  const { setActiveLookerRef } = useModalContext();
+  useEffect(() => {
+    ref.current?.dispatchEvent(
+      new CustomEvent("looker-attached", { bubbles: true })
+    );
+  }, []);
 
   useEffect(() => {
-    setModalLooker(looker);
-  }, [looker, setModalLooker]);
+    looker.attach(id);
+  }, [looker, id]);
 
   useEffect(() => {
-    if (looker) {
-      setActiveLookerRef(looker as fos.Lookers);
-    }
-  }, [looker, setActiveLookerRef]);
+    return () => looker?.destroy();
+  }, [looker]);
 
-  return { id, looker, ref, sample, updateLookerOptions };
+  return { id, looker, ref, sample };
 }
 
 export default useLooker;

app/packages/core/src/plugins/samples.tsx

@@ -20,6 +20,7 @@ registerComponent({
   name: "Samples",
   label: "Samples",
   component: () => {
+    console.log("RENDER");
     return (
       <Container>
         <Grid key={"grid"} />