improve default value control for OperatorIO

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

@@ -4,24 +4,30 @@ import FieldWrapper from "./FieldWrapper";
 import autoFocus from "../utils/auto-focus";
 import { getComponentProps } from "../utils";
 import ChoiceMenuItemBody from "./ChoiceMenuItemBody";
+import { useKey } from "../hooks";
 
 export default function AutocompleteView(props) {
   const { onChange, path, schema, data } = props;
   const { view = {} } = schema;
   const { choices = [], readOnly } = view;
 
   const multiple = schema.type === "array";
+  const [key, setUserChanged] = useKey(path, schema, data, true);
 
   return (
     <FieldWrapper {...props}>
       <Autocomplete
+        key={key}
         disabled={readOnly}
         autoHighlight
         clearOnBlur={multiple}
-        defaultValue={getDefaultValue(data ?? schema?.default, choices)}
+        defaultValue={getDefaultValue(data, choices)}
         freeSolo
         size="small"
-        onChange={(e, choice) => onChange(path, choice?.value || choice)}
+        onChange={(e, choice) => {
+          onChange(path, choice?.value || choice);
+          setUserChanged();
+        }}
         options={choices.map((choice) => ({
           id: choice.value,
           label: choice.label || choice.value,

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

@@ -3,18 +3,24 @@ import React from "react";
 import HeaderView from "./HeaderView";
 import autoFocus from "../utils/auto-focus";
 import { getComponentProps } from "../utils";
+import { useKey } from "../hooks";
 
 export default function CheckboxView(props) {
   const { onChange, path, schema, data } = props;
+  const [key, setUserChanged] = useKey(path, schema, data, true);
 
   return (
     <FormControlLabel
       control={
         <Checkbox
+          key={key}
           disabled={schema.view?.readOnly}
           autoFocus={autoFocus(props)}
-          defaultChecked={data === true || schema.default === true}
-          onChange={(e, value) => onChange(path, value)}
+          defaultChecked={data === true}
+          onChange={(e, value) => {
+            onChange(path, value);
+            setUserChanged();
+          }}
           {...getComponentProps(props, "checkbox")}
         />
       }

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

@@ -4,20 +4,23 @@ import React from "react";
 import HeaderView from "./HeaderView";
 import autoFocus from "../utils/auto-focus";
 import { getComponentProps } from "../utils";
+import { useKey } from "../hooks";
 
 export default function CodeView(props) {
   const { mode } = useColorScheme();
   const { onChange, path, schema, data } = props;
-  const { default: defaultValue, view = {} } = schema;
+  const { view = {} } = schema;
   const { language, readOnly } = view;
-  const src = data ?? defaultValue;
+  const src = data;
   let height = view.height ?? 250;
   if (view.height === "auto") {
     const lineHeight = 19;
     const numLines = src.split("\n").length;
     height = lineHeight * numLines;
   }
 
+  const [key, setUserChanged] = useKey(path, schema, data, true);
+
   return (
     <Box
       sx={{
@@ -33,11 +36,15 @@ export default function CodeView(props) {
     >
       <HeaderView {...props} nested />
       <Editor
+        key={key}
         height={height}
         theme={mode === "dark" ? "vs-dark" : "light"}
-        value={readOnly ? data : undefined}
+        value={data}
         defaultValue={src}
-        onChange={(value) => onChange(path, value)}
+        onChange={(value) => {
+          onChange(path, value);
+          setUserChanged();
+        }}
         language={language}
         options={{ readOnly }}
         onMount={(editor) => {

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

@@ -1,25 +1,36 @@
 import { Box, Popper, Stack, TextField } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import * as ColorPickers from "react-color";
 import { colorPicker } from "./ColorView.module.css";
 import HeaderView from "./HeaderView";
 import autoFocus from "../utils/auto-focus";
 import { getComponentProps } from "../utils";
+import { useKey } from "../hooks";
 
 export default function ColorView(props) {
   const { onChange, path, schema, data } = props;
   const { view = {} } = schema;
   const { compact, variant, readOnly } = view;
   const [open, setOpen] = useState(false);
-  const [color, setColor] = useState(data ?? defaultColor);
+  const [color, setColor] = useState(data ?? fallbackColor);
   const [anchor, setAnchor] = React.useState<null | HTMLElement>(null);
   const Component = ColorPickers[variant] || ColorPickers.ChromePicker;
 
   const { bgColor, hexColor } = formatColor(color);
+  const [key, setUserChanged] = useKey(path, schema, data, true);
+
+  const handleChange = useCallback(
+    (color) => {
+      setColor(color);
+      onChange(path, color);
+      setUserChanged();
+    },
+    [onChange, path, setUserChanged]
+  );
 
   useEffect(() => {
-    onChange(path, color);
-  }, [color]);
+    setColor(data ?? fallbackColor);
+  }, [key]);
 
   return (
     <Box {...getComponentProps(props, "container")}>
@@ -47,11 +58,12 @@ export default function ColorView(props) {
         />
         {!compact && (
           <TextField
+            key={key}
             autoFocus={autoFocus(props)}
             size="small"
             value={hexColor}
             onChange={(e) => {
-              setColor({ hex: e.target.value });
+              handleChange({ hex: e.target.value });
             }}
             disabled={readOnly}
             {...getComponentProps(props, "field")}
@@ -62,13 +74,12 @@ export default function ColorView(props) {
         open={open}
         anchorEl={anchor}
         placement="bottom-start"
+        sx={{ zIndex: (theme) => theme.zIndex.modal + 1 }}
         {...getComponentProps(props, "popper")}
       >
         <Component
           color={color.hsl || color.hex}
-          onChange={(color) => {
-            setColor(color);
-          }}
+          onChange={handleChange}
           className={colorPicker}
           {...getComponentProps(props, "picker")}
         />
@@ -77,19 +88,17 @@ export default function ColorView(props) {
   );
 }
 
-function formatColor(color) {
+function formatColor(color: ColorType) {
   const { hsl = {}, hex } = color;
   const { h, s, l, a } = hsl;
-  const bgColor = color.hsl
-    ? `hsla(${h},${s * 100}%,${l * 100}%,${a})`
-    : color.hex;
+  const bgColor = hsl ? `hsla(${h},${s * 100}%,${l * 100}%,${a})` : color.hex;
   const hexColor = (hex.startsWith("#") ? hex : `#${hex}`).toLowerCase();
   return { ...color, bgColor, hexColor };
 }
 
-const defaultColor: defaultColorType = { hex: "#FF6D05" };
+const fallbackColor: ColorType = { hex: "#FF6D05" };
 
-type defaultColorType = {
+type ColorType = {
   hex: string;
   hsl?: {
     h: number;

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

@@ -5,19 +5,21 @@ import autoFocus from "../utils/auto-focus";
 import AlertView from "./AlertView";
 import FieldWrapper from "./FieldWrapper";
 import ChoiceMenuItemBody from "./ChoiceMenuItemBody";
+import { useKey } from "../hooks";
 
 const MULTI_SELECT_TYPES = ["string", "array"];
 
 export default function DropdownView(props) {
   const { onChange, schema, path, data } = props;
-  const { default: defaultValue, view = {}, type } = schema;
+  const { view = {}, type } = schema;
   const {
     choices,
     multiple: multiSelect,
     placeholder = "",
     separator = ",",
     readOnly,
   } = view;
+  const [key, setUserChanged] = useKey(path, schema, data, true);
 
   if (multiSelect && !MULTI_SELECT_TYPES.includes(type))
     return (
@@ -37,7 +39,7 @@ export default function DropdownView(props) {
   const isArrayType = type === "array";
   const multiple = multiSelect || isArrayType;
   const fallbackDefaultValue = multiple ? [] : "";
-  const rawDefaultValue = data ?? defaultValue ?? fallbackDefaultValue;
+  const rawDefaultValue = data ?? fallbackDefaultValue;
   const computedDefaultValue =
     multiple && !Array.isArray(rawDefaultValue)
       ? rawDefaultValue.toString().split(separator)
@@ -51,6 +53,7 @@ export default function DropdownView(props) {
   return (
     <FieldWrapper {...props}>
       <Select
+        key={key}
         disabled={readOnly}
         autoFocus={autoFocus(props)}
         defaultValue={computedDefaultValue}
@@ -73,6 +76,7 @@ export default function DropdownView(props) {
               ? value.join(separator)
               : value;
           onChange(path, computedValue);
+          setUserChanged();
         }}
         multiple={multiple}
         {...getComponentProps(props, "select")}

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

@@ -1,21 +1,39 @@
 import { PluginComponentType, useActivePlugins } from "@fiftyone/plugins";
+import { isPrimitiveType } from "@fiftyone/utilities";
+import { get } from "lodash";
 import React, { useEffect } from "react";
 import { getComponent, getErrorsForView } from "../utils";
-import { isNullish } from "@fiftyone/utilities";
+import { isPathUserChanged } from "../hooks";
 
 export default function DynamicIO(props) {
-  const { data, schema, onChange, path } = props;
+  const { data, schema, onChange, path, parentSchema, relativePath } = props;
   const customComponents = useCustomComponents();
   const Component = getComponent(schema, customComponents);
+  const computedSchema = schemaWithInheritedDefault(
+    schema,
+    parentSchema,
+    relativePath
+  );
+  const { default: defaultValue, type } = computedSchema;
 
   // todo: need to improve initializing default value in state
   useEffect(() => {
-    if (!isNullish(data)) return;
-    if (schema.default) onChange(path, schema.default);
-    else if (schema.type === "boolean") onChange(path, false);
-  }, []);
+    if (
+      isPrimitiveType(type) &&
+      data !== defaultValue &&
+      !isPathUserChanged(path)
+    ) {
+      onChange(path, defaultValue);
+    }
+  }, [defaultValue]);
 
-  return <Component {...props} validationErrors={getErrorsForView(props)} />;
+  return (
+    <Component
+      {...props}
+      schema={computedSchema}
+      validationErrors={getErrorsForView(props)}
+    />
+  );
 }
 
 function useCustomComponents() {
@@ -27,3 +45,10 @@ function useCustomComponents() {
     return componentsByName;
   }, {});
 }
+
+function schemaWithInheritedDefault(schema, parentSchema, path) {
+  const providedDefault = get(schema, "default");
+  const inheritedDefault = get(parentSchema, `default.${path}`);
+  const computedDefault = providedDefault ?? inheritedDefault;
+  return { ...schema, default: computedDefault };
+}

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

@@ -29,7 +29,8 @@ export default function Header(props: HeaderProps) {
     !label &&
     !description &&
     (!caption || omitCaption) &&
-    (errors.length === 0 || omitErrors)
+    (errors.length === 0 || omitErrors) &&
+    !Actions
   ) {
     return null;
   }

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

@@ -5,7 +5,6 @@ import { getComponentProps } from "../utils";
 
 export default function ImageView(props) {
   const { schema, data } = props;
-  const { view = {} } = schema;
   const imageURI = data ?? schema?.default;
 
   return (

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

@@ -8,7 +8,7 @@ import { HeaderView } from ".";
 import { getComponentProps } from "../utils";
 
 export default function JSONView(props) {
-  const { data, schema } = props;
+  const { data } = props;
   const { mode } = useColorScheme();
   const isDarkMode = mode === "dark";
 
@@ -17,7 +17,7 @@ export default function JSONView(props) {
       <HeaderView {...props} nested />
       <ReactJSONContainer {...getComponentProps(props, "jsonContainer")}>
         <ReactJSON
-          src={data ?? schema?.default}
+          src={data}
           theme={`ashes${!isDarkMode ? ":inverted" : ""}`}
           style={{
             padding: "1rem",