additional panel meta (is_new, beta, category)

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",
@@ -177,6 +178,7 @@ let theme = extendMuiTheme({
           shadowDark: "hsl(200, 0%, 0%)",
           lightning: "#f5b700",
           toastBackgroundColor: "#333",
+          primarySoft: "hsl(25, 100%, 80%)",
         },
         voxel: {
           500: "#FF6D04",

app/packages/core/src/plugins/histograms.tsx

@@ -1,6 +1,10 @@
 import { Loading, Selector } from "@fiftyone/components";
 import { OperatorPlacements, types } from "@fiftyone/operators";
-import { PluginComponentType, registerComponent } from "@fiftyone/plugins";
+import {
+  Categories,
+  PluginComponentType,
+  registerComponent,
+} from "@fiftyone/plugins";
 import { usePanelTitle } from "@fiftyone/spaces";
 import { datasetName, distributionPaths, field } from "@fiftyone/state";
 import { BarChart } from "@mui/icons-material";
@@ -108,5 +112,6 @@ registerComponent({
   Icon: BarChart,
   panelOptions: {
     priority: BUILT_IN_PANEL_PRIORITY_CONST,
+    category: Categories.Curate,
   },
 });

app/packages/embeddings/src/EmptyEmbeddings.tsx

@@ -37,7 +37,11 @@ export default function EmptyEmbeddings() {
         <Grid container direction="column" alignItems="center" spacing={2}>
           <Grid item>
             <WorkspacesIcon
-              sx={{ fontSize: 64, color: "#ffba85", marginBottom: 2 }}
+              sx={{
+                fontSize: 64,
+                color: theme.custom.primarySoft,
+                marginBottom: 2,
+              }}
             />
           </Grid>
           <Grid item>

app/packages/embeddings/src/index.ts

@@ -1,4 +1,8 @@
-import { PluginComponentType, registerComponent } from "@fiftyone/plugins";
+import {
+  Categories,
+  PluginComponentType,
+  registerComponent,
+} from "@fiftyone/plugins";
 import WorkspacesIcon from "@mui/icons-material/Workspaces";
 import Embeddings from "./Embeddings";
 import EmbeddingsTabIndicator from "./EmbeddingsTabIndicator";
@@ -14,5 +18,6 @@ registerComponent({
   panelOptions: {
     TabIndicator: EmbeddingsTabIndicator,
     priority: BUILT_IN_PANEL_PRIORITY_CONST,
+    category: Categories.Curate,
   },
 });

app/packages/operators/src/Panel/register.tsx

@@ -25,6 +25,10 @@ export default function registerPanel(ctx: ExecutionContext) {
       helpMarkdown: ctx.params.help_markdown,
       reloadOnNavigation: ctx.params.reload_on_navigation,
       surfaces: ctx.params.surfaces,
+      beta: ctx.params.beta,
+      category: ctx.params.category,
+      isNew: ctx.params.is_new,
+      priority: ctx.params.priority,
     },
   });
 }

app/packages/operators/src/built-in-operators.ts

@@ -812,7 +812,7 @@
       unlisted: true,
     });
   }
   useHooks(ctx: ExecutionContext): {} {
     return { updatePanelState: useUpdatePanelStatePartial() };
   }
   async execute(ctx: ExecutionContext): Promise<void> {
@@ -997,6 +997,10 @@
     inputs.str("panel_name", { label: "Panel name", required: true });
     inputs.str("panel_label", { label: "Panel label", required: true });
     inputs.str("icon", { label: "Icon" });
+    inputs.str("help_markdown", { label: "Help markdown" });
+    inputs.str("category", { label: "Category" });
+    inputs.bool("beta", { label: "Beta", default: false });
+    inputs.bool("is_new", { label: "NEW", default: false });
     inputs.str("dark_icon", { label: "Icon for dark mode" });
     inputs.str("light_icon", { label: "Icon for light mode" });
     inputs.str("on_load", { label: "On load operator" });
@@ -1006,6 +1010,7 @@
       label: "Allow duplicates",
       default: false,
     });
