Feat/operator exec ctx menu

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

@@ -0,0 +1,161 @@
+import React from "react";
+import { MuiIconFont } from "@fiftyone/components";
+import { OperatorExecutionButton } from "@fiftyone/operators";
+import { usePanelId } from "@fiftyone/spaces";
+import { isNullish } from "@fiftyone/utilities";
+import { Box, ButtonProps, Typography } from "@mui/material";
+import { getColorByCode, getComponentProps, getDisabledColors } from "../utils";
+import { ViewPropsType } from "../utils/types";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import TooltipProvider from "./TooltipProvider";
+
+export default function OperatorExecutionButtonView(props: ViewPropsType) {
+  const { schema, path, onClick } = props;
+  const { view = {} } = schema;
+  const {
+    description,
+    icon,
+    icon_position = "right",
+    label,
+    operator,
+    params = {},
+    prompt,
+    title,
+    disabled = false,
+  } = view;
+  const panelId = usePanelId();
+  const variant = getVariant(props);
+  const computedParams = { ...params, path, panel_id: panelId };
+
+  const Icon = icon ? (
+    <MuiIconFont
+      name={icon}
+      {...getComponentProps(props, "icon", getIconProps(props))}
+    />
+  ) : (
+    <ExpandMoreIcon />
+  );
+
+  return (
+    <Box {...getComponentProps(props, "container")}>
+      <TooltipProvider title={title} {...getComponentProps(props, "tooltip")}>
+        <OperatorExecutionButton
+          operatorUri={operator}
+          executionParams={computedParams}
+          variant={variant}
+          onClick={(e) => onClick?.(e, computedParams, props)}
+          color="primary"
+          disabled={disabled}
+          startIcon={icon_position === "left" ? Icon : undefined}
+          endIcon={icon_position === "right" ? Icon : undefined}
+          title={description}
+          {...getComponentProps(props, "button", getButtonProps(props))}
+        >
+          <Typography>{label}</Typography>
+        </OperatorExecutionButton>
+      </TooltipProvider>
+    </Box>
+  );
+}
+
+function getButtonProps(props: ViewPropsType): ButtonProps {
+  const { label, variant, color, disabled } = props.schema.view;
+  const baseProps: ButtonProps = getCommonProps(props);
+  if (isNullish(label)) {
+    baseProps.sx["& .MuiButton-startIcon"] = { mr: 0, ml: 0 };
+    baseProps.sx.minWidth = "auto";
+    baseProps.sx.p = "6px";
+  }
+  if (variant === "round") {
+    baseProps.sx.borderRadius = "1rem";
+    baseProps.sx.p = "3.5px 10.5px";
+  }
+  if (variant === "square") {
+    baseProps.sx.borderRadius = "3px 3px 0 0";
+    baseProps.sx.backgroundColor = (theme) => theme.palette.background.field;
+    baseProps.sx.borderBottom = "1px solid";
+    baseProps.sx.paddingBottom = "5px";
+    baseProps.sx.borderColor = (theme) => theme.palette.primary.main;
+  }
+  if (variant === "outlined") {
+    baseProps.sx.p = "5px";
+  }
+  if ((variant === "square" || variant === "outlined") && isNullish(color)) {
+    const borderColor =
+      "rgba(var(--fo-palette-common-onBackgroundChannel) / 0.23)";
+    baseProps.sx.borderColor = borderColor;
+    baseProps.sx.borderBottomColor = borderColor;
+  }
+  if (isNullish(variant)) {
+    baseProps.variant = "contained";
+    baseProps.color = "tertiary";
+    baseProps.sx["&:hover"] = {
+      backgroundColor: (theme) => theme.palette.tertiary.hover,
+    };
+  }
+
+  if (disabled) {
+    const [bgColor, textColor] = getDisabledColors();
+    baseProps.sx["&.Mui-disabled"] = {
+      backgroundColor: variant === "outlined" ? "inherit" : bgColor,
+      color: textColor,
+    };
+    if (["square", "outlined"].includes(variant)) {
+      baseProps.sx["&.Mui-disabled"].backgroundColor = (theme) =>
+        theme.palette.background.field;
+    }
+  }
+
+  return baseProps;
+}
+
+function getIconProps(props: ViewPropsType): ButtonProps {
+  return getCommonProps(props);
+}
+
+function getCommonProps(props: ViewPropsType): ButtonProps {
+  const color = getColor(props);
+  const disabled = props.schema.view?.disabled || false;
+
+  return {
+    sx: {
+      color,
+      fontSize: "1rem",
+      fontWeight: "bold",
+      borderColor: color,
+      "&:hover": {
+        borderColor: color,
+      },
+      ...(disabled
+        ? {
+            opacity: 0.5,
+          }
+        : {}),
+    },
+  };
+}
+
+function getColor(props: ViewPropsType) {
+  const {
+    schema: { view = {} },
+  } = props;
+  const { color } = view;
+  if (color) {
+    return getColorByCode(color);
+  }
+  const variant = getVariant(props);
+  return (theme) => {
+    return variant === "contained"
+      ? theme.palette.common.white
+      : theme.palette.secondary.main;
+  };
+}
+
+const defaultVariant = ["contained", "outlined"];
+
+function getVariant(pros: ViewPropsType) {
+  const variant = pros.schema.view.variant;
+  if (defaultVariant.includes(variant)) return variant;
+  if (variant === "round") return "contained";
+  return "contained";
+}

