tmp work

voxel51 · Oct 24, 2024 · ea1d056 · ea1d056
1 parent 048d041
commit ea1d056
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 39 deletions.
diff --git a/app/packages/core/src/components/Modal/use-looker.ts b/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;
diff --git a/app/packages/spaces/src/components/Panel.tsx b/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 }));