Merge branch 'develop' of https://github.com/voxel51/fiftyone into no…

…deTreeView
voxel51 · Nov 6, 2024 · 5ea3e04 · 5ea3e04
2 parents 3aaa981 + 3331aa0
commit 5ea3e04
Show file tree

Hide file tree

Showing 71 changed files with 3,720 additions and 551 deletions.
diff --git a/app/package.json b/app/package.json
@@ -52,8 +52,6 @@
     ],
     "packageManager": "[email protected]",
     "dependencies": {
-        "@mui/x-date-pickers": "7.22.1",
-        "dayjs": "1.11.13",
         "jpeg-js": "^0.4.4",
         "react-player": "^2.16.0",
         "react-plotly.js": "^2.6.0"

diff --git a/app/packages/app/public/model_evaluation.svg b/app/packages/app/public/model_evaluation.svg
diff --git a/app/packages/components/src/components/DatePicker/DatePicker.tsx b/app/packages/components/src/components/DatePicker/DatePicker.tsx
diff --git a/app/packages/components/src/components/DatePicker/index.tsx b/app/packages/components/src/components/DatePicker/index.tsx
diff --git a/app/packages/components/src/components/ModalBase/ModalBase.tsx b/app/packages/components/src/components/ModalBase/ModalBase.tsx
@@ -44,6 +44,7 @@ interface ModalBaseProps {
 }
 
 interface ModalButtonView {
+  disabled?: boolean;
   variant: string;
   label: string;
   icon?: string;
@@ -102,6 +103,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
   const modalButtonView: ModalButtonView = {
     variant: props?.variant || "outlined",
     label: props?.label || "",
+    disabled: props?.disabled,
     componentsProps: {
       button: {
         sx: {
@@ -175,12 +177,12 @@ const ModalBase: React.FC<ModalBaseProps> = ({
     ) {
       setPrimaryButtonView({
         ...primaryButtonView,
-        disabled: primaryButtonView?.disabled || true,
+        disabled: true,
       });
     } else {
       setPrimaryButtonView({
         ...primaryButtonView,
-        disabled: primaryButtonView?.disabled || false,
+        disabled: false,
       });
     }
   }, [primaryButtonView.params]);

diff --git a/app/packages/components/src/components/PillBadge/PillBadge.tsx b/app/packages/components/src/components/PillBadge/PillBadge.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import CircleIcon from "@mui/icons-material/Circle";
-import { Chip, FormControl, MenuItem, Select } from "@mui/material";
+import { Chip, FormControl, MenuItem, Select, Tooltip } from "@mui/material";
 import { usePanelEvent } from "@fiftyone/operators";
 import { usePanelId } from "@fiftyone/spaces";
 
@@ -10,12 +10,16 @@ const PillBadge = ({
   variant = "filled",
   showIcon = true,
   operator,
+  readOnly = false,
+  tooltipTitle = "",
 }: {
   text: string | string[] | [string, string][];
   color?: string;
   variant?: "filled" | "outlined";
   showIcon?: boolean;
   operator?: () => void;
+  readOnly?: boolean;
+  tooltipTitle?: string;
 }) => {
   const getInitialChipSelection = (
     text: string | string[] | [string, string][]
@@ -68,90 +72,15 @@ const PillBadge = ({
 
   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>
+      <Tooltip title={tooltipTitle}>
+        {typeof text === "string" ? (
           <Chip
             icon={
               showIcon ? (
                 <CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />
               ) : undefined
             }
-            label={
-              Array.isArray(text) &&
-              text.length > 0 &&
-              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");
-                    if (operator) {
-                      handleClick(panelId, {
-                        params: { value: event.target.value },
-                        operator,
-                      });
-                    }
-                  }}
-                  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);
-                    if (operator) {
-                      handleClick(panelId, {
-                        params: { value: event.target.value },
-                        operator,
-                      });
-                    }
-                  }}
-                  sx={{
-                    color: "inherit",
-                  }}
-                >
-                  {text.map((t, index) => (
-                    <MenuItem key={index} value={t}>
-                      {t}
-                    </MenuItem>
-                  ))}
-                </Select>
-              )
-            }
+            label={text}
             sx={{
               ...chipStyle,
               "& .MuiChip-icon": {
@@ -160,14 +89,94 @@ const PillBadge = ({
               "& .MuiChip-label": {
                 marginBottom: "1px",
               },
-              "& .MuiInput-input:focus": {
-                backgroundColor: "inherit",
-              },
             }}
             variant={variant as "filled" | "outlined" | undefined}
-          ></Chip>
-        </FormControl>
-      )}
+          />
+        ) : (
+          <FormControl fullWidth>
+            <Chip
+              disabled={readOnly}
+              icon={
+                showIcon ? (
+                  <CircleIcon color={"inherit"} sx={{ fontSize: 10 }} />
+                ) : undefined
+              }
+              label={
+                Array.isArray(text) &&
+                text.length > 0 &&
+                Array.isArray(text[0]) ? (
+                  <Select
+                    disabled={readOnly}
+                    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");
+                      if (operator) {
+                        handleClick(panelId, {
+                          params: { value: event.target.value },
+                          operator,
+                        });
+                      }
+                    }}
+                    sx={{
+                      color: "inherit",
+                    }}
+                  >
+                    {text.map((t, index) => (
+                      <MenuItem key={index} value={t[0]}>
+                        {t[0]}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                ) : (
+                  <Select
+                    disabled={readOnly}
+                    value={chipSelection}
+                    variant={"standard"}
+                    disableUnderline={true}
+                    onChange={(event) => {
+                      setChipSelection(event.target.value);
+                      if (operator) {
+                        handleClick(panelId, {
+                          params: { value: event.target.value },
+                          operator,
+                        });
+                      }
+                    }}
+                    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>
+        )}
+      </Tooltip>
     </span>
   );
 };

diff --git a/app/packages/components/src/components/ThemeProvider/index.tsx b/app/packages/components/src/components/ThemeProvider/index.tsx
@@ -95,6 +95,7 @@ let theme = extendMuiTheme({
           shadowDark: "hsl(200, 0%, 70%)",
           lightning: "hsl(25, 100%, 51%)",
           toastBackgroundColor: "#FFFFFF",
+          primarySoft: "hsl(25, 100%, 51%)",
         },
         voxel: {
           500: "#FF6D04",
@@ -133,6 +134,7 @@ let theme = extendMuiTheme({
           popup: "hsl(200, 0%, 20%)",
           field: "hsl(200, 0%, 20%, 0.3)",
           activeCell: "hsl(200, 0%, 25%)",
+          card: "hsl(200, 0%, 16%)",
         },
         divider: "hsl(200, 0%, 20%)",
         dividerDisabled: "hsl(200, 0%, 15%)",
@@ -177,6 +179,7 @@ let theme = extendMuiTheme({
           shadowDark: "hsl(200, 0%, 0%)",
           lightning: "#f5b700",
           toastBackgroundColor: "#333",
+          primarySoft: "hsl(25, 100%, 80%)",
         },
         voxel: {
           500: "#FF6D04",
@@ -194,6 +197,14 @@ let theme = extendMuiTheme({
         disableRipple: true,
       },
     },
+    MuiButton: {
+      variants: [
+        {
+          props: { variant: "contained" },
+          style: { color: "#ffffff" },
+        },
+      ],
+    },
     MuiModal: {
       styleOverrides: {
         root: {

diff --git a/app/packages/components/src/components/index.ts b/app/packages/components/src/components/index.ts
@@ -7,7 +7,6 @@ export { default as CodeBlock } from "./CodeBlock";
 export { default as CodeTabs } from "./CodeTabs";
 export { default as ColoredDot } from "./ColoredDot";
 export { default as CopyButton } from "./CopyButton";
-export { default as DatePicker } from "./DatePicker";
 export { default as Dialog } from "./Dialog";
 export { default as ErrorBoundary } from "./ErrorBoundary";
 export { default as ExternalLink, useExternalLink } from "./ExternalLink";