Rendered cell tooltip

voxel51 · Nov 19, 2024 · eddfc71 · eddfc71
1 parent c71f7ce
commit eddfc71
Showing 1 changed file with 24 additions and 4 deletions.
diff --git a/app/packages/core/src/plugins/SchemaIO/components/TableView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TableView.tsx
@@ -10,6 +10,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  Tooltip,
   useTheme,
 } from "@mui/material";
 import { isPlainObject } from "lodash";
@@ -65,6 +66,14 @@ export default function TableView(props: ViewPropsType) {
     return computedRowActions;
   }, []);
 
+  const getTooltips = useCallback((tooltipList) => {
+    const tooltipDict = {};
+    for (const { value, row, column } of tooltipList) {
+      tooltipDict[`${row},${column}`] = value; // Create a key from row and column
+    }
+    return tooltipDict;
+  }, []);
+
   const handleCellClick = useCallback(
     (row, column) => {
       if (on_click_cell) {
@@ -95,6 +104,7 @@ export default function TableView(props: ViewPropsType) {
     color: theme.palette.text.secondary,
   };
   const filled = variant === "filled";
+  const tooltipMap = getTooltips(tooltips);
 
   return (
     <Box {...getComponentProps(props, "container")}>
@@ -172,13 +182,14 @@ export default function TableView(props: ViewPropsType) {
                         selectedCells.has(coordinate) ||
                         isRowSelected ||
                         selectedColumns.has(columnIndex);
-                      return (
+
+                      const tooltip = tooltipMap[coordinate]; // Check if there's a tooltip for the cell
+
+                      const cell = (
                         <TableCell
                           key={key}
                           sx={{
-                            background: isSelected
-                              ? selectedCellColor
-                              : "unset",
+                            background: isSelected ? selectedCellColor : "unset",
                           }}
                           onClick={() => {
                             handleCellClick(rowIndex, columnIndex);
@@ -188,7 +199,16 @@ export default function TableView(props: ViewPropsType) {
                           {formatCellValue(item[key], props)}
                         </TableCell>
                       );
+
+                      return tooltip ? (
+                        <Tooltip key={key} title={tooltip} arrow>
+                          {cell}
+                        </Tooltip>
+                      ) : (
+                        cell
+                      );
                     })}
+
                     {hasRowActions && (
                       <TableCell
                         align="right"