From 741ace3bf1ffdacf5a5a33a153bf28bc85ec8de4 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Mon, 30 Sep 2024 15:08:16 -0400
Subject: [PATCH 01/39] add spinner variant

---
 .../src/components/Loading/LoadingSpinner.tsx | 29 +++++++++++++++++++
 .../SchemaIO/components/LoadingView.tsx       |  9 ++++--
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 app/packages/components/src/components/Loading/LoadingSpinner.tsx

diff --git a/app/packages/components/src/components/Loading/LoadingSpinner.tsx b/app/packages/components/src/components/Loading/LoadingSpinner.tsx
new file mode 100644
index 0000000000..b14e99daf3
--- /dev/null
+++ b/app/packages/components/src/components/Loading/LoadingSpinner.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+import { CircularProgress } from "@mui/material";
+
+const LoadingSpinner = ({
+  color = "base",
+  size = "medium",
+}: {
+  color?: string;
+  size?: string;
+}) => {
+  const COLORS: { [key: string]: string } = {
+    base: "#FFC59B",
+    primary: "primary",
+    secondary: "secondary",
+    error: "error",
+    warning: "warning",
+    info: "info",
+    success: "success",
+  };
+  const SIZES: { [key: string]: string } = {
+    small: "1rem",
+    medium: "2rem",
+    large: "3rem",
+  };
+  return <CircularProgress sx={{ color: COLORS[color] }} size={SIZES[size]} />;
+};
+
+export default LoadingSpinner;
diff --git a/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx b/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx
index 719c6f3ec6..bf5bf4090e 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx
@@ -1,4 +1,5 @@
 import LoadingDots from "@fiftyone/components/src/components/Loading/LoadingDots";
+import LoadingSpinner from "@fiftyone/components/src/components/Loading/LoadingSpinner";
 import { Box } from "@mui/material";
 import React from "react";
 import { getComponentProps } from "../utils";
@@ -6,11 +7,15 @@ import { getComponentProps } from "../utils";
 export default function LoadingView(props) {
   const { schema } = props;
   const { view = {} } = schema;
-  const { label = "Loading" } = view;
+  const { text = "Loading", variant, color, size } = view;
 
   return (
     <Box {...getComponentProps(props, "container")}>
-      <LoadingDots text={label} {...getComponentProps(props, "loading")} />
+      {variant === "spinner" ? (
+        <LoadingSpinner color={color} size={size} />
+      ) : (
+        <LoadingDots text={text} {...getComponentProps(props, "loading")} />
+      )}
     </Box>
   );
 }

From 5d456151e94a6bf5d50432339b61a17dcc42260d Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhenwang9@gmail.com>
Date: Thu, 3 Oct 2024 13:38:13 +0200
Subject: [PATCH 02/39] allow to only show icon in dropdownview

---
 .../core/src/plugins/SchemaIO/components/DropdownView.tsx    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
index 74c3bb09e5..b51aa27776 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
@@ -1,3 +1,4 @@
+import SettingsIcon from "@mui/icons-material/Settings";
 import { MenuItem, Select } from "@mui/material";
 import React, { useState } from "react";
 import { useKey } from "../hooks";
@@ -24,6 +25,7 @@ export default function DropdownView(props: ViewPropsType) {
     description,
     color,
     variant,
+    useIconOnly = false,
   } = view;
   const [key, setUserChanged] = useKey(path, schema, data, true);
   const [selected, setSelected] = useState(false);
