Merge release/v1.1.0 to develop

app/packages/app/src/components/Nav.tsx

@@ -3,7 +3,7 @@ import {
   GitHubLink,
   Header,
   IconButton,
-  SlackLink,
+  DiscordLink,
   iconContainer,
 } from "@fiftyone/components";
 import { ViewBar } from "@fiftyone/core";
@@ -111,7 +111,7 @@ const Nav: React.FC<
           >
             {mode === "dark" ? <LightMode color="inherit" /> : <DarkMode />}
           </IconButton>
-          <SlackLink />
+          <DiscordLink />
           <GitHubLink />
           <DocsLink />
         </div>

app/packages/app/src/components/Setup.tsx

@@ -2,7 +2,7 @@ import {
   DocsLink,
   GitHubLink,
   Header,
-  SlackLink,
+  DiscordLink,
   iconContainer,
   useTheme,
 } from "@fiftyone/components";
@@ -190,7 +190,7 @@ const Setup = () => {
     <div data-cy="setup-page">
       <Header title={"FiftyOne"}>
         <div className={iconContainer} style={{ flex: 1 }}>
-          <SlackLink />
+          <DiscordLink />
           <GitHubLink />
           <DocsLink />
         </div>

app/packages/components/src/components/Icons/Icons.tsx

@@ -8,18 +8,19 @@ import { iconLink } from "./Icons.module.css";
 
 export { iconContainer } from "./Icons.module.css";
 
-export const SlackLink = () => (
+export const DiscordLink = () => (
   <ExternalLink
     className={iconLink}
-    href={"https://slack.voxel51.com"}
-    title={"Slack"}
+    href={"https://community.voxel51.com/"}
+    title={"Discord"}
   >
     <SvgIcon
       sx={{
         fill: (theme) => theme.palette.text.secondary,
       }}
+      viewBox="0 0 127.14 96.36"
     >
-      <path d="M6 15a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2h2v2m1 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2a2 2 0 0 1-2-2v-5m2-8a2 2 0 0 1-2-2a2 2 0 0 1 2-2a2 2 0 0 1 2 2v2H9m0 1a2 2 0 0 1 2 2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2a2 2 0 0 1 2-2h5m8 2a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2h-2v-2m-1 0a2 2 0 0 1-2 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2a2 2 0 0 1 2 2v5m-2 8a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2v-2h2m0-1a2 2 0 0 1-2-2a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2a2 2 0 0 1-2 2h-5z" />
+      <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
     </SvgIcon>
   </ExternalLink>
 );

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

@@ -12,5 +12,5 @@ export {
   KeyboardArrowUp,
   LookerArrowLeftIcon,
   LookerArrowRightIcon,
-  SlackLink,
+  DiscordLink,
 } from "./Icons";

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

@@ -77,9 +77,13 @@ function Action(props: ActionPropsType) {
   const { label, name, onClick, icon, variant, mode, color, size, tooltip } =
     props;
   const resolvedColor = color ? getColorByCode(color) : undefined;
-
   const Icon = icon ? (
-    <MuiIconFont name={icon} sx={{ color: resolvedColor }} />
+    <MuiIconFont
+      name={icon}
+      sx={{
+        color: resolvedColor,
+      }}
+    />
   ) : null;
 
   const handleClick = useCallback(
@@ -91,18 +95,30 @@ function Action(props: ActionPropsType) {
 
   const content =
     mode === "inline" ? (
-      <Button
-        variant={variant}
-        startIcon={Icon}
-        onClick={handleClick}
-        sx={{
-          color: resolvedColor,
-          padding: size === "small" ? 0 : undefined,
-          minWidth: size === "small" ? 40 : undefined,
-        }}
-      >
-        {label}
-      </Button>
+      label ? (
+        <Button
+          variant={variant}
+          startIcon={Icon}
+          onClick={handleClick}
+          sx={{
+            color: resolvedColor,
+            padding: size === "small" ? 0 : undefined,
+            minWidth: size === "small" ? 40 : undefined,
+          }}
+        >
+          {label}
+        </Button>
+      ) : (
+        <IconButton
+          onClick={handleClick}
+          size={size}
+          sx={{
+            color: resolvedColor,
+          }}
+        >
+          {Icon}
+        </IconButton>
+      )
     ) : (
       <MenuItem onClick={handleClick}>
         {Icon && <ListItemIcon>{Icon}</ListItemIcon>}

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

@@ -1155,12 +1155,28 @@ export default function Evaluation(props: EvaluationProps) {
                         colorscale: confusionMatrixConfig.log
                           ? confusionMatrix?.colorscale || "viridis"
                           : "viridis",
+                        hovertemplate:
+                          [
+                            "<b>count: %{z:d}</b>",
+                            `${
+                              evaluation?.info?.config?.gt_field || "truth"
+                            }: %{y}`,
+                            `${
+                              evaluation?.info?.config?.pred_field ||
+                              "predicted"
+                            }: %{x}`,
+                          ].join(" <br>") + "<extra></extra>",
                       },
                     ]}
                     onClick={({ points }) => {
                       const firstPoint = points[0];
                       loadView("matrix", { x: firstPoint.x, y: firstPoint.y });
                     }}
+                    layout={{
+                      yaxis: {
+                        autorange: "reversed",
+                      },
+                    }}
                   />
                 </Stack>
                 {compareKey && (
@@ -1183,8 +1199,24 @@ export default function Evaluation(props: EvaluationProps) {
                           colorscale: confusionMatrixConfig.log
                             ? compareConfusionMatrix?.colorscale || "viridis"
                             : "viridis",
+                          hovertemplate:
+                            [
+                              "<b>count: %{z:d}</b>",
+                              `${
+                                evaluation?.info?.config?.gt_field || "truth"
+                              }: %{y}`,
+                              `${
+                                evaluation?.info?.config?.pred_field ||
+                                "predicted"
+                              }: %{x}`,
+                            ].join(" <br>") + "<extra></extra>",
                         },
                       ]}
+                      layout={{
+                        yaxis: {
+                          autorange: "reversed",
+                        },
+                      }}
                     />
                   </Stack>
                 )}
@@ -1532,8 +1564,8 @@ 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 classes = matrices[`${sortBy}_classes`].slice(0, parsedLimit);
+  const matrix = matrices[`${sortBy}_matrix`].slice(0, parsedLimit);
   const colorscale = matrices[`${sortBy}_colorscale`];
   return { labels: classes, matrix, colorscale };
 }

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

@@ -1,4 +1,5 @@
 import { useTheme } from "@fiftyone/components";
+import { merge } from "lodash";
 import React, { useMemo } from "react";
 import Plot, { PlotParams } from "react-plotly.js";
 
@@ -31,7 +32,6 @@ 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 },
@@ -45,6 +45,11 @@ export default function EvaluationPlot(props: EvaluationPlotProps) {
       },
     };
   }, [theme]);
