Merge release/v1.2.0 to develop

app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/Evaluate.tsx

@@ -1,13 +1,25 @@
 import { MuiButton } from "@fiftyone/components";
 import { Add } from "@mui/icons-material";
+import { Box } from "@mui/material";
 import React from "react";
 
 export default function Evaluate(props: EvaluateProps) {
-  const { onEvaluate } = props;
+  const { onEvaluate, permissions } = props;
+  const canEvaluate = permissions.can_evaluate;
   return (
-    <MuiButton onClick={onEvaluate} startIcon={<Add />} variant="contained">
-      Evaluate Model
-    </MuiButton>
+    <Box
+      title={canEvaluate ? "" : "You do not have permission to evaluate model"}
+      sx={{ cursor: canEvaluate ? "pointer" : "not-allowed" }}
+    >
+      <MuiButton
+        onClick={onEvaluate}
+        startIcon={<Add />}
+        variant="contained"
+        disabled={!canEvaluate}
+      >
+        Evaluate Model
+      </MuiButton>
+    </Box>
   );
 }
 

app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/Evaluation.tsx

@@ -51,6 +51,7 @@ import { formatValue, getNumericDifference, useTriggerEvent } from "./utils";
 const KEY_COLOR = "#ff6d04";
 const COMPARE_KEY_COLOR = "#03a9f4";
 const DEFAULT_BAR_CONFIG = { sortBy: "default" };