@@ -82,6 +84,9 @@ export default function DropdownView(props: ViewPropsType) {
         displayEmpty
         title={compact ? description : undefined}
         renderValue={(value) => {
+          if (useIconOnly) {
+            return <SettingsIcon />;
+          }
           const unselected = value?.length === 0;
           setSelected(!unselected);
           if (unselected) {

From 8a36c84f0856244743ec656ba27ac4b1936fbc6c Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhenwang9@gmail.com>
Date: Mon, 7 Oct 2024 14:24:51 -0500
Subject: [PATCH 03/39] update type and minor tweak

---
 .../core/src/plugins/SchemaIO/components/DropdownView.tsx | 8 ++++++--
 fiftyone/operators/types.py                               | 3 +++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
index b51aa27776..40989ef2cb 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
@@ -1,3 +1,4 @@
+import MoreVertIcon from "@mui/icons-material/MoreVert";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { MenuItem, Select } from "@mui/material";
 import React, { useState } from "react";
@@ -25,7 +26,7 @@ export default function DropdownView(props: ViewPropsType) {
     description,
     color,
     variant,
-    useIconOnly = false,
+    icon,
   } = view;
   const [key, setUserChanged] = useKey(path, schema, data, true);
   const [selected, setSelected] = useState(false);
@@ -84,9 +85,12 @@ export default function DropdownView(props: ViewPropsType) {
         displayEmpty
         title={compact ? description : undefined}
         renderValue={(value) => {
-          if (useIconOnly) {
+          if (icon === "SettingsIcon") {
             return <SettingsIcon />;
           }
+          if (icon === "MoreVertIcon") {
+            return <MoreVertIcon />;
+          }
           const unselected = value?.length === 0;
           setSelected(!unselected);
           if (unselected) {
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index a22bd01230..53fe20c7e8 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -406,6 +406,9 @@ def menu(self, name, **kwargs):
             ``"top-center"``, ``"top-right"``, ``"bottom-left"``, `"bottom-center"``, or
             ``"bottom-right"``. Overlay is useful when you want to display a floating menu on top of
             another content (for example, menu for full-panel-width plot)
+            icon (None): when set, the icon will be displayed as the menu button instead of the label.
+            Can be "SettingsIcon", "MoreVertIcon".
+
         Returns:
             a :class:`Object`
         """

From 5bea4b708c71d06e121185aabda601531adefdf2 Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhenwang9@gmail.com>
Date: Mon, 7 Oct 2024 16:46:45 -0500
Subject: [PATCH 04/39] style tweak and clean up

---
 .../SchemaIO/components/DropdownView.tsx      | 101 ++++++++++++++----
 fiftyone/operators/types.py                   |   2 +
 2 files changed, 85 insertions(+), 18 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
index 40989ef2cb..a14068f17d 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
@@ -1,7 +1,5 @@
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import SettingsIcon from "@mui/icons-material/Settings";
-import { MenuItem, Select } from "@mui/material";
-import React, { useState } from "react";
+import { IconButton, MenuItem, Select } from "@mui/material";
+import React, { useEffect, useMemo, useState } from "react";
 import { useKey } from "../hooks";
 import { getComponentProps, getFieldSx } from "../utils";
 import autoFocus from "../utils/auto-focus";
@@ -10,6 +8,14 @@ import AlertView from "./AlertView";
 import ChoiceMenuItemBody from "./ChoiceMenuItemBody";
 import FieldWrapper from "./FieldWrapper";
 
+// if we want to support more icons in the future, add them here
+const iconImports: {
+  [key: string]: () => Promise<{ default: React.ComponentType<any> }>;
+} = {
+  MoreVertIcon: () => import("@mui/icons-material/MoreVert"),
+  SettingsIcon: () => import("@mui/icons-material/Settings"),
+};
+
 const MULTI_SELECT_TYPES = ["string", "array"];
 
 export default function DropdownView(props: ViewPropsType) {
@@ -28,6 +34,8 @@ export default function DropdownView(props: ViewPropsType) {
     variant,
     icon,
   } = view;
+  const [IconComponent, setIconComponent] =
+    useState<React.ComponentType<any> | null>(null);
   const [key, setUserChanged] = useKey(path, schema, data, true);
   const [selected, setSelected] = useState(false);
 
@@ -55,24 +63,84 @@ export default function DropdownView(props: ViewPropsType) {
       ? rawDefaultValue.toString().split(separator)
       : rawDefaultValue;
 
-  const choiceLabels = choices.reduce((labels, choice) => {
-    labels[choice.value] = choice.label;
-    return labels;
-  }, {});
+  const choiceLabels = useMemo(() => {
+    return choices.reduce((labels, choice) => {
+      labels[choice.value] = choice.label;
+      return labels;
+    }, {});
+  }, [choices]);
+
+  const getIconOnlyStyles = () => ({
+    "&.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary": {
+      backgroundColor: "transparent !important",
+      borderRadius: "0 !important",
+      border: "none !important",
+      boxShadow: "none !important",
+      "&:hover, &:focus": {
+        backgroundColor: "transparent !important",
+        boxShadow: "none !important",
+      },
+    },
+    "& .MuiSelect-select": {
+      padding: 0,
+      background: "transparent",
+      "&:focus": {
+        background: "transparent",
+      },
+    },
+    "& .MuiInputBase-root": {
+      background: "transparent",
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none",
+    },
+    "& .MuiSelect-icon": {
+      display: "none",
+    },
+  });
+
+  const getDefaultStyles = (selected: boolean) => ({
+    ".MuiSelect-select": {
+      padding: "0.45rem 2rem 0.45rem 1rem",
+      opacity: selected ? 1 : 0.5,
+    },
+  });
+
+  const getDropdownStyles = (icon: string | undefined, selected: boolean) => {
+    return icon ? getIconOnlyStyles() : getDefaultStyles(selected);
+  };
+
+  // Now, condense the code like this:
   const { MenuProps = {}, ...selectProps } = getComponentProps(
     props,
     "select",
     {
       sx: {
-        ".MuiSelect-select": {
-          padding: "0.45rem 2rem 0.45rem 1rem",
-          opacity: selected ? 1 : 0.5,
-        },
+        ...getDropdownStyles(icon, selected),
         ...getFieldSx({ color, variant }),
       },
     }
   );
 
+  // dynamically import the icon component
+  useEffect(() => {
+    if (icon && iconImports[icon]) {
+      iconImports[icon]().then((module) => {
+        setIconComponent(() => module.default);
+      });
+    }
+  }, [icon]);
+
+  const renderIcon = () => {
+    if (!IconComponent) return null;
+
+    return (
+      <IconButton aria-label={icon}>
+        <IconComponent />
+      </IconButton>
+    );
+  };
+
   return (
     <FieldWrapper {...props} hideHeader={compact}>
       <Select
@@ -85,11 +153,8 @@ export default function DropdownView(props: ViewPropsType) {
         displayEmpty
         title={compact ? description : undefined}
         renderValue={(value) => {
-          if (icon === "SettingsIcon") {
-            return <SettingsIcon />;
-          }
-          if (icon === "MoreVertIcon") {
-            return <MoreVertIcon />;
+          if (icon) {
+            return renderIcon();
           }
           const unselected = value?.length === 0;
           setSelected(!unselected);
@@ -125,7 +190,7 @@ export default function DropdownView(props: ViewPropsType) {
       >
         {choices.map(({ value, ...choice }) => (
           <MenuItem
-            key="value"
+            key={value}
             value={value}
             {...getComponentProps(props, "optionContainer")}
           >
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index 53fe20c7e8..8a630191f2 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -2364,6 +2364,8 @@ class MenuView(GridView):
         ``"top-center"``, ``"top-right"``, ``"bottom-left"``, `"bottom-center"``, or
         ``"bottom-right"``. Overlay is useful when you want to display a floating menu on top of
         another content (for example, menu for full-panel-width plot)
+        icon (None): when set, the icon button will be displayed as the menu trigger,
+        instead of the selected value. Can be "SettingsIcon" or "MoreVertIcon"
     Returns:
         a :class:`Object`
     """

From 71bd61ad31a6b9775726295eb8e7cb812a84cdc4 Mon Sep 17 00:00:00 2001
From: manivoxel51 <mani@voxel51.com>
Date: Thu, 3 Oct 2024 09:24:56 -0700
Subject: [PATCH 05/39] improved sliderview

---
 .../SchemaIO/components/SliderView.tsx        | 117 ++++++++++++++++--
 1 file changed, 108 insertions(+), 9 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
index 562b9c17f4..4a3c5d7e1a 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -1,20 +1,57 @@
-import React, { useEffect, useRef } from "react";
-import { Slider } from "@mui/material";
+import React, { useEffect, useRef, useState } from "react";
+import { Grid, Slider, TextField } from "@mui/material";
 import FieldWrapper from "./FieldWrapper";
 import { autoFocus, getComponentProps } from "../utils";
 import { useKey } from "../hooks";
 import { isNumber } from "lodash";
 
+type valueFormat = "normal" | "percentage";
+type LabelPosition = "top" | "left";
+
+function valueLabelFormat(
+  value: number,
+  min: number,
+  max: number,
+  valueFormat: valueFormat
+) {
+  const unit = valueFormat === "normal" ? "" : "%";
+  const finalValue = Math.round(((value - min) / (max - min)) * 100);
+  return `${finalValue}${unit ?? ""}`;
+}
+
 export default function SliderView(props) {
   const { data, onChange, path, schema } = props;
+
   const sliderRef = useRef<HTMLInputElement>(null);
   const focus = autoFocus(props);
-  const { type, min, max, multipleOf } = schema;
+
+  // TODO: keeping min and max read from schema for backward compatibility - check with team
+  const { type, min: schemaMin, max: schemaMax, multipleOf, view } = schema;
+  const {
+    min: viewMin,
+    max: viewMax,
+    defaultValue = 0,
+    valueFormat = "normal",
+    variant = null,
+    valueLabelDisplay = "on",
+    labelPosition = "top",
+  } = view;
+
+  const [min, max] = [
+    isNumber(viewMin) ? viewMin : schemaMin,
+    isNumber(viewMax) ? viewMax : schemaMax,
+  ];
+  console.log("view", min, max);
+
   const computedMin = isNumber(min) ? min : 0;
   const computedMax = isNumber(max) ? max : 100;
-  const computedMultipleOf = isNumber(multipleOf)
-    ? multipleOf
-    : (computedMax - computedMin) / 100;
+
+  const computedMultipleOf =
+    valueFormat === "percentage"
+      ? 1
+      : isNumber(multipleOf)
+      ? multipleOf
+      : (computedMax - computedMin) / 100;
 
   useEffect(() => {
     if (sliderRef.current && focus) {
@@ -22,8 +59,13 @@ export default function SliderView(props) {
     }
   }, [sliderRef, focus]);
 
+  const hasMin = isNumber(min);
   const [key, setUserChanged] = useKey(path, schema, data, true);
+  console.log("datadata", data);
+  const [minText, setMinText] = useState(data?.[0] || min);
+  const [maxText, setMaxText] = useState(data?.[1] || max);
 
+  console.log("data", defaultValue);
   return (
     <FieldWrapper {...props}>
       <Slider
@@ -32,15 +74,72 @@ export default function SliderView(props) {
         step={computedMultipleOf}
         key={key}
         disabled={schema.view?.readOnly}
-        valueLabelDisplay="auto"
-        defaultValue={data}
-        onChange={(e, value: string) => {
+        valueLabelDisplay={valueLabelDisplay}
+        value={data || defaultValue}
+        valueLabelFormat={(value: number) =>
+          valueLabelFormat(value, computedMin, computedMax, valueFormat)
+        }
+        getAriaValueText={(value: number) =>
+          valueLabelFormat(value, computedMin, computedMax, valueFormat)
+        }
+        onChangeCommitted={(_, value: string) => {
           onChange(path, type === "number" ? parseFloat(value) : value, schema);
           setUserChanged();
+          hasMin && setMinText(value[0]);
+          setMaxText(value[1]);
         }}
         ref={sliderRef}
         {...getComponentProps(props, "slider")}
       />
+      {variant === "withInputs" && (
+        <Grid container justifyContent="space-between">
+          {hasMin && (
+            <Grid item>
+              <TextField
+                size="small"
+                variant="outlined"
+                value={minText}
+                onChange={(e) => {
+                  setMinText(e.target.value);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    onChange(
+                      path,
+                      [
+                        parseFloat(e.target.value),
+                        parseFloat(data?.[1] || max),
+                      ],
+                      schema
+                    );
+                  }
+                }}
+                sx={{ width: "70px" }}
+              />
+            </Grid>
+          )}
+          <Grid item>
+            <TextField
+              size="small"
+              variant="outlined"
+              value={maxText}
+              onChange={(e) => {
+                setMaxText(e.target.value);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  onChange(
+                    path,
+                    [parseFloat(data?.[0] || min), parseFloat(e.target.value)],
+                    schema
+                  );
+                }
+              }}
+              sx={{ width: "70px" }}
+            />
+          </Grid>
+        </Grid>
+      )}
     </FieldWrapper>
   );
 }

From ab131b30c8eefe7c78bc32f10a1fe21623a54189 Mon Sep 17 00:00:00 2001
From: manivoxel51 <mani@voxel51.com>
Date: Fri, 4 Oct 2024 16:12:41 -0700
Subject: [PATCH 06/39] progress

---
 .../plugins/SchemaIO/components/Header.tsx    |   8 +-
 .../SchemaIO/components/SliderView.tsx        | 398 ++++++++++++++----
 2 files changed, 317 insertions(+), 89 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/Header.tsx b/app/packages/core/src/plugins/SchemaIO/components/Header.tsx
index 0ad7c003ad..d850cfaaf7 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/Header.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/Header.tsx
@@ -65,9 +65,11 @@ export default function Header(props: HeaderProps) {
             sx={{ display: "flex", alignItems: "center" }}
             {...getComponentProps(viewProps, "label")}
           >
-            <Markdown {...getComponentProps(viewProps, "label.markdown")}>
-              {label}
-            </Markdown>
+            {label && (
+              <Markdown {...getComponentProps(viewProps, "label.markdown")}>
+                {label}
+              </Markdown>
+            )}
             {descriptionView === "tooltip" && (
               <HelpTooltip
                 title={description}
diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
index 4a3c5d7e1a..fe87bfcb3b 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -1,41 +1,80 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Grid, Slider, TextField } from "@mui/material";
+import {
+  Box,
+  FormControl,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Select,
+  Slider,
+  TextField,
+  Typography,
+} from "@mui/material";
 import FieldWrapper from "./FieldWrapper";
 import { autoFocus, getComponentProps } from "../utils";
 import { useKey } from "../hooks";
 import { isNumber } from "lodash";
 
-type valueFormat = "normal" | "percentage";
+type ValueFormat = "float" | "percentage";
 type LabelPosition = "top" | "left";
 
 function valueLabelFormat(
   value: number,
   min: number,
   max: number,
-  valueFormat: valueFormat
+  valueFormat: ValueFormat,
+  valuePrecision = 0
 ) {
-  const unit = valueFormat === "normal" ? "" : "%";
-  const finalValue = Math.round(((value - min) / (max - min)) * 100);
-  return `${finalValue}${unit ?? ""}`;
+  if (valueFormat === "percentage") {
+    const finalValue = (((value - min) / (max - min)) * 100).toFixed();
+    return `${finalValue}${"%"}`;
+  }
+  return `${value.toFixed(valuePrecision)}`;
 }
 
+const formatValue = (
+  value: number,
+  min: number,
+  max: number,
+  valueFormat: ValueFormat,
+  valuePrecision = 0
+): string => {
+  if (valueFormat === "percentage") {
+    return (((value - min) / (max - min)) * 100).toFixed();
+  } else {
+    return value.toFixed(valuePrecision);
+  }
+};
+
 export default function SliderView(props) {
   const { data, onChange, path, schema } = props;
 
   const sliderRef = useRef<HTMLInputElement>(null);
   const focus = autoFocus(props);
 
-  // TODO: keeping min and max read from schema for backward compatibility - check with team
-  const { type, min: schemaMin, max: schemaMax, multipleOf, view } = schema;
+  const {
+    type,
+    min: schemaMin,
+    max: schemaMax,
+    multipleOf: schemaMultipleOf,
+    view,
+  } = schema;
   const {
     min: viewMin,
     max: viewMax,
     defaultValue = 0,
-    valueFormat = "normal",
+    valueFormat = "percentage",
+    valuePrecision = 2,
     variant = null,
     valueLabelDisplay = "on",
-    labelPosition = "top",
+    labelPosition = "left",
+    label = "Threshold",
+    viewMultipleOf = null,
   } = view;
+  const [title, _] = useState(label);
+  console.log("label", title);
+
+  const multipleOf = viewMultipleOf || schemaMultipleOf;
 
   const [min, max] = [
     isNumber(viewMin) ? viewMin : schemaMin,
@@ -46,12 +85,10 @@ export default function SliderView(props) {
   const computedMin = isNumber(min) ? min : 0;
   const computedMax = isNumber(max) ? max : 100;
 
-  const computedMultipleOf =
-    valueFormat === "percentage"
-      ? 1
-      : isNumber(multipleOf)
-      ? multipleOf
-      : (computedMax - computedMin) / 100;
+  const computedMultipleOf = isNumber(multipleOf)
+    ? multipleOf
+    : (computedMax - computedMin) / 100;
+  console.log("computedMultipleOf", computedMultipleOf);
 
   useEffect(() => {
     if (sliderRef.current && focus) {
@@ -59,87 +96,276 @@ export default function SliderView(props) {
     }
   }, [sliderRef, focus]);
 
-  const hasMin = isNumber(min);
   const [key, setUserChanged] = useKey(path, schema, data, true);
-  console.log("datadata", data);
-  const [minText, setMinText] = useState(data?.[0] || min);
-  const [maxText, setMaxText] = useState(data?.[1] || max);
+  const [unit, setUnit] = useState<string>(valueFormat);
+
+  console.log("data", data);
+
+  const [minText, setMinText] = useState(
+    formatValue(data?.[0] || min, min, max, unit as ValueFormat, valuePrecision)
+  );
+  const [maxText, setMaxText] = useState(
+    formatValue(data?.[1] || max, min, max, unit as ValueFormat, valuePrecision)
+  );
+
+  if (labelPosition === "left") {
+    delete props?.schema?.view?.label;
+  }
+
+  console.log("props", props);
 
-  console.log("data", defaultValue);
   return (
-    <FieldWrapper {...props}>
-      <Slider
-        min={computedMin}
-        max={computedMax}
-        step={computedMultipleOf}
-        key={key}
-        disabled={schema.view?.readOnly}
-        valueLabelDisplay={valueLabelDisplay}
-        value={data || defaultValue}
-        valueLabelFormat={(value: number) =>
-          valueLabelFormat(value, computedMin, computedMax, valueFormat)
-        }
-        getAriaValueText={(value: number) =>
-          valueLabelFormat(value, computedMin, computedMax, valueFormat)
-        }
-        onChangeCommitted={(_, value: string) => {
-          onChange(path, type === "number" ? parseFloat(value) : value, schema);
-          setUserChanged();
-          hasMin && setMinText(value[0]);
-          setMaxText(value[1]);
-        }}
-        ref={sliderRef}
-        {...getComponentProps(props, "slider")}
-      />
-      {variant === "withInputs" && (
-        <Grid container justifyContent="space-between">
-          {hasMin && (
-            <Grid item>
-              <TextField
-                size="small"
-                variant="outlined"
-                value={minText}
-                onChange={(e) => {
-                  setMinText(e.target.value);
-                }}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    onChange(
-                      path,
-                      [
-                        parseFloat(e.target.value),
-                        parseFloat(data?.[1] || max),
-                      ],
-                      schema
-                    );
-                  }
+    <Box padding={2} py={4}>
+      <FieldWrapper {...props}>
+        <Grid container spacing={2} alignItems="center">
+          {labelPosition === "left" && title && (
+            <Grid item sx={{ width: "100px", overflow: "hidden" }}>
+              <Typography
+                noWrap
+                sx={{
+                  textOverflow: "ellipsis",
+                  overflow: "hidden",
+                  whiteSpace: "nowrap",
+                  width: "100%",
                 }}
-                sx={{ width: "70px" }}
-              />
+              >
+                {title}
+              </Typography>
             </Grid>
           )}
-          <Grid item>
-            <TextField
-              size="small"
-              variant="outlined"
-              value={maxText}
-              onChange={(e) => {
-                setMaxText(e.target.value);
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  onChange(
-                    path,
-                    [parseFloat(data?.[0] || min), parseFloat(e.target.value)],
-                    schema
+
+          <Grid item xs>
+            <Slider
+              min={computedMin}
+              max={computedMax}
+              step={computedMultipleOf}
+              key={key}
+              disabled={schema.view?.readOnly}
+              valueLabelDisplay={valueLabelDisplay}
+              value={data || defaultValue}
+              valueLabelFormat={(value: number) =>
+                valueLabelFormat(
+                  value,
+                  min,
+                  max,
+                  unit as ValueFormat,
+                  valuePrecision
+                )
+              }
+              getAriaValueText={(value: number) =>
+                valueLabelFormat(
+                  value,
+                  min,
+                  max,
+                  unit as ValueFormat,
+                  valuePrecision
+                )
+              }
+              onChange={(_, value: string) => {
+                onChange(
+                  path,
+                  type === "number" ? parseFloat(value) : value,
+                  schema
+                );
+                setUserChanged();
+
+                if (variant === "withInputs") {
+                  isNumber(min) &&
+                    setMinText(
+                      formatValue(
+                        parseFloat(value[0]),
+                        min,
+                        max,
+                        unit as ValueFormat,
+                        valuePrecision
+                      )
+                    );
+                  setMaxText(
+                    formatValue(
+                      parseFloat(value[1]),
+                      min,
+                      max,
+                      unit as ValueFormat,
+                      valuePrecision
+                    )
                   );
                 }
               }}
-              sx={{ width: "70px" }}
+              ref={sliderRef}
+              {...getComponentProps(props, "slider")}
             />
           </Grid>
+          {variant === "withInputs" && (
+            <Grid container justifyContent="space-between" pl={1}>
+              <Grid item pl="100px">
+                <TextField
+                  label="Min"
+                  size="small"
+                  variant="outlined"
+                  value={minText}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    console.log("asdasd", value, minText);
+                    if (!value && !!minText) {
+                      setMinText(null);
+                    } else if (unit === "percentage") {
+                      const percentageValue = parseInt(value);
+                      console.log("percentageValue", percentageValue);
+                      if (
+                        !isNaN(percentageValue) &&
+                        percentageValue >= 0 &&
+                        percentageValue <= 100
+                      ) {
+                        setMinText(percentageValue.toFixed());
+                      }
+                    } else if (unit === "flt") {
+                      const floatValue = parseFloat(value);
+                      if (!isNaN(floatValue)) {
+                        setMinText(value);
+                      }
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      let finalValue = e.target.value;
+
+                      if (!finalValue) {
+                        return;
+                      }
+
+                      if (unit === "percentage") {
+                        finalValue =
+                          ((computedMax - computedMin) / 100) * finalValue;
+                      }
+
+                      onChange(
+                        path,
+                        [parseFloat(finalValue), parseFloat(data?.[1] || max)],
+                        schema
+                      );
+                    }
+                  }}
+                  sx={{ width: "70px" }}
+                />
+                <FormControl variant="outlined">
+                  <Select
+                    size="small"
+                    labelId="dropdown-label"
+                    value={unit}
+                    onChange={(event: React.ChangeEvent<{ value: string }>) => {
+                      setUnit(event.target.value);
+                      setMinText(
+                        formatValue(
+                          data?.[0] || min,
+                          min,
+                          max,
+                          event.target.value as ValueFormat,
+                          valuePrecision
+                        )
+                      );
+                      setMaxText(
+                        formatValue(
+                          data?.[1] || max,
+                          min,
+                          max,
+                          event.target.value as ValueFormat,
+                          valuePrecision
+                        )
+                      );
+                    }}
+                    label="Select Option"
+                  >
+                    <MenuItem value="percentage">%</MenuItem>
+                    <MenuItem value="flt">flt</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
+              <Grid item>
+                <TextField
+                  label="Max"
+                  size="small"
+                  variant="outlined"
+                  value={maxText}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    console.log(value, maxText);
+                    if (!value && !!maxText) {
+                      setMaxText(null);
+                    } else if (unit === "percentage") {
+                      const percentageValue = parseInt(value);
+                      if (
+                        !isNaN(percentageValue) &&
+                        percentageValue >= 0 &&
+                        percentageValue <= 100
+                      ) {
+                        setMaxText(percentageValue.toFixed());
+                      }
+                    } else if (unit === "flt") {
+                      const floatValue = parseFloat(value);
+                      if (!isNaN(floatValue)) {
+                        setMaxText(value);
+                      }
+                    }
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      let finalValue = e.target.value;
+
+                      if (!finalValue) {
+                        return;
+                      }
+
+                      if (unit === "percentage") {
+                        finalValue =
+                          ((computedMax - computedMin) / 100) * finalValue;
+                      }
+
+                      onChange(
+                        path,
+                        [parseFloat(data?.[0] || min), parseFloat(finalValue)],
+                        schema
+                      );
+                    }
+                  }}
+                  sx={{ width: "70px" }}
+                />
+                <FormControl variant="outlined">
+                  <Select
+                    size="small"
+                    labelId="dropdown-label"
+                    value={unit}
+                    onChange={(event: React.ChangeEvent<{ value: string }>) => {
+                      setUnit(event.target.value);
+                      setMinText(
+                        formatValue(
+                          data?.[0] || min,
+                          min,
+                          max,
+                          event.target.value as ValueFormat,
+                          valuePrecision
+                        )
+                      );
+                      setMaxText(
+                        formatValue(
+                          data?.[1] || max,
+                          min,
+                          max,
+                          event.target.value as ValueFormat,
+                          valuePrecision
+                        )
+                      );
+                    }}
+                    label="Select Option"
+                  >
+                    <MenuItem value="percentage">%</MenuItem>
+                    <MenuItem value="flt">flt</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          )}
         </Grid>
-      )}
-    </FieldWrapper>
+      </FieldWrapper>
+    </Box>
   );
 }

From b589949217a7d8581860a35f727c091986314a1d Mon Sep 17 00:00:00 2001
From: manivoxel51 <mani@voxel51.com>
Date: Sun, 6 Oct 2024 19:59:33 -0700
Subject: [PATCH 07/39] complete slider

---
 .../SchemaIO/components/SliderView.tsx        | 421 +++++++-----------
 1 file changed, 162 insertions(+), 259 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
index fe87bfcb3b..323f057028 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -1,9 +1,8 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   Box,
   FormControl,
   Grid,
-  InputLabel,
   MenuItem,
   Select,
   Slider,
@@ -15,40 +14,62 @@ import { autoFocus, getComponentProps } from "../utils";
 import { useKey } from "../hooks";
 import { isNumber } from "lodash";
 
-type ValueFormat = "float" | "percentage";
-type LabelPosition = "top" | "left";
+type ValueFormat = "flt" | "%";
 
-function valueLabelFormat(
+const valueLabelFormat = (
   value: number,
   min: number,
   max: number,
   valueFormat: ValueFormat,
-  valuePrecision = 0
-) {
-  if (valueFormat === "percentage") {
-    const finalValue = (((value - min) / (max - min)) * 100).toFixed();
-    return `${finalValue}${"%"}`;
-  }
-  return `${value.toFixed(valuePrecision)}`;
-}
+  valuePrecision = 0,
+  skipUnit = true
+) => {
+  const formattedValue =
+    valueFormat === "%"
+      ? (((value - min) / (max - min)) * 100).toFixed()
+      : value.toFixed(valuePrecision);
 
-const formatValue = (
-  value: number,
-  min: number,
-  max: number,
-  valueFormat: ValueFormat,
-  valuePrecision = 0
-): string => {
-  if (valueFormat === "percentage") {
-    return (((value - min) / (max - min)) * 100).toFixed();
-  } else {
-    return value.toFixed(valuePrecision);
-  }
+  return skipUnit ? formattedValue : `${formattedValue} ${valueFormat}`;
 };
 
+interface SliderInputFieldProps {
+  label: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  UnitSelection: React.ReactNode;
+}
+
+const SliderInputField: React.FC<SliderInputFieldProps> = ({
+  label,
+  value,
+  onChange,
+  onKeyDown,
+  UnitSelection,
+}) => (
+  <Grid item>
+    <TextField
+      label={label}
+      size="small"
+      variant="outlined"
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      sx={{
+        width: "70px",
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+      }}
+      InputProps={{
+        sx: { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
+      }}
+    />
+    {UnitSelection}
+  </Grid>
+);
+
 export default function SliderView(props) {
   const { data, onChange, path, schema } = props;
-
   const sliderRef = useRef<HTMLInputElement>(null);
   const focus = autoFocus(props);
 
@@ -62,106 +83,148 @@ export default function SliderView(props) {
   const {
     min: viewMin,
     max: viewMax,
-    defaultValue = 0,
-    valueFormat = "percentage",
-    valuePrecision = 2,
+    value_format: valueFormat = "%",
+    value_label_display: valueLabelDisplay = "on",
+    value_precision: valuePrecision = 2,
     variant = null,
-    valueLabelDisplay = "on",
-    labelPosition = "left",
+    label_position: labelPosition = "left",
     label = "Threshold",
     viewMultipleOf = null,
   } = view;
-  const [title, _] = useState(label);
-  console.log("label", title);
 
   const multipleOf = viewMultipleOf || schemaMultipleOf;
-
   const [min, max] = [
-    isNumber(viewMin) ? viewMin : schemaMin,
-    isNumber(viewMax) ? viewMax : schemaMax,
+    isNumber(viewMin) ? viewMin : isNumber(schemaMin) ? schemaMin : 0,
+    isNumber(viewMax) ? viewMax : isNumber(schemaMax) ? schemaMax : 100,
   ];
-  console.log("view", min, max);
-
-  const computedMin = isNumber(min) ? min : 0;
-  const computedMax = isNumber(max) ? max : 100;
 
   const computedMultipleOf = isNumber(multipleOf)
     ? multipleOf
-    : (computedMax - computedMin) / 100;
-  console.log("computedMultipleOf", computedMultipleOf);
+    : (max - min) / 100;
+
+  const [key, setUserChanged] = useKey(path, schema, data, true);
+  const [unit, setUnit] = useState<ValueFormat>(valueFormat);
+  const [minText, setMinText] = useState(
+    valueLabelFormat(data?.[0] || min, min, max, unit, valuePrecision)
+  );
+  const [maxText, setMaxText] = useState(
+    valueLabelFormat(data?.[1] || max, min, max, unit, valuePrecision)
+  );
 
   useEffect(() => {
     if (sliderRef.current && focus) {
       sliderRef.current.querySelector("input")?.focus();
     }
-  }, [sliderRef, focus]);
+  }, [focus]);
 
-  const [key, setUserChanged] = useKey(path, schema, data, true);
-  const [unit, setUnit] = useState<string>(valueFormat);
+  const handleInputChange = (e, isMin: boolean) => {
+    const value = e.target.value;
 
-  console.log("data", data);
+    if (!value) {
+      isMin ? setMinText("") : setMaxText("");
+    } else if (unit === "%") {
+      const percentageValue = parseInt(value);
+      if (percentageValue >= 0 && percentageValue <= 100) {
+        isMin
+          ? setMinText(percentageValue.toFixed())
+          : setMaxText(percentageValue.toFixed());
+      }
+    } else {
+      const floatValue = parseFloat(value);
+      if (!isNaN(floatValue)) {
+        isMin ? setMinText(value) : setMaxText(value);
+      }
+    }
+  };
 
-  const [minText, setMinText] = useState(
-    formatValue(data?.[0] || min, min, max, unit as ValueFormat, valuePrecision)
-  );
-  const [maxText, setMaxText] = useState(
-    formatValue(data?.[1] || max, min, max, unit as ValueFormat, valuePrecision)
+  const handleKeyDown = (e, isMin: boolean) => {
+    if (e.key === "Enter") {
+      let finalValue = e.target.value;
+      if (!finalValue) return;
+
+      if (unit === "%") {
+        finalValue = ((max - min) / 100) * finalValue;
+      }
+
+      onChange(
+        path,
+        isMin
+          ? [parseFloat(finalValue), parseFloat(data?.[1] || max)]
+          : [parseFloat(data?.[0] || min), parseFloat(finalValue)],
+        schema
+      );
+    }
+  };
+
+  const UnitSelection = useMemo(
+    () => (
+      <FormControl variant="outlined">
+        <Select
+          size="small"
+          value={unit}
+          sx={{
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+          }}
+          onChange={(e) => {
+            const newUnit = e.target.value as ValueFormat;
+            setUnit(newUnit);
+            setMinText(
+              valueLabelFormat(
+                data?.[0] || min,
+                min,
+                max,
+                newUnit,
+                valuePrecision
+              )
+            );
+            setMaxText(
+              valueLabelFormat(
+                data?.[1] || max,
+                min,
+                max,
+                newUnit,
+                valuePrecision
+              )
+            );
+          }}
+        >
+          <MenuItem value="%">%</MenuItem>
+          <MenuItem value="flt">flt</MenuItem>
+        </Select>
+      </FormControl>
+    ),
+    [data, max, min, unit, valuePrecision]
   );
 
   if (labelPosition === "left") {
     delete props?.schema?.view?.label;
   }
 
-  console.log("props", props);
-
   return (
     <Box padding={2} py={4}>
       <FieldWrapper {...props}>
         <Grid container spacing={2} alignItems="center">
-          {labelPosition === "left" && title && (
+          {labelPosition === "left" && label && (
             <Grid item sx={{ width: "100px", overflow: "hidden" }}>
-              <Typography
-                noWrap
-                sx={{
-                  textOverflow: "ellipsis",
-                  overflow: "hidden",
-                  whiteSpace: "nowrap",
-                  width: "100%",
-                }}
-              >
-                {title}
+              <Typography noWrap sx={{ textOverflow: "ellipsis" }}>
+                {label}
               </Typography>
             </Grid>
           )}
-
           <Grid item xs>
             <Slider
-              min={computedMin}
-              max={computedMax}
+              min={min}
+              max={max}
               step={computedMultipleOf}
               key={key}
               disabled={schema.view?.readOnly}
               valueLabelDisplay={valueLabelDisplay}
-              value={data || defaultValue}
-              valueLabelFormat={(value: number) =>
-                valueLabelFormat(
-                  value,
-                  min,
-                  max,
-                  unit as ValueFormat,
-                  valuePrecision
-                )
-              }
-              getAriaValueText={(value: number) =>
-                valueLabelFormat(
-                  value,
-                  min,
-                  max,
-                  unit as ValueFormat,
-                  valuePrecision
-                )
+              value={data || [min, max]}
+              valueLabelFormat={(value) =>
+                valueLabelFormat(value, min, max, unit, valuePrecision, false)
               }
-              onChange={(_, value: string) => {
+              onChange={(_, value: number) => {
                 onChange(
                   path,
                   type === "number" ? parseFloat(value) : value,
@@ -170,24 +233,11 @@ export default function SliderView(props) {
                 setUserChanged();
 
                 if (variant === "withInputs") {
-                  isNumber(min) &&
-                    setMinText(
-                      formatValue(
-                        parseFloat(value[0]),
-                        min,
-                        max,
-                        unit as ValueFormat,
-                        valuePrecision
-                      )
-                    );
+                  setMinText(
+                    valueLabelFormat(value[0], min, max, unit, valuePrecision)
+                  );
                   setMaxText(
-                    formatValue(
-                      parseFloat(value[1]),
-                      min,
-                      max,
-                      unit as ValueFormat,
-                      valuePrecision
-                    )
+                    valueLabelFormat(value[1], min, max, unit, valuePrecision)
                   );
                 }
               }}
@@ -197,170 +247,23 @@ export default function SliderView(props) {
           </Grid>
           {variant === "withInputs" && (
             <Grid container justifyContent="space-between" pl={1}>
-              <Grid item pl="100px">
-                <TextField
+              <Grid item pl={labelPosition === "left" ? "100px" : "0"}>
+                <SliderInputField
                   label="Min"
-                  size="small"
-                  variant="outlined"
                   value={minText}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    console.log("asdasd", value, minText);
-                    if (!value && !!minText) {
-                      setMinText(null);
-                    } else if (unit === "percentage") {
-                      const percentageValue = parseInt(value);
-                      console.log("percentageValue", percentageValue);
-                      if (
-                        !isNaN(percentageValue) &&
-                        percentageValue >= 0 &&
-                        percentageValue <= 100
-                      ) {
-                        setMinText(percentageValue.toFixed());
-                      }
-                    } else if (unit === "flt") {
-                      const floatValue = parseFloat(value);
-                      if (!isNaN(floatValue)) {
-                        setMinText(value);
-                      }
-                    }
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      let finalValue = e.target.value;
-
-                      if (!finalValue) {
-                        return;
-                      }
-
-                      if (unit === "percentage") {
-                        finalValue =
-                          ((computedMax - computedMin) / 100) * finalValue;
-                      }
-
-                      onChange(
-                        path,
-                        [parseFloat(finalValue), parseFloat(data?.[1] || max)],
-                        schema
-                      );
-                    }
-                  }}
-                  sx={{ width: "70px" }}
+                  onChange={(e) => handleInputChange(e, true)}
+                  onKeyDown={(e) => handleKeyDown(e, true)}
+                  UnitSelection={UnitSelection}
                 />
-                <FormControl variant="outlined">
-                  <Select
-                    size="small"
-                    labelId="dropdown-label"
-                    value={unit}
-                    onChange={(event: React.ChangeEvent<{ value: string }>) => {
-                      setUnit(event.target.value);
-                      setMinText(
-                        formatValue(
-                          data?.[0] || min,
-                          min,
-                          max,
-                          event.target.value as ValueFormat,
-                          valuePrecision
-                        )
-                      );
-                      setMaxText(
-                        formatValue(
-                          data?.[1] || max,
-                          min,
-                          max,
-                          event.target.value as ValueFormat,
-                          valuePrecision
-                        )
-                      );
-                    }}
-                    label="Select Option"
-                  >
-                    <MenuItem value="percentage">%</MenuItem>
-                    <MenuItem value="flt">flt</MenuItem>
-                  </Select>
-                </FormControl>
               </Grid>
               <Grid item>
-                <TextField
+                <SliderInputField
                   label="Max"
-                  size="small"
-                  variant="outlined"
                   value={maxText}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    console.log(value, maxText);
-                    if (!value && !!maxText) {
-                      setMaxText(null);
-                    } else if (unit === "percentage") {
-                      const percentageValue = parseInt(value);
-                      if (
-                        !isNaN(percentageValue) &&
-                        percentageValue >= 0 &&
-                        percentageValue <= 100
-                      ) {
-                        setMaxText(percentageValue.toFixed());
-                      }
-                    } else if (unit === "flt") {
-                      const floatValue = parseFloat(value);
-                      if (!isNaN(floatValue)) {
-                        setMaxText(value);
-                      }
-                    }
-                  }}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      let finalValue = e.target.value;
-
-                      if (!finalValue) {
-                        return;
-                      }
-
-                      if (unit === "percentage") {
-                        finalValue =
-                          ((computedMax - computedMin) / 100) * finalValue;
-                      }
-
-                      onChange(
-                        path,
-                        [parseFloat(data?.[0] || min), parseFloat(finalValue)],
-                        schema
-                      );
-                    }
-                  }}
-                  sx={{ width: "70px" }}
+                  onChange={(e) => handleInputChange(e, false)}
+                  onKeyDown={(e) => handleKeyDown(e, false)}
+                  UnitSelection={UnitSelection}
                 />
-                <FormControl variant="outlined">
-                  <Select
-                    size="small"
-                    labelId="dropdown-label"
-                    value={unit}
-                    onChange={(event: React.ChangeEvent<{ value: string }>) => {
-                      setUnit(event.target.value);
-                      setMinText(
-                        formatValue(
-                          data?.[0] || min,
-                          min,
-                          max,
-                          event.target.value as ValueFormat,
-                          valuePrecision
-                        )
-                      );
-                      setMaxText(
-                        formatValue(
-                          data?.[1] || max,
-                          min,
-                          max,
-                          event.target.value as ValueFormat,
-                          valuePrecision
-                        )
-                      );
-                    }}
-                    label="Select Option"
-                  >
-                    <MenuItem value="percentage">%</MenuItem>
-                    <MenuItem value="flt">flt</MenuItem>
-                  </Select>
-                </FormControl>
               </Grid>
             </Grid>
           )}

From 9c1a51907b207258325032d9aa45a527de64788e Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 8 Oct 2024 12:30:33 -0400
Subject: [PATCH 08/39] pillBadge outline

---
 .../src/components/PillBadge/PillBadge.tsx    | 26 +++++++++++++++++++
 .../src/components/PillBadge/index.ts         |  1 +
 .../SchemaIO/components/PillBadgeView.tsx     | 15 +++++++++++
 .../src/plugins/SchemaIO/components/index.ts  |  1 +
 4 files changed, 43 insertions(+)
 create mode 100644 app/packages/components/src/components/PillBadge/PillBadge.tsx
 create mode 100644 app/packages/components/src/components/PillBadge/index.ts
 create mode 100644 app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
new file mode 100644
index 0000000000..fe1b861b6a
--- /dev/null
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Badge, Chip } from "@mui/material";
+
+const PillBadge = ({
+  text,
+  style,
+}: {
+  text: string;
+  color?: string;
+  style?: React.CSSProperties;
+}) => {
+  COLORS = {
+    default: "grey",
+    success: "green",
+    warning: "orange",
+    error: "red",
+  };
+  return (
+    <span style={style ?? {}}>
+      <Chip icon={<Badge />} label={text} variant={} />
+      {text}
+    </span>
+  );
+};
+
+export default PillBadge;
diff --git a/app/packages/components/src/components/PillBadge/index.ts b/app/packages/components/src/components/PillBadge/index.ts
new file mode 100644
index 0000000000..45ed630ea2
--- /dev/null
+++ b/app/packages/components/src/components/PillBadge/index.ts
@@ -0,0 +1 @@
+export { default as PillBadge } from "./PillBadge";
diff --git a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
new file mode 100644
index 0000000000..b6824a29ce
--- /dev/null
+++ b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
@@ -0,0 +1,15 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { getComponentProps } from "../utils";
+import PillBadge from "@fiftyone/components/src/components/PillBadge/PillBadge";
+
+export default function PillBadgeView(props) {
+  const { schema } = props;
+  const { view = {} } = schema;
+
+  return (
+    <Box {...getComponentProps(props, "container")}>
+      <PillBadge text={"..."} {...getComponentProps(props, "pillBadge")} />
+    </Box>
+  );
+}
diff --git a/app/packages/core/src/plugins/SchemaIO/components/index.ts b/app/packages/core/src/plugins/SchemaIO/components/index.ts
index bb0fca6f6e..fefdc1c759 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/index.ts
+++ b/app/packages/core/src/plugins/SchemaIO/components/index.ts
@@ -49,3 +49,4 @@ export { default as TextFieldView } from "./TextFieldView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";
 export { default as FrameLoaderView } from "./FrameLoaderView";
+export { default as PillBadgeView } from "./PillBadgeView";

From 9b02e46326bbf657498f30f435a0fb5a4f22d7b2 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 8 Oct 2024 12:35:44 -0400
Subject: [PATCH 09/39] coloring

---
 .../src/components/PillBadge/PillBadge.tsx    | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index fe1b861b6a..1b66ff2238 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -1,26 +1,16 @@
 import React from "react";
 import { Badge, Chip } from "@mui/material";
 
-const PillBadge = ({
-  text,
-  style,
-}: {
-  text: string;
-  color?: string;
-  style?: React.CSSProperties;
-}) => {
-  COLORS = {
-    default: "grey",
-    success: "green",
-    warning: "orange",
-    error: "red",
+const PillBadge = ({ text, color }: { text: string; color?: string }) => {
+  const COLORS: { [key: string]: string } = {
+    default: "#777777",
+    primary: "#FFB682",
+    error: "error",
+    warning: "warning",
+    info: "info",
+    success: "#8BC18D",
   };
-  return (
-    <span style={style ?? {}}>
-      <Chip icon={<Badge />} label={text} variant={} />
-      {text}
-    </span>
-  );
+  return <Chip icon={<Badge />} label={text} variant={} />;
 };
 
 export default PillBadge;

From 162f883b323fa61c875758869ba111a0114daee8 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 8 Oct 2024 19:32:47 -0400
Subject: [PATCH 10/39] base Chip

---
 .../src/components/PillBadge/PillBadge.tsx           | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index 1b66ff2238..d6e27960b4 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -1,7 +1,15 @@
 import React from "react";
 import { Badge, Chip } from "@mui/material";
 
-const PillBadge = ({ text, color }: { text: string; color?: string }) => {
+const PillBadge = ({
+  text,
+  color,
+  variant,
+}: {
+  text: string;
+  color?: string;
+  variant?: string;
+}) => {
   const COLORS: { [key: string]: string } = {
     default: "#777777",
     primary: "#FFB682",
@@ -10,7 +18,7 @@ const PillBadge = ({ text, color }: { text: string; color?: string }) => {
     info: "info",
     success: "#8BC18D",
   };
-  return <Chip icon={<Badge />} label={text} variant={} />;
+  return <Chip label={text} />;
 };
 
 export default PillBadge;

From 4827e4457f0e74787a77a864645288ade34362e4 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 8 Oct 2024 20:45:24 -0400
Subject: [PATCH 11/39] add PillBadgeView to Python Panel types

---
 fiftyone/operators/types.py | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index 8a630191f2..b23f6c2091 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1478,6 +1478,19 @@ def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
 
+class PillBadgeView(ReadOnlyView):
+    """Displays a pill shaped badge.
+
+    Args:
+        text ("Reviewed"): a label for the pill badge
+        color ("primary"): the color of the pill
+        variant ("outlined"): the variant of the pill
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+
 class PlotlyView(View):
     """Displays a Plotly chart.
 

From da99e2de06b3bcaa4347ba8026fe9e7ac55c5e22 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Wed, 9 Oct 2024 21:32:25 -0600
Subject: [PATCH 12/39] colored badges

---
 .../src/components/PillBadge/PillBadge.tsx    | 21 +++++++++++++++----
 .../SchemaIO/components/PillBadgeView.tsx     |  8 ++++++-
 fiftyone/operators/types.py                   |  2 +-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index d6e27960b4..8f5f8ca371 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -4,11 +4,11 @@ import { Badge, Chip } from "@mui/material";
 const PillBadge = ({
   text,
   color,
-  variant,
+  variant = "filled",
 }: {
-  text: string;
+  text: string | string[];
   color?: string;
-  variant?: string;
+  variant?: "filled" | "outlined";
 }) => {
   const COLORS: { [key: string]: string } = {
     default: "#777777",
@@ -18,7 +18,20 @@ const PillBadge = ({
     info: "info",
     success: "#8BC18D",
   };
-  return <Chip label={text} />;
+  return (
+    <span>
+      {typeof text === "string" ? (
+        <Chip
+          icon={<Badge />}
+          label={text}
+          sx={{ color: COLORS[color || "default"], fontWeight: 500 }}
+          variant={variant as "filled" | "outlined" | undefined}
+        />
+      ) : (
+        <Chip />
+      )}
+    </span>
+  );
 };
 
 export default PillBadge;
diff --git a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
index b6824a29ce..24fcf399f9 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
@@ -6,10 +6,16 @@ import PillBadge from "@fiftyone/components/src/components/PillBadge/PillBadge";
 export default function PillBadgeView(props) {
   const { schema } = props;
   const { view = {} } = schema;
+  const { text, color, variant } = view;
 
   return (
     <Box {...getComponentProps(props, "container")}>
-      <PillBadge text={"..."} {...getComponentProps(props, "pillBadge")} />
+      <PillBadge
+        text={text}
+        color={color}
+        variant={variant}
+        {...getComponentProps(props, "pillBadge")}
+      />
     </Box>
   );
 }
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index b23f6c2091..e351ffca3d 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1482,7 +1482,7 @@ class PillBadgeView(ReadOnlyView):
     """Displays a pill shaped badge.
 
     Args:
-        text ("Reviewed"): a label for the pill badge
+        text ("Reviewed" | ["Reviewed", "Not Reviewed"]): a label or set of label options for the pill badge
         color ("primary"): the color of the pill
         variant ("outlined"): the variant of the pill
     """

From 930acd655b048a528e7e89fb3852927ecc6141b7 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Wed, 9 Oct 2024 22:08:06 -0600
Subject: [PATCH 13/39] badge with circle and color

---
 .../src/components/PillBadge/PillBadge.tsx    | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index 8f5f8ca371..7df22be501 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Badge, Chip } from "@mui/material";
+import CircleIcon from "@mui/icons-material/Circle";
+import { Chip } from "@mui/material";
 
 const PillBadge = ({
   text,
@@ -11,20 +12,32 @@ const PillBadge = ({
   variant?: "filled" | "outlined";
 }) => {
   const COLORS: { [key: string]: string } = {
-    default: "#777777",
+    default: "#999999",
     primary: "#FFB682",
     error: "error",
     warning: "warning",
     info: "info",
     success: "#8BC18D",
   };
+
+  const chipStyle: { [key: string]: string | number } = {
+    color: COLORS[color || "default"],
+    fontWeight: 500,
+    paddingLeft: 1,
+  };
+
   return (
     <span>
       {typeof text === "string" ? (
         <Chip
-          icon={<Badge />}
+          icon={<CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />}
           label={text}
-          sx={{ color: COLORS[color || "default"], fontWeight: 500 }}
+          sx={{
+            ...chipStyle,
+            "& .MuiChip-label": {
+              marginBottom: "2px",
+            },
+          }}
           variant={variant as "filled" | "outlined" | undefined}
         />
       ) : (

From 2f1bf5ea2c3ebc4cc6d12fa126ff7a520cae1026 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Wed, 9 Oct 2024 23:35:52 -0600
Subject: [PATCH 14/39] extend badge to include dropdowns

---
 .../src/components/PillBadge/PillBadge.tsx    | 79 +++++++++++++++++--
 fiftyone/operators/types.py                   |  2 +-
 2 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index 7df22be501..6e74297a66 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -1,16 +1,25 @@
-import React from "react";
+import React, { useState } from "react";
 import CircleIcon from "@mui/icons-material/Circle";
-import { Chip } from "@mui/material";
+import { Chip, FormControl, MenuItem, Select } from "@mui/material";
 
 const PillBadge = ({
   text,
   color,
   variant = "filled",
 }: {
-  text: string | string[];
+  text: string | string[] | [string, string][];
   color?: string;
   variant?: "filled" | "outlined";
 }) => {
+  const [chipSelection, setChipSelection] = useState(
+    typeof text === "string"
+      ? text
+      : Array.isArray(text)
+      ? Array.isArray(text[0])
+        ? text[0][0]
+        : text[0]
+      : ""
+  );
   const COLORS: { [key: string]: string } = {
     default: "#999999",
     primary: "#FFB682",
@@ -34,14 +43,74 @@ const PillBadge = ({
           label={text}
           sx={{
             ...chipStyle,
+            "& .MuiChip-icon": {
+              marginRight: "-7px",
+            },
             "& .MuiChip-label": {
-              marginBottom: "2px",
+              marginBottom: "1px",
             },
           }}
           variant={variant as "filled" | "outlined" | undefined}
         />
       ) : (
-        <Chip />
+        <FormControl fullWidth>
+          <Chip
+            icon={<CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />}
+            label={
+              Array.isArray(text) && Array.isArray(text[0]) ? (
+                <Select
+                  value={chipSelection}
+                  variant={"standard"}
+                  disableUnderline={true}
+                  onChange={(event) =>
+                    setChipSelection(event.target.value as string)
+                  }
+                  sx={{
+                    color: COLORS[color || "default"],
+                    boxShadow: "none",
+                    textShadow: "none",
+                  }}
+                >
+                  {text.map((t, index) => (
+                    <MenuItem key={index} value={t[0]}>
+                      {t[0]}
+                    </MenuItem>
+                  ))}
+                </Select>
+              ) : (
+                <Select
+                  value={chipSelection}
+                  variant={"standard"}
+                  disableUnderline={true}
+                  onChange={(event) =>
+                    setChipSelection(event.target.value as string)
+                  }
+                  sx={{
+                    color: COLORS[color || "default"],
+                    boxShadow: "none",
+                    textShadow: "none",
+                  }}
+                >
+                  {text.map((t, index) => (
+                    <MenuItem key={index} value={t}>
+                      {t}
+                    </MenuItem>
+                  ))}
+                </Select>
+              )
+            }
+            sx={{
+              ...chipStyle,
+              "& .MuiChip-icon": {
+                marginRight: "-7px",
+              },
+              "& .MuiChip-label": {
+                marginBottom: "1px",
+              },
+            }}
+            variant={variant as "filled" | "outlined" | undefined}
+          ></Chip>
+        </FormControl>
       )}
     </span>
   );
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index e351ffca3d..13bfd64ada 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1482,7 +1482,7 @@ class PillBadgeView(ReadOnlyView):
     """Displays a pill shaped badge.
 
     Args:
-        text ("Reviewed" | ["Reviewed", "Not Reviewed"]): a label or set of label options for the pill badge
+        text ("Reviewed" | ["Reviewed", "Not Reviewed"] | [["Not Started", "primary"], ["Reviewed", "success"], ["In Review", "warning"]): a label or set of label options with or without a color for the pill badge
         color ("primary"): the color of the pill
         variant ("outlined"): the variant of the pill
     """

From e56ecc2a8ec8559c3b089df42e935891d26e5a94 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Wed, 9 Oct 2024 23:47:37 -0600
Subject: [PATCH 15/39] show/hide icon

---
 .../src/components/PillBadge/PillBadge.tsx         | 14 ++++++++++++--
 .../plugins/SchemaIO/components/PillBadgeView.tsx  |  3 ++-
 fiftyone/operators/types.py                        |  1 +
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index 6e74297a66..e690a6bbbd 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -6,10 +6,12 @@ const PillBadge = ({
   text,
   color,
   variant = "filled",
+  showIcon = true,
 }: {
   text: string | string[] | [string, string][];
   color?: string;
   variant?: "filled" | "outlined";
+  showIcon?: boolean;
 }) => {
   const [chipSelection, setChipSelection] = useState(
     typeof text === "string"
@@ -39,7 +41,11 @@ const PillBadge = ({
     <span>
       {typeof text === "string" ? (
         <Chip
-          icon={<CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />}
+          icon={
+            showIcon ? (
+              <CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />
+            ) : undefined
+          }
           label={text}
           sx={{
             ...chipStyle,
@@ -55,7 +61,11 @@ const PillBadge = ({
       ) : (
         <FormControl fullWidth>
           <Chip
-            icon={<CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />}
+            icon={
+              showIcon ? (
+                <CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />
+              ) : undefined
+            }
             label={
               Array.isArray(text) && Array.isArray(text[0]) ? (
                 <Select
diff --git a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
index 24fcf399f9..787fabbd7d 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
@@ -6,7 +6,7 @@ import PillBadge from "@fiftyone/components/src/components/PillBadge/PillBadge";
 export default function PillBadgeView(props) {
   const { schema } = props;
   const { view = {} } = schema;
-  const { text, color, variant } = view;
+  const { text, color, variant, showIcon } = view;
 
   return (
     <Box {...getComponentProps(props, "container")}>
@@ -14,6 +14,7 @@ export default function PillBadgeView(props) {
         text={text}
         color={color}
         variant={variant}
+        showIcon={showIcon}
         {...getComponentProps(props, "pillBadge")}
       />
     </Box>
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index 13bfd64ada..3a9a47726c 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1485,6 +1485,7 @@ class PillBadgeView(ReadOnlyView):
         text ("Reviewed" | ["Reviewed", "Not Reviewed"] | [["Not Started", "primary"], ["Reviewed", "success"], ["In Review", "warning"]): a label or set of label options with or without a color for the pill badge
         color ("primary"): the color of the pill
         variant ("outlined"): the variant of the pill
+        show_icon (False | True): whether to display indicator icon
     """
 
     def __init__(self, **kwargs):

From c3c70dc7a301475d8552c8fc93baffa4978a2200 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Thu, 10 Oct 2024 00:35:31 -0600
Subject: [PATCH 16/39] final color changes and select

---
 .../src/components/PillBadge/PillBadge.tsx    | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index e690a6bbbd..31991e4260 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -4,7 +4,7 @@ import { Chip, FormControl, MenuItem, Select } from "@mui/material";
 
 const PillBadge = ({
   text,
-  color,
+  color = "default",
   variant = "filled",
   showIcon = true,
 }: {
@@ -22,6 +22,9 @@ const PillBadge = ({
         : text[0]
       : ""
   );
+  const [chipColor, setChipColor] = useState(
+    typeof text === "string" ? color : Array.isArray(text) ? text[0][1] : color
+  );
   const COLORS: { [key: string]: string } = {
     default: "#999999",
     primary: "#FFB682",
@@ -32,7 +35,7 @@ const PillBadge = ({
   };
 
   const chipStyle: { [key: string]: string | number } = {
-    color: COLORS[color || "default"],
+    color: COLORS[chipColor || "default"],
     fontWeight: 500,
     paddingLeft: 1,
   };
@@ -72,13 +75,15 @@ const PillBadge = ({
                   value={chipSelection}
                   variant={"standard"}
                   disableUnderline={true}
-                  onChange={(event) =>
-                    setChipSelection(event.target.value as string)
-                  }
+                  onChange={(event) => {
+                    const selectedText = text.find(
+                      (t) => t[0] === event.target.value
+                    );
+                    setChipSelection(event.target.value);
+                    setChipColor(selectedText?.[1] ?? "default");
+                  }}
                   sx={{
-                    color: COLORS[color || "default"],
-                    boxShadow: "none",
-                    textShadow: "none",
+                    color: "inherit",
                   }}
                 >
                   {text.map((t, index) => (
@@ -96,9 +101,7 @@ const PillBadge = ({
                     setChipSelection(event.target.value as string)
                   }
                   sx={{
-                    color: COLORS[color || "default"],
-                    boxShadow: "none",
-                    textShadow: "none",
+                    color: "inherit",
                   }}
                 >
                   {text.map((t, index) => (
@@ -117,6 +120,9 @@ const PillBadge = ({
               "& .MuiChip-label": {
                 marginBottom: "1px",
               },
+              "& .MuiInput-input:focus": {
+                backgroundColor: "inherit",
+              },
             }}
             variant={variant as "filled" | "outlined" | undefined}
           ></Chip>

From d24a5acf9a12e8547a5f9aa6966bdab9d599315a Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Thu, 10 Oct 2024 00:55:54 -0600
Subject: [PATCH 17/39] color matching on selection

---
 .../src/components/PillBadge/PillBadge.tsx        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index 31991e4260..a439967a1e 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -23,8 +23,15 @@ const PillBadge = ({
       : ""
   );
   const [chipColor, setChipColor] = useState(
-    typeof text === "string" ? color : Array.isArray(text) ? text[0][1] : color
+    typeof text === "string"
+      ? color
+      : Array.isArray(text)
+      ? Array.isArray(text[0])
+        ? text[0][1]
+        : color || "default"
+      : "default"
   );
+
   const COLORS: { [key: string]: string } = {
     default: "#999999",
     primary: "#FFB682",
@@ -35,7 +42,7 @@ const PillBadge = ({
   };
 
   const chipStyle: { [key: string]: string | number } = {
-    color: COLORS[chipColor || "default"],
+    color: COLORS[chipColor || "default"] || COLORS.default,
     fontWeight: 500,
     paddingLeft: 1,
   };
@@ -97,9 +104,7 @@ const PillBadge = ({
                   value={chipSelection}
                   variant={"standard"}
                   disableUnderline={true}
-                  onChange={(event) =>
-                    setChipSelection(event.target.value as string)
-                  }
+                  onChange={(event) => setChipSelection(event.target.value)}
                   sx={{
                     color: "inherit",
                   }}

From aacf6558825de4d05d3ff8dcead5c3b0dacd1b4a Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Thu, 10 Oct 2024 09:22:11 -0600
Subject: [PATCH 18/39] make use state vars more readable

---
 .../src/components/PillBadge/PillBadge.tsx    | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index a439967a1e..33affcb36f 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -13,24 +13,33 @@ const PillBadge = ({
   variant?: "filled" | "outlined";
   showIcon?: boolean;
 }) => {
+  const getInitialChipSelection = (
+    text: string | string[] | [string, string][]
+  ) => {
+    if (typeof text === "string") return text;
+    if (Array.isArray(text)) {
+      if (Array.isArray(text[0])) return text[0][0];
+      return text[0];
+    }
+    return "";
+  };
+
+  const getInitialChipColor = (
+    text: string | string[] | [string, string][],
+    color?: string
+  ) => {
+    if (typeof text === "string") return color;
+    if (Array.isArray(text)) {
+      if (Array.isArray(text[0])) return text[0][1];
+      return color || "default";
+    }
+    return "default";
+  };
+
   const [chipSelection, setChipSelection] = useState(
-    typeof text === "string"
-      ? text
-      : Array.isArray(text)
-      ? Array.isArray(text[0])
-        ? text[0][0]
-        : text[0]
-      : ""
-  );
-  const [chipColor, setChipColor] = useState(
-    typeof text === "string"
-      ? color
-      : Array.isArray(text)
-      ? Array.isArray(text[0])
-        ? text[0][1]
-        : color || "default"
-      : "default"
+    getInitialChipSelection(text)
   );
+  const [chipColor, setChipColor] = useState(getInitialChipColor(text, color));
 
   const COLORS: { [key: string]: string } = {
     default: "#999999",

From 62de88e76d0eb761eb7d19813d8af66359a36b59 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Thu, 10 Oct 2024 09:25:18 -0600
Subject: [PATCH 19/39] Update
 app/packages/components/src/components/PillBadge/PillBadge.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 app/packages/components/src/components/PillBadge/PillBadge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index 33affcb36f..362bc80b7a 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -86,7 +86,7 @@ const PillBadge = ({
               ) : undefined
             }
             label={
-              Array.isArray(text) && Array.isArray(text[0]) ? (
+              Array.isArray(text) && text.length > 0 && Array.isArray(text[0]) ? (
                 <Select
                   value={chipSelection}
                   variant={"standard"}

From e3448f1b360df9ee00e8848fae860ff6a0917c8c Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhenwang9@gmail.com>
Date: Fri, 11 Oct 2024 09:04:46 -0500
Subject: [PATCH 20/39] add debouncing and throttle to slider onchange event

---
 .../SchemaIO/components/SliderView.tsx        | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
index 323f057028..f69bdd4a9a 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -1,4 +1,3 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   Box,
   FormControl,
@@ -9,10 +8,11 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import FieldWrapper from "./FieldWrapper";
-import { autoFocus, getComponentProps } from "../utils";
+import { debounce, isNumber, throttle } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useKey } from "../hooks";
-import { isNumber } from "lodash";
+import { autoFocus, getComponentProps } from "../utils";
+import FieldWrapper from "./FieldWrapper";
 
 type ValueFormat = "flt" | "%";
 
@@ -146,13 +146,23 @@ export default function SliderView(props) {
         finalValue = ((max - min) / 100) * finalValue;
       }
 
-      onChange(
-        path,
-        isMin
-          ? [parseFloat(finalValue), parseFloat(data?.[1] || max)]
-          : [parseFloat(data?.[0] || min), parseFloat(finalValue)],
-        schema
-      );
+      const updateValue = () => {
+        onChange(
+          path,
+          isMin
+            ? [parseFloat(finalValue), parseFloat(data?.[1] || max)]
+            : [parseFloat(data?.[0] || min), parseFloat(finalValue)],
+          schema
+        );
+      };
+
+      // Throttle the onChange action to once every 300ms
+      const throttledUpdate = throttle(updateValue, 300);
+
+      // Debounce for 200ms to ensure final typing before triggering update
+      const debouncedUpdate = debounce(throttledUpdate, 200);
+
+      debouncedUpdate();
     }
   };
 

From 6404f050f9f6e48f4613f2a999ccf0e407c105aa Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhenwang9@gmail.com>
Date: Mon, 14 Oct 2024 12:19:58 -0500
Subject: [PATCH 21/39] use onChangeComitted instead

---
 .../SchemaIO/components/SliderView.tsx        | 55 +++++++------------
 1 file changed, 21 insertions(+), 34 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
index f69bdd4a9a..87b3ff5ec6 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -8,7 +8,7 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import { debounce, isNumber, throttle } from "lodash";
+import { isNumber } from "lodash";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useKey } from "../hooks";
 import { autoFocus, getComponentProps } from "../utils";
@@ -146,24 +146,26 @@ export default function SliderView(props) {
         finalValue = ((max - min) / 100) * finalValue;
       }
 
-      const updateValue = () => {
-        onChange(
-          path,
-          isMin
-            ? [parseFloat(finalValue), parseFloat(data?.[1] || max)]
-            : [parseFloat(data?.[0] || min), parseFloat(finalValue)],
-          schema
-        );
-      };
-
-      // Throttle the onChange action to once every 300ms
-      const throttledUpdate = throttle(updateValue, 300);
+      onChange(
+        path,
+        isMin
+          ? [parseFloat(finalValue), parseFloat(data?.[1] || max)]
+          : [parseFloat(data?.[0] || min), parseFloat(finalValue)],
+        schema
+      );
+    }
+  };
 
-      // Debounce for 200ms to ensure final typing before triggering update
-      const debouncedUpdate = debounce(throttledUpdate, 200);
+  // Update the UI immediately during sliding
+  const handleSliderChange = (_, value: number) => {
+    setMinText(valueLabelFormat(value[0], min, max, unit, valuePrecision));
+    setMaxText(valueLabelFormat(value[1], min, max, unit, valuePrecision));
+  };
 
-      debouncedUpdate();
-    }
+  // Trigger actual onChange when the slider is released
+  const handleSliderCommit = (_, value: number) => {
+    onChange(path, value, schema);
+    setUserChanged();
   };
 
   const UnitSelection = useMemo(
@@ -234,23 +236,8 @@ export default function SliderView(props) {
               valueLabelFormat={(value) =>
                 valueLabelFormat(value, min, max, unit, valuePrecision, false)
               }
-              onChange={(_, value: number) => {
-                onChange(
-                  path,
-                  type === "number" ? parseFloat(value) : value,
-                  schema
-                );
-                setUserChanged();
-
-                if (variant === "withInputs") {
-                  setMinText(
-                    valueLabelFormat(value[0], min, max, unit, valuePrecision)
-                  );
-                  setMaxText(
-                    valueLabelFormat(value[1], min, max, unit, valuePrecision)
-                  );
-                }
-              }}
+              onChange={handleSliderChange} // Smooth UI update
+              onChangeCommitted={handleSliderCommit} // Final change on slider release
               ref={sliderRef}
               {...getComponentProps(props, "slider")}
             />

From 81fe8f8be1e404f144ce7834de8df2d6aec2b3ae Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhenwang9@gmail.com>
Date: Mon, 14 Oct 2024 12:21:29 -0500
Subject: [PATCH 22/39] cleanup

---
 .../core/src/plugins/SchemaIO/components/SliderView.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
index 87b3ff5ec6..852e3888b8 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -236,8 +236,8 @@ export default function SliderView(props) {
               valueLabelFormat={(value) =>
                 valueLabelFormat(value, min, max, unit, valuePrecision, false)
               }
-              onChange={handleSliderChange} // Smooth UI update
-              onChangeCommitted={handleSliderCommit} // Final change on slider release
+              onChange={handleSliderChange}
+              onChangeCommitted={handleSliderCommit}
               ref={sliderRef}
               {...getComponentProps(props, "slider")}
             />

From fa57350c3a69875a7ef901ccce6500d513dc2bf6 Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhenwang9@gmail.com>
Date: Tue, 15 Oct 2024 23:57:44 -0500
Subject: [PATCH 23/39] modify icon only dropdownview style

---
 .../core/src/plugins/SchemaIO/components/DropdownView.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
index a14068f17d..9e9894169e 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
@@ -149,7 +149,7 @@ export default function DropdownView(props: ViewPropsType) {
         autoFocus={autoFocus(props)}
         defaultValue={computedDefaultValue}
         size="small"
-        fullWidth
+        fullWidth={!icon}
         displayEmpty
         title={compact ? description : undefined}
         renderValue={(value) => {

From f377f137b31ce127be35496ee58fae03bf6c1c61 Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhenwang9@gmail.com>
Date: Thu, 17 Oct 2024 15:13:08 -0500
Subject: [PATCH 24/39] gridView change

---
 .../plugins/SchemaIO/components/GridView.tsx    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx b/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx
index 04644549bb..a62179a2b6 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx
@@ -1,5 +1,4 @@
 import { Box, BoxProps } from "@mui/material";
-import React from "react";
 import { HeaderView } from ".";
 import {
   getAdjustedLayoutWidth,
@@ -21,6 +20,7 @@ export default function GridView(props: ViewPropsType) {
   const propertiesAsArray = Object.entries(properties).map(([id, property]) => {
     return { id, ...property };
   });
+
   const height = props?.layout?.height as number;
   const parsedGap = parseGap(gap);
   const width = getAdjustedLayoutWidth(
@@ -29,11 +29,19 @@ export default function GridView(props: ViewPropsType) {
   ) as number;
 
   const baseGridProps: BoxProps = {
-    sx: { gap: parsedGap, ...getGridSx(view) },
+    sx: {
+      width: "100%",
+      boxSizing: "border-box",
+      gap: parsedGap,
+      ...getGridSx(view),
+    },
   };
 
   return (
-    <Box {...getComponentProps(props, "container")}>
+    <Box
+      {...getComponentProps(props, "container")}
+      sx={{ width: "100%", boxSizing: "border-box", padding: 1 }}
+    >
       <HeaderView {...props} divider nested />
       <Box {...getProps(props, "grid", baseGridProps)}>
         {propertiesAsArray.map((property) => {
@@ -48,7 +56,8 @@ export default function GridView(props: ViewPropsType) {
                 orientation === "vertical"
                   ? spaceToHeight(space, height)
                   : undefined,
-              width: "100%",
+              width: "100%", // Ensure each child takes full width
+              boxSizing: "border-box", // Include borders in width calculation
             },
             key: id,
           };

From 58946433a00eea0e5bd229506978f3dd9c295dcc Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 15 Oct 2024 12:28:39 -0600
Subject: [PATCH 25/39] Update PillBadge.tsx

---
 app/packages/components/src/components/PillBadge/PillBadge.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index 362bc80b7a..5ae58e74d4 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -52,6 +52,7 @@ const PillBadge = ({
 
   const chipStyle: { [key: string]: string | number } = {
     color: COLORS[chipColor || "default"] || COLORS.default,
+    fontSize: 14,
     fontWeight: 500,
     paddingLeft: 1,
   };

From ca1bccd80f75b7026a9fee2407a26e7a777b7076 Mon Sep 17 00:00:00 2001
From: manivoxel51 <mani@voxel51.com>
Date: Tue, 15 Oct 2024 18:16:16 -0700
Subject: [PATCH 26/39] adds disabled state for various variants of the button
 view

---
 .../SchemaIO/components/ButtonView.tsx        | 42 ++++++++++++++++---
 .../core/src/plugins/SchemaIO/utils/style.ts  | 11 +++++
 fiftyone/operators/types.py                   |  1 -
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
index ae4b7b2bec..3b47b82134 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
@@ -1,10 +1,10 @@
+import React from "react";
 import { MuiIconFont } from "@fiftyone/components";
 import { usePanelEvent } from "@fiftyone/operators";
 import { usePanelId } from "@fiftyone/spaces";
 import { isNullish } from "@fiftyone/utilities";
 import { Box, ButtonProps, Typography } from "@mui/material";
-import React from "react";
-import { getColorByCode, getComponentProps } from "../utils";
+import { getColorByCode, getComponentProps, getDisabledColors } from "../utils";
 import { ViewPropsType } from "../utils/types";
 import Button from "./Button";
 import TooltipProvider from "./TooltipProvider";
@@ -22,6 +22,7 @@ export default function ButtonView(props: ViewPropsType) {
     params = {},
     prompt,
     title,
+    disabled = false,
   } = view;
   const panelId = usePanelId();
   const handleClick = usePanelEvent();
@@ -37,8 +38,12 @@ export default function ButtonView(props: ViewPropsType) {
 
   return (
     <Box {...getComponentProps(props, "container")}>
-      <TooltipProvider title={title} {...getComponentProps(props, "tooltip")}>
+      <TooltipProvider
+        title={disabled ? "" : title}
+        {...getComponentProps(props, "tooltip")}
+      >
         <Button
+          disabled={disabled}
           variant={variant}
           href={href}
           onClick={(e) => {
@@ -66,7 +71,7 @@ export default function ButtonView(props: ViewPropsType) {
 }
 
 function getButtonProps(props: ViewPropsType): ButtonProps {
-  const { label, variant, color } = props.schema.view;
+  const { label, variant, color, disabled } = props.schema.view;
   const baseProps: ButtonProps = getCommonProps(props);
   if (isNullish(label)) {
     baseProps.sx["& .MuiButton-startIcon"] = { mr: 0, ml: 0 };
@@ -101,6 +106,23 @@ function getButtonProps(props: ViewPropsType): ButtonProps {
     };
   }
 
+  if (disabled) {
+    const [bgColor, textColor] = getDisabledColors(color);
+    baseProps.sx["&.Mui-disabled"] = {
+      backgroundColor: variant === "outlined" ? "inherit" : bgColor,
+      color: textColor,
+    };
+    if (variant === "square") {
+      baseProps.sx["&.Mui-disabled"].backgroundColor = (theme) =>
+        theme.palette.background.field;
+    }
+
+    if (variant === "outlined") {
+      baseProps.sx["&.Mui-disabled"].backgroundColor = (theme) =>
+        theme.palette.background.field;
+    }
+  }
+
   return baseProps;
 }
 
@@ -110,6 +132,8 @@ function getIconProps(props: ViewPropsType): ButtonProps {
 
 function getCommonProps(props: ViewPropsType): ButtonProps {
   const color = getColor(props);
+  const disabled = props.schema.view?.disabled || false;
+
   return {
     sx: {
       color,
@@ -119,12 +143,20 @@ function getCommonProps(props: ViewPropsType): ButtonProps {
       "&:hover": {
         borderColor: color,
       },
+      ...(disabled
+        ? {
+            opacity: 0.5,
+          }
+        : {}),
     },
   };
 }
 
 function getColor(props: ViewPropsType) {
-  const color = props.schema.view.color;
+  const {
+    schema: { view = {} },
+  } = props;
+  const { color } = view;
   if (color) {
     return getColorByCode(color);
   }
diff --git a/app/packages/core/src/plugins/SchemaIO/utils/style.ts b/app/packages/core/src/plugins/SchemaIO/utils/style.ts
index 54f0e25738..70195d8f75 100644
--- a/app/packages/core/src/plugins/SchemaIO/utils/style.ts
+++ b/app/packages/core/src/plugins/SchemaIO/utils/style.ts
@@ -8,6 +8,17 @@ export function getColorByCode(code: ColorType) {
   }
 }
 
+export function getDisabledColors(code: ColorType) {
+  if (code) {
+    if (["primary", "secondary", ...fiftyOneColorNames].includes(code))
+      return [
+        "var(--fo-palette-primary-main)",
+        "var(--fo-palette-text-primary)",
+      ];
+    return [code, "var(--fo-palette-text-primary)"];
+  }
+}
+
 export function getFieldSx(options: FieldsetOptionsType) {
   const { color, variant } = options;
   const sx = {
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index 3a9a47726c..a26b8f5e4c 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1258,7 +1258,6 @@ def __init__(self, **kwargs):
         self.operator = kwargs.get("operator", None)
         self.prompt = kwargs.get("prompt", False)
         self.params = kwargs.get("params", None)
-        self.href = kwargs.get("href", None)
 
     def to_json(self):
         return _convert_callables_to_operator_uris(

From 7771d0a99bca38a1f27e5ea520d3290b0975c0b5 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 15 Oct 2024 22:04:38 -0600
Subject: [PATCH 27/39] hook up .btn to new disabled state

---
 fiftyone/operators/types.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index a26b8f5e4c..a33c0b0d7f 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -253,6 +253,7 @@ def btn(
         label,
         icon=None,
         variant=None,
+        disabled=False,
         on_click=None,
         prompt=False,
         params=None,
@@ -282,6 +283,7 @@ def btn(
             label: the label of the button
             icon (None): the name of the icon to display
             icon_position ("left"): the position of the icon. Can be ``"left"`` or ``"right"``
+            disabled (False): whether the button is disabled
             variant (None): the variant of the button. Can be ``"contained"``, ``"outlined"``,
                 ``"round"`` or ``"square"``
             on_click (None): the name of the operator to execute when the button is clicked
@@ -295,6 +297,7 @@ def btn(
             href=href,
             icon=icon,
             icon_position=icon_position,
+            disabled=disabled,
             label=label,
             operator=on_click,
             params=params,

From d1f05419854f88f216e9cf8cc60dc765c17f712a Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 15 Oct 2024 22:41:30 -0600
Subject: [PATCH 28/39] docstring additions for LoadingView

---
 fiftyone/operators/types.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index a33c0b0d7f..ec320bae57 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1473,7 +1473,10 @@ class LoadingView(ReadOnlyView):
     """Displays a loading indicator.
 
     Args:
-        label ("Loading"): a label for the loading indicator
+        text ("Loading"): a label for the loading indicator
+        variant ("spinner"): the variant of the loading indicator
+        color ("primary"): the color of the loading indicator
+        size ("medium"): the size of the loading indicator
     """
 
     def __init__(self, **kwargs):

From 0c8a8a62bc09632e4c52343f8e524ae0fba7d150 Mon Sep 17 00:00:00 2001
From: manivoxel51 <mani@voxel51.com>
Date: Wed, 16 Oct 2024 10:08:00 -0700
Subject: [PATCH 29/39] refactor and fix disabled color when no color code
 provided

---
 .../src/plugins/SchemaIO/components/ButtonView.tsx    |  9 ++-------
 app/packages/core/src/plugins/SchemaIO/utils/style.ts | 11 ++---------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
index 3b47b82134..5778fa96ac 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
@@ -107,17 +107,12 @@ function getButtonProps(props: ViewPropsType): ButtonProps {
   }
 
   if (disabled) {
-    const [bgColor, textColor] = getDisabledColors(color);
+    const [bgColor, textColor] = getDisabledColors();
     baseProps.sx["&.Mui-disabled"] = {
       backgroundColor: variant === "outlined" ? "inherit" : bgColor,
       color: textColor,
     };
-    if (variant === "square") {
-      baseProps.sx["&.Mui-disabled"].backgroundColor = (theme) =>
-        theme.palette.background.field;
-    }
-
-    if (variant === "outlined") {
+    if (["square", "outlined"].includes(variant)) {
       baseProps.sx["&.Mui-disabled"].backgroundColor = (theme) =>
         theme.palette.background.field;
     }
diff --git a/app/packages/core/src/plugins/SchemaIO/utils/style.ts b/app/packages/core/src/plugins/SchemaIO/utils/style.ts
index 70195d8f75..cac0727655 100644
--- a/app/packages/core/src/plugins/SchemaIO/utils/style.ts
+++ b/app/packages/core/src/plugins/SchemaIO/utils/style.ts
@@ -8,15 +8,8 @@ export function getColorByCode(code: ColorType) {
   }
 }
 
-export function getDisabledColors(code: ColorType) {
-  if (code) {
-    if (["primary", "secondary", ...fiftyOneColorNames].includes(code))
-      return [
-        "var(--fo-palette-primary-main)",
-        "var(--fo-palette-text-primary)",
-      ];
-    return [code, "var(--fo-palette-text-primary)"];
-  }
+export function getDisabledColors() {
+  return ["var(--fo-palette-primary-main)", "var(--fo-palette-text-primary)"];
 }
 
 export function getFieldSx(options: FieldsetOptionsType) {

From 3fd5ba835e8716ff30de13eb3cdd8e9f49ea5e5b Mon Sep 17 00:00:00 2001
From: manivoxel51 <109545780+manivoxel51@users.noreply.github.com>
Date: Fri, 18 Oct 2024 09:35:51 -0700
Subject: [PATCH 30/39] Adds a customizable TextView component (#4942)

---
 .../plugins/SchemaIO/components/TextView.tsx  | 59 +++++++++++++++++++
 .../src/plugins/SchemaIO/components/index.ts  |  1 +
 app/packages/operators/src/types.ts           | 15 +++++
 fiftyone/operators/types.py                   | 12 ++++
 4 files changed, 87 insertions(+)
 create mode 100644 app/packages/core/src/plugins/SchemaIO/components/TextView.tsx

diff --git a/app/packages/core/src/plugins/SchemaIO/components/TextView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TextView.tsx
new file mode 100644
index 0000000000..478f665208
--- /dev/null
+++ b/app/packages/core/src/plugins/SchemaIO/components/TextView.tsx
@@ -0,0 +1,59 @@
+import { Box, Typography } from "@mui/material";
+import React from "react";
+import { getComponentProps } from "../utils";
+import { NumberSchemaType, ViewPropsType } from "../utils/types";
+
+export default function TextView(props: ViewPropsType<NumberSchemaType>) {
+  const { schema } = props;
+  const { view = {} } = schema;
+  const {
+    color = "primary",
+    fontSize = "1rem",
+    title = "",
+    textTransform = "none",
+    variant = "body1",
+    bold = false,
+    italic = false,
+    align = "inherit",
+    noWrap = false,
+    textDecoration = "none",
+    letterSpacing = "normal",
+    lineHeight = "normal",
+    fontFamily = "default",
+    width = "auto",
+    displayMode = "block",
+    padding = "1rem",
+  } = view;
+
+  const sx = {
+    fontFamily,
+    ...(bold ? { fontWeight: "bold" } : {}),
+    ...(italic ? { fontStyle: "italic" } : {}),
+    ...(noWrap
+      ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }
+      : {}),
+  };
+
+  return (
+    <Box {...getComponentProps(props, "container")}>
+      <Typography
+        padding={padding}
+        display={displayMode}
+        width={width}
+        variant={variant}
+        color={color}
+        fontSize={fontSize}
+        textTransform={textTransform}
+        align={align}
+        letterSpacing={letterSpacing}
+        noWrap={noWrap}
+        lineHeight={lineHeight}
+        textDecoration={textDecoration}
+        sx={sx}
+        {...getComponentProps(props, "text")}
+      >
+        {title}
+      </Typography>
+    </Box>
+  );
+}
diff --git a/app/packages/core/src/plugins/SchemaIO/components/index.ts b/app/packages/core/src/plugins/SchemaIO/components/index.ts
index fefdc1c759..50bdcca53c 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/index.ts
+++ b/app/packages/core/src/plugins/SchemaIO/components/index.ts
@@ -45,6 +45,7 @@ export { default as SwitchView } from "./SwitchView";
 export { default as TableView } from "./TableView";
 export { default as TabsView } from "./TabsView";
 export { default as TagsView } from "./TagsView";
+export { default as TextView } from "./TextView";
 export { default as TextFieldView } from "./TextFieldView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";
diff --git a/app/packages/operators/src/types.ts b/app/packages/operators/src/types.ts
index 69d166db42..fa12e4b54f 100644
--- a/app/packages/operators/src/types.ts
+++ b/app/packages/operators/src/types.ts
@@ -1111,6 +1111,20 @@ export class FieldView extends View {
   }
 }
 
+/**
+ * Operator class for describing a TextView {@link View} for an
+ * operator type.
+ */
+export class TextView extends View {
+  constructor(options: ViewProps) {
+    super(options);
+    this.name = "TextView";
+  }
+  static fromJSON(json) {
+    return new TextView(json);
+  }
+}
+
 /**
  * Operator class for describing a TextFieldView {@link View} for an
  * operator type.
@@ -1220,6 +1234,7 @@ const VIEWS = {
   MediaPlayerView,
   PromptView,
   FieldView,
+  TextView,
   TextFieldView,
   LazyFieldView,
 };
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index ec320bae57..b6b6a00b38 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1854,6 +1854,18 @@ def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
 
+class TextView(View):
+    """Displays a text.
+
+    .. note::
+
+        Must be used with :class:`String` properties.
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+
 class TextFieldView(View):
     """Displays a text input.
 

From ea565055e8a71c4354fe3d7753d20cc6475809a1 Mon Sep 17 00:00:00 2001
From: manivoxel51 <mani@voxel51.com>
Date: Fri, 18 Oct 2024 13:32:27 -0700
Subject: [PATCH 31/39] snake_case the TextView component

---
 .../plugins/SchemaIO/components/TextView.tsx  | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/TextView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TextView.tsx
index 478f665208..e3d39431bd 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/TextView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/TextView.tsx
@@ -8,28 +8,28 @@ export default function TextView(props: ViewPropsType<NumberSchemaType>) {
   const { view = {} } = schema;
   const {
     color = "primary",
-    fontSize = "1rem",
+    font_size = "1rem",
     title = "",
-    textTransform = "none",
+    text_transform = "none",
     variant = "body1",
     bold = false,
     italic = false,
     align = "inherit",
-    noWrap = false,
-    textDecoration = "none",
-    letterSpacing = "normal",
-    lineHeight = "normal",
-    fontFamily = "default",
+    no_wrap = false,
+    text_decoration = "none",
+    letter_spacing = "normal",
+    line_height = "normal",
+    font_family = "default",
     width = "auto",
-    displayMode = "block",
+    display_mode = "block",
     padding = "1rem",
   } = view;
 
   const sx = {
-    fontFamily,
+    font_family,
     ...(bold ? { fontWeight: "bold" } : {}),
     ...(italic ? { fontStyle: "italic" } : {}),
-    ...(noWrap
+    ...(no_wrap
       ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }
       : {}),
   };
@@ -38,17 +38,17 @@ export default function TextView(props: ViewPropsType<NumberSchemaType>) {
     <Box {...getComponentProps(props, "container")}>
       <Typography
         padding={padding}
-        display={displayMode}
+        display={display_mode}
         width={width}
         variant={variant}
         color={color}
-        fontSize={fontSize}
-        textTransform={textTransform}
+        fontSize={font_size}
+        textTransform={text_transform}
         align={align}
-        letterSpacing={letterSpacing}
-        noWrap={noWrap}
-        lineHeight={lineHeight}
-        textDecoration={textDecoration}
+        letterSpacing={letter_spacing}
+        noWrap={no_wrap}
+        lineHeight={line_height}
+        textDecoration={text_decoration}
         sx={sx}
         {...getComponentProps(props, "text")}
       >

From 66daf792592147b0be3468ab468650f34fdfbee8 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Fri, 18 Oct 2024 15:42:13 -0600
Subject: [PATCH 32/39] minor improvements

---
 .../src/components/PillBadge/PillBadge.tsx    |  6 ++-
 .../SchemaIO/components/SliderView.tsx        |  3 +-
 fiftyone/operators/types.py                   | 54 ++++++++++++++++---
 3 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index 5ae58e74d4..a284faf6ad 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -18,6 +18,7 @@ const PillBadge = ({
   ) => {
     if (typeof text === "string") return text;
     if (Array.isArray(text)) {
+      if (text.length === 0) return "";
       if (Array.isArray(text[0])) return text[0][0];
       return text[0];
     }
@@ -30,6 +31,7 @@ const PillBadge = ({
   ) => {
     if (typeof text === "string") return color;
     if (Array.isArray(text)) {
+      if (text.length === 0) return "default";
       if (Array.isArray(text[0])) return text[0][1];
       return color || "default";
     }
@@ -87,7 +89,9 @@ const PillBadge = ({
               ) : undefined
             }
             label={
-              Array.isArray(text) && text.length > 0 && Array.isArray(text[0]) ? (
+              Array.isArray(text) &&
+              text.length > 0 &&
+              Array.isArray(text[0]) ? (
                 <Select
                   value={chipSelection}
                   variant={"standard"}
diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
index 852e3888b8..8bc576e7b1 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -74,7 +74,6 @@ export default function SliderView(props) {
   const focus = autoFocus(props);
 
   const {
-    type,
     min: schemaMin,
     max: schemaMax,
     multipleOf: schemaMultipleOf,
@@ -131,7 +130,7 @@ export default function SliderView(props) {
       }
     } else {
       const floatValue = parseFloat(value);
-      if (!isNaN(floatValue)) {
+      if (!Number.isNaN(floatValue)) {
         isMin ? setMinText(value) : setMaxText(value);
       }
     }
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index b6b6a00b38..5725a8f910 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1472,11 +1472,24 @@ def __init__(self, **kwargs):
 class LoadingView(ReadOnlyView):
     """Displays a loading indicator.
 
+    Examples::
+
+        schema_dots = {
+            text: "Loading dots only"
+        }
+        schema_spinner = {
+            variant: "spinner",
+            color: "primary",
+            size: "medium",
+        }
+        loading_dots = types.LoadingView(**schema_dots)
+        loading_spinner = types.LoadingView(**schema_spinner)
+
     Args:
-        text ("Loading"): a label for the loading indicator
-        variant ("spinner"): the variant of the loading indicator
-        color ("primary"): the color of the loading indicator
-        size ("medium"): the size of the loading indicator
+        text (None): a label for the loading indicator
+        variant (None): the variant of the loading indicator
+        color (None): the color of the loading indicator
+        size (None): the size of the loading indicator
     """
 
     def __init__(self, **kwargs):
@@ -1486,11 +1499,36 @@ def __init__(self, **kwargs):
 class PillBadgeView(ReadOnlyView):
     """Displays a pill shaped badge.
 
+    Examples::
+
+        schema_options_single_color = {
+            text: ["Reviewed", "Not Reviewed"],
+            color: "primary",
+            variant: "outlined",
+            show_icon: True
+        }
+
+         schema_options_multi_color = {
+            text: [["Not Started", "primary"], ["Reviewed", "success"], ["In Review", "warning"]],
+            color: "primary",
+            variant: "outlined",
+            show_icon: True
+        }
+
+         schema_single_option= {
+            text: "Reviewed",
+            color: "primary",
+            variant: "outlined",
+            show_icon: True
+        }
+        badge = types.PillBadgeView(**schema_options_single_color)
+
+
     Args:
-        text ("Reviewed" | ["Reviewed", "Not Reviewed"] | [["Not Started", "primary"], ["Reviewed", "success"], ["In Review", "warning"]): a label or set of label options with or without a color for the pill badge
-        color ("primary"): the color of the pill
-        variant ("outlined"): the variant of the pill
-        show_icon (False | True): whether to display indicator icon
+        text: a label or set of label options with or without a color for the pill badge
+        color (None): the color of the pill
+        variant (None): the variant of the pill
+        show_icon (None): whether to display indicator icon
     """
 
     def __init__(self, **kwargs):

From d1260b7bdf5775d0993ba5bb5be8eb0f938f463b Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Sat, 19 Oct 2024 21:43:32 -0600
Subject: [PATCH 33/39] cherry-pick ModalView and relevant changes from
 tag-modal branch

---
 .../src/components/ModalBase/DisplayTags.tsx  |  80 ++++++
 .../src/components/ModalBase/ModalBase.tsx    | 253 ++++++++++++++++++
 .../src/components/ModalBase/index.ts         |   1 +
 .../src/components/MuiIconFont/index.tsx      |  28 +-
 .../plugins/SchemaIO/components/ModalView.tsx |  30 +++
 .../SchemaIO/components/PillBadgeView.tsx     |   1 -
 .../src/plugins/SchemaIO/components/index.ts  |   6 +-
 app/packages/operators/src/types.ts           |  45 ++--
 fiftyone/operators/types.py                   | 110 ++++----
 9 files changed, 475 insertions(+), 79 deletions(-)
 create mode 100644 app/packages/components/src/components/ModalBase/DisplayTags.tsx
 create mode 100644 app/packages/components/src/components/ModalBase/ModalBase.tsx
 create mode 100644 app/packages/components/src/components/ModalBase/index.ts
 create mode 100644 app/packages/core/src/plugins/SchemaIO/components/ModalView.tsx

diff --git a/app/packages/components/src/components/ModalBase/DisplayTags.tsx b/app/packages/components/src/components/ModalBase/DisplayTags.tsx
new file mode 100644
index 0000000000..79c6132cee
--- /dev/null
+++ b/app/packages/components/src/components/ModalBase/DisplayTags.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Box, Chip, TextField, IconButton } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+
+// Define the props interface for the DisplayTags component
+interface DisplayTagsProps {
+  saveTags: (tags: string[]) => void; // saveTags is a function that accepts an array of strings and returns void
+}
+
+const DisplayTags: React.FC<DisplayTagsProps> = ({ saveTags }) => {
+  const [chips, setChips] = useState<string[]>([]); // chips is an array of strings
+  const [inputValue, setInputValue] = useState<string>(""); // inputValue is a string
+
+  const handleAddChip = () => {
+    if (inputValue.trim() !== "") {
+      const updatedChips = [...chips, inputValue];
+      setChips(updatedChips);
+      setInputValue("");
+      saveTags(updatedChips); // Call the saveTags function to save the new list of chips
+    }
+  };
+
+  const handleDeleteChip = (chipToDelete: string) => {
+    const updatedChips = chips.filter((chip) => chip !== chipToDelete);
+    setChips(updatedChips);
+    saveTags(updatedChips); // Call the saveTags function to save the updated list of chips
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        alignItems: "start",
+        paddingTop: 1,
+        paddingBottom: 1,
+        width: "100%", // Ensure the box takes full width
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          width: "100%", // Ensure the inner box takes full width
+        }}
+      >
+        <TextField
+          variant="outlined"
+          label="Enter tag"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          fullWidth // Make TextField take up the remaining width
+        />
+        <IconButton onClick={handleAddChip} color="primary">
+          <AddIcon />
+        </IconButton>
+      </Box>
+
+      <Box
+        sx={{
+          display: "flex",
+          gap: 1,
+          flexWrap: "wrap",
+        }}
+      >
+        {chips.map((chip, index) => (
+          <Chip
+            key={index}
+            label={chip}
+            onDelete={() => handleDeleteChip(chip)}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default DisplayTags;
diff --git a/app/packages/components/src/components/ModalBase/ModalBase.tsx b/app/packages/components/src/components/ModalBase/ModalBase.tsx
new file mode 100644
index 0000000000..30321d3bc8
--- /dev/null
+++ b/app/packages/components/src/components/ModalBase/ModalBase.tsx
@@ -0,0 +1,253 @@
+import React, { useCallback, useState } from "react";
+import ButtonView from "@fiftyone/core/src/plugins/SchemaIO/components/ButtonView";
+import { Box, Modal, Typography } from "@mui/material";
+import DisplayTags from "./DisplayTags";
+import { MuiIconFont } from "../index";
+
+interface ModalBaseProps {
+  modal: {
+    icon?: string;
+    iconVariant?: "outlined" | "filled" | "rounded" | "sharp" | undefined;
+    title: string;
+    subtitle: string;
+    body: string;
+    textAlign?: string | { [key: string]: string };
+  };
+  primaryButton?: {
+    href?: any;
+    prompt?: any;
+    params?: any;
+    operator?: any;
+    align?: string;
+    width?: string;
+    onClick?: any;
+    primaryText: string;
+    primaryColor: string;
+  };
+  secondaryButton?: {
+    href?: any;
+    prompt?: any;
+    params?: any;
+    operator?: any;
+    align?: string;
+    width?: string;
+    onClick?: any;
+    secondaryText: string;
+    secondaryColor: string;
+  };
+  functionality?: string;
+  primaryCallback?: () => void;
+  secondaryCallback?: () => void;
+  props: any;
+}
+
+interface ModalButtonView {
+  variant: string;
+  label: string;
+  icon?: string;
+  iconPosition?: string;
+  componentsProps: any;
+}
+
+const ModalBase: React.FC<ModalBaseProps> = ({
+  modal,
+  primaryButton,
+  secondaryButton,
+  primaryCallback,
+  secondaryCallback,
+  functionality = "none",
+  props,
+}) => {
+  const { title, subtitle, body } = modal;
+
+  const defaultAlign = "left";
+
+  let titleAlign = defaultAlign;
+  let subtitleAlign = defaultAlign;
+  let bodyAlign = defaultAlign;
+
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => {
+    if (!secondaryCallback) {
+      setOpen(false);
+    }
+  };
+
+  if (typeof modal?.textAlign === "string") {
+    titleAlign = subtitleAlign = bodyAlign = modal.textAlign;
+  } else {
+    titleAlign = modal?.textAlign?.title ?? defaultAlign;
+    subtitleAlign = modal?.textAlign?.subtitle ?? defaultAlign;
+    bodyAlign = modal?.textAlign?.body ?? defaultAlign;
+  }
+
+  const modalStyle = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 600,
+    bgcolor: "background.paper",
+    border: "2px solid #000",
+    boxShadow: 24,
+    p: 6, // Padding for inner spacing
+    display: "flex",
+    flexDirection: "column", // Stack items vertically
+    justifyContent: "center", // Vertically center the content
+  };
+
+  const modalButtonView: ModalButtonView = {
+    variant: props?.variant || "outlined",
+    label: props?.label || "Open Modal",
+    componentsProps: {
+      button: {
+        sx: {
+          height: props?.height || "100%",
+          width: props?.width || "100%",
+          padding: 1,
+        },
+      },
+    },
+  };
+
+  if (Object.keys(props).includes("icon")) {
+    modalButtonView["icon"] = props["icon"];
+    modalButtonView["iconPosition"] = props?.iconPosition || "left";
+  }
+
+  const [primaryButtonView, setPrimaryButtonView] = useState({
+    variant: "contained",
+    color: primaryButton?.primaryColor,
+    label: primaryButton?.primaryText,
+    onClick: primaryButton?.onClick,
+    operator: primaryCallback || primaryButton?.operator,
+    params: primaryButton?.params,
+    href: primaryButton?.href,
+    prompt: primaryButton?.prompt,
+    componentsProps: {
+      button: {
+        sx: {
+          width: primaryButton?.width || "100%",
+          justifyContent: primaryButton?.align || "center",
+          ...primaryButton,
+        },
+      },
+    },
+  });
+
+  const [secondaryButtonView, setSecondaryButtonView] = useState({
+    variant: "outlined",
+    color: secondaryButton?.secondaryColor,
+    label: secondaryButton?.secondaryText,
+    onClick: secondaryButton?.onClick,
+    operator: secondaryCallback || secondaryButton?.operator,
+    params: secondaryButton?.params,
+    href: secondaryButton?.href,
+    prompt: secondaryButton?.prompt,
+    componentsProps: {
+      button: {
+        sx: {
+          width: primaryButton?.width || "100%",
+          justifyContent: primaryButton?.align || "center",
+          ...secondaryButton,
+        },
+      },
+    },
+  });
+
+  // State options for functionality based on user input
+
+  {
+    /* TAGGING FUNCTIONALITY */
+  }
+  const handleSaveTags = useCallback((tags: string[]) => {
+    setPrimaryButtonView((prevButtonView) => ({
+      ...prevButtonView,
+      params: { ...prevButtonView.params, tags }, // Add tags to existing params
+    }));
+  }, []);
+
+  return (
+    <>
+      <Box>
+        <ButtonView
+          onClick={handleOpen}
+          schema={{
+            view: modalButtonView,
+          }}
+        />
+      </Box>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-title"
+        aria-describedby="modal-subtitle"
+      >
+        <Box sx={modalStyle}>
+          <Typography
+            id="modal-title"
+            variant="h5"
+            component="h5"
+            sx={{ textAlign: titleAlign }}
+          >
+            {modal?.icon && (
+              <MuiIconFont
+                variant={modal?.iconVariant || "filled"}
+                sx={{ verticalAlign: "middle" }}
+                name={modal.icon}
+              >
+                {modal.icon}
+              </MuiIconFont>
+            )}{" "}
+            {title}
+          </Typography>
+          <Typography
+            id="modal-subtitle"
+            variant="h6"
+            component="h6"
+            sx={{ mt: 4, textAlign: subtitleAlign }}
+          >
+            {subtitle}
+          </Typography>
+          <Typography id="modal-body" sx={{ my: 1, textAlign: bodyAlign }}>
+            {body}
+          </Typography>
+          {functionality === "tagging" && (
+            <DisplayTags saveTags={handleSaveTags} />
+          )}
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              mt: 2,
+              gap: 3,
+            }}
+          >
+            {secondaryButton && (
+              <Box sx={{ flexGrow: 1 }}>
+                <ButtonView
+                  onClick={handleClose}
+                  schema={{
+                    view: secondaryButtonView,
+                  }}
+                />
+              </Box>
+            )}
+            {primaryButton && (
+              <Box sx={{ flexGrow: 1 }}>
+                <ButtonView
+                  onClick={handleClose}
+                  schema={{
+                    view: primaryButtonView,
+                  }}
+                />
+              </Box>
+            )}
+          </Box>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+export default ModalBase;
diff --git a/app/packages/components/src/components/ModalBase/index.ts b/app/packages/components/src/components/ModalBase/index.ts
new file mode 100644
index 0000000000..71cee8fb7d
--- /dev/null
+++ b/app/packages/components/src/components/ModalBase/index.ts
@@ -0,0 +1 @@
+export { default as ModalBase } from "./ModalBase";
diff --git a/app/packages/components/src/components/MuiIconFont/index.tsx b/app/packages/components/src/components/MuiIconFont/index.tsx
index 50cbcf175f..b21f0f9f24 100644
--- a/app/packages/components/src/components/MuiIconFont/index.tsx
+++ b/app/packages/components/src/components/MuiIconFont/index.tsx
@@ -4,10 +4,34 @@ import React from "react";
 
 // Available Icons: https://github.com/marella/material-icons?tab=readme-ov-file#available-icons
 export default function MuiIconFont(props: MuiIconFontProps) {
-  const { name, ...iconProps } = props;
-  return <Icon {...iconProps}>{name}</Icon>;
+  const { name, variant, ...iconProps } = props;
+
+  let icon = <Icon {...iconProps}>{name}</Icon>;
+
+  if (variant === "outlined") {
+    icon = (
+      <Icon {...iconProps} className="material-icons-outlined">
+        {name}
+      </Icon>
+    );
+  } else if (variant === "rounded") {
+    icon = (
+      <Icon {...iconProps} className="material-icons-rounded">
+        {name}
+      </Icon>
+    );
+  } else if (variant === "sharp") {
+    icon = (
+      <Icon {...iconProps} className="material-icons-sharp">
+        {name}
+      </Icon>
+    );
+  }
+
+  return icon;
 }
 
 type MuiIconFontProps = IconProps & {
   name: string;
+  variant?: "filled" | "outlined" | "rounded" | "sharp";
 };
diff --git a/app/packages/core/src/plugins/SchemaIO/components/ModalView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ModalView.tsx
new file mode 100644
index 0000000000..7588db49c0
--- /dev/null
+++ b/app/packages/core/src/plugins/SchemaIO/components/ModalView.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import ModalBase from "@fiftyone/components/src/components/ModalBase/ModalBase";
+
+export default function ModalView(props) {
+  const { schema } = props;
+  const { view = {} } = schema;
+  const {
+    modal,
+    primaryButton,
+    secondaryButton,
+    functionality,
+    primaryCallback,
+    secondaryCallback,
+    ...remainingViewProps
+  } = view;
+
+  return (
+    <ModalBase
+      modal={modal}
+      primaryButton={primaryButton}
+      secondaryButton={secondaryButton}
+      functionality={functionality}
+      primaryCallback={primaryCallback}
+      secondaryCallback={secondaryCallback}
+      props={{
+        ...remainingViewProps,
+      }}
+    />
+  );
+}
diff --git a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
index 787fabbd7d..afcb4e5d8e 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
@@ -1,5 +1,4 @@
 import { Box } from "@mui/material";
-import React from "react";
 import { getComponentProps } from "../utils";
 import PillBadge from "@fiftyone/components/src/components/PillBadge/PillBadge";
 
diff --git a/app/packages/core/src/plugins/SchemaIO/components/index.ts b/app/packages/core/src/plugins/SchemaIO/components/index.ts
index 50bdcca53c..d8809bd604 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/index.ts
+++ b/app/packages/core/src/plugins/SchemaIO/components/index.ts
@@ -17,6 +17,7 @@ export { default as FieldWrapper } from "./FieldWrapper";
 export { default as FileDrop } from "./FileDrop";
 export { default as FileExplorerView } from "./FileExplorerView/FileExplorerView";
 export { default as FileView } from "./FileView";
+export { default as FrameLoaderView } from "./FrameLoaderView";
 export { default as GridView } from "./GridView";
 export { default as Header } from "./Header";
 export { default as HeaderView } from "./HeaderView";
@@ -32,9 +33,11 @@ export { default as ListView } from "./ListView";
 export { default as LoadingView } from "./LoadingView";
 export { default as MapView } from "./MapView";
 export { default as MarkdownView } from "./MarkdownView";
+export { default as ModalView } from "./ModalView";
 export { default as MediaPlayerView } from "./MediaPlayerView";
 export { default as ObjectView } from "./ObjectView";
 export { default as OneOfView } from "./OneOfView";
+export { default as PillBadgeView } from "./PillBadgeView";
 export { default as PlotlyView } from "./PlotlyView";
 export { default as PrimitiveView } from "./PrimitiveView";
 export { default as ProgressView } from "./ProgressView";
@@ -45,9 +48,6 @@ export { default as SwitchView } from "./SwitchView";
 export { default as TableView } from "./TableView";
 export { default as TabsView } from "./TabsView";
 export { default as TagsView } from "./TagsView";
-export { default as TextView } from "./TextView";
 export { default as TextFieldView } from "./TextFieldView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";
-export { default as FrameLoaderView } from "./FrameLoaderView";
-export { default as PillBadgeView } from "./PillBadgeView";
diff --git a/app/packages/operators/src/types.ts b/app/packages/operators/src/types.ts
index fa12e4b54f..8a9353aa4b 100644
--- a/app/packages/operators/src/types.ts
+++ b/app/packages/operators/src/types.ts
@@ -1111,20 +1111,6 @@ export class FieldView extends View {
   }
 }
 
-/**
- * Operator class for describing a TextView {@link View} for an
- * operator type.
- */
-export class TextView extends View {
-  constructor(options: ViewProps) {
-    super(options);
-    this.name = "TextView";
-  }
-  static fromJSON(json) {
-    return new TextView(json);
-  }
-}
-
 /**
  * Operator class for describing a TextFieldView {@link View} for an
  * operator type.
@@ -1168,6 +1154,34 @@ export class IconButtonView extends Button {
   }
 }
 
+/**
+ * Operator class for describing a PillBadgeView {@link View} for an
+ * operator type.
+ */
+export class PillBadgeView extends View {
+  constructor(options: ViewProps) {
+    super(options);
+    this.name = "PillBadgeView";
+  }
+  static fromJSON(json) {
+    return new PillBadgeView(json);
+  }
+}
+
+/**
+ * Operator class for describing a ModalView {@link Button} for an
+ * operator type.
+ */
+export class ModalView extends Button {
+  constructor(options: ViewProps) {
+    super(options);
+    this.name = "ModalView";
+  }
+  static fromJSON(json) {
+    return new ModalView(json);
+  }
+}
+
 /**
  * Places where you can have your operator placement rendered.
  */
@@ -1234,9 +1248,10 @@ const VIEWS = {
   MediaPlayerView,
   PromptView,
   FieldView,
-  TextView,
   TextFieldView,
   LazyFieldView,
+  PillBadgeView,
+  ModalView,
 };
 
 export function typeFromJSON({ name, ...rest }): ANY_TYPE {
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index 5725a8f910..a062bdbb70 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1472,24 +1472,11 @@ def __init__(self, **kwargs):
 class LoadingView(ReadOnlyView):
     """Displays a loading indicator.
 
-    Examples::
-
-        schema_dots = {
-            text: "Loading dots only"
-        }
-        schema_spinner = {
-            variant: "spinner",
-            color: "primary",
-            size: "medium",
-        }
-        loading_dots = types.LoadingView(**schema_dots)
-        loading_spinner = types.LoadingView(**schema_spinner)
-
     Args:
-        text (None): a label for the loading indicator
-        variant (None): the variant of the loading indicator
-        color (None): the color of the loading indicator
-        size (None): the size of the loading indicator
+        text ("Loading"): a label for the loading indicator
+        variant ("spinner"): the variant of the loading indicator
+        color ("primary"): the color of the loading indicator
+        size ("medium"): the size of the loading indicator
     """
 
     def __init__(self, **kwargs):
@@ -1499,36 +1486,11 @@ def __init__(self, **kwargs):
 class PillBadgeView(ReadOnlyView):
     """Displays a pill shaped badge.
 
-    Examples::
-
-        schema_options_single_color = {
-            text: ["Reviewed", "Not Reviewed"],
-            color: "primary",
-            variant: "outlined",
-            show_icon: True
-        }
-
-         schema_options_multi_color = {
-            text: [["Not Started", "primary"], ["Reviewed", "success"], ["In Review", "warning"]],
-            color: "primary",
-            variant: "outlined",
-            show_icon: True
-        }
-
-         schema_single_option= {
-            text: "Reviewed",
-            color: "primary",
-            variant: "outlined",
-            show_icon: True
-        }
-        badge = types.PillBadgeView(**schema_options_single_color)
-
-
     Args:
-        text: a label or set of label options with or without a color for the pill badge
-        color (None): the color of the pill
-        variant (None): the variant of the pill
-        show_icon (None): whether to display indicator icon
+        text ("Reviewed" | ["Reviewed", "Not Reviewed"] | [["Not Started", "primary"], ["Reviewed", "success"], ["In Review", "warning"]): a label or set of label options with or without a color for the pill badge
+        color ("primary"): the color of the pill
+        variant ("outlined"): the variant of the pill
+        show_icon (False | True): whether to display indicator icon
     """
 
     def __init__(self, **kwargs):
@@ -1892,18 +1854,6 @@ def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
 
-class TextView(View):
-    """Displays a text.
-
-    .. note::
-
-        Must be used with :class:`String` properties.
-    """
-
-    def __init__(self, **kwargs):
-        super().__init__(**kwargs)
-
-
 class TextFieldView(View):
     """Displays a text input.
 
@@ -2373,6 +2323,50 @@ def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
 
+class ModalView(Button):
+    """Represents a button in a :class:`View` that opens up an interactive modal.
+
+    Examples::
+
+        import fiftyone.operators.types as types
+
+        schema = {
+            "modal": {"icon": "local_offer", "iconVariant": "outlined", "title": "Modal Title", "subtitle": "Modal Subtitle", "body": "Modal Body", textAlign: {title: "center", subtitle: "left", body: "right"}},
+            "primaryButton": {"primaryText": "This is the primary button", "primaryColor": "primary", "params": {"foo": "bar", "multiple": True}},
+            "secondaryButton": {"secondaryText": "This is the secondary button", "secondaryColor": "secondary"},
+            "primaryCallback": self.do_something(),
+            "secondaryCallback": self.do_nothing(),
+            "functionality": "tagging",
+        }
+        modal = types.ModalView(**schema, label="This is a modal", variant="outlined", icon="local_offer")
+
+        .. note::
+            The primary callback is called when the primary button is clicked and the secondary callback is called when the secondary button is clicked.
+            Secondary callback defaults to a closure of the modal unless defined.
+            Buttons of ModalView inherit all functionality of ButtonView.
+
+        inputs = types.Object()
+        inputs.view("modal_btn", modal)
+
+    Args:
+        modal: the textual content of the modal
+        primaryButton (None): the properties of the primary button
+        secondaryButton (None): the properties of the secondary button
+        primaryCallback (None): the function to execute when the primary button is clicked
+        secondaryCallback (None): the function to execute when the secondary button is clicked
+        functionality (None): the name of the functionality to execute when the primary button is clicked. Available options are 'tagging'
+    """
+
+    def __init__(self, **kwargs):
+        if "primaryCallback" not in kwargs or not callable(
+            kwargs["primaryCallback"]
+        ):
+            raise ValueError(
+                "The 'primaryCallback' parameter is missing or must be function that is callable."
+            )
+        super().__init__(**kwargs)
+
+
 class HStackView(GridView):
     """Displays properties of an object as a horizontal stack of components.
 

From 947731c767908c9f20ded38916604b667b906dd4 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 22 Oct 2024 11:50:52 -0600
Subject: [PATCH 34/39] pill badge onChange patch

---
 .../src/components/PillBadge/PillBadge.tsx    | 23 ++++++++++++++++++-
 .../SchemaIO/components/PillBadgeView.tsx     |  3 ++-
 fiftyone/operators/types.py                   |  2 +-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
index a284faf6ad..d9fc4f4b32 100644
--- a/app/packages/components/src/components/PillBadge/PillBadge.tsx
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -1,17 +1,21 @@
 import React, { useState } from "react";
 import CircleIcon from "@mui/icons-material/Circle";
 import { Chip, FormControl, MenuItem, Select } from "@mui/material";
+import { usePanelEvent } from "@fiftyone/operators";
+import { usePanelId } from "@fiftyone/spaces";
 
 const PillBadge = ({
   text,
   color = "default",
   variant = "filled",
   showIcon = true,
+  operator,
 }: {
   text: string | string[] | [string, string][];
   color?: string;
   variant?: "filled" | "outlined";
   showIcon?: boolean;
+  operator?: () => void;
 }) => {
   const getInitialChipSelection = (
     text: string | string[] | [string, string][]
@@ -59,6 +63,9 @@ const PillBadge = ({
     paddingLeft: 1,
   };
 
+  const panelId = usePanelId();
+  const handleClick = usePanelEvent();
+
   return (
     <span>
       {typeof text === "string" ? (
@@ -102,6 +109,12 @@ const PillBadge = ({
                     );
                     setChipSelection(event.target.value);
                     setChipColor(selectedText?.[1] ?? "default");
+                    if (operator) {
+                      handleClick(panelId, {
+                        params: { value: event.target.value },
+                        operator,
+                      });
+                    }
                   }}
                   sx={{
                     color: "inherit",
@@ -118,7 +131,15 @@ const PillBadge = ({
                   value={chipSelection}
                   variant={"standard"}
                   disableUnderline={true}
-                  onChange={(event) => setChipSelection(event.target.value)}
+                  onChange={(event) => {
+                    setChipSelection(event.target.value);
+                    if (operator) {
+                      handleClick(panelId, {
+                        params: { value: event.target.value },
+                        operator,
+                      });
+                    }
+                  }}
                   sx={{
                     color: "inherit",
                   }}
diff --git a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
index afcb4e5d8e..1e2caaeb26 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
@@ -4,7 +4,7 @@ import PillBadge from "@fiftyone/components/src/components/PillBadge/PillBadge";
 
 export default function PillBadgeView(props) {
   const { schema } = props;
-  const { view = {} } = schema;
+  const { view = {}, onChange } = schema;
   const { text, color, variant, showIcon } = view;
 
   return (
@@ -14,6 +14,7 @@ export default function PillBadgeView(props) {
         color={color}
         variant={variant}
         showIcon={showIcon}
+        operator={onChange}
         {...getComponentProps(props, "pillBadge")}
       />
     </Box>
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index a062bdbb70..3d5185450b 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1483,7 +1483,7 @@ def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
 
-class PillBadgeView(ReadOnlyView):
+class PillBadgeView(View):
     """Displays a pill shaped badge.
 
     Args:

From cb7dfec084fde6d5c2449b297f8d988d5ebe9214 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 22 Oct 2024 12:10:20 -0600
Subject: [PATCH 35/39] ModalView enhancement

---
 .../src/components/ModalBase/ModalBase.tsx    | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/packages/components/src/components/ModalBase/ModalBase.tsx b/app/packages/components/src/components/ModalBase/ModalBase.tsx
index 30321d3bc8..e2fc972a0b 100644
--- a/app/packages/components/src/components/ModalBase/ModalBase.tsx
+++ b/app/packages/components/src/components/ModalBase/ModalBase.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import ButtonView from "@fiftyone/core/src/plugins/SchemaIO/components/ButtonView";
 import { Box, Modal, Typography } from "@mui/material";
 import DisplayTags from "./DisplayTags";
@@ -21,6 +21,7 @@ interface ModalBaseProps {
     align?: string;
     width?: string;
     onClick?: any;
+    disabled?: boolean;
     primaryText: string;
     primaryColor: string;
   };
@@ -32,6 +33,7 @@ interface ModalBaseProps {
     align?: string;
     width?: string;
     onClick?: any;
+    disabled?: boolean;
     secondaryText: string;
     secondaryColor: string;
   };
@@ -125,6 +127,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
     params: primaryButton?.params,
     href: primaryButton?.href,
     prompt: primaryButton?.prompt,
+    disabled: primaryButton?.disabled,
     componentsProps: {
       button: {
         sx: {
@@ -145,6 +148,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
     params: secondaryButton?.params,
     href: secondaryButton?.href,
     prompt: secondaryButton?.prompt,
+    disabled: secondaryButton?.disabled,
     componentsProps: {
       button: {
         sx: {
@@ -161,6 +165,19 @@ const ModalBase: React.FC<ModalBaseProps> = ({
   {
     /* TAGGING FUNCTIONALITY */
   }
+  useEffect(() => {
+    if (
+      (functionality === "tagging" || functionality === "Tagging") &&
+      (!primaryButtonView.params ||
+        !primaryButtonView.params.tags ||
+        primaryButtonView.params.tags.length === 0)
+    ) {
+      setPrimaryButtonView({ ...primaryButtonView, disabled: true });
+    } else {
+      setPrimaryButtonView({ ...primaryButtonView, disabled: false });
+    }
+  }, [functionality, primaryButtonView, primaryButtonView.params]);
+
   const handleSaveTags = useCallback((tags: string[]) => {
     setPrimaryButtonView((prevButtonView) => ({
       ...prevButtonView,
@@ -213,7 +230,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
           <Typography id="modal-body" sx={{ my: 1, textAlign: bodyAlign }}>
             {body}
           </Typography>
-          {functionality === "tagging" && (
+          {(functionality === "tagging" || functionality === "Tagging") && (
             <DisplayTags saveTags={handleSaveTags} />
           )}
           <Box

From 3d674892410a06e27673dcae3dfc12e49bbcb196 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 22 Oct 2024 13:02:56 -0600
Subject: [PATCH 36/39] review changes 1

---
 .../components/src/components/ModalBase/DisplayTags.tsx   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/packages/components/src/components/ModalBase/DisplayTags.tsx b/app/packages/components/src/components/ModalBase/DisplayTags.tsx
index 79c6132cee..935b23e18b 100644
--- a/app/packages/components/src/components/ModalBase/DisplayTags.tsx
+++ b/app/packages/components/src/components/ModalBase/DisplayTags.tsx
@@ -11,6 +11,13 @@ const DisplayTags: React.FC<DisplayTagsProps> = ({ saveTags }) => {
   const [chips, setChips] = useState<string[]>([]); // chips is an array of strings
   const [inputValue, setInputValue] = useState<string>(""); // inputValue is a string
 
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleAddChip();
+    }
+  };
+
   const handleAddChip = () => {
     if (inputValue.trim() !== "") {
       const updatedChips = [...chips, inputValue];
@@ -51,6 +58,7 @@ const DisplayTags: React.FC<DisplayTagsProps> = ({ saveTags }) => {
           label="Enter tag"
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyPress}
           fullWidth // Make TextField take up the remaining width
         />
         <IconButton onClick={handleAddChip} color="primary">

From 6f81d660ec92a92d9e74a63b865f56a2f9b09adb Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 22 Oct 2024 14:14:29 -0600
Subject: [PATCH 37/39] review changes 2

---
 .../src/components/MuiIconFont/index.tsx      | 52 ++++++++-----------
 fiftyone/operators/types.py                   |  6 ---
 2 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/app/packages/components/src/components/MuiIconFont/index.tsx b/app/packages/components/src/components/MuiIconFont/index.tsx
index b21f0f9f24..3f3e83467a 100644
--- a/app/packages/components/src/components/MuiIconFont/index.tsx
+++ b/app/packages/components/src/components/MuiIconFont/index.tsx
@@ -2,36 +2,30 @@ import { Icon, IconProps } from "@mui/material";
 import "material-icons/iconfont/material-icons.css";
 import React from "react";
 
-// Available Icons: https://github.com/marella/material-icons?tab=readme-ov-file#available-icons
-export default function MuiIconFont(props: MuiIconFontProps) {
-  const { name, variant, ...iconProps } = props;
-
-  let icon = <Icon {...iconProps}>{name}</Icon>;
-
-  if (variant === "outlined") {
-    icon = (
-      <Icon {...iconProps} className="material-icons-outlined">
-        {name}
-      </Icon>
-    );
-  } else if (variant === "rounded") {
-    icon = (
-      <Icon {...iconProps} className="material-icons-rounded">
-        {name}
-      </Icon>
-    );
-  } else if (variant === "sharp") {
-    icon = (
-      <Icon {...iconProps} className="material-icons-sharp">
-        {name}
-      </Icon>
-    );
-  }
-
-  return icon;
-}
-
 type MuiIconFontProps = IconProps & {
   name: string;
   variant?: "filled" | "outlined" | "rounded" | "sharp";
 };
+
+const defaultProps = { variant: "filled" as const };
+
+// Available Icons: https://github.com/marella/material-icons?tab=readme-ov-file#available-icons
+const MuiIconFont = React.memo(function MuiIconFont(props: MuiIconFontProps) {
+  const { name, variant = defaultProps.variant, ...iconProps } = props;
+
+  const variantClassMap = {
+    filled: "",
+    outlined: "material-icons-outlined",
+    rounded: "material-icons-rounded",
+    sharp: "material-icons-sharp",
+  };
+
+  const className = variant ? variantClassMap[variant] : "";
+
+  return (
+    <Icon {...iconProps} className={className || undefined}>
+      {name}
+    </Icon>
+  );
+});
+export default MuiIconFont;
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index 3d5185450b..3367192711 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -2358,12 +2358,6 @@ class ModalView(Button):
     """
 
     def __init__(self, **kwargs):
-        if "primaryCallback" not in kwargs or not callable(
-            kwargs["primaryCallback"]
-        ):
-            raise ValueError(
-                "The 'primaryCallback' parameter is missing or must be function that is callable."
-            )
         super().__init__(**kwargs)
 
 

From c2c3fccce2a39db58f044e21b790e86bd909a05b Mon Sep 17 00:00:00 2001
From: manivoxel51 <mani@voxel51.com>
Date: Tue, 22 Oct 2024 13:02:51 -0700
Subject: [PATCH 38/39] testing

---
 .../core/src/plugins/SchemaIO/components/index.ts |  1 +
 app/packages/operators/src/types.ts               | 15 +++++++++++++++
 fiftyone/operators/types.py                       | 10 ++++++++++
 3 files changed, 26 insertions(+)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/index.ts b/app/packages/core/src/plugins/SchemaIO/components/index.ts
index d8809bd604..ed79e70f65 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/index.ts
+++ b/app/packages/core/src/plugins/SchemaIO/components/index.ts
@@ -48,6 +48,7 @@ export { default as SwitchView } from "./SwitchView";
 export { default as TableView } from "./TableView";
 export { default as TabsView } from "./TabsView";
 export { default as TagsView } from "./TagsView";
+export { default as TextView } from "./TextView";
 export { default as TextFieldView } from "./TextFieldView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";
diff --git a/app/packages/operators/src/types.ts b/app/packages/operators/src/types.ts
index 8a9353aa4b..1f8d1b414c 100644
--- a/app/packages/operators/src/types.ts
+++ b/app/packages/operators/src/types.ts
@@ -1111,6 +1111,20 @@ export class FieldView extends View {
   }
 }
 
+/**
+ * Operator class for describing a TextView {@link View} for an
+ * operator type.
+ */
+export class TextView extends View {
+  constructor(options: ViewProps) {
+    super(options);
+    this.name = "TextView";
+  }
+  static fromJSON(json) {
+    return new TextView(json);
+  }
+}
+
 /**
  * Operator class for describing a TextFieldView {@link View} for an
  * operator type.
@@ -1248,6 +1262,7 @@ const VIEWS = {
   MediaPlayerView,
   PromptView,
   FieldView,
+  TextView,
   TextFieldView,
   LazyFieldView,
   PillBadgeView,
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index df215a7eb6..a0205ca1b7 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -1886,6 +1886,16 @@ def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
 
+class TextView(View):
+    """Displays a text.
+    .. note::
+        Must be used with :class:`String` properties.
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+
 class TextFieldView(View):
     """Displays a text input.
 

From a9fde0ad989478f2f33486a42a36c2fd3955ff22 Mon Sep 17 00:00:00 2001
From: Br2850 <bdbristol@gmail.com>
Date: Tue, 22 Oct 2024 15:31:06 -0600
Subject: [PATCH 39/39] infinite loop fix

---
 app/packages/components/src/components/ModalBase/ModalBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/packages/components/src/components/ModalBase/ModalBase.tsx b/app/packages/components/src/components/ModalBase/ModalBase.tsx
index e2fc972a0b..ea2857f336 100644
--- a/app/packages/components/src/components/ModalBase/ModalBase.tsx
+++ b/app/packages/components/src/components/ModalBase/ModalBase.tsx
@@ -176,7 +176,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
     } else {
       setPrimaryButtonView({ ...primaryButtonView, disabled: false });
     }
-  }, [functionality, primaryButtonView, primaryButtonView.params]);
+  }, [primaryButtonView.params]);
 
   const handleSaveTags = useCallback((tags: string[]) => {
     setPrimaryButtonView((prevButtonView) => ({