Improve logic for header content and tooltips in the table element.

If ColumnHeader.html is nullish, generates only the HTMLDivElement necessary to display ColumnHeader.name inside the <th> element and assigns it to ColumnHeader.html. Adds a ColumnHeader.tooltip?: string property containing the content for the tooltip. If present, ColumnHeader.htmlU will be wrapped in a LitTooltip. If nullish, then the content will only be wrapped if the content it exceeds the maximum width of the <th> element. PiperOrigin-RevId: 521794328
PAIR-code · Apr 4, 2023 · 1cc6964 · 1cc6964
1 parent f576d5b
commit 1cc6964
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 19 deletions.
diff --git a/lit_nlp/client/elements/table.ts b/lit_nlp/client/elements/table.ts
@@ -332,23 +332,36 @@ export class DataTable extends ReactiveElement {
           {name: colInfo} :
           {...colInfo};
 
-      const shouldDisplayTooltip = this.headerTextMaxWidth != null ?
-        header.name.length > this.headerTextMaxWidth : false;
-
       const headerWidthStyles = styleMap({
         '--header-text-max-width': this.headerTextMaxWidth ?
           `${this.headerTextMaxWidth}ch` : 'none',
       });
 
-      header.html =
-          header.html ?? html`
-          <lit-tooltip style="--tooltip-max-width: 500px;"
-            content=${shouldDisplayTooltip ? header.name : ""}>
-            <div slot="tooltip-anchor" style=${headerWidthStyles}
-              class="header-text">${header.name}</div>
-          </lit-tooltip>`;
-      header.rightAlign =
-          header.rightAlign ?? this.shouldRightAlignColumn(index);
+      // If undefined, generate the HTML for this header from ColumnHeader.name.
+      header.html ??= html`<div slot="tooltip-anchor" class="header-text"
+         style=${headerWidthStyles}>
+        ${header.name}
+      </div>`;
+
+      // If undefined, determine if the header should be right aligned.
+      header.rightAlign ??= this.shouldRightAlignColumn(index);
+
+      // Determine if the HTML should be wrapped in a LitTooltip. If so, do it.
+      const doesTextOverflow = this.headerTextMaxWidth != null ?
+          header.name.length > this.headerTextMaxWidth : false;
+      const shouldDisplayTooltip = header.tooltip != null || doesTextOverflow;
+      if (shouldDisplayTooltip) {
+        const tooltipPlacement = header.rightAlign ? 'left' : '';
+        const tooltipStyles = styleMap({
+          '--tooltip-max-width': header.tooltipMaxWidth ?? '500px',
+          '--tooltip-width': header.tooltipWidth ?? 'auto',
+        });
+        header.html = html`<lit-tooltip content=${header.tooltip ?? header.name}
+          style=${tooltipStyles} tooltipPosition=${tooltipPlacement}>
+          ${header.html}
+        </lit-tooltip>`;
+      }
+
       return header;
     });
   }

diff --git a/lit_nlp/client/elements/table_types.ts b/lit_nlp/client/elements/table_types.ts
@@ -57,6 +57,15 @@ export interface ColumnHeader {
   minWidth?: string;
   /** The width of the column, must be a valid CSS string */
   width?: string;
+  /**
+   * If defined, the table will provide a LitTooltip for this header and pass
+   * this value to that tooltip via its content= attribute.
+   */
+  tooltip?: string;
+  /** A value passed to --tooltip-width via the tooltip's styles= attr. */
+  tooltipWidth?: string;
+  /** A value passed to --tooltip-max-width via the tooltip's styles= attr. */
+  tooltipMaxWidth?: string;
 }
 
 /** Internal data, including metadata */

diff --git a/lit_nlp/client/modules/metrics_module.ts b/lit_nlp/client/modules/metrics_module.ts
@@ -362,14 +362,12 @@ export class MetricsModule extends LitModule {
       const [group, metric] = name.split(': ');
       return {
         name,
-        html: html`
-            <lit-tooltip tooltipPosition="left" content=${spec.description}
-              style="--tooltip-max-width: 500px; --tooltip-width: 200px">
-              <div class="header-text" slot="tooltip-anchor">
-                ${group}<br>${metric}
-              </div>
-            </lit-tooltip>`,
+        html: html`<div slot="tooltip-anchor" class="header-text">
+          ${group}<br>${metric}
+        </div>`,
         rightAlign: true,
+        tooltip: spec.description,
+        tooltipWidth: '200px',
         width: '100px'
       };
     });