3d annotation

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

@@ -113,6 +113,10 @@ const Modal = () => {
           }
         }
 
+        if (e.repeat) {
+          return;
+        }
+
         if (e.altKey && e.code === "Space") {
           const hoveringSampleId = (
             await snapshot.getPromise(fos.hoveredSample)
@@ -145,7 +149,10 @@ const Modal = () => {
           });
         } else if (e.key === "Escape") {
           const mediaType = await snapshot.getPromise(fos.mediaType);
-          if (activeLookerRef.current || mediaType === "3d") {
+          const is3dVisible = await snapshot.getPromise(
+            fos.groupMediaIs3dVisible
+          );
+          if (activeLookerRef.current || mediaType === "3d" || is3dVisible) {
             // we handle close logic in modal + other places
             return;
           }
@@ -156,7 +163,7 @@ const Modal = () => {
     []
   );
 
-  fos.useEventHandler(document, "keyup", keysHandler);
+  fos.useEventHandler(document, "keydown", keysHandler);
 
   const isFullScreen = useRecoilValue(fos.fullscreen);
 

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

@@ -1,9 +1,10 @@
 import { LoadingSpinner } from "@fiftyone/components";
 import { lighterSceneAtom } from "@fiftyone/lighter";
+import * as fos from "@fiftyone/state";
 import { EntryKind } from "@fiftyone/state";
 import { Typography } from "@mui/material";
 import { atom, useAtomValue } from "jotai";
-import React from "react";
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 import Sidebar from "../../../Sidebar";
 import Actions from "./Actions";
@@ -85,7 +86,9 @@ const Annotate = () => {
   const editing = useAtomValue(isEditing);
   const scene = useAtomValue(lighterSceneAtom);
 
-  if (loading || !scene) {
+  const mediaType = useRecoilValue(fos.mediaType);
+
+  if (loading || (!scene && mediaType !== "3d")) {
     return <Loading />;
   }
 

app/packages/looker-3d/package.json

@@ -16,8 +16,9 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@react-three/drei": "^10.6.0",
+        "@react-three/drei": "^10.7.6",
         "@react-three/fiber": "^8.18.0",
+        "chroma-js": "^3.1.2",
         "leva": "^0.9.36",
         "lodash": "^4.17.21",
         "r3f-perf": "^7.2.3",
@@ -28,6 +29,7 @@
     },
     "devDependencies": {
         "@biomejs/biome": "^1.8.3",
+        "@types/chroma-js": "^3.1.1",
         "@types/node": "^20.11.10",
         "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",

app/packages/looker-3d/src/Looker3d.tsx

@@ -4,21 +4,24 @@ import {
   isPointCloud,
   setContainsPointCloud,
 } from "@fiftyone/utilities";
+import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
-import { Fo3dErrorBoundary } from "./ErrorBoundary";
-import { MediaTypePcdComponent } from "./MediaTypePcd";
 import { ActionBar } from "./action-bar";
 import { Container } from "./containers";
+import { Fo3dErrorBoundary } from "./ErrorBoundary";
 import { Leva } from "./fo3d/Leva";
 import { MediaTypeFo3dComponent } from "./fo3d/MediaTypeFo3d";
 import { useHotkey } from "./hooks";
+import { MediaTypePcdComponent } from "./MediaTypePcd";
 import {
+  clearTransformStateSelector,
   currentActionAtom,
   fo3dContainsBackground,
   isColormapModalOpenAtom,
   isGridOnAtom,
   isLevaConfigPanelOnAtom,
+  selectedLabelForAnnotationAtom,
 } from "./state";
 
 /**
@@ -36,6 +39,7 @@ export const Looker3d = () => {
   );
   const isDynamicGroup = useRecoilValue(fos.isDynamicGroup);
   const parentMediaType = useRecoilValue(fos.parentMediaTypeSelector);
+  const mode = useAtomValue(fos.modalMode);
 
   const [isHovering, setIsHovering] = useState(false);
   const timeout = useRef<ReturnType<typeof setTimeout>>(null);

app/packages/looker-3d/src/MediaTypePcd.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from "@fiftyone/components";
 import * as fop from "@fiftyone/plugins";
 import * as fos from "@fiftyone/state";
+import { isPointCloud } from "@fiftyone/utilities";
 import { Typography } from "@mui/material";
 import type { OrbitControlsProps as OrbitControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
@@ -32,7 +33,6 @@ import {
   shadeByAtom,
 } from "./state";
 import { toEulerFromDegreesArray } from "./utils";
-import { isPointCloud } from "@fiftyone/utilities";
 
 type View = "pov" | "top";