Merge pull request #1115 from VEuPathDB/mesa-inline-changes

New optional Mesa inline table behaviour using tooltips
VEuPathDB · Jun 24, 2024 · e7abcb9 · e7abcb9
2 parents 443528c + 30da70a
commit e7abcb9
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/packages/libs/components/src/components/tidytree/TreeTable.tsx b/packages/libs/components/src/components/tidytree/TreeTable.tsx
@@ -81,6 +81,7 @@ export default function TreeTable<RowType>(props: TreeTableProps<RowType>) {
       ...props.tableProps.options,
       deriveRowClassName: (_) => rowStyleClassName,
       inline: true,
+      inlineUseTooltips: true,
       inlineMaxHeight: `${rowHeight}px`,
       inlineMaxWidth: `${maxColumnWidth}px`,
     },

diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import Templates from '../Templates';
 import { makeClassifier } from '../Utils/Utils';
 
+import { Tooltip } from '../../../components/info/Tooltip';
+
 const dataCellClass = makeClassifier('DataCell');
 
 class DataCell extends React.PureComponent {
@@ -64,7 +66,29 @@ class DataCell extends React.PureComponent {
     width = width ? { width, maxWidth: width, minWidth: width } : {};
     style = Object.assign({}, style, width, whiteSpace);
     className = dataCellClass() + (className ? ' ' + className : '');
-    const children = this.renderContent();
+
+    const content = this.renderContent();
+    const columnName = column.name ?? column.key;
+
+    // Ideally the tooltip would also be conditional on there
+    // being actual content, but this is not trivial without
+    // copy-pasting the getValue logic from this.renderContent().
+    // Verdict: not worth it
+    const children = options.inlineUseTooltips ? (
+      <Tooltip
+        title={
+          <>
+            {columnName && <span>{columnName}:</span>}
+            {content}
+          </>
+        }
+      >
+        {content}
+      </Tooltip>
+    ) : (
+      content
+    );
+
     const props = {
       style,
       children,

diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx
@@ -30,22 +30,22 @@ class DataRow extends React.PureComponent {
 
   expandRow() {
     const { options } = this.props;
-    if (!options.inline) return;
+    if (!options.inline || options.inlineUseTooltips) return;
     this.setState({ expanded: true });
   }
 
   collapseRow() {
     const { options } = this.props;
-    if (!options.inline) return;
+    if (!options.inline || options.inlineUseTooltips) return;
     this.setState({ expanded: false });
   }
 
   handleRowClick() {
     const { row, rowIndex, options } = this.props;
-    const { inline, onRowClick } = options;
+    const { inline, onRowClick, inlineUseTooltips } = options;
     if (!inline && !onRowClick) return;
-
-    if (inline) this.setState({ expanded: !this.state.expanded });
+    if (inline && !inlineUseTooltips)
+      this.setState({ expanded: !this.state.expanded });
     if (typeof onRowClick === 'function') onRowClick(row, rowIndex);
   }
 

diff --git a/packages/libs/coreui/src/components/Mesa/types.ts b/packages/libs/coreui/src/components/Mesa/types.ts
@@ -36,6 +36,7 @@ export interface MesaStateProps<
     inline?: boolean;
     inlineMaxWidth?: string;
     inlineMaxHeight?: string;
+    inlineUseTooltips?: boolean; // don't use onClick to show the full contents, use an onMouseOver tooltip instead
     className?: string;
     errOnOverflow?: boolean;
     editableColumns?: boolean;