+    inputs.int("priority", { label: "Priority" });
     return new types.Property(inputs);
   }
   async execute(ctx: ExecutionContext): Promise<void> {

app/packages/plugins/src/index.ts

@@ -297,6 +297,37 @@ export enum PluginComponentType {
    */
 }
 
+type CategoryID = "import" | "curate" | "analyze" | "custom";
+
+export enum Categories {
+  Import = "import",
+  Curate = "curate",
+  Analyze = "analyze",
+  Custom = "custom",
+}
+
+export function getCategoryLabel(category: CategoryID): string {
+  switch (category) {
+    case "import":
+      return "Import";
+    case "curate":
+      return "Curate";
+    case "analyze":
+      return "Analyze";
+    case "custom":
+      return "Custom";
+  }
+}
+
+export function getCategoryForPanel(panel: PluginComponentRegistration) {
+  return panel.panelOptions?.category || "custom";
+}
+
+type Category = {
+  id: CategoryID;
+  label: string;
+};
+
 type PluginActivator = (props: any) => boolean;
 
 type PanelOptions = {
@@ -331,6 +362,21 @@ type PanelOptions = {
    * This is only applicable to plugins that are in a modal.
    */
   reloadOnNavigation?: boolean;
+
+  /**
+   * The category of the plugin
+   */
+  category: CategoryID;
+
+  /**
+   * Whether the plugin is in beta
+   */
+  beta: boolean;
+
+  /**
+   * Whether the plugin is new
+   */
+  isNew: boolean;
 };
 
 type PluginComponentProps<T> = T & {

app/packages/spaces/src/components/AddPanelButton.tsx

@@ -1,5 +1,10 @@
-import { IconButton, Popout, scrollable } from "@fiftyone/components";
-import { PluginComponentRegistration } from "@fiftyone/plugins";
+import { IconButton, Popout, scrollable, useTheme } from "@fiftyone/components";
+import {
+  Categories,
+  getCategoryForPanel,
+  getCategoryLabel,
+  PluginComponentRegistration,
+} from "@fiftyone/plugins";
 import * as fos from "@fiftyone/state";
 import { Add } from "@mui/icons-material";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -9,6 +14,7 @@ import { AddPanelButtonProps } from "../types";
 import { panelsCompareFn } from "../utils/sort";
 import AddPanelItem from "./AddPanelItem";
 import { AddPanelButtonContainer } from "./StyledElements";
+import { Typography, Grid } from "@mui/material";
 
 export default function AddPanelButton({ node, spaceId }: AddPanelButtonProps) {
   const [open, setOpen] = useState(false);
@@ -26,9 +32,7 @@ export default function AddPanelButton({ node, spaceId }: AddPanelButtonProps) {
   const panels = usePanels(panelsPredicate);
   const spaceNodes = useSpaceNodes(spaceId);
   const nodeTypes = useMemo(() => {
-    return spaceNodes.map((node) => {
-      return node.type;
-    });
+    return spaceNodes.map((node) => node.type);
   }, [spaceNodes]);
   const popoutRef = useRef();
   fos.useOutsideClick(popoutRef, () => {
@@ -44,14 +48,28 @@ export default function AddPanelButton({ node, spaceId }: AddPanelButtonProps) {
     })
     .sort(panelsCompareFn);
 
+  const categorizedPanels = availablePanels.reduce((acc, panel) => {
+    const category = getCategoryForPanel(panel);
+    if (!acc[category]) {
+      acc[category] = {
+        label: getCategoryLabel(category),
+        panels: [],
+      };
+    }
+    acc[category].panels.push(panel);
+    return acc;
+  }, {});
+
   if (availablePanels.length === 0) return null;
 
+  const sortedCategories = ["import", "curate", "analyze", "custom"]
+    .map((cat) => categorizedPanels[cat])
+    .filter((c) => c);
+
   return (
     <AddPanelButtonContainer ref={popoutRef}>
       <IconButton
-        onClick={() => {
-          setOpen(!open);
-        }}
+        onClick={() => setOpen(!open)}
         title="New panel"
         data-cy="new-panel-btn"
       >
@@ -68,17 +86,49 @@ export default function AddPanelButton({ node, spaceId }: AddPanelButtonProps) {
           }}
           popoutProps={{ className: scrollable }}
         >
-          {availablePanels.map((panel) => (
-            <AddPanelItem
-              key={panel.name}
-              spaceId={spaceId}
-              {...panel}
-              node={node}
-              onClick={() => setOpen(!open)}
-            />
-          ))}
+          <PanelCategories>
+            {sortedCategories.map(({ label, panels }) => (
+              <PanelCategory key={label} label={label}>
+                {panels.map((panel) => (
+                  <AddPanelItem
+                    key={panel.name}
+                    node={node}
+                    name={panel.name}
+                    label={panel.label}
+                    spaceId={spaceId}
+                    showBeta={panel.panelOptions?.beta}
+                    showNew={panel.panelOptions?.isNew}
+                    onClick={() => setOpen(false)}
+                  />
+                ))}
+              </PanelCategory>
+            ))}
+          </PanelCategories>
         </Popout>
       )}
     </AddPanelButtonContainer>
   );
 }
+
+function PanelCategories({ children }) {
+  return (
+    <Grid container gap={1} sx={{ p: 2 }}>
+      {children}
+    </Grid>
+  );
+}
+
+function PanelCategory({ label, children }) {
+  const theme = useTheme();
+  return (
+    <Grid item>
+      <Typography
+        variant="subtitle2"
+        sx={{ padding: "0 8px", color: theme.text.secondary }}
+      >
+        {label || "no category"}
+      </Typography>
+      {children}
+    </Grid>
+  );
+}

app/packages/spaces/src/components/AddPanelItem.tsx

@@ -5,14 +5,18 @@ import { useSpaces } from "../hooks";
 import SpaceNode from "../SpaceNode";
 import { AddPanelItemProps } from "../types";
 import PanelIcon from "./PanelIcon";
+import { useTheme } from "@fiftyone/components";
 
 export default function AddPanelItem({
   node,
   name,
   label,
   onClick,
   spaceId,
+  showBeta,
+  showNew,
 }: AddPanelItemProps) {
+  const theme = useTheme();
   const trackEvent = useTrackEvent();
   const { spaces } = useSpaces(spaceId);
   return (
@@ -48,6 +52,28 @@ export default function AddPanelItem({
       >
         {label || (name as string)}
       </Typography>
+      {showNew && (
+        <span
+          style={{
+            color: theme.custom.primarySoft,
+            fontSize: "11px",
+            marginLeft: "6px",
+          }}
+        >
+          NEW
+        </span>
+      )}
+      {showBeta && (
+        <span
+          style={{
+            color: theme.custom.primarySoft,
+            fontSize: "11px",
+            marginLeft: "6px",
+          }}
+        >
+          BETA
+        </span>
+      )}
     </Stack>
   );
 }

app/packages/spaces/src/components/PanelIcon.tsx

@@ -2,6 +2,7 @@ import ExtensionIcon from "@mui/icons-material/Extension";
 import { usePanel } from "../hooks";
 import { PanelIconProps } from "../types";
 import { warnPanelNotFound } from "../utils";
+import { Box } from "@mui/material";
 
 export default function PanelIcon(props: PanelIconProps) {
   const { name } = props;
@@ -10,12 +11,13 @@ export default function PanelIcon(props: PanelIconProps) {
   const { Icon } = panel;
   const PanelTabIcon = Icon || ExtensionIcon;
   return (
-    <PanelTabIcon
-      style={{
-        width: "1rem",
-        height: "1rem",
-        marginRight: "0.5rem",
-      }}
-    />
+    <Box sx={{ mr: "0.75rem", width: "1rem", height: "1.5rem" }}>
+      <PanelTabIcon
+        style={{
+          width: "1rem",
+          height: "1rem",
+        }}
+      />
+    </Box>
   );
 }