Add PillBadgeView to Python Panels

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

@@ -0,0 +1,140 @@
+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 [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"
+  );
+
+  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,
+    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) && 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/components/Modal/use-looker.ts

@@ -56,7 +56,7 @@ function useLooker<L extends fos.Lookers>({
     colorScheme;
     /** end refreshers */
 
-    !initialRef.current && looker.updateSample(sample);
+    !initialRef.current && looker.updateSample(sample.sample);
   }, [colorScheme, looker, sample]);
 
   useEffect(() => {

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

@@ -0,0 +1,22 @@
+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;
+  const { text, color, variant, showIcon } = view;
+
+  return (
+    <Box {...getComponentProps(props, "container")}>
+      <PillBadge
+        text={text}
+        color={color}
+        variant={variant}
+        showIcon={showIcon}
+        {...getComponentProps(props, "pillBadge")}
+      />
+    </Box>
+  );
+}

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";

e2e-pw/src/oss/specs/sidebar/frame-filtering.spec.ts

@@ -33,7 +33,7 @@ test.describe("frame filtering", () => {
       for name, disable in datasets:
         dataset = foz.load_zoo_dataset("quickstart-video", dataset_name=name, max_samples=1)
         dataset.app_config.disable_frame_filtering = disable
-        dataset.persist = True
+        dataset.persistent = True
         dataset.save()
       `
     );

fiftyone/operators/types.py

@@ -1475,6 +1475,20 @@ def __init__(self, **kwargs):
         super().__init__(**kwargs)
 
 
+class PillBadgeView(ReadOnlyView):
+    """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):
+        super().__init__(**kwargs)
+
+
 class PlotlyView(View):
     """Displays a Plotly chart.
 

fiftyone/utils/sam.py

@@ -271,14 +271,19 @@ def _forward_pass_boxes(self, imgs):
                 device=sam_predictor.device,
             )
 
-            masks, _, _ = sam_predictor.predict_torch(
+            masks, scores, _ = sam_predictor.predict_torch(
                 point_coords=None,
                 point_labels=None,
                 boxes=transformed_boxes,
                 multimask_output=False,
             )
             outputs.append(
-                {"boxes": input_boxes, "labels": labels, "masks": masks}
+                {
+                    "boxes": input_boxes,
+                    "labels": labels,
+                    "masks": masks,
+                    "scores": scores,
+                }
             )
 
         return outputs

fiftyone/utils/sam2.py

@@ -201,7 +201,7 @@ def _forward_pass_boxes(self, imgs):
                 device=sam2_predictor.device,
             )
 
-            masks, _, _ = sam2_predictor.predict(
+            masks, scores, _ = sam2_predictor.predict(
                 point_coords=None,
                 point_labels=None,
                 box=sam_boxes[None, :],
@@ -214,6 +214,9 @@ def _forward_pass_boxes(self, imgs):
                     "boxes": input_boxes,
                     "labels": labels,
                     "masks": torch.tensor(masks, device=sam2_predictor.device),
+                    "scores": torch.tensor(
+                        scores, device=sam2_predictor.device
+                    ),
                 }
             )