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,11 +7,11 @@ 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";
 
 const ModalWrapper = styled.div`

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"} />

app/packages/looker/src/lookers/abstract.ts

@@ -536,10 +536,9 @@ export abstract class AbstractLooker<
 
   destroy() {
     this.resizeObserver.disconnect();
-    this.lookerElement.element.parentElement &&
-      this.lookerElement.element.parentElement.removeChild(
-        this.lookerElement.element
-      );
+    this.lookerElement.element.parentElement.removeChild(
+      this.lookerElement.element
+    );
     this.updater({ destroyed: true });
   }
   disable() {

app/packages/spaces/src/components/Panel.tsx

@@ -1,7 +1,7 @@
 import { CenteredStack, scrollable } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
 import React, { useEffect } from "react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useSetRecoilState } from "recoil";
 import { PANEL_LOADING_TIMEOUT } from "../constants";
 import { PanelContext } from "../contexts";
 import { useReactivePanel } from "../hooks";
@@ -20,7 +20,7 @@ function Panel(props: PanelProps) {
   const setPanelIdToScope = useSetRecoilState(panelIdToScopeAtom);
   const scope = isModalPanel ? "modal" : "grid";
 
-  const thisModalUniqueId = useRecoilValue(fos.currentModalUniqueId);
+  const thisModalUniqueId = null;
 
   useEffect(() => {
     setPanelIdToScope((ids) => ({ ...ids, [node.id]: scope }));

app/packages/spotlight/src/createScrollReader.ts

@@ -15,14 +15,17 @@ export default function createScrollReader(
   let timeout: ReturnType<typeof setTimeout>;
   let zooming = false;
 
-  element.addEventListener("scroll", () => {
+  const scroll = () => {
     scrolling = true;
-  });
+  };
+  element.addEventListener("scroll", scroll);
 
-  element.addEventListener("scrollend", () => {
+  const scrollEnd = () => {
     scrolling = false;
     requestAnimationFrame(() => render(zooming, true));
-  });
+  };
+
+  element.addEventListener("scrollend", scrollEnd);
 
   const updateScrollStatus = () => {
     const threshold = getScrollSpeedThreshold();
@@ -68,7 +71,9 @@ export default function createScrollReader(
   return {
     destroy: () => {
       destroyed = true;
+      element.removeEventListener("scroll", scroll);
+      element.removeEventListener("scrollend", scrollEnd)
     },
-    zooming: () => zooming
+    zooming: () => zooming,
   };
 }

app/packages/spotlight/src/index.ts

@@ -18,7 +18,7 @@ import {
   SCROLLBAR_WIDTH,
   TWO,
   ZERO,
-  ZOOMING_COEFFICIENT
+  ZOOMING_COEFFICIENT,
 } from "./constants";
 import createScrollReader from "./createScrollReader";
 import { Load, RowChange } from "./events";
@@ -107,8 +107,8 @@ export default class Spotlight<K, V> extends EventTarget {
       throw new Error("spotlight is not attached");
     }
 
-    this.#backward?.remove();
-    this.#forward?.remove();
+    this.#backward?.destroy();
+    this.#forward?.destroy();
     this.#element?.classList.remove(styles.spotlightLoaded);
     this.#element?.remove();
     this.#scrollReader?.destroy();
@@ -203,7 +203,7 @@ export default class Spotlight<K, V> extends EventTarget {
               const backward = this.#forward;
               this.#forward = section;
               this.#forward.attach(this.#element);
-              this.#backward.remove();
+              this.#backward.destroy();
               this.#backward = backward;
               offset = before - this.#containerHeight + this.#config.spacing;
             }
@@ -271,7 +271,7 @@ export default class Spotlight<K, V> extends EventTarget {
               this.#backward = result.section;
               this.#backward.attach(this.#element);
 
-              this.#forward.remove();
+              this.#forward.destroy();
               this.#forward = forward;
             }
 

app/packages/spotlight/src/row.ts

@@ -13,6 +13,7 @@ export default class Row<K, V> {
   #from: number;
   #hidden: boolean;
 
+  readonly #aborter: AbortController = new AbortController();
   readonly #config: SpotlightConfig<K, V>;
   readonly #dangle?: boolean;
   readonly #container: HTMLDivElement = create(DIV);
@@ -47,7 +48,7 @@ export default class Row<K, V> {
       element.style.top = pixels(ZERO);
 
       if (config.onItemClick) {
-        element.addEventListener("click", (event) => {
+        const handler = (event) => {
           if (event.metaKey || event.shiftKey) {
             return;
           }
@@ -59,18 +60,13 @@ export default class Row<K, V> {
             item,
             iter,
           });
+        };
+
+        element.addEventListener("click", handler, {
+          signal: this.#aborter.signal,
         });
-        element.addEventListener("contextmenu", (event) => {
-          if (event.metaKey || event.shiftKey) {
-            return;
-          }
-          event.preventDefault();
-          focus(item.id);
-          config.onItemClick({
-            event,
-            item,
-            iter,
-          });
+        element.addEventListener("contextmenu", handler, {
+          signal: this.#aborter.signal,
         });
       }
 
@@ -123,6 +119,10 @@ export default class Row<K, V> {
     return this.#row[this.#row.length - ONE].item.id;
   }
 
+  destroy() {
+    this.#aborter.abort();
+  }
+
   has(item: string) {
     for (const i of this.#row) {
       if (i.item.id.description === item) {

app/packages/spotlight/src/section.ts

@@ -108,6 +108,14 @@ export default class Section<K, V> {
       : element.appendChild(this.#section);
   }
 
+  destroy() {
+    this.#section.remove();
+    for (const row of this.#rows) {
+      row.destroy();
+    }
+    this.#rows = [];
+  }
+
   find(item: string): Row<K, V> | null {
     for (const row of this.#rows) {
       if (row.has(item)) {
@@ -118,11 +126,6 @@ export default class Section<K, V> {
     return null;
   }
 
-  remove() {
-    this.#section.remove();
-    this.#rows = [];
-  }
-
   render({
     config,
     target,

app/packages/state/src/hooks/useSetExpandedSample.ts

@@ -34,7 +34,7 @@ export default () => {
     []
   );
 
-  const commit = useRecoilCallback(
+  return useRecoilCallback(
     ({ set }) =>
       async (selector: ModalSelector) => {
         set(modalSelector, selector);