Human Annotation sidebar cleanup

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

@@ -16,6 +16,18 @@ import {
   currentSchema,
 } from "./state";
 
+const getLabel = (value) => {
+  if (typeof value === "boolean") {
+    return value ? "True" : "False";
+  }
+
+  if (value === null || value === undefined) {
+    return "None";
+  }
+
+  return value;
+};
+
 const createInput = (name: string) => {
   return {
     type: "string",
@@ -31,12 +43,11 @@ const createRadio = (name: string, choices) => {
   return {
     type: "string",
     view: {
-      name: "RadioView",
+      name: "RadioGroup",
       label: name,
       component: "RadioView",
       choices: choices.map((choice) => ({
-        name: "Choice",
-        label: choice,
+        label: getLabel(choice),
         value: choice,
       })),
     },
@@ -53,7 +64,7 @@ const createTags = (name: string, choices: string[]) => {
       allow_user_input: false,
       choices: choices.map((choice) => ({
         name: "Choice",
-        label: choice,
+        label: getLabel(choice),
         value: choice,
       })),
     },
@@ -70,7 +81,7 @@ const createSelect = (name: string, choices: string[]) => {
       component: "DropdownView",
       choices: choices.map((choice) => ({
         name: "Choice",
-        label: choice,
+        label: getLabel(choice),
         value: choice,
       })),
     },
@@ -120,20 +131,23 @@ const useSchema = () => {
 
 const useHandleChanges = () => {
   return useRecoilCallback(
-    ({ snapshot }) => async (currentField: string, path: string, data) => {
-      const expanded = await snapshot.getPromise(expandPath(currentField));
-      const schema = await snapshot.getPromise(field(`${expanded}.${path}`));
-
-      if (schema?.ftype === FLOAT_FIELD) {
-        return Number.parseFloat(data);
-      }
+    ({ snapshot }) =>
+      async (currentField: string, path: string, data) => {
+        const expanded = await snapshot.getPromise(expandPath(currentField));
+        const schema = await snapshot.getPromise(field(`${expanded}.${path}`));
+
+        if (typeof data === "string") {
+          if (schema?.ftype === FLOAT_FIELD) {
+            return data.length ? Number.parseFloat(data) : null;
+          }
 
-      if (schema?.ftype === INT_FIELD) {
-        return Number.parseInt(data);
-      }
+          if (schema?.ftype === INT_FIELD) {
+            return data.length ? Number.parseInt(data) : null;
+          }
+        }
 
-      return data;
-    },
+        return data;
+      },
     []
   );
 };
@@ -148,7 +162,8 @@ const AnnotationSchema = () => {
 
   useEffect(() => {
     const handler = () => {
-      save(overlay.getLabel());
+      const label = overlay?.getLabel();
+      label && save(label);
     };
 
     lighter.scene?.on(LIGHTER_EVENTS.COMMAND_EXECUTED, handler);
@@ -158,7 +173,7 @@ const AnnotationSchema = () => {
   }, [lighter.scene, overlay, save]);
 
   if (!field) {
-    throw new Error("no overlay");
+    throw new Error("no field");
   }
 
   if (!overlay) {

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

@@ -45,8 +45,9 @@ const Field = () => {
   );
   const type = useAtomValue(currentType);
   const state = useAtomValue(editing);
+  const isCreating = useAtomValue(isNew);
 
-  if (!useAtomValue(isNew)) {
+  if (!isCreating) {
     return null;
   }
 

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

@@ -8,7 +8,6 @@ const createId = () => {
     type: "string",
     view: {
       name: "PrimitiveView",
-      label: name,
       readOnly: true,
       component: "PrimitiveView",
     },

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

@@ -46,7 +46,7 @@ export default function Position() {
 
   const { scene } = useLighter();
 
-  const initial = useEffect(() => {
+  useEffect(() => {
     if (!(overlay instanceof BoundingBoxOverlay)) {
       return;
     }
@@ -105,7 +105,7 @@ export default function Position() {
             },
           },
         }}
-        data={state ?? initial}
+        data={state}
         onChange={(data: Coordinates) => {
           if (!(overlay instanceof BoundingBoxOverlay)) {
             return;

app/packages/core/src/components/Modal/Sidebar/Annotate/Edit/state.ts

@@ -20,7 +20,7 @@ export const editing = atom<PrimitiveAtom<AnnotationLabel> | LabelType | null>(
 const IS_CLASSIFICIATION = new Set([CLASSIFICATION, CLASSIFICATIONS]);
 const IS_DETECTION = new Set([DETECTION, DETECTIONS]);
 const IS_POLYLINE = new Set([POLYLINE, POLYLINES]);
-const IS_LIST = new Set([CLASSIFICATIONS, DETECTIONS]);
+const IS_LIST = new Set([CLASSIFICATIONS, DETECTIONS, POLYLINES]);
 const IS = {
   [CLASSIFICATION]: IS_CLASSIFICIATION,
   [DETECTION]: IS_DETECTION,

app/packages/core/src/components/Modal/Sidebar/Annotate/Edit/useCreate.ts

@@ -1,11 +1,10 @@
-import {
+import type {
   BoundingBoxOptions,
   BoundingBoxOverlay,
   ClassificationOptions,
   ClassificationOverlay,
-  useLighter,
 } from "@fiftyone/lighter";
-import { InteractiveDetectionHandler } from "@fiftyone/lighter/src/interaction/InteractiveDetectionHandler";
+import { InteractiveDetectionHandler, useLighter } from "@fiftyone/lighter";
 import type { AnnotationLabel } from "@fiftyone/state";
 import {
   CLASSIFICATION,
@@ -19,7 +18,7 @@ import type { LabelType } from "./state";
 import { defaultField, editing } from "./state";
 
 const useCreateAnnotationLabel = () => {
-  const { scene, addOverlay, removeOverlay, overlayFactory } = useLighter();
+  const { scene, addOverlay, overlayFactory } = useLighter();
   return useCallback(
     (type: LabelType) => {
       const id = objectId();

app/packages/core/src/components/Modal/Sidebar/Annotate/useAddAnnotationLabel.ts

@@ -6,7 +6,7 @@ import type {
 } from "@fiftyone/lighter";
 import { useLighter } from "@fiftyone/lighter";
 import type { AnnotationLabel } from "@fiftyone/state";
-import { CLASSIFICATION, DETECTION } from "@fiftyone/utilities";
+import { CLASSIFICATION, DETECTION, POLYLINE } from "@fiftyone/utilities";
 import { useCallback } from "react";
 import type { LabelType } from "./Edit/state";
 
@@ -31,6 +31,8 @@ export const useAddAnnotationLabel = () => {
       }
 
       if (type === DETECTION) {
+        const label = data as BoundingBoxOptions["label"];
+        const boundingBox = label?.bounding_box;
         const overlay = overlayFactory.create<
           BoundingBoxOptions,
           BoundingBoxOverlay
@@ -39,20 +41,24 @@ export const useAddAnnotationLabel = () => {
           id: data._id,
           draggable: true,
           selectable: true,
-          label: data,
+          label,
           relativeBounds: {
-            x: data.bounding_box[0],
-            y: data.bounding_box[1],
-            width: data.bounding_box[2],
-            height: data.bounding_box[3],
+            x: boundingBox[0],
+            y: boundingBox[1],
+            width: boundingBox[2],
+            height: boundingBox[3],
           },
         });
 
         addOverlay(overlay);
         return { data, overlay, path: field, type };
       }
 
-      throw new Error("E");
+      if (type === POLYLINE) {
+        throw new Error("todo");
+      }
+
+      throw new Error(`unable to create label of type '${type}'`);
     },
     [addOverlay, overlayFactory]
   );

app/packages/core/src/components/Modal/Sidebar/Annotate/useLoadSchemas.ts

@@ -51,7 +51,7 @@ export default function useLoadSchemas() {
         const paths: string[] = [];
         for (const path in schema) {
           const doc = schema[path].embeddedDocType;
-          if (doc && SUPPORTED_ANNOTATION_TYPES[type ?? ""].has(doc)) {
+          if (doc && SUPPORTED_ANNOTATION_TYPES[type ?? ""]?.has(doc)) {
             paths.push(path);
             types[path] = doc?.split(".").slice(-1)[0];
           }

app/packages/core/src/plugins/SchemaIO/components/AutocompleteView.tsx

@@ -1,5 +1,4 @@
 import { Autocomplete, MenuItem, TextField } from "@mui/material";
-import React from "react";
 import { useKey } from "../hooks";
 import { getComponentProps } from "../utils";
 import ChoiceMenuItemBody from "./ChoiceMenuItemBody";
@@ -9,7 +8,6 @@ export default function AutocompleteView(props) {
   const { onChange, path, schema, data } = props;
   const { view = {} } = schema;
   const { choices = [], readOnly } = view;
-  console.log(props);
 
   const multiple = schema.type === "array";
   const allowDups = view.allow_duplicates !== false;

app/packages/lighter/src/index.ts

@@ -42,6 +42,7 @@ export type {
 // Interaction exports
 export { InteractionManager } from "./interaction/InteractionManager";
 export type { InteractionHandler } from "./interaction/InteractionManager";
+export { InteractiveDetectionHandler } from "./interaction/InteractiveDetectionHandler";
 
 // Selection exports
 export type { Selectable } from "./selection/Selectable";

app/packages/looker/src/index.ts

@@ -7,6 +7,7 @@ export * from "./cache";
 export { freeVideos, getFrameNumber } from "./elements/util";
 export * from "./lookers";
 export type { PointInfo } from "./overlays";
+export type { DetectionLabel } from "./overlays/detection";
 export * from "./selective-rendering-events";
 export type {
   BaseState,