Update plugin components

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;

app/packages/components/src/components/PillBadge/PillBadge.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from "react";
+import CircleIcon from "@mui/icons-material/Circle";
+import { Chip, FormControl, MenuItem, Select } from "@mui/material";
+
+const PillBadge = ({
+  text,
+  color = "default",
+  variant = "filled",
+  showIcon = true,
+}: {
+  text: string | string[] | [string, string][];
+  color?: string;
+  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(
+    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,
+  };
+
+  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");
+                  }}
+                  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)}
+                  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;

app/packages/components/src/components/PillBadge/index.ts

@@ -0,0 +1 @@
+export { default as PillBadge } from "./PillBadge";

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);
   }