From 17614fb43751c33de98dc29fa99d9222cd021882 Mon Sep 17 00:00:00 2001
From: Lanny W <lanzhen@voxel51.com>
Date: Tue, 22 Oct 2024 17:23:51 -0500
Subject: [PATCH] Update plugin components (#4927)

---
 .../src/components/Loading/LoadingSpinner.tsx |  29 ++
 .../src/components/ModalBase/DisplayTags.tsx  |  88 ++++++
 .../src/components/ModalBase/ModalBase.tsx    | 270 +++++++++++++++++
 .../src/components/ModalBase/index.ts         |   1 +
 .../src/components/MuiIconFont/index.tsx      |  30 +-
 .../src/components/PillBadge/PillBadge.tsx    | 175 +++++++++++
 .../src/components/PillBadge/index.ts         |   1 +
 .../SchemaIO/components/ButtonView.tsx        |  37 ++-
 .../SchemaIO/components/DropdownView.tsx      |  98 +++++-
 .../plugins/SchemaIO/components/GridView.tsx  |  17 +-
 .../plugins/SchemaIO/components/Header.tsx    |   8 +-
 .../SchemaIO/components/LoadingView.tsx       |   9 +-
 .../plugins/SchemaIO/components/ModalView.tsx |  30 ++
 .../SchemaIO/components/PillBadgeView.tsx     |  22 ++
 .../SchemaIO/components/SliderView.tsx        | 280 ++++++++++++++++--
 .../plugins/SchemaIO/components/TextView.tsx  |  59 ++++
 .../src/plugins/SchemaIO/components/index.ts  |   5 +-
 .../core/src/plugins/SchemaIO/utils/style.ts  |   4 +
 app/packages/operators/src/types.ts           |  45 +++
 fiftyone/operators/types.py                   |  76 ++++-
 20 files changed, 1221 insertions(+), 63 deletions(-)
 create mode 100644 app/packages/components/src/components/Loading/LoadingSpinner.tsx
 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/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/ModalView.tsx
 create mode 100644 app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
 create mode 100644 app/packages/core/src/plugins/SchemaIO/components/TextView.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 00000000000..b14e99daf37
--- /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/components/src/components/ModalBase/DisplayTags.tsx b/app/packages/components/src/components/ModalBase/DisplayTags.tsx
new file mode 100644
index 00000000000..935b23e18b6
--- /dev/null
+++ b/app/packages/components/src/components/ModalBase/DisplayTags.tsx
@@ -0,0 +1,88 @@
+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 handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleAddChip();
+    }
+  };
+
+  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)}
+          onKeyDown={handleKeyPress}
+          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 00000000000..ea2857f3366
--- /dev/null
+++ b/app/packages/components/src/components/ModalBase/ModalBase.tsx
@@ -0,0 +1,270 @@
+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";
+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;
+    disabled?: boolean;
+    primaryText: string;
+    primaryColor: string;
+  };
+  secondaryButton?: {
+    href?: any;
+    prompt?: any;
+    params?: any;
+    operator?: any;
+    align?: string;
+    width?: string;
+    onClick?: any;
+    disabled?: boolean;
+    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,
+    disabled: primaryButton?.disabled,
+    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,
+    disabled: secondaryButton?.disabled,
+    componentsProps: {
+      button: {
+        sx: {
+          width: primaryButton?.width || "100%",
+          justifyContent: primaryButton?.align || "center",
+          ...secondaryButton,
+        },
+      },
+    },
+  });
+
+  // State options for functionality based on user input
+
+  {
+    /* 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 });
+    }
+  }, [primaryButtonView.params]);
+
+  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" || 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 00000000000..71cee8fb7d6
--- /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 50cbcf175f4..3f3e83467a7 100644
--- a/app/packages/components/src/components/MuiIconFont/index.tsx
+++ b/app/packages/components/src/components/MuiIconFont/index.tsx
@@ -2,12 +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, ...iconProps } = props;
-  return <Icon {...iconProps}>{name}</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/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
new file mode 100644
index 00000000000..d9fc4f4b328
--- /dev/null
+++ b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -0,0 +1,175 @@
+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][]
+  ) => {
+    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];
+    }
+    return "";
+  };
+
+  const getInitialChipColor = (
+    text: string | string[] | [string, string][],
+    color?: string
+  ) => {
+    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";
+    }
+    return "default";
+  };
+
+  const [chipSelection, setChipSelection] = useState(
+    getInitialChipSelection(text)
+  );
+  const [chipColor, setChipColor] = useState(getInitialChipColor(text, color));
+
+  const COLORS: { [key: string]: string } = {
+    default: "#999999",
+    primary: "#FFB682",
+    error: "error",
+    warning: "warning",
+    info: "info",
+    success: "#8BC18D",
+  };
+
+  const chipStyle: { [key: string]: string | number } = {
+    color: COLORS[chipColor || "default"] || COLORS.default,
+    fontSize: 14,
+    fontWeight: 500,
+    paddingLeft: 1,
+  };
+
+  const panelId = usePanelId();
+  const handleClick = usePanelEvent();
+
+  return (
+    <span>
+      {typeof text === "string" ? (
+        <Chip
+          icon={
+            showIcon ? (
+              <CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />
+            ) : undefined
+          }
+          label={text}
+          sx={{
+            ...chipStyle,
+            "& .MuiChip-icon": {
+              marginRight: "-7px",
+            },
+            "& .MuiChip-label": {
+              marginBottom: "1px",
+            },
+          }}
+          variant={variant as "filled" | "outlined" | undefined}
+        />
+      ) : (
+        <FormControl fullWidth>
+          <Chip
+            icon={
+              showIcon ? (
+                <CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />
+              ) : undefined
+            }
+            label={
+              Array.isArray(text) &&
+              text.length > 0 &&
+              Array.isArray(text[0]) ? (
+                <Select
+                  value={chipSelection}
+                  variant={"standard"}
+                  disableUnderline={true}
+                  onChange={(event) => {
+                    const selectedText = text.find(
+                      (t) => t[0] === event.target.value
+                    );
+                    setChipSelection(event.target.value);
+                    setChipColor(selectedText?.[1] ?? "default");
+                    if (operator) {
+                      handleClick(panelId, {
+                        params: { value: event.target.value },
+                        operator,
+                      });
+                    }
+                  }}
+                  sx={{
+                    color: "inherit",
+                  }}
+                >
+                  {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);
+                    if (operator) {
+                      handleClick(panelId, {
+                        params: { value: event.target.value },
+                        operator,
+                      });
+                    }
+                  }}
+                  sx={{
+                    color: "inherit",
+                  }}
+                >
+                  {text.map((t, index) => (
+                    <MenuItem key={index} value={t}>
+                      {t}
+                    </MenuItem>
+                  ))}
+                </Select>
+              )
+            }
+            sx={{
+              ...chipStyle,
+              "& .MuiChip-icon": {
+                marginRight: "-7px",
+              },
+              "& .MuiChip-label": {
+                marginBottom: "1px",
+              },
+              "& .MuiInput-input:focus": {
+                backgroundColor: "inherit",
+              },
+            }}
+            variant={variant as "filled" | "outlined" | undefined}
+          ></Chip>
+        </FormControl>
+      )}
+    </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 00000000000..45ed630ea28
--- /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/ButtonView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
index ae4b7b2becc..5778fa96ac1 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,18 @@ function getButtonProps(props: ViewPropsType): ButtonProps {
     };
   }
 
+  if (disabled) {
+    const [bgColor, textColor] = getDisabledColors();
+    baseProps.sx["&.Mui-disabled"] = {
+      backgroundColor: variant === "outlined" ? "inherit" : bgColor,
+      color: textColor,
+    };
+    if (["square", "outlined"].includes(variant)) {
+      baseProps.sx["&.Mui-disabled"].backgroundColor = (theme) =>
+        theme.palette.background.field;
+    }
+  }
+
   return baseProps;
 }
 
@@ -110,6 +127,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 +138,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/components/DropdownView.tsx b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
index 74c3bb09e5f..9e9894169e1 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
@@ -1,5 +1,5 @@
-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";
@@ -8,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) {
@@ -24,7 +32,10 @@ export default function DropdownView(props: ViewPropsType) {
     description,
     color,
     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);
 
@@ -52,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
@@ -78,10 +149,13 @@ export default function DropdownView(props: ViewPropsType) {
         autoFocus={autoFocus(props)}
         defaultValue={computedDefaultValue}
         size="small"
-        fullWidth
+        fullWidth={!icon}
         displayEmpty
         title={compact ? description : undefined}
         renderValue={(value) => {
+          if (icon) {
+            return renderIcon();
+          }
           const unselected = value?.length === 0;
           setSelected(!unselected);
           if (unselected) {
@@ -116,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/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx b/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx
index b6dec184d76..ac67009e549 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 {
   getAdjustedLayoutDimensions,
@@ -21,6 +20,7 @@ export default function GridView(props: ViewPropsType) {
   const propertiesAsArray = Object.entries(properties).map(([id, property]) => {
     return { id, ...property };
   });
+
   const parsedGap = parseGap(gap);
   const { height, width } = getAdjustedLayoutDimensions({
     height: props?.layout?.height,
@@ -30,11 +30,19 @@ export default function GridView(props: ViewPropsType) {
   });
 
   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) => {
@@ -49,7 +57,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,
           };
diff --git a/app/packages/core/src/plugins/SchemaIO/components/Header.tsx b/app/packages/core/src/plugins/SchemaIO/components/Header.tsx
index 0ad7c003ad4..d850cfaaf75 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/LoadingView.tsx b/app/packages/core/src/plugins/SchemaIO/components/LoadingView.tsx
index 719c6f3ec69..bf5bf4090e1 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>
   );
 }
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 00000000000..7588db49c0c
--- /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
new file mode 100644
index 00000000000..1e2caaeb26e
--- /dev/null
+++ b/app/packages/core/src/plugins/SchemaIO/components/PillBadgeView.tsx
@@ -0,0 +1,22 @@
+import { Box } from "@mui/material";
+import { getComponentProps } from "../utils";
+import PillBadge from "@fiftyone/components/src/components/PillBadge/PillBadge";
+
+export default function PillBadgeView(props) {
+  const { schema } = props;
+  const { view = {}, onChange } = schema;
+  const { text, color, variant, showIcon } = view;
+
+  return (
+    <Box {...getComponentProps(props, "container")}>
+      <PillBadge
+        text={text}
+        color={color}
+        variant={variant}
+        showIcon={showIcon}
+        operator={onChange}
+        {...getComponentProps(props, "pillBadge")}
+      />
+    </Box>
+  );
+}
diff --git a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
index 562b9c17f43..8bc576e7b16 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/SliderView.tsx
@@ -1,46 +1,270 @@
-import React, { useEffect, useRef } from "react";
-import { Slider } from "@mui/material";
-import FieldWrapper from "./FieldWrapper";
-import { autoFocus, getComponentProps } from "../utils";
-import { useKey } from "../hooks";
+import {
+  Box,
+  FormControl,
+  Grid,
+  MenuItem,
+  Select,
+  Slider,
+  TextField,
+  Typography,
+} from "@mui/material";
 import { isNumber } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useKey } from "../hooks";
+import { autoFocus, getComponentProps } from "../utils";
+import FieldWrapper from "./FieldWrapper";
+
+type ValueFormat = "flt" | "%";
+
+const valueLabelFormat = (
+  value: number,
+  min: number,
+  max: number,
+  valueFormat: ValueFormat,
+  valuePrecision = 0,
+  skipUnit = true
+) => {
+  const formattedValue =
+    valueFormat === "%"
+      ? (((value - min) / (max - min)) * 100).toFixed()
+      : 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);
-  const { type, min, max, multipleOf } = schema;
-  const computedMin = isNumber(min) ? min : 0;
-  const computedMax = isNumber(max) ? max : 100;
+
+  const {
+    min: schemaMin,
+    max: schemaMax,
+    multipleOf: schemaMultipleOf,
+    view,
+  } = schema;
+  const {
+    min: viewMin,
+    max: viewMax,
+    value_format: valueFormat = "%",
+    value_label_display: valueLabelDisplay = "on",
+    value_precision: valuePrecision = 2,
+    variant = null,
+    label_position: labelPosition = "left",
+    label = "Threshold",
+    viewMultipleOf = null,
+  } = view;
+
+  const multipleOf = viewMultipleOf || schemaMultipleOf;
+  const [min, max] = [
+    isNumber(viewMin) ? viewMin : isNumber(schemaMin) ? schemaMin : 0,
+    isNumber(viewMax) ? viewMax : isNumber(schemaMax) ? schemaMax : 100,
+  ];
+
   const computedMultipleOf = isNumber(multipleOf)
     ? multipleOf
-    : (computedMax - computedMin) / 100;
+    : (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 handleInputChange = (e, isMin: boolean) => {
+    const value = e.target.value;
+
+    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 (!Number.isNaN(floatValue)) {
+        isMin ? setMinText(value) : setMaxText(value);
+      }
+    }
+  };
+
+  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
+      );
+    }
+  };
+
+  // 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));
+  };
+
+  // Trigger actual onChange when the slider is released
+  const handleSliderCommit = (_, value: number) => {
+    onChange(path, value, schema);
+    setUserChanged();
+  };
+
+  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;
+  }
 
   return (
-    <FieldWrapper {...props}>
-      <Slider
-        min={computedMin}
-        max={computedMax}
-        step={computedMultipleOf}
-        key={key}
-        disabled={schema.view?.readOnly}
-        valueLabelDisplay="auto"
-        defaultValue={data}
-        onChange={(e, value: string) => {
-          onChange(path, type === "number" ? parseFloat(value) : value, schema);
-          setUserChanged();
-        }}
-        ref={sliderRef}
-        {...getComponentProps(props, "slider")}
-      />
-    </FieldWrapper>
+    <Box padding={2} py={4}>
+      <FieldWrapper {...props}>
+        <Grid container spacing={2} alignItems="center">
+          {labelPosition === "left" && label && (
+            <Grid item sx={{ width: "100px", overflow: "hidden" }}>
+              <Typography noWrap sx={{ textOverflow: "ellipsis" }}>
+                {label}
+              </Typography>
+            </Grid>
+          )}
+          <Grid item xs>
+            <Slider
+              min={min}
+              max={max}
+              step={computedMultipleOf}
+              key={key}
+              disabled={schema.view?.readOnly}
+              valueLabelDisplay={valueLabelDisplay}
+              value={data || [min, max]}
+              valueLabelFormat={(value) =>
+                valueLabelFormat(value, min, max, unit, valuePrecision, false)
+              }
+              onChange={handleSliderChange}
+              onChangeCommitted={handleSliderCommit}
+              ref={sliderRef}
+              {...getComponentProps(props, "slider")}
+            />
+          </Grid>
+          {variant === "withInputs" && (
+            <Grid container justifyContent="space-between" pl={1}>
+              <Grid item pl={labelPosition === "left" ? "100px" : "0"}>
+                <SliderInputField
+                  label="Min"
+                  value={minText}
+                  onChange={(e) => handleInputChange(e, true)}
+                  onKeyDown={(e) => handleKeyDown(e, true)}
+                  UnitSelection={UnitSelection}
+                />
+              </Grid>
+              <Grid item>
+                <SliderInputField
+                  label="Max"
+                  value={maxText}
+                  onChange={(e) => handleInputChange(e, false)}
+                  onKeyDown={(e) => handleKeyDown(e, false)}
+                  UnitSelection={UnitSelection}
+                />
+              </Grid>
+            </Grid>
+          )}
+        </Grid>
+      </FieldWrapper>
+    </Box>
   );
 }
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 00000000000..e3d39431bd2
--- /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",
+    font_size = "1rem",
+    title = "",
+    text_transform = "none",
+    variant = "body1",
+    bold = false,
+    italic = false,
+    align = "inherit",
+    no_wrap = false,
+    text_decoration = "none",
+    letter_spacing = "normal",
+    line_height = "normal",
+    font_family = "default",
+    width = "auto",
+    display_mode = "block",
+    padding = "1rem",
+  } = view;
+
+  const sx = {
+    font_family,
+    ...(bold ? { fontWeight: "bold" } : {}),
+    ...(italic ? { fontStyle: "italic" } : {}),
+    ...(no_wrap
+      ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }
+      : {}),
+  };
+
+  return (
+    <Box {...getComponentProps(props, "container")}>
+      <Typography
+        padding={padding}
+        display={display_mode}
+        width={width}
+        variant={variant}
+        color={color}
+        fontSize={font_size}
+        textTransform={text_transform}
+        align={align}
+        letterSpacing={letter_spacing}
+        noWrap={no_wrap}
+        lineHeight={line_height}
+        textDecoration={text_decoration}
+        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 bb0fca6f6eb..ed79e70f65d 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,7 +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";
-export { default as FrameLoaderView } from "./FrameLoaderView";
diff --git a/app/packages/core/src/plugins/SchemaIO/utils/style.ts b/app/packages/core/src/plugins/SchemaIO/utils/style.ts
index 54f0e25738d..cac07276557 100644
--- a/app/packages/core/src/plugins/SchemaIO/utils/style.ts
+++ b/app/packages/core/src/plugins/SchemaIO/utils/style.ts
@@ -8,6 +8,10 @@ export function getColorByCode(code: ColorType) {
   }
 }
 
+export function getDisabledColors() {
+  return ["var(--fo-palette-primary-main)", "var(--fo-palette-text-primary)"];
+}
+
 export function getFieldSx(options: FieldsetOptionsType) {
   const { color, variant } = options;
   const sx = {
diff --git a/app/packages/operators/src/types.ts b/app/packages/operators/src/types.ts
index 69d166db429..1f8d1b414ce 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.
@@ -1154,6 +1168,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.
  */
@@ -1220,8 +1262,11 @@ 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 fa5f4e0e9c9..a0205ca1b7e 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,
@@ -406,6 +409,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`
         """
@@ -1255,7 +1261,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(
@@ -1468,7 +1473,24 @@ 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):
+        super().__init__(**kwargs)
+
+
+class PillBadgeView(View):
+    """Displays a pill shaped badge.
+
+    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
     """
 
     def __init__(self, **kwargs):
@@ -1864,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.
 
@@ -2333,6 +2365,44 @@ 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):
+        super().__init__(**kwargs)
+
+
 class HStackView(GridView):
     """Displays properties of an object as a horizontal stack of components.
 
@@ -2393,6 +2463,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`
     """