Tooltip support for TableView actions (#5142)

* Added tooltip to actions * Added tooltip to Python obj * Left align actions column and fix spacing --------- Co-authored-by: minhtuevo <[email protected]> Co-authored-by: CamronStaley <[email protected]>
voxel51 · Nov 19, 2024 · a0e189a · a0e189a
1 parent bba04b8
commit a0e189a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx b/app/packages/core/src/plugins/SchemaIO/components/ActionsMenu.tsx
@@ -9,6 +9,7 @@ import {
   Menu,
   MenuItem,
   Stack,
+  Tooltip,
 } from "@mui/material";
 import React, { useCallback } from "react";
 import { getColorByCode } from "../utils";
@@ -20,7 +21,7 @@ export default function ActionsMenu(props: ActionsPropsType) {
 
   if (actions.length <= maxInline) {
     return (
-      <Stack direction="row" spacing={0.5} justifyContent="flex-end">
+      <Stack direction="row" spacing={0.5} justifyContent="flex-start">
         {actions.map((action) => (
           <Action {...action} key={action.name} mode="inline" size={size} />
         ))}
@@ -73,7 +74,8 @@ function ActionsOverflowMenu(props: ActionsPropsType) {
 }
 
 function Action(props: ActionPropsType) {
-  const { label, name, onClick, icon, variant, mode, color, size } = props;
+  const { label, name, onClick, icon, variant, mode, color, size, tooltip } =
+    props;
   const resolvedColor = color ? getColorByCode(color) : undefined;
 
   const Icon = icon ? (
@@ -87,20 +89,32 @@ function Action(props: ActionPropsType) {
     [onClick, props]
   );
 
-  return mode === "inline" ? (
-    <Button
-      variant={variant}
-      startIcon={Icon}
-      onClick={handleClick}
-      sx={{ color: resolvedColor, padding: size === "small" ? 0 : undefined }}
-    >
-      {label}
-    </Button>
+  const content =
+    mode === "inline" ? (
+      <Button
+        variant={variant}
+        startIcon={Icon}
+        onClick={handleClick}
+        sx={{ color: resolvedColor, padding: size === "small" ? 0 : undefined }}
+      >
+        {label}
+      </Button>
+    ) : (
+      <MenuItem onClick={handleClick}>
+        {Icon && <ListItemIcon>{Icon}</ListItemIcon>}
+        <ListItemText sx={{ color: resolvedColor }}>
+          {label || name}
+        </ListItemText>
+      </MenuItem>
+    );
+
+  return tooltip ? (
+    <Tooltip title={tooltip}>
+      <span>{content}</span>{" "}
+      {/* Use <span> to wrap the child to avoid DOM issues */}
+    </Tooltip>
   ) : (
-    <MenuItem onClick={handleClick}>
-      {Icon && <ListItemIcon>{Icon}</ListItemIcon>}
-      <ListItemText sx={{ color: resolvedColor }}>{label || name}</ListItemText>
-    </MenuItem>
+    content
   );
 }
 
@@ -121,4 +135,5 @@ type ActionPropsType = {
   mode: "inline" | "menu";
   color?: string;
   size?: SizeType;
+  tooltip: string | null;
 };
diff --git a/app/packages/core/src/plugins/SchemaIO/components/TableView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TableView.tsx
@@ -141,8 +141,9 @@ export default function TableView(props: ViewPropsType) {
                 {hasRowActions && (
                   <TableCell
                     {...getComponentProps(props, "tableHeadCell", {
-                      sx: { ...headingCellBaseStyles, textAlign: "right" },
+                      sx: { ...headingCellBaseStyles, textAlign: "left" },
                     })}
+                    width={`${max_inline_actions * 5}%`}
                     onClick={() => {
                       handleCellClick(-1, -1);
                     }}

diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
@@ -1824,6 +1824,7 @@ class Action(View):
         name: the name of the action
         label (None): the label of the action
         icon (None): the icon of the action
+        tooltip (None): the tooltip of the action
         on_click: the operator to execute when the action is clicked
     """
 
@@ -1859,9 +1860,9 @@ def add_column(self, key, **kwargs):
         self.columns.append(column)
         return column
 
-    def add_row_action(self, name, on_click, label=None, icon=None, **kwargs):
+    def add_row_action(self, name, on_click, label=None, icon=None, tooltip=None, **kwargs):
         row_action = Action(
-            name=name, on_click=on_click, label=label, icon=icon, **kwargs
+            name=name, on_click=on_click, label=label, icon=icon, tooltip=tooltip, **kwargs
         )
         self.row_actions.append(row_action)
         return row_action