app/packages/core/src/plugins/SchemaIO/components/index.ts

@@ -38,6 +38,7 @@ export { default as ModalView } from "./ModalView";
 export { default as NativeModelEvaluationView } from "./NativeModelEvaluationView";
 export { default as ObjectView } from "./ObjectView";
 export { default as OneOfView } from "./OneOfView";
+export { default as OperatorExecutionButtonView } from "./OperatorExecutionButtonView";
 export { default as PillBadgeView } from "./PillBadgeView";
 export { default as PlotlyView } from "./PlotlyView";
 export { default as PrimitiveView } from "./PrimitiveView";

app/packages/embeddings/src/Embeddings.tsx

@@ -1,6 +1,6 @@
 import { useRef, Fragment, useEffect } from "react";
 import { useExternalLink } from "@fiftyone/utilities";
-import { Loading, Selector, useTheme } from "@fiftyone/components";
+import { Selector, useTheme } from "@fiftyone/components";
 import { usePanelStatePartial, useSetPanelCloseEffect } from "@fiftyone/spaces";
 import {
   HighlightAlt,
@@ -24,7 +24,6 @@ import { EmbeddingsPlot } from "./EmbeddingsPlot";
 import { usePlotSelection } from "./usePlotSelection";
 import { useResetPlotZoom } from "./useResetPlotZoom";
 import { OperatorPlacements, types } from "@fiftyone/operators";
-import ComputeVisualizationButton from "./ComputeVisualizationButton";
 import EmptyEmbeddings from "./EmptyEmbeddings";
 import useComputeVisualization from "./useComputeVisualization";
 

app/packages/operators/src/components/OperatorExecutionButton/index.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@mui/material";
+import { OperatorExecutionTrigger } from "../OperatorExecutionTrigger";
+import React from "react";
+import {
+  ExecutionCallback,
+  ExecutionErrorCallback,
+} from "../../types-internal";
+import { OperatorExecutionOption } from "../../state";
+
+/**
+ * Button which acts as a trigger for opening an `OperatorExecutionMenu`.
+ *
+ * @param operatorUri Operator URI
+ * @param onSuccess Callback for successful operator execution
+ * @param onError Callback for operator execution error
+ * @param executionParams Parameters to provide to the operator's execute call
+ * @param onOptionSelected Callback for execution option selection
+ * @param disabled If true, disables the button and context menu
+ */
+export const OperatorExecutionButton = ({
+  operatorUri,
+  onSuccess,
+  onError,
+  executionParams,
+  onOptionSelected,
+  disabled,
+  children,
+  ...props
+}: {
+  operatorUri: string;
+  onSuccess?: ExecutionCallback;
+  onError?: ExecutionErrorCallback;
+  executionParams?: object;
+  onOptionSelected?: (option: OperatorExecutionOption) => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) => {
+  return (
+    <OperatorExecutionTrigger
+      operatorUri={operatorUri}
+      onSuccess={onSuccess}
+      onError={onError}
+      executionParams={executionParams}
+      onOptionSelected={onOptionSelected}
+      disabled={disabled}
+    >
+      <Button disabled={disabled} {...props}>
+        {children}
+      </Button>
+    </OperatorExecutionTrigger>
+  );
+};
+
+export default OperatorExecutionButton;

app/packages/operators/src/components/OperatorExecutionMenu/index.tsx

@@ -0,0 +1,51 @@
+import { Menu, MenuItem, Stack, Typography } from "@mui/material";
+import React from "react";
+import { OperatorExecutionOption } from "../../state";
+
+/**
+ * Component which provides a context menu for executing an operator using a
+ * specified execution target.
+ *
+ * @param anchor Element to use as context menu anchor
+ * @param open If true, context menu will be visible
+ * @param onClose Callback for context menu close events
+ * @param executionOptions List of operator execution options
+ * @param onClick Callback for an option being clicked
+ */
+export const OperatorExecutionMenu = ({
+  anchor,
+  open,
+  onClose,
+  executionOptions,
+  onOptionClick,
+}: {
+  anchor?: Element | null;
+  open: boolean;
+  onClose: () => void;
+  executionOptions: OperatorExecutionOption[];
+  onOptionClick?: (option: OperatorExecutionOption) => void;
+}) => {
+  return (
+    <Menu anchorEl={anchor} open={open} onClose={onClose}>
+      {executionOptions.map((target) => (
+        <MenuItem
+          key={target.id}
+          onClick={() => {
+            onClose?.();
+            onOptionClick?.(target);
+            target.onClick();
+          }}
+        >
+          <Stack direction="column" spacing={1}>
+            <Typography fontWeight="bold">
+              {target.choiceLabel ?? target.label}
+            </Typography>
+            <Typography color="secondary">{target.description}</Typography>
+          </Stack>
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+};
+
+export default OperatorExecutionMenu;