From b43cfc3b06bc832a569c8b0e9b1dd7a17a754ced Mon Sep 17 00:00:00 2001
From: imanjra <ibrahim@voxel51.com>
Date: Fri, 15 Nov 2024 09:04:30 -0500
Subject: [PATCH] various model evaluation fixes and enhancements

---
 .../NativeModelEvaluationView/Evaluation.tsx  | 394 ++++++++++++++----
 .../EvaluationNotes.tsx                       |  13 +-
 .../EvaluationPlot.tsx                        |   2 +
 .../NativeModelEvaluationView/index.tsx       |   3 +-
 .../NativeModelEvaluationView/utils.ts        |  12 +-
 .../panels/model_evaluation/__init__.py       | 123 ++++--
 6 files changed, 427 insertions(+), 120 deletions(-)

diff --git a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/Evaluation.tsx b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/Evaluation.tsx
index 551bb638c3..7bd6a5a11d 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/Evaluation.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/Evaluation.tsx
@@ -1,4 +1,5 @@
 import { Dialog } from "@fiftyone/components";
+import { view } from "@fiftyone/state";
 import {
   ArrowBack,
   ArrowDropDown,
@@ -19,12 +20,15 @@ import {
   Box,
   Button,
   Card,
+  Checkbox,
   CircularProgress,
+  FormControlLabel,
   IconButton,
   MenuItem,
   Select,
   Stack,
   styled,
+  SxProps,
   Table,
   TableBody,
   TableCell,
@@ -37,6 +41,7 @@ import {
   useTheme,
 } from "@mui/material";
 import React, { useEffect, useMemo, useState } from "react";
+import { useRecoilState } from "recoil";
 import EvaluationNotes from "./EvaluationNotes";
 import EvaluationPlot from "./EvaluationPlot";
 import Status from "./Status";
@@ -44,6 +49,7 @@ import { formatValue, getNumericDifference, useTriggerEvent } from "./utils";
 
 const KEY_COLOR = "#ff6d04";
 const COMPARE_KEY_COLOR = "#03a9f4";
+const DEFAULT_BAR_CONFIG = { sortBy: "az" };
 
 export default function Evaluation(props: EvaluationProps) {
   const {
@@ -64,20 +70,18 @@ export default function Evaluation(props: EvaluationProps) {
   const [expanded, setExpanded] = React.useState("summary");
   const [mode, setMode] = useState("chart");
   const [editNoteState, setEditNoteState] = useState({ open: false, note: "" });
-  const [barConfigState, setBarConfigState] = useState({
-    sortBy: "",
-    limit: 0,
-  });
-  const [barConfigDialogState, setBarConfigDialogState] = useState({
-    open: false,
-    sortBy: "best",
-    limit: 20,
-  });
+  const [classPerformanceConfig, setClassPerformanceConfig] =
+    useState<PLOT_CONFIG_TYPE>({});
+  const [classPerformanceDialogConfig, setClassPerformanceDialogConfig] =
+    useState<PLOT_CONFIG_DIALOG_TYPE>(DEFAULT_BAR_CONFIG);
+  const [confusionMatrixConfig, setConfusionMatrixConfig] =
+    useState<PLOT_CONFIG_TYPE>({ log: true });
+  const [confusionMatrixDialogConfig, setConfusionMatrixDialogConfig] =
+    useState<PLOT_CONFIG_DIALOG_TYPE>(DEFAULT_BAR_CONFIG);
   const [metricMode, setMetricMode] = useState("chart");
   const [classMode, setClassMode] = useState("chart");
   const [performanceClass, setPerformanceClass] = useState("precision");
   const [loadingCompare, setLoadingCompare] = useState(false);
-  const [viewState, setViewState] = useState({ type: "", view: {} });
   const evaluation = useMemo(() => {
     const evaluation = data?.[`evaluation_${name}`];
     return evaluation;
@@ -87,11 +91,14 @@ export default function Evaluation(props: EvaluationProps) {
     return evaluation;
   }, [data]);
   const confusionMatrix = useMemo(() => {
-    return evaluation?.confusion_matrix;
-  }, [evaluation]);
+    return getMatrix(evaluation?.confusion_matrices, confusionMatrixConfig);
+  }, [evaluation, confusionMatrixConfig]);
   const compareConfusionMatrix = useMemo(() => {
-    return compareEvaluation?.confusion_matrix;
-  }, [compareEvaluation]);
+    return getMatrix(
+      compareEvaluation?.confusion_matrices,
+      confusionMatrixConfig
+    );
+  }, [compareEvaluation, confusionMatrixConfig]);
   const compareKeys = useMemo(() => {
     const keys: string[] = [];
     const evaluations = data?.evaluations || [];
@@ -125,12 +132,16 @@ export default function Evaluation(props: EvaluationProps) {
   }, [compareEvaluation, compareKey]);
 
   const triggerEvent = useTriggerEvent();
+  const activeFilter = useActiveFilter(evaluation, compareEvaluation);
 
   const closeNoteDialog = () => {
     setEditNoteState((note) => ({ ...note, open: false }));
   };
-  const closeBarConfigDialog = () => {
-    setBarConfigDialogState((state) => ({ ...state, open: false }));
+  const closeClassPerformanceConfigDialog = () => {
+    setClassPerformanceDialogConfig((state) => ({ ...state, open: false }));
+  };
+  const closeConfusionMatrixConfigDialog = () => {
+    setConfusionMatrixDialogConfig((state) => ({ ...state, open: false }));
   };
 
   if (!evaluation) {
@@ -360,6 +371,12 @@ export default function Evaluation(props: EvaluationProps) {
       value: evaluationMetrics.tp,
       compareValue: compareEvaluationMetrics.tp,
       filterable: true,
+      active:
+        activeFilter?.value === "tp"
+          ? activeFilter.isCompare
+            ? "compare"
+            : "selected"
+          : false,
     },
     {
       id: "fp",
@@ -368,6 +385,12 @@ export default function Evaluation(props: EvaluationProps) {
       compareValue: compareEvaluationMetrics.fp,
       lesserIsBetter: true,
       filterable: true,
+      active:
+        activeFilter?.value === "fp"
+          ? activeFilter.isCompare
+            ? "compare"
+            : "selected"
+          : false,
     },
     {
       id: "fn",
@@ -376,6 +399,12 @@ export default function Evaluation(props: EvaluationProps) {
       compareValue: compareEvaluationMetrics.fn,
       lesserIsBetter: true,
       filterable: true,
+      active:
+        activeFilter?.value === "fn"
+          ? activeFilter.isCompare
+            ? "compare"
+            : "selected"
+          : false,
     },
   ];
 
@@ -400,8 +429,12 @@ export default function Evaluation(props: EvaluationProps) {
   const performanceClasses = Object.keys(perClassPerformance);
   const classPerformance = formatPerClassPerformance(
     perClassPerformance[performanceClass],
-    barConfigState
+    classPerformanceConfig
   );
+  const selectedPoints =
+    activeFilter?.type === "label"
+      ? [classPerformance.findIndex((c) => c.id === activeFilter.value)]
+      : undefined;
 
   return (
     <Stack spacing={2} sx={{ p: 2 }}>
@@ -596,6 +629,7 @@ export default function Evaluation(props: EvaluationProps) {
                       lesserIsBetter,
                       filterable,
                       id: rowId,
+                      active,
                     } = row;
                     const difference = getNumericDifference(
                       value,
@@ -608,10 +642,20 @@ export default function Evaluation(props: EvaluationProps) {
                       1
                     );
                     const positiveRatio = ratio > 0;
-                    const ratioColor = positiveRatio ? "#8BC18D" : "#FF6464";
+                    const zeroRatio = ratio === 0;
+                    const negativeRatio = ratio < 0;
+                    const ratioColor = positiveRatio
+                      ? "#8BC18D"
+                      : negativeRatio
+                      ? "#FF6464"
+                      : theme.palette.text.tertiary;
                     const showTrophy = lesserIsBetter
                       ? difference < 0
                       : difference > 0;
+                    const activeStyle: SxProps = {
+                      backgroundColor: theme.palette.voxel["500"],
+                      color: "#FFFFFF",
+                    };
 
                     return (
                       <TableRow key={rowId}>
@@ -635,13 +679,19 @@ export default function Evaluation(props: EvaluationProps) {
                               )}
                               {filterable && (
                                 <IconButton
-                                  sx={{ p: 0 }}
+                                  sx={{
+                                    p: 0.25,
+                                    borderRadius: 0.5,
+                                    ...(active === "selected"
+                                      ? activeStyle
+                                      : {}),
+                                  }}
                                   onClick={() => {
                                     loadView("field", { field: rowId });
                                   }}
                                   title="Load view"
                                 >
-                                  <GridView sx={{ fontSize: 16 }} />
+                                  <GridView sx={{ fontSize: 14 }} />
                                 </IconButton>
                               )}
                             </Stack>
@@ -661,7 +711,13 @@ export default function Evaluation(props: EvaluationProps) {
 
                                 {filterable && (
                                   <IconButton
-                                    sx={{ p: 0 }}
+                                    sx={{
+                                      p: 0.25,
+                                      borderRadius: 0.5,
+                                      ...(active === "compare"
+                                        ? activeStyle
+                                        : {}),
+                                    }}
                                     onClick={() => {
                                       loadView("field", {
                                         field: rowId,
@@ -686,13 +742,22 @@ export default function Evaluation(props: EvaluationProps) {
                                     direction="row"
                                     sx={{ alignItems: "center" }}
                                   >
-                                    {positiveRatio ? (
+                                    {positiveRatio && (
                                       <ArrowDropUp sx={{ color: ratioColor }} />
-                                    ) : (
+                                    )}
+                                    {negativeRatio && (
                                       <ArrowDropDown
                                         sx={{ color: ratioColor }}
                                       />
                                     )}
+                                    {zeroRatio && (
+                                      <Typography
+                                        pr={1}
+                                        sx={{ color: ratioColor }}
+                                      >
+                                        —
+                                      </Typography>
+                                    )}
                                     <Typography
                                       sx={{
                                         fontSize: "12px",
@@ -854,6 +919,11 @@ export default function Evaluation(props: EvaluationProps) {
                 <Stack direction="row" sx={{ justifyContent: "space-between" }}>
                   <Typography color="secondary">
                     {CLASS_LABELS[performanceClass]} Per Class
+                    {getConfigLabel({
+                      config: classPerformanceConfig,
+                      type: "classPerformance",
+                      dashed: true,
+                    })}
                   </Typography>
                   <Stack
                     alignItems="flex-end"
@@ -895,7 +965,7 @@ export default function Evaluation(props: EvaluationProps) {
                     {classMode === "chart" && (
                       <IconButton
                         onClick={() => {
-                          setBarConfigDialogState((state) => ({
+                          setClassPerformanceDialogConfig((state) => ({
                             ...state,
                             open: true,
                           }));
@@ -919,7 +989,7 @@ export default function Evaluation(props: EvaluationProps) {
                           color: KEY_COLOR,
                         },
                         key: name,
-                        selectedpoints: viewState.view.selectedClasses,
+                        selectedpoints: selectedPoints,
                       },
                       {
                         histfunc: "sum",
@@ -933,29 +1003,14 @@ export default function Evaluation(props: EvaluationProps) {
                           color: COMPARE_KEY_COLOR,
                         },
                         key: compareKey,
-                        selectedpoints: viewState.view.selectedCompareClasses,
+                        selectedpoints: selectedPoints,
                       },
                     ]}
                     onClick={({ points }) => {
-                      const x = points[0]?.x;
-                      const key = points[0]?.data.key;
-                      const isCompare = key === compareKey;
-                      const index = points[0]?.pointIndices[0];
-                      const viewStateX = viewState.view.x;
-                      if (viewStateX === x) {
-                        setViewState({ type: "", view: {} });
-                        loadView("clear", {});
-                        return;
+                      if (selectedPoints?.[0] === points[0]?.pointIndices[0]) {
+                        return loadView("clear", {});
                       }
-                      setViewState({
-                        type: "class",
-                        view: {
-                          x,
-                          selectedClasses: isCompare ? [] : [index],
-                          selectedCompareClasses: isCompare ? [index] : [],
-                        },
-                      });
-                      loadView("class", { x });
+                      loadView("class", { x: points[0]?.x });
                     }}
                   />
                 )}
@@ -1039,6 +1094,23 @@ export default function Evaluation(props: EvaluationProps) {
               Confusion Matrices
             </AccordionSummary>
             <AccordionDetails>
+              <Stack direction="row" sx={{ justifyContent: "space-between" }}>
+                <Typography color="secondary">
+                  {getConfigLabel({ config: confusionMatrixConfig })}
+                </Typography>
+                <Box>
+                  <IconButton
+                    onClick={() => {
+                      setConfusionMatrixDialogConfig((state) => ({
+                        ...state,
+                        open: true,
+                      }));
+                    }}
+                  >
+                    <Settings />
+                  </IconButton>
+                </Box>
+              </Stack>
               <Stack direction={"row"} key={compareKey}>
                 <Stack sx={{ width: "100%" }}>
                   <Stack
@@ -1056,7 +1128,9 @@ export default function Evaluation(props: EvaluationProps) {
                         x: confusionMatrix?.labels,
                         y: confusionMatrix?.labels,
                         type: "heatmap",
-                        colorscale: "viridis",
+                        colorscale: confusionMatrixConfig.log
+                          ? confusionMatrix?.colorscale || "viridis"
+                          : "viridis",
                       },
                     ]}
                     onClick={({ points }) => {
@@ -1082,6 +1156,9 @@ export default function Evaluation(props: EvaluationProps) {
                           x: compareConfusionMatrix?.labels,
                           y: compareConfusionMatrix?.labels,
                           type: "heatmap",
+                          colorscale: confusionMatrixConfig.log
+                            ? compareConfusionMatrix?.colorscale || "viridis"
+                            : "viridis",
                         },
                       ]}
                     />
@@ -1163,7 +1240,7 @@ export default function Evaluation(props: EvaluationProps) {
           </Stack>
           <TextField
             multiline
-            rows={3}
+            rows={10}
             defaultValue={evaluationNotes}
             placeholder="Note (markdown) for the evaluation..."
             onChange={(e) => {
@@ -1194,9 +1271,9 @@ export default function Evaluation(props: EvaluationProps) {
         </Stack>
       </Dialog>
       <Dialog
-        open={barConfigDialogState.open}
+        open={Boolean(classPerformanceDialogConfig.open)}
         fullWidth
-        onClose={closeBarConfigDialog}
+        onClose={closeClassPerformanceConfigDialog}
         PaperProps={{
           sx: { background: (theme) => theme.palette.background.level2 },
         }}
@@ -1211,50 +1288,141 @@ export default function Evaluation(props: EvaluationProps) {
             <Select
               size="small"
               onChange={(e) => {
-                setBarConfigDialogState((state) => ({
+                setClassPerformanceDialogConfig((state) => ({
                   ...state,
                   sortBy: e.target.value as string,
                 }));
               }}
-              defaultValue={barConfigDialogState.sortBy}
+              defaultValue={classPerformanceDialogConfig.sortBy}
             >
-              <MenuItem value="best">Best Performing</MenuItem>
-              <MenuItem value="worst">Worst Performing</MenuItem>
+              {CLASS_PERFORMANCE_SORT_OPTIONS.map((option) => {
+                return (
+                  <MenuItem key={option.value} value={option.value}>
+                    {option.label}
+                  </MenuItem>
+                );
+              })}
             </Select>
           </Stack>
           <Stack spacing={1} pt={1}>
             <Typography color="secondary">Limit bars:</Typography>
             <TextField
-              defaultValue={barConfigDialogState.limit}
+              defaultValue={classPerformanceDialogConfig.limit}
               size="small"
               type="number"
               onChange={(e) => {
-                setBarConfigDialogState((state) => ({
+                const newLimit = parseInt(e.target.value);
+                setClassPerformanceDialogConfig((state) => {
+                  return {
+                    ...state,
+                    limit: isNaN(newLimit) ? undefined : newLimit,
+                  };
+                });
+              }}
+            />
+          </Stack>
+          <Stack direction="row" spacing={1} pt={2}>
+            <Button
+              variant="outlined"
+              color="secondary"
+              sx={{ width: "100%" }}
+              onClick={closeConfusionMatrixConfigDialog}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="contained"
+              sx={{ width: "100%" }}
+              onClick={() => {
+                setClassPerformanceConfig(classPerformanceDialogConfig);
+                closeClassPerformanceConfigDialog();
+              }}
+            >
+              Save
+            </Button>
+          </Stack>
+        </Stack>
+      </Dialog>
+      <Dialog
+        open={Boolean(confusionMatrixDialogConfig.open)}
+        fullWidth
+        onClose={closeConfusionMatrixConfigDialog}
+        PaperProps={{
+          sx: { background: (theme) => theme.palette.background.level2 },
+        }}
+      >
+        <Stack spacing={2} sx={{ p: 2 }}>
+          <Stack direction="row" spacing={1}>
+            <Settings />
+            <Typography>Display Options: Confusion Matrix</Typography>
+          </Stack>
+          <Stack spacing={1} pt={1}>
+            <Typography color="secondary">Sort by:</Typography>
+            <Select
+              size="small"
+              onChange={(e) => {
+                setConfusionMatrixDialogConfig((state) => ({
                   ...state,
-                  limit: parseInt(e.target.value),
+                  sortBy: e.target.value as string,
                 }));
               }}
+              defaultValue={confusionMatrixDialogConfig.sortBy}
+            >
+              {CONFUSION_MATRIX_SORT_OPTIONS.map((option) => {
+                return (
+                  <MenuItem key={option.value} value={option.value}>
+                    {option.label}
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </Stack>
+          <Stack spacing={1} pt={1}>
+            <Typography color="secondary">Limit classes:</Typography>
+            <TextField
+              defaultValue={confusionMatrixConfig.limit}
+              size="small"
+              type="number"
+              onChange={(e) => {
+                const newLimit = parseInt(e.target.value);
+                setConfusionMatrixDialogConfig((state) => {
+                  return {
+                    ...state,
+                    limit: isNaN(newLimit) ? undefined : newLimit,
+                  };
+                });
+              }}
             />
           </Stack>
+          <FormControlLabel
+            label="Use logarithmic colorscale"
+            control={
+              <Checkbox
+                defaultChecked={confusionMatrixConfig.log}
+                onChange={(e, checked) => {
+                  setConfusionMatrixDialogConfig((state) => ({
+                    ...state,
+                    log: checked,
+                  }));
+                }}
+              />
+            }
+          />
           <Stack direction="row" spacing={1} pt={2}>
             <Button
               variant="outlined"
               color="secondary"
               sx={{ width: "100%" }}
-              onClick={closeBarConfigDialog}
+              onClick={closeConfusionMatrixConfigDialog}
             >
               Cancel
             </Button>
             <Button
               variant="contained"
               sx={{ width: "100%" }}
-              disabled={
-                barConfigDialogState.sortBy === "" ||
-                barConfigDialogState.limit === 0
-              }
               onClick={() => {
-                setBarConfigState(barConfigDialogState);
-                closeBarConfigDialog();
+                setConfusionMatrixConfig(confusionMatrixDialogConfig);
+                closeConfusionMatrixConfigDialog();
               }}
             >
               Save
@@ -1314,14 +1482,100 @@ const CLASSES = Object.keys(CLASS_LABELS);
 const EXCLUDED_CLASSES = ["macro avg", "micro avg", "weighted avg"];
 
 function formatPerClassPerformance(perClassPerformance, barConfig) {
-  if (!barConfig.sortBy || !barConfig.limit) return perClassPerformance;
+  const { limit, sortBy } = barConfig;
+  if (!sortBy && !limit) return perClassPerformance;
+
+  let computedPerClassPerformance = perClassPerformance;
+  if (sortBy && sortBy !== DEFAULT_BAR_CONFIG.sortBy) {
+    computedPerClassPerformance = perClassPerformance.sort((a, b) => {
+      if (sortBy === "best") {
+        return b.value - a.value;
+      } else if (sortBy === "worst") {
+        return a.value - b.value;
+      } else {
+        return b.property.localeCompare(a.property);
+      }
+    });
+  }
+
+  if (typeof limit === "number") {
+    return computedPerClassPerformance.slice(0, limit);
+  }
+  return computedPerClassPerformance;
+}
 
-  const sorted = perClassPerformance.sort((a, b) => {
-    if (barConfig.sortBy === "best") {
-      return b.value - a.value;
-    } else {
-      return a.value - b.value;
+function getMatrix(matrices, config) {
+  if (!matrices) return;
+  const { sortBy = "az", limit } = config;
+  const parsedLimit = typeof limit === "number" ? limit : undefined;
+  const classes = matrices[`${sortBy}_classes`].slice(parsedLimit);
+  const matrix = matrices[`${sortBy}_matrix`].slice(parsedLimit);
+  const colorscale = matrices[`${sortBy}_colorscale`];
+  return { labels: classes, matrix, colorscale };
+}
+
+function getConfigLabel({ config, type, dashed }) {
+  const { sortBy } = config;
+  if (!sortBy) return "";
+  const sortByLabels =
+    type === "classPerformance"
+      ? CLASS_PERFORMANCE_SORT_OPTIONS
+      : CONFUSION_MATRIX_SORT_OPTIONS;
+  const sortByLabel = sortByLabels.find(
+    (option) => option.value === sortBy
+  )?.label;
+  return dashed ? ` - ${sortByLabel}` : sortByLabel;
+}
+
+function useActiveFilter(evaluation, compareEvaluation) {
+  const evalKey = evaluation?.info?.key;
+  const compareKey = compareEvaluation?.info?.key;
+  const [stages] = useRecoilState(view);
+  if (stages?.length === 1) {
+    const stage = stages[0];
+    const { _cls, kwargs } = stage;
+    if (_cls.endsWith("FilterLabels")) {
+      const [_, filter] = kwargs;
+      const filterEq = filter[1].$eq;
+      const [filterEqLeft, filterEqRight] = filterEq;
+      if (filterEqLeft === "$$this.label") {
+        return { type: "label", value: filterEqRight };
+      } else if (filterEqLeft === `$$this.${evalKey}`) {
+        return {
+          type: "metric",
+          value: filterEqRight,
+          isCompare: false,
+        };
+      } else if (filterEqLeft === `$$this.${compareKey}`) {
+        return {
+          type: "metric",
+          value: filterEqRight,
+          isCompare: true,
+        };
+      }
     }
-  });
-  return sorted.slice(0, barConfig.limit);
+  }
 }
+
+const CLASS_PERFORMANCE_SORT_OPTIONS = [
+  { value: "az", label: "Alphabetical (A-Z)" },
+  { value: "za", label: "Alphabetical (Z-A)" },
+  { value: "best", label: "Best performing" },
+  { value: "worst", label: "Worst performing" },
+];
+const CONFUSION_MATRIX_SORT_OPTIONS = [
+  { value: "az", label: "Alphabetical (A-Z)" },
+  { value: "za", label: "Alphabetical (Z-A)" },
+  { value: "mc", label: "Most common classes" },
+  { value: "lc", label: "Least common classes" },
+];
+
+type PLOT_CONFIG_TYPE = {
+  sortBy?: string;
+  limit?: number;
+  log?: boolean;
+};
+
+type PLOT_CONFIG_DIALOG_TYPE = PLOT_CONFIG_TYPE & {
+  open?: boolean;
+};
diff --git a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EvaluationNotes.tsx b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EvaluationNotes.tsx
index c0257ffae3..f281813486 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EvaluationNotes.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EvaluationNotes.tsx
@@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useLayoutEffect } from "react";
 
 const DEFAULT_NOTE =
   "No evaluation notes added yet. Click the edit button to add evaluation notes.";
-const MAX_NOTES_HEIGHT = 72;
+const MAX_NOTES_HEIGHT = 128;
 
 export default function EvaluationNotes(props: EvaluationNotesProps) {
   const { notes, variant = "overview" } = props;
@@ -35,11 +35,8 @@ export default function EvaluationNotes(props: EvaluationNotesProps) {
 
   if (!hasNotes && !showDefault) return null;
 
-  const color = hasNotes
-    ? variant === "overview"
-      ? "secondary"
-      : "primary"
-    : "tertiary";
+  const isOverview = variant === "overview";
+  const color = hasNotes ? (isOverview ? "secondary" : "primary") : "tertiary";
 
   return (
     <Box>
@@ -57,7 +54,7 @@ export default function EvaluationNotes(props: EvaluationNotesProps) {
           <Markdown>{notes || DEFAULT_NOTE}</Markdown>
         </Typography>
       </Box>
-      {isTruncated && (
+      {isTruncated && !isOverview && (
         <Box
           sx={{
             background: `linear-gradient(to bottom, hsla(200, 0%, ${
@@ -67,7 +64,7 @@ export default function EvaluationNotes(props: EvaluationNotesProps) {
             }) 100%)`,
             position: "relative",
             top: expanded ? 0 : "-12px",
-            p: "12px 4px 4px 4px",
+            p: 0.5,
           }}
         >
           <Button
diff --git a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EvaluationPlot.tsx b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EvaluationPlot.tsx
index e5963dfd81..81c8dee348 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EvaluationPlot.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/EvaluationPlot.tsx
@@ -50,12 +50,14 @@ export default function EvaluationPlot(props: EvaluationPlotProps) {
       scrollZoom: false,
       modeBarButtonsToRemove: [
         "autoScale2d",
+        "select2d",
         "lasso2d",
         "pan2d",
         "resetScale2d",
         "zoom2d",
         "zoomIn2d",
         "zoomOut2d",
+        "toImage",
       ],
     };
   }, []);
diff --git a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/index.tsx b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/index.tsx
index 191189e567..056e5e92f6 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/index.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/index.tsx
@@ -40,7 +40,8 @@ export default function NativeModelEvaluationView(props) {
     }, {});
   }, [computedEvaluations]);
   const { page = "overview", key, id, compareKey } = viewState;
-  const showEmptyOverview = computedEvaluations.length === 0;
+  const showEmptyOverview =
+    computedEvaluations.length === 0 && pending_evaluations.length === 0;
   const triggerEvent = useTriggerEvent();
 
   return (
diff --git a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/utils.ts b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/utils.ts
index 1d63ac6dc7..44e7ffec33 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/utils.ts
+++ b/app/packages/core/src/plugins/SchemaIO/components/NativeModelEvaluationView/utils.ts
@@ -17,16 +17,18 @@ export function useTriggerEvent() {
 }
 
 export function getNumericDifference(
-  a,
-  b,
+  value,
+  compareValue,
   percentage = false,
   fractionDigits?: number
 ) {
-  if (typeof a === "number" && typeof b === "number") {
+  if (typeof value === "number" && typeof compareValue === "number") {
+    const difference = value - compareValue;
     if (percentage) {
-      return formatValue(((a - b) / a) * 100, fractionDigits);
+      const percentageDifference = (difference / compareValue) * 100;
+      return formatValue(percentageDifference, fractionDigits);
     }
-    return formatValue(a - b, fractionDigits);
+    return formatValue(difference, fractionDigits);
   }
 }
 
diff --git a/fiftyone/operators/builtins/panels/model_evaluation/__init__.py b/fiftyone/operators/builtins/panels/model_evaluation/__init__.py
index 5054c00612..e869fe5b5c 100644
--- a/fiftyone/operators/builtins/panels/model_evaluation/__init__.py
+++ b/fiftyone/operators/builtins/panels/model_evaluation/__init__.py
@@ -6,14 +6,15 @@
 |
 """
 
-from collections import defaultdict
+import os
 import traceback
+import fiftyone.operators.types as types
 
+from collections import defaultdict, Counter
 from fiftyone import ViewField as F
 from fiftyone.operators.categories import Categories
 from fiftyone.operators.panel import Panel, PanelConfig
-from fiftyone.operators.utils import is_new
-import fiftyone.operators.types as types
+from fiftyone.core.plots.plotly import _to_log_colorscale
 
 
 STORE_NAME = "model_evaluation_panel_builtin"
@@ -24,6 +25,11 @@
 }
 EVALUATION_TYPES_WITH_CONFIDENCE = ["detection", "classification"]
 EVALUATION_TYPES_WITH_IOU = ["detection"]
+TRUTHY_VALUES = ["true", "True", "1", 1]
+ENABLE_CACHING = (
+    os.environ.get("FIFTYONE_DISABLE_EVALUATION_CACHING") not in TRUTHY_VALUES
+)
+CACHE_TTL = 30 * 24 * 60 * 60  # 30 days in seconds
 
 
 class EvaluationPanel(Panel):
@@ -35,7 +41,6 @@ def config(self):
             icon="ssid_chart",
             category=Categories.ANALYZE,
             beta=True,
-            is_new=is_new("2024-11-07"),
         )
 
     def get_dataset_id(self, ctx):
@@ -231,10 +236,42 @@ def get_per_class_metrics(self, info, results):
                 per_class_metrics[c]["support"] = c_report["support"]
         return per_class_metrics
 
-    def get_confusion_matrix(self, results):
-        matrix = results.confusion_matrix()
+    def get_confusion_matrix_colorscale(self, matrix):
+        maxval = matrix.max()
+        colorscale = _to_log_colorscale("oranges", maxval)
+        return colorscale
+
+    def get_confusion_matrices(self, results):
         classes = results.classes
-        return matrix, classes
+        freq = Counter(results.ytrue)
+        if results.missing in freq:
+            freq.pop(results.missing)
+        az_classes = sorted(classes)
+        za_classes = sorted(classes, reverse=True)
+        mc_classes = sorted(freq, key=freq.get, reverse=True)
+        lc_classes = sorted(freq, key=freq.get)
+        az_matrix = results.confusion_matrix(classes=az_classes)
+        za_matrix = results.confusion_matrix(classes=za_classes)
+        mc_matrix = results.confusion_matrix(classes=mc_classes)
+        lc_matrix = results.confusion_matrix(classes=lc_classes)
+        az_colorscale = self.get_confusion_matrix_colorscale(az_matrix)
+        za_colorscale = self.get_confusion_matrix_colorscale(za_matrix)
+        mc_colorscale = self.get_confusion_matrix_colorscale(mc_matrix)
+        lc_colorscale = self.get_confusion_matrix_colorscale(lc_matrix)
+        return {
+            "az_classes": az_classes,
+            "za_classes": za_classes,
+            "mc_classes": mc_classes,
+            "lc_classes": lc_classes,
+            "az_matrix": az_matrix.tolist(),
+            "za_matrix": za_matrix.tolist(),
+            "mc_matrix": mc_matrix.tolist(),
+            "lc_matrix": lc_matrix.tolist(),
+            "az_colorscale": az_colorscale,
+            "za_colorscale": za_colorscale,
+            "mc_colorscale": mc_colorscale,
+            "lc_colorscale": lc_colorscale,
+        }
 
     def load_evaluation(self, ctx):
         view_state = ctx.panel.get_state("view") or {}
@@ -243,7 +280,9 @@ def load_evaluation(self, ctx):
         eval_id = view_state.get("id")
         computed_eval_id = ctx.params.get("id", eval_id)
         store = self.get_store(ctx)
-        evaluation_data = store.get(computed_eval_id)
+        evaluation_data = (
+            store.get(computed_eval_id) if ENABLE_CACHING else None
+        )
         if evaluation_data is None:
             info = ctx.dataset.get_evaluation_info(computed_eval_key)
             results = ctx.dataset.load_evaluation_results(computed_eval_key)
@@ -256,21 +295,18 @@ def load_evaluation(self, ctx):
                 ctx
             )
             metrics["mAP"] = self.get_map(results)
-            matrix, labels = self.get_confusion_matrix(results)
             evaluation_data = {
                 "metrics": metrics,
                 "info": info.serialize(),
-                "confusion_matrix": {
-                    "matrix": matrix.tolist(),
-                    "labels": labels.tolist(),
-                },
+                "confusion_matrices": self.get_confusion_matrices(results),
                 "per_class_metrics": per_class_metrics,
             }
-            # Cache the evaluation data
-            try:
-                store.set(computed_eval_id, evaluation_data)
-            except Exception:
-                traceback.print_exc()
+            if ENABLE_CACHING:
+                # Cache the evaluation data
+                try:
+                    store.set(computed_eval_id, evaluation_data, ttl=CACHE_TTL)
+                except Exception:
+                    traceback.print_exc()
 
         ctx.panel.set_data(f"evaluation_{computed_eval_key}", evaluation_data)
 
@@ -278,26 +314,41 @@ def on_change_view(self, ctx):
         # Used only for triggering re-renders when the view changes
         pass
 
+    def has_evaluation_results(self, dataset, eval_key):
+        try:
+            return bool(dataset._doc.evaluations[eval_key].results)
+        except Exception:
+            return False
+
     def load_pending_evaluations(self, ctx, skip_update=False):
+        pending_evaluations = []
+        eval_keys = ctx.dataset.list_evaluations()
         store = self.get_store(ctx)
         dataset_id = self.get_dataset_id(ctx)
-        pending_evaluations = store.get("pending_evaluations") or {}
-        pending = pending_evaluations.get(dataset_id, [])
-        if not skip_update:
-            eval_keys = ctx.dataset.list_evaluations()
-            updated_pending = []
-            update = False
-            for item in pending:
-                pending_eval_key = item.get("eval_key")
-                if pending_eval_key in eval_keys:
-                    update = True
-                else:
-                    updated_pending.append(item)
-            if update:
-                pending_evaluations[dataset_id] = updated_pending
-                store.set("pending_evaluations", pending_evaluations)
-                pending = updated_pending
-        ctx.panel.set_data("pending_evaluations", pending)
+        pending_evaluations_in_store = store.get("pending_evaluations") or {}
+        pending_evaluations_for_dataset_in_store = (
+            pending_evaluations_in_store.get(dataset_id, [])
+        )
+        updated_pending_evaluations_for_dataset_in_stored = []
+        update_store = False
+        for pending in pending_evaluations_for_dataset_in_store:
+            pending_eval_key = pending.get("eval_key")
+            if pending_eval_key in eval_keys:
+                update_store = True
+            else:
+                pending_evaluations.append(pending)
+                updated_pending_evaluations_for_dataset_in_stored.append(
+                    pending
+                )
+        for key in eval_keys:
+            if not self.has_evaluation_results(ctx.dataset, key):
+                pending_evaluations.append({"eval_key": key})
+        if update_store:
+            pending_evaluations_in_store[
+                dataset_id
+            ] = updated_pending_evaluations_for_dataset_in_stored
+            store.set("pending_evaluations", pending_evaluations)
+        ctx.panel.set_data("pending_evaluations", pending_evaluations)
 
     def on_evaluate_model_success(self, ctx):
         dataset_id = self.get_dataset_id(ctx)
@@ -320,7 +371,7 @@ def on_evaluate_model_success(self, ctx):
             pending_evaluations[dataset_id] = []
         pending_evaluations[dataset_id].append(pending)
         store.set("pending_evaluations", pending_evaluations)
-        self.load_pending_evaluations(ctx, True)
+        self.load_pending_evaluations(ctx)
 
     def on_evaluate_model(self, ctx):
         if not self.can_evaluate(ctx):