Merge pull request #5154 from voxel51/merge/release/v1.1.0

Merge `release/v1.1.0` to `develop`

app/packages/components/src/components/PanelCTA/index.tsx

@@ -33,6 +33,8 @@ export default function PanelCTA(props: PanelCTAProps) {
     mode,
     name,
     onBack,
+    tryLink,
+    demoDocCaption,
   } = props;
   const theme = useTheme();
   const isDefault = mode === "default";
@@ -43,6 +45,9 @@ export default function PanelCTA(props: PanelCTAProps) {
   const computedCaption = IS_APP_MODE_FIFTYONE
     ? demoCaption || caption
     : caption;
+  const computedDocCaption = IS_APP_MODE_FIFTYONE
+    ? demoDocCaption || docCaption
+    : docCaption;
 
   return (
     <Stack spacing={1} sx={{ height: "100%", p: 2 }}>
@@ -114,7 +119,7 @@ export default function PanelCTA(props: PanelCTAProps) {
                   <MuiButton
                     variant="contained"
                     color="primary"
-                    href={TRY_IN_BROWSER_LINK}
+                    href={tryLink || TRY_IN_BROWSER_LINK}
                     target="_blank"
                   >
                     Try in browser
@@ -127,9 +132,9 @@ export default function PanelCTA(props: PanelCTAProps) {
                 spacing={1}
                 sx={{ alignItems: "center", justifyContent: "center" }}
               >
-                {docCaption && (
+                {computedDocCaption && (
                   <Typography color="secondary">
-                    {docCaption || "Not ready to upgrade yet?"}
+                    {computedDocCaption}
                   </Typography>
                 )}
                 <MuiButton
@@ -179,4 +184,6 @@ export type PanelCTAProps = {
   demoLabel?: string;
   demoDescription?: string;
   demoCaption?: string;
+  demoDocCaption?: string;
+  tryLink?: string;
 };

app/packages/core/src/components/Starter/content.ts

@@ -49,7 +49,7 @@ export const CONTENT_BY_MODE = {
     codeSubtitle:
       "Use Python or command line tools to set dataset for the current session",
     learnMoreLink: "https://docs.voxel51.com/user_guide/app.html",
-    learnMoreLabel: "about using the Fiftyone App",
+    learnMoreLabel: "about using the FiftyOne App",
   },
   ADD_SAMPLE: {
     title: "No samples yet",

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

@@ -49,7 +49,7 @@ import { formatValue, getNumericDifference, useTriggerEvent } from "./utils";
 
 const KEY_COLOR = "#ff6d04";
 const COMPARE_KEY_COLOR = "#03a9f4";
-const DEFAULT_BAR_CONFIG = { sortBy: "az" };
+const DEFAULT_BAR_CONFIG = { sortBy: "default" };
 
 export default function Evaluation(props: EvaluationProps) {
   const {
@@ -164,11 +164,15 @@ export default function Evaluation(props: EvaluationProps) {
   const evaluationTimestamp = evaluationInfo.timestamp;
   const evaluationConfig = evaluationInfo.config;
   const evaluationMetrics = evaluation.metrics;
+  const evaluationType = evaluationConfig.type;
   const compareEvaluationInfo = compareEvaluation?.info || {};
   const compareEvaluationKey = compareEvaluationInfo?.key;
   const compareEvaluationTimestamp = compareEvaluationInfo?.timestamp;
   const compareEvaluationConfig = compareEvaluationInfo?.config || {};
   const compareEvaluationMetrics = compareEvaluation?.metrics || {};
+  const compareEvaluationType = compareEvaluationConfig.type;
+  const isObjectDetection = evaluationType === "detection";
+  const isSegmentation = evaluationType === "segmentation";
   const infoRows = [
     {
       id: "evaluation_key",
@@ -179,8 +183,8 @@ export default function Evaluation(props: EvaluationProps) {
     {
       id: "type",
       property: "Type",
-      value: evaluationConfig.type,
-      compareValue: compareEvaluationConfig.type,
+      value: evaluationType,
+      compareValue: compareEvaluationType,
     },
     {
       id: "method",
@@ -322,6 +326,7 @@ export default function Evaluation(props: EvaluationProps) {
       property: "Average Confidence",
       value: evaluationMetrics.average_confidence,
       compareValue: compareEvaluationMetrics.average_confidence,
+      hide: isSegmentation,
     },
     {
       id: "support",
@@ -340,6 +345,7 @@ export default function Evaluation(props: EvaluationProps) {
       property: "IoU Threshold",
       value: evaluationConfig.iou,
       compareValue: compareEvaluationConfig.iou,
+      hide: !isObjectDetection,
     },
     {
       id: "precision",
@@ -364,6 +370,7 @@ export default function Evaluation(props: EvaluationProps) {
       property: "mAP",
       value: evaluationMetrics.mAP,
       compareValue: compareEvaluationMetrics.mAP,
+      hide: !isObjectDetection,
     },
     {
       id: "tp",
@@ -377,6 +384,7 @@ export default function Evaluation(props: EvaluationProps) {
             ? "compare"
             : "selected"
           : false,
+      hide: !isObjectDetection,
     },
     {
       id: "fp",
@@ -391,6 +399,7 @@ export default function Evaluation(props: EvaluationProps) {
             ? "compare"
             : "selected"
           : false,
+      hide: !isObjectDetection,
     },
     {
       id: "fn",
@@ -405,6 +414,7 @@ export default function Evaluation(props: EvaluationProps) {
             ? "compare"
             : "selected"
           : false,
+      hide: !isObjectDetection,
     },
   ];
 
@@ -630,7 +640,9 @@ export default function Evaluation(props: EvaluationProps) {
                       filterable,
                       id: rowId,
                       active,
+                      hide,
                     } = row;
+                    if (hide) return null;
                     const difference = getNumericDifference(
                       value,
                       compareValue
@@ -670,7 +682,13 @@ export default function Evaluation(props: EvaluationProps) {
                               alignItems: "center",
                             }}
                           >
-                            <Typography>{formatValue(value)}</Typography>
+                            <Typography>
+                              {value ? (
+                                formatValue(value)
+                              ) : (
+                                <Typography color="text.tertiary">—</Typography>
+                              )}
+                            </Typography>
                             <Stack direction="row" spacing={1}>
                               {showTrophy && (
                                 <Typography sx={{ fontSize: 12 }}>
@@ -706,7 +724,13 @@ export default function Evaluation(props: EvaluationProps) {
                                 sx={{ justifyContent: "space-between" }}
                               >
                                 <Typography>
-                                  {formatValue(compareValue)}
+                                  {compareValue ? (
+                                    formatValue(compareValue)
+                                  ) : (
+                                    <Typography color="text.tertiary">
+                                      —
+                                    </Typography>
+                                  )}
                                 </Typography>
 
                                 {filterable && (
@@ -1516,7 +1540,7 @@ function getMatrix(matrices, config) {
 
 function getConfigLabel({ config, type, dashed }) {
   const { sortBy } = config;
-  if (!sortBy) return "";
+  if (!sortBy || sortBy === DEFAULT_BAR_CONFIG.sortBy) return "";
   const sortByLabels =
     type === "classPerformance"
       ? CLASS_PERFORMANCE_SORT_OPTIONS
@@ -1558,12 +1582,14 @@ function useActiveFilter(evaluation, compareEvaluation) {
 }
 
 const CLASS_PERFORMANCE_SORT_OPTIONS = [
+  { value: "default", label: "Default" },
   { 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: "default", label: "Default" },
   { value: "az", label: "Alphabetical (A-Z)" },
   { value: "za", label: "Alphabetical (Z-A)" },
   { value: "mc", label: "Most common classes" },

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

@@ -31,6 +31,7 @@ export default function EvaluationPlot(props: EvaluationPlotProps) {
         color: theme.text.secondary,
         gridcolor: theme.primary.softBorder,
         automargin: true, // Enable automatic margin adjustment
+        scaleanchor: "x",
       },
       autosize: true,
       margin: { t: 20, l: 50, b: 50, r: 20, pad: 0 },

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

@@ -1,5 +1,12 @@
 import { LoadingDots } from "@fiftyone/components";
-import { Card, CardActionArea, Chip, Stack, Typography } from "@mui/material";
+import {
+  Card,
+  CardActionArea,
+  Chip,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import React from "react";
 import Evaluate from "./Evaluate";
 import EvaluationNotes from "./EvaluationNotes";
@@ -64,6 +71,8 @@ export default function Overview(props: OverviewProps) {
 
 function EvaluationCard(props: EvaluationCardProps) {
   const { pending, onSelect, eval_key, note, status, id } = props;
+  const theme = useTheme();
+
   return (
     <CardActionArea key={eval_key} disabled={pending}>
       <Card
@@ -77,7 +86,16 @@ function EvaluationCard(props: EvaluationCardProps) {
             {eval_key}
           </Typography>
           {pending && (
-            <Chip variant="filled" label={<LoadingDots text="Evaluating" />} />
+            <Chip
+              variant="filled"
+              size="small"
+              label={
+                <LoadingDots
+                  text="Evaluating"
+                  style={{ fontSize: "1rem", paddingLeft: 6, color: "#999999" }}
+                />
+              }
+            />
           )}
           {status && <Status status={status} />}
         </Stack>

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

@@ -1,12 +1,13 @@
+import { PanelCTA } from "@fiftyone/components";
+import { constants } from "@fiftyone/utilities";
 import { Box } from "@mui/material";
 import React, { useCallback, useMemo } from "react";
-import EmptyOverview from "./EmptyOverview";
+import Evaluate from "./Evaluate";
 import Evaluation from "./Evaluation";
 import Overview from "./Overview";
 import { useTriggerEvent } from "./utils";
-import { PanelCTA } from "@fiftyone/components";
-import { constants } from "@fiftyone/utilities";
-import Evaluate from "./Evaluate";
+
+const TRY_LINK = "http://voxel51.com/try-evaluation";
 
 export default function NativeModelEvaluationView(props) {
   const { data = {}, schema, onChange, layout } = props;
@@ -87,10 +88,11 @@ export default function NativeModelEvaluationView(props) {
         (showEmptyOverview || showCTA ? (
           <PanelCTA
             label="Create you first model evaluation"
-            demoLabel="Upgrade to Fiftyone Teams to Evaluate Models"
+            demoLabel="Upgrade to FiftyOne Teams to Evaluate Models"
             description="Analyze and improve models collaboratively with your team"
             docLink="https://docs.voxel51.com/user_guide/evaluation.html"
-            docCaption="Not ready to upgrade yet? Learn how to create model evaluation via code."
+            docCaption="Learn how to create model evaluation via code."
+            demoDocCaption="Not ready to upgrade yet? Learn how to create model evaluation via code."
             icon="ssid_chart"
             Actions={() => {
               return (
@@ -106,6 +108,7 @@ export default function NativeModelEvaluationView(props) {
               setShowCTA(false);
             }}
             mode={showCTA ? "default" : "onboarding"}
+            tryLink={TRY_LINK}
           />
         ) : (
           <Overview

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

@@ -10,6 +10,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  Tooltip,
   useTheme,
 } from "@mui/material";
 import { isPlainObject } from "lodash";
@@ -34,6 +35,7 @@ export default function TableView(props: ViewPropsType) {
     size = "small",
     variant = "filled",
     max_inline_actions = 1,
+    tooltips = []
   } = view;
   const { rows, selectedCells, selectedRows, selectedColumns } =
     getTableData(props);
@@ -63,6 +65,14 @@ export default function TableView(props: ViewPropsType) {
     return computedRowActions;
   }, []);
 
+  const getTooltips = useCallback((tooltipList) => {
+    const tooltipDict = {};
+    for (const { value, row, column } of tooltipList) {
+      tooltipDict[`${row},${column}`] = value; // Create a key from row and column
+    }
+    return tooltipDict;
+  }, []);
+
   const handleCellClick = useCallback(
     (row, column) => {
       if (on_click_cell) {
@@ -93,6 +103,7 @@ export default function TableView(props: ViewPropsType) {
     color: theme.palette.text.secondary,
   };
   const filled = variant === "filled";
+  const tooltipMap = getTooltips(tooltips);
 
   return (
     <Box {...getComponentProps(props, "container")}>
@@ -170,23 +181,33 @@ export default function TableView(props: ViewPropsType) {
                         selectedCells.has(coordinate) ||
                         isRowSelected ||
                         selectedColumns.has(columnIndex);
-                      return (
+
+                      const tooltip = tooltipMap[coordinate]; // Check if there's a tooltip for the cell
+
+                      const cell = (
                         <TableCell
                           key={key}
                           sx={{
-                            background: isSelected
-                              ? selectedCellColor
-                              : "unset",
+                            background: isSelected ? selectedCellColor : "unset",
                           }}
                           onClick={() => {
                             handleCellClick(rowIndex, columnIndex);
                           }}
                           {...getComponentProps(props, "tableBodyCell")}
                         >
-                          {formatCellValue(item[key], props)}
+                          {tooltip ? (
+                            <Tooltip title={tooltip} arrow>
+                              <span>{formatCellValue(item[key], props)}</span> {/* Wrap content with Tooltip */}
+                            </Tooltip>
+                          ) : (
+                            formatCellValue(item[key], props) // No Tooltip for cells without tooltips
+                          )}
                         </TableCell>
                       );
+
+                      return cell;
                     })}
+
                     {hasRowActions && (
                       <TableCell
                         align="right"

app/packages/embeddings/README.md

@@ -1 +1 @@
-# Embeddings Fiftyone Plugin Example
+# Embeddings FiftyOne Plugin Example