+const NONE_CLASS = "(none)";
 
 export default function Evaluation(props: EvaluationProps) {
   const {
@@ -611,20 +612,26 @@ export default function Evaluation(props: EvaluationProps) {
       <Card sx={{ p: 2 }}>
         <Stack direction="row" sx={{ justifyContent: "space-between" }}>
           <Typography color="secondary">Evaluation notes</Typography>
-          {can_edit_note && (
-            <Box>
-              <IconButton
-                size="small"
-                color="secondary"
-                sx={{ borderRadius: 16 }}
-                onClick={() => {
-                  setEditNoteState((note) => ({ ...note, open: true }));
-                }}
-              >
-                <EditNote />
-              </IconButton>
-            </Box>
-          )}
+          <Box
+            title={
+              can_edit_note
+                ? ""
+                : "You do not have permission to edit evaluation notes"
+            }
+            sx={{ cursor: can_edit_note ? "pointer" : "not-allowed" }}
+          >
+            <IconButton
+              size="small"
+              color="secondary"
+              sx={{ borderRadius: 16 }}
+              onClick={() => {
+                setEditNoteState((note) => ({ ...note, open: true }));
+              }}
+              disabled={!can_edit_note}
+            >
+              <EditNote />
+            </IconButton>
+          </Box>
         </Stack>
         <EvaluationNotes notes={evaluationNotes} variant="details" />
       </Card>
@@ -1656,12 +1663,23 @@ function getMatrix(matrices, config, maskTargets, compareMaskTargets?) {
   if (!matrices) return;
   const { sortBy = "az", limit } = config;
   const parsedLimit = typeof limit === "number" ? limit : undefined;
-  const classes = matrices[`${sortBy}_classes`].slice(0, parsedLimit);
-  const matrix = matrices[`${sortBy}_matrix`].slice(0, parsedLimit);
+  const originalClasses = matrices[`${sortBy}_classes`];
+  const originalMatrix = matrices[`${sortBy}_matrix`];
+  const classes = originalClasses.slice(0, parsedLimit);
+  const matrix = originalMatrix.slice(0, parsedLimit);
   const colorscale = matrices[`${sortBy}_colorscale`];
   const labels = classes.map((c) => {
     return compareMaskTargets?.[c] || maskTargets?.[c] || c;
   });
+  const noneIndex = originalClasses.indexOf(NONE_CLASS);
+  if (parsedLimit < originalClasses.length) {
+    labels.push(
+      compareMaskTargets?.[NONE_CLASS] ||
+        maskTargets?.[NONE_CLASS] ||
+        NONE_CLASS
+    );
+    matrix.push(originalMatrix[noneIndex]);
+  }
   return { labels, matrix, colorscale };
 }
 
@@ -1687,7 +1705,7 @@ function useActiveFilter(evaluation, compareEvaluation) {
     const { _cls, kwargs } = stage;
     if (_cls.endsWith("FilterLabels")) {
       const [_, filter] = kwargs;
-      const filterEq = filter[1].$eq;
+      const filterEq = filter[1].$eq || [];
       const [filterEqLeft, filterEqRight] = filterEq;
       if (filterEqLeft === "$$this.label") {
         return { type: "label", value: filterEqRight };

app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/Overview.tsx

@@ -97,7 +97,7 @@ function EvaluationCard(props: EvaluationCardProps) {
               }
             />
           )}
-          {status && <Status status={status} />}
+          {status && <Status status={status} readOnly />}
         </Stack>
         {note && <EvaluationNotes notes={note} variant="overview" />}
       </Card>

app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/Status.tsx

@@ -4,10 +4,10 @@ import React from "react";
 import { useTriggerEvent } from "./utils";
 
 export default function Status(props: StatusProps) {
-  const { status, canEdit, setStatusEvent } = props;
+  const { status, canEdit, readOnly, setStatusEvent } = props;
   const triggerEvent = useTriggerEvent();
 
-  if (canEdit) {
+  if (!readOnly) {
     return (
       <Select
         sx={{
@@ -22,6 +22,12 @@ export default function Status(props: StatusProps) {
         onChange={(e) => {
           triggerEvent(setStatusEvent, { status: e.target.value });
         }}
+        title={
+          canEdit
+            ? ""
+            : "You do not have permission to update evaluation status"
+        }
+        disabled={!canEdit}
       >
         {STATUSES.map((status) => {
           const color = COLOR_BY_STATUS[status];
@@ -63,7 +69,8 @@ export default function Status(props: StatusProps) {
 type StatusProps = {
   status?: string;
   canEdit?: boolean;
-  setStatusEvent?: string;
+  readOnly?: boolean;
+  setStatusEvent: string;
 };
 
 const STATUS_LABELS = {

app/packages/operators/src/CustomPanel.tsx

@@ -14,12 +14,14 @@
 import { Property } from "./types";
 import { CustomPanelProps, useCustomPanelHooks } from "./useCustomPanelHooks";
 import { useTrackEvent } from "@fiftyone/analytics";
+import usePanelEvent from "./usePanelEvent";
 
 export function CustomPanel(props: CustomPanelProps) {
   const { panelId, dimensions, panelName, panelLabel, isModalPanel } = props;
   const { height, width } = dimensions?.bounds || {};
   const { count } = useActivePanelEventsCount(panelId);
   const [_, setLoading] = usePanelLoading(panelId);
+  const triggerPanelEvent = usePanelEvent();
 
   const {
     handlePanelStateChange,
@@ -36,8 +38,9 @@
     setPanelCloseEffect(() => {
       clearUseKeyStores(panelId);
       trackEvent("close_panel", { panel: panelName });
+      triggerPanelEvent(panelId, { operator: props.onUnLoad });
     });
   }, []);
 
   useEffect(() => {
     setLoading(count > 0);
@@ -102,7 +105,7 @@
 
   useEffect(() => {
     dimensions?.refresh();
   }, []);
 
   return children;
 }

app/packages/operators/src/useCustomPanelHooks.ts

@@ -165,14 +165,6 @@ export function useCustomPanelHooks(props: CustomPanelProps): CustomPanelHooks {
     triggerPanelEvent,
   ]);
 
-  useEffect(() => {
-    return () => {
-      if (props.onUnLoad) {
-        triggerPanelEvent(panelId, { operator: props.onUnLoad });
-      }
-    };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
   const handlePanelStateChangeOpDebounced = useMemo(() => {
     return debounce(
       (state, onChange, panelId) => {