AutoComplete and DropDown operator View improvements

app/packages/core/src/plugins/OperatorIO/utils/index.ts

@@ -1,4 +1,5 @@
 import { types } from "@fiftyone/operators";
+import { DropdownView } from "../../SchemaIO/components";
 
 const inputComponentsByType = {
   Object: "ObjectView",

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Autocomplete, MenuItem, TextField } from "@mui/material";
+import { Autocomplete, MenuItem, Select, TextField } from "@mui/material";
 import FieldWrapper from "./FieldWrapper";
 import autoFocus from "../utils/auto-focus";
 import { getComponentProps } from "../utils";
@@ -12,20 +12,35 @@ export default function AutocompleteView(props) {
   const { choices = [], readOnly } = view;
 
   const multiple = schema.type === "array";
+  const allowDups = view.allow_duplicates !== false;
   const [key, setUserChanged] = useKey(path, schema, data, true);
-
+  const valuesOnly = getValuesOnlySettingFromSchema(schema);
+  const allowUserInput = view.allow_user_input !== false;
+  const allowClearing = view.allow_clearing !== false;
   return (
     <FieldWrapper {...props}>
       <Autocomplete
+        disableClearable={!allowClearing}
         key={key}
         disabled={readOnly}
         autoHighlight
         clearOnBlur={multiple}
         defaultValue={getDefaultValue(data, choices)}
-        freeSolo
+        freeSolo={allowUserInput}
         size="small"
         onChange={(e, choice) => {
-          onChange(path, choice?.value || choice);
+          if (choice === null) {
+            onChange(path, null);
+            setUserChanged();
+            return;
+          }
+          const changedValue = resolveChangedValues(
+            schema,
+            choice,
+            valuesOnly,
+            multiple
+          );
+          onChange(path, changedValue);
           setUserChanged();
         }}
         options={choices.map((choice) => ({
@@ -35,7 +50,6 @@ export default function AutocompleteView(props) {
         }))}
         renderInput={(params) => (
           <TextField
-            autoFocus={autoFocus(props)}
             {...params}
             placeholder={
               multiple
@@ -45,12 +59,22 @@ export default function AutocompleteView(props) {
           />
         )}
         onInputChange={(e) => {
-          if (!multiple && e) {
+          if (!e) return;
+          if (!e.target.value && !multiple) {
+            onChange(path, null);
+            setUserChanged();
+          }
+          if (!multiple && e && allowUserInput) {
             onChange(path, e.target.value);
             setUserChanged();
           }
         }}
-        isOptionEqualToValue={() => false} // allow duplicates
+        isOptionEqualToValue={(option, value) => {
+          if (allowDups) return false;
+          option = resolveChangedValue(schema, option, true);
+          value = resolveChangedValue(schema, value, true);
+          return option == value;
+        }}
         multiple={multiple}
         renderOption={(props, option) => {
           return (
@@ -68,7 +92,53 @@ export default function AutocompleteView(props) {
   );
 }
 
+// TODO: move these functions to a utils file
+
 function getDefaultValue(defaultValue, choices = []) {
   const choice = choices.find(({ value }) => value === defaultValue);
   return choice || defaultValue;
 }
+
+function getValuesOnlySettingFromSchema(schema) {
+  const { view = {} } = schema;
+  const isObject = schema.type === "object";
+  const providedSetting = view.value_only;
+  const isDefined = providedSetting !== undefined && providedSetting !== null;
+  if (isDefined) return providedSetting;
+  if (isObject) return false;
+  return true;
+}
+
+function resolveChangedValues(schema, choice, valuesOnly, multiple) {
+  if (multiple) {
+    if (Array.isArray(choice))
+      return choice.map((c) => resolveChangedValue(schema, c, valuesOnly));
+    return [];
+  } else {
+    return resolveChangedValue(schema, choice, valuesOnly);
+  }
+}
+
+function resolveChangedValue(schema, choice, valuesOnly) {
+  let resolvedValue;
+  const isObjectSchema = schema.type === "object";
+  const isStringSchema = schema.type === "string";
+  const isChoiceObject =
+    typeof choice === "object" &&
+    choice.value !== undefined &&
+    choice.value !== null;
+  const valuesOnlyIsDefault = valuesOnly == undefined || valuesOnly == null;
+  if (!isChoiceObject) {
+    choice = { id: choice, value: choice };
+  }
+  if (isStringSchema && valuesOnlyIsDefault) {
+    valuesOnly = true;
+  }
+  if (isObjectSchema) {
+    resolvedValue = choice;
+  }
+  if (valuesOnly) {
+    resolvedValue = choice.value;
+  }
+  return resolvedValue;
+}

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

@@ -7,6 +7,7 @@ import { ViewPropsType } from "../utils/types";
 import AlertView from "./AlertView";
 import ChoiceMenuItemBody from "./ChoiceMenuItemBody";
 import FieldWrapper from "./FieldWrapper";
+import { AutocompleteView } from ".";
 
 // if we want to support more icons in the future, add them here
 const iconImports: {
@@ -155,6 +156,23 @@ export default function DropdownView(props: ViewPropsType) {
     );
   };
 
+  if (multiple) {
+    return (
+      <AutocompleteView
+        {...props}
+        schema={{
+          ...schema,
+          view: {
+            value_only: true,
+            allow_user_input: false,
+            allow_duplicates: false,
+            ...view,
+          },
+        }}
+      />
+    );
+  }
+
   return (
     <FieldWrapper {...props} hideHeader={compact}>
       <Tooltip title={tooltipTitle}>

app/packages/core/src/plugins/SchemaIO/index.tsx

@@ -20,6 +20,7 @@ export function SchemaIOComponent(props) {
 
   const onIOChange = useCallback(
     (path, value, schema, ancestors) => {
+      value = coerceValue(value, schema);
       const currentState = stateRef.current;
       const updatedState = cloneDeep(currentState);
       set(updatedState, path, cloneDeep(value));
@@ -63,6 +64,17 @@ export function SchemaIOComponent(props) {
   );
 }
 
+function coerceValue(value, schema) {
+  // coerce the value to None if it is an empty string or empty array
+  if (schema.type === "array" && Array.isArray(value) && value.length === 0) {
+    return null;
+  }
+  if (schema.type === "string" && value === "") {
+    return null;
+  }
+  return value;
+}
+
 registerComponent({
   name: "SchemaIOComponent",
   label: "SchemaIOComponent",

fiftyone/operators/types.py

@@ -1594,6 +1594,8 @@ class AutocompleteView(Choices):
     Args:
         choices (None): a list of :class:`Choice` instances
         read_only (False): whether the view is read-only
+        allow_user_input (True): when True the user can input a value that is not in the choices
+        allow_duplicates (True): when True the user can select the same choice multiple times
     """
 
     def __init__(self, **kwargs):
@@ -1924,7 +1926,7 @@ def clone(self):
         clone.tooltips = [tooltip.clone() for tooltip in self.tooltips]
         clone._tooltip_map = {
             (tooltip.row, tooltip.column): tooltip
-            for tooltip in clone.tooltips
+            for tooltip in clone.tooltips  # pylint: disable=no-member
         }
         return clone