+
+  const mergedLayout = useMemo(() => {
+    return merge({}, layoutDefaults, layout);
+  }, [layoutDefaults, layout]);
+
   const configDefaults: PlotConfig = useMemo(() => {
     return {
       displaylogo: false,
@@ -66,7 +71,7 @@ export default function EvaluationPlot(props: EvaluationPlotProps) {
   return (
     <Plot
       config={configDefaults}
-      layout={{ ...layoutDefaults, ...layout }}
+      layout={mergedLayout}
       style={{ height: "100%", width: "100%", zIndex: 1, ...style }}
       data={data}
       {...otherProps}

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

@@ -222,12 +222,14 @@ export default function TableView(props: ViewPropsType) {
                             : "unset",
                         }}
                       >
-                        {currentRowHasActions && (
+                        {currentRowHasActions ? (
                           <ActionsMenu
                             actions={getRowActions(rowIndex)}
                             size={size}
                             maxInline={max_inline_actions}
                           />
+                        ) : (
+                          <Box sx={{ minHeight: "32px" }} />
                         )}
                       </TableCell>
                     )}

app/packages/looker-3d/src/labels/index.tsx

@@ -135,7 +135,11 @@ export const ThreeDLabels = ({ sampleMap }: ThreeDLabelsProps) => {
     const newPolylineOverlays = [];
 
     for (const overlay of rawOverlays) {
-      if (overlay._cls === "Detection") {
+      if (
+        overlay._cls === "Detection" &&
+        overlay.dimensions &&
+        overlay.location
+      ) {
         newCuboidOverlays.push(
           <Cuboid
             key={`cuboid-${overlay.id ?? overlay._id}-${overlay.sampleId}`}

app/packages/looker/src/overlays/detection.ts

@@ -88,7 +88,7 @@ export default class DetectionOverlay<
     this.label.mask && this.drawMask(ctx, state);
     !state.config.thumbnail && this.drawLabelText(ctx, state);
 
-    if (this.is3D) {
+    if (this.is3D && this.label.dimensions && this.label.location) {
       this.fillRectFor3d(ctx, state, this.getColor(state));
     } else {
       this.strokeRect(ctx, state, this.getColor(state));

app/packages/looker/src/worker/threed-label-processor.ts

@@ -47,6 +47,10 @@ const getInferredParamsForUndefinedProjection = (
 
     if (cls === DETECTIONS) {
       for (const detection of label.detections as DetectionLabel[]) {
+        if (!detection.location || !detection.dimensions) {
+          continue;
+        }
+
         const [x, y] = detection.location;
         const [lx, ly] = detection.dimensions;
 
@@ -55,7 +59,7 @@ const getInferredParamsForUndefinedProjection = (
         minY = Math.min(minY, y - ly / 2);
         maxY = Math.max(maxY, y + ly / 2);
       }
-    } else if (cls === "Detection") {
+    } else if (cls === "Detection" && label.location && label.dimensions) {
       const [x, y] = label.location as DetectionLabel["location"];
       const [lx, ly] = label.dimensions as DetectionLabel["dimensions"];
 

docs/source/_templates/layout.html

@@ -54,7 +54,7 @@
         <div class="nav__item nav__dropdown__menu has-arrows">
           <div class="arrow-up--light-primary arrow-left20"></div>
           <ul>
-            <li><a href="{{link_voxel51_slack}}">Community Slack</a></li>
+            <li><a href="{{link_voxel51_discord}}">Community Discord</a></li>
             <li><a href="{{link_voxel51_blog}}">Blog</a></li>
             <li><a href="{{link_events}}">Events</a></li>
           </ul>
@@ -140,7 +140,7 @@
         <a href="{{link_voxel51_blog}}">Blog</a>
         <a href="{{link_docs_fiftyone}}">Docs</a>
         <a href="{{link_voxel51_github}}">GitHub</a>
-        <a href="{{link_voxel51_slack}}">Slack</a>
+        <a href="{{link_voxel51_discord}}">Discord</a>
         <a href="{{link_ourstory}}">About Us</a>
         <a href="{{link_events}}">Events</a>
         <a href="{{link_voxel51_jobs}}">Careers</a>