Converting LitTooltip back to using named slots in preparation for st…

…yled tooltip content. PiperOrigin-RevId: 521599265
PAIR-code · Apr 3, 2023 · 9179c73 · 9179c73
1 parent 1ad2532
commit 9179c73
Show file tree

Hide file tree

Showing 20 changed files with 84 additions and 61 deletions.
diff --git a/lit_nlp/client/core/app_statusbar.ts b/lit_nlp/client/core/app_statusbar.ts
@@ -71,21 +71,22 @@ export class StatusbarComponent extends MobxLitElement {
               <div>Made with <img src="static/favicon.png" class="emoji"> by the LIT team</div>
 
               <lit-tooltip content="File a bug" tooltipPosition="above left">
-                <a class="link-icon" href=${bugLink}
+                <a slot="tooltip-anchor" class="link-icon" href=${bugLink}
                   target="_blank">
                   <mwc-icon class="icon-button cyea-icon">bug_report</mwc-icon>
                 </a>
               </lit-tooltip>
 
               <lit-tooltip content="View docs" tooltipPosition="above left">
-                <a class="link-icon" href=${docLink}
+                <a slot="tooltip-anchor" class="link-icon" href=${docLink}
                   target="_blank">
                   <mwc-icon class="icon-button cyea-icon">plagiarism</mwc-icon>
                 </a>
               </lit-tooltip>
 
               <lit-tooltip content="Get help" tooltipPosition="above left">
-                <a href=${helpLink} target="_blank">
+                <a class="link-icon" href=${helpLink} target="_blank"
+                  slot="tooltip-anchor">
                   <mwc-icon class="icon-button cyea-icon">feedback</mwc-icon>
                 </a>
               </lit-tooltip>

diff --git a/lit_nlp/client/core/app_toolbar.ts b/lit_nlp/client/core/app_toolbar.ts
@@ -152,7 +152,9 @@ export class ToolbarComponent extends MobxLitElement {
         // clang-format off
         return html`
           <lit-tooltip content=${tooltip}>
-            <button class=${classMap(classes)} @click=${updateModelSelection}>
+            <button class=${classMap(classes)}
+              slot='tooltip-anchor'
+              @click=${updateModelSelection}>
               <span class='material-icon'>${icon}</span>
               &nbsp;
               <span class='headline-button-text'>${name}</span>
@@ -165,7 +167,7 @@ export class ToolbarComponent extends MobxLitElement {
       return html`
         ${modelChips}
         <lit-tooltip content="Select model(s)">
-          <button class='headline-button'
+          <button class='headline-button' slot="tooltip-anchor"
             @click=${() => { this.jumpToSettingsTab("Models"); }}>
             <span class='material-icon-outlined'>smart_toy</span>
             &nbsp;<span class='material-icon'>arrow_drop_down</span>
@@ -179,7 +181,7 @@ export class ToolbarComponent extends MobxLitElement {
       // clang-format off
       return html`
         <lit-tooltip content="Select model(s)">
-          <button class='headline-button'
+          <button class='headline-button' slot="tooltip-anchor"
             @click=${() => { this.jumpToSettingsTab("Models"); }}>
             <span class='material-icon-outlined'>smart_toy</span>
             &nbsp;
@@ -199,7 +201,7 @@ export class ToolbarComponent extends MobxLitElement {
     return html`
       <div class='vertical-separator'></div>
       <lit-tooltip content="Select dataset">
-        <button class='headline-button'
+        <button class='headline-button' slot="tooltip-anchor"
           @click=${() => { this.jumpToSettingsTab("Dataset"); }}>
           <span class='material-icon'>storage</span>
           &nbsp;
@@ -235,7 +237,8 @@ export class ToolbarComponent extends MobxLitElement {
         // clang-format off
         return html`
           <lit-tooltip content="Select ${name} layout">
-            <button class=${classMap(classes)} @click=${updateLayoutSelection}>
+            <button class=${classMap(classes)} slot="tooltip-anchor"
+              @click=${updateLayoutSelection}>
               <span class=${iconClass}>view_compact</span>
               &nbsp;
               <span class='headline-button-text'>${name}</span>
@@ -252,7 +255,7 @@ export class ToolbarComponent extends MobxLitElement {
       // clang-format off
       return html`
         <lit-tooltip content="Select UI layout.">
-          <button class='headline-button'
+          <button class='headline-button' slot="tooltip-anchor"
             @click=${() => { this.jumpToSettingsTab("Layout"); }}>
             <span class='material-icon'>view_compact</span>
             &nbsp;
@@ -286,6 +289,7 @@ export class ToolbarComponent extends MobxLitElement {
     const settingsButton = html`
       <lit-tooltip content="Configure models, datasets, and UI.">
         <button class='headline-button unbordered' id="config"
+          slot="tooltip-anchor"
           @click=${this.toggleGlobalSettings}>
           <span class='material-icon'>settings</span>
           &nbsp;Configure
@@ -296,6 +300,7 @@ export class ToolbarComponent extends MobxLitElement {
         html`
         <lit-tooltip content="Go to documentation" tooltipPosition="left">
           <mwc-icon class="icon-button large-icon white-icon icon-margin"
+            slot="tooltip-anchor"
             @click=${this.toggleDocumentation}>
             help_outline
           </mwc-icon>
@@ -304,7 +309,7 @@ export class ToolbarComponent extends MobxLitElement {
     return html`
       ${settingsButton}
       <lit-tooltip content="Copy link to this page" tooltipPosition="left">
-        <button class='headline-button unbordered'
+        <button class='headline-button unbordered' slot="tooltip-anchor"
           @click=${this.onClickCopyLink}>
           <span class='material-icon'>link</span>
           &nbsp;Copy Link

diff --git a/lit_nlp/client/core/faceting_control.ts b/lit_nlp/client/core/faceting_control.ts
@@ -335,7 +335,8 @@ export class FacetingControl extends ReactiveElement {
       <popup-container>
         <div class="faceting-info" slot='toggle-anchor'>
           <lit-tooltip content=${title}>
-            <button class="hairline-button" ?disabled=${this.disabled}>
+            <button class="hairline-button" slot="tooltip-anchor"
+                    ?disabled=${this.disabled}>
               <span class="material-icon">dashboard</span>
               Facets
             </button>

diff --git a/lit_nlp/client/core/global_settings.ts b/lit_nlp/client/core/global_settings.ts
@@ -105,7 +105,7 @@ export class GlobalSettingsComponent extends MobxLitElement {
 
   @computed
   get newDatapoints() {
-   return this.appState.currentInputData.filter(input => input.meta['added']);
+   return this.appState.currentInputData.filter(input => input.meta.added);
   }
 
   @computed
@@ -169,7 +169,7 @@ export class GlobalSettingsComponent extends MobxLitElement {
           Configure LIT
 
           <lit-tooltip content="Go to reference">
-            <a target='_blank'
+            <a slot="tooltip-anchor" target='_blank'
               href='https://github.com/PAIR-code/lit/wiki/ui_guide.md#global-settings'>
             <mwc-icon class="icon-button large-icon" id="configure-lit-icon">
               open_in_new

diff --git a/lit_nlp/client/core/modules.ts b/lit_nlp/client/core/modules.ts
@@ -35,7 +35,6 @@ import {ModulesService} from '../services/services';
 import {app} from './app';
 import {LitModule} from './lit_module';
 import {styles} from './modules.css';
-import {LitWidget} from './widget_group';
 
 // Width of a minimized widget group. Set to the value of
 // --lit-group-header-height when :host([minimized]) in widget_group.css.
@@ -243,7 +242,7 @@ export class LitModules extends ReactiveElement {
       const litModuleElement = widgetElement.children[0];
       if (litModuleElement instanceof LitModule) {
         litModuleElement.setIsLoading = (isLoading: boolean) => {
-          (widgetElement as LitWidget).isLoading = isLoading;
+          widgetElement.isLoading = isLoading;
         };
       }
     });
@@ -335,21 +334,21 @@ export class LitModules extends ReactiveElement {
             </div>
             <div class="preset-buttons">
               <lit-tooltip content="Maximize lower area" tooltipPosition="left">
-                <mwc-icon class="icon-button"
+                <mwc-icon class="icon-button" slot="tooltip-anchor"
                           ?disabled=${lower === this.mainSectionHeight}
                           @click=${() => {this.setMainSectionHeight('lower');}}>
                   vertical_align_top
                 </mwc-icon>
               </lit-tooltip>
               <lit-tooltip content="Split screen" tooltipPosition="left">
-                <mwc-icon class="icon-button"
+                <mwc-icon class="icon-button" slot="tooltip-anchor"
                           ?disabled=${split === this.mainSectionHeight}
                           @click=${() => {this.setMainSectionHeight('split');}}>
                   vertical_align_center
                 </mwc-icon>
               </lit-tooltip>
               <lit-tooltip content="Maximize upper area" tooltipPosition="left">
-                <mwc-icon class="icon-button"
+                <mwc-icon class="icon-button" slot="tooltip-anchor"
                           ?disabled=${upper === this.mainSectionHeight}
                           @click=${() => {this.setMainSectionHeight('upper');}}>
                   vertical_align_bottom
@@ -398,7 +397,10 @@ export class LitModules extends ReactiveElement {
     return Object.keys(layout).map((tabName, i) => {
       const configs: RenderConfig[][] = layout[tabName];
       const selected = tabToSelect === tabName;
-      const classes = classMap({selected, 'components-group-holder': true});
+      const classes = classMap({
+        'components-group-holder': true,
+        'selected': selected,
+      });
       return html`
         <div class=${classes}>
           ${
@@ -426,7 +428,7 @@ export class LitModules extends ReactiveElement {
         this.requestUpdate();
       };
       const selected = tabToSelect === tabName;
-      const classes = classMap({selected, tab: true});
+      const classes = classMap({'selected': selected, 'tab': true});
       return html`<div class=${classes} @click=${onclick}>${tabName}</div>`;
     });
   }

diff --git a/lit_nlp/client/core/slice_module.ts b/lit_nlp/client/core/slice_module.ts
@@ -234,22 +234,26 @@ export class SliceModule extends LitModule {
           </span>
 
           <lit-tooltip content="Add selected to slice" tooltipPosition="left">
-            <mwc-icon class=${appendIconClass} @click=${appendClicked}>
+            <mwc-icon class=${appendIconClass} @click=${appendClicked}
+             slot="tooltip-anchor">
              add_circle_outline
             </mwc-icon>
           </lit-tooltip>
 
           ${sliceName === STARRED_SLICE_NAME ?
             html`<lit-tooltip content="Reset this slice" tooltipPosition="left">
-                   <mwc-icon class=${clearIconClass} @click=${clearClicked}>
-                     clear
-                   </mwc-icon></lit-tooltip>` :
+              <mwc-icon class=${clearIconClass} @click=${clearClicked}
+                slot="tooltip-anchor">
+                clear
+              </mwc-icon>
+            </lit-tooltip>` :
             html`<lit-tooltip content="Delete this slice"
-                  tooltipPosition="left">
-                  <mwc-icon class='icon-button selector-item-icon-button'
-                  @click=${deleteClicked}>
-                   delete_outline
-                 </mwc-icon></lit-tooltip>`}
+              tooltipPosition="left">
+              <mwc-icon class='icon-button selector-item-icon-button'
+                @click=${deleteClicked} slot="tooltip-anchor">
+                delete_outline
+              </mwc-icon>
+            </lit-tooltip>`}
           <export-controls ?disabled=${shouldDisableIcons}
               .data=${this.getArrayData(sliceName)}
               .downloadFilename="${

diff --git a/lit_nlp/client/elements/color_legend.ts b/lit_nlp/client/elements/color_legend.ts
@@ -147,7 +147,7 @@ export class ColorLegend extends ReactiveElement {
     return html`
       <div class='legend-line'>
         <lit-tooltip content=${val} tooltipPosition="above">
-          <div class='legend-box' style=${style}></div>
+          <div class='legend-box' slot="tooltip-anchor" style=${style}></div>
         </lit-tooltip>
         <div class='legend-label' ?hidden=${hideLabels}>${val}</div>
       </div>
@@ -175,7 +175,7 @@ export class ColorLegend extends ReactiveElement {
     return html`
       <div class='legend-line'>
         <lit-tooltip content=${title} tooltipPosition="above">
-          <div class='legend-box' style=${style}></div>
+          <div class='legend-box' slot="tooltip-anchor" style=${style}></div>
         </lit-tooltip>
       </div>
     `;
@@ -194,7 +194,8 @@ export class ColorLegend extends ReactiveElement {
         <div class="legend-container">
           <lit-tooltip .content=${this.paletteTooltipText}
             .tooltipPosition=${'above'}>
-            <mwc-icon class="icon material-icon-outlined">palette</mwc-icon>
+            <mwc-icon class="icon material-icon-outlined"
+              slot="tooltip-anchor">palette</mwc-icon>
           </lit-tooltip>
           <div class="color-label" name="color-name">
             ${this.label}
@@ -224,7 +225,8 @@ export class ColorLegend extends ReactiveElement {
         <div class="legend-container">
           <lit-tooltip .content=${this.paletteTooltipText}
             .tooltipPosition=${'above'}>
-            <mwc-icon class="icon material-icon-outlined">palette</mwc-icon>
+            <mwc-icon class="icon material-icon-outlined"
+              slot="tooltip-anchor">palette</mwc-icon>
           </lit-tooltip>
           <div class="color-label" name="color-name">
             ${this.label}

diff --git a/lit_nlp/client/elements/data_matrix.ts b/lit_nlp/client/elements/data_matrix.ts
@@ -252,7 +252,7 @@ export class DataMatrix extends LitElement {
     // clang-format off
     return html`
       <lit-tooltip content="Rotate column labels">
-        <mwc-icon class="icon-button"
+        <mwc-icon class="icon-button" slot="tooltip-anchor"
           @click="${toggleVerticalColumnLabels}">
           ${this.verticalColumnLabels ? 'text_rotate_up' : 'text_rotation_none'}
         </mwc-icon>

diff --git a/lit_nlp/client/elements/export_controls.ts b/lit_nlp/client/elements/export_controls.ts
@@ -111,22 +111,22 @@ export class ExportControls extends ReactiveElement {
       <div id='export-controls'>
         <lit-tooltip content="Copy ${this.data.length} rows as CSV"
           tooltipPosition=${this.tooltipPosition}>
-          <mwc-icon class=${iconClass} @click=${copyCSV}>
+          <mwc-icon class=${iconClass} slot="tooltip-anchor" @click=${copyCSV}>
             file_copy
           </mwc-icon>
         </lit-tooltip>
 
         <popup-container class='${this.getPopupClasses()}'>
           <lit-tooltip content="Download ${this.data.length} rows as CSV"
             tooltipPosition="${this.tooltipPosition}" slot="toggle-anchor">
-            <mwc-icon class=${iconClass}>
+            <mwc-icon class=${iconClass} slot="tooltip-anchor">
               file_download
             </mwc-icon>
           </lit-tooltip>
           <div class='download-popup-controls'>
             <label for="filename">Filename</label>
             <input type="text" name="filename" value=${this.downloadFilename}
-                   @input=${updateFilename} @keydown=${onEnter}>
+              @input=${updateFilename} @keydown=${onEnter}>
             <button class='download-button filled-button nowrap'
               @click=${downloadCSV}
               ?disabled=${!this.downloadFilename}>

diff --git a/lit_nlp/client/elements/numeric_input.ts b/lit_nlp/client/elements/numeric_input.ts
@@ -78,8 +78,7 @@ export class NumericInput extends LitElement {
 
     const renderNumericInput = html`
       <lit-tooltip content=${toolTipContent}>
-        <input
-          type="number"
+        <input slot="tooltip-anchor" type="number"
           class="slider-value ${throwError? "error": ""}"
           step=${this.step}
           min=${this.min}

diff --git a/lit_nlp/client/elements/score_bar.ts b/lit_nlp/client/elements/score_bar.ts
@@ -101,13 +101,13 @@ export class AnnotatedScoreBar extends LitElement {
     return html`<div class="annotated-cell">
       <score-bar score=${this.value} maxScore=${1}></score-bar>
       <lit-tooltip content="${PRED_TITLE}">
-        <div class="indicator">
+        <div class="indicator" slot="tooltip-anchor">
           ${this.isPredicted ? 'P' : null}
         </div>
       </lit-tooltip>
       ${this.hasTruth ?
           html`<lit-tooltip content=${TRUTH_TITLE}>
-          <div class="indicator">
+          <div class="indicator" slot="tooltip-anchor">
             ${this.isTruth ? 'T' : null}
           </div></lit-tooltip>` : null}
     </div>`;

diff --git a/lit_nlp/client/elements/table.ts b/lit_nlp/client/elements/table.ts
@@ -344,7 +344,7 @@ export class DataTable extends ReactiveElement {
           header.html ?? html`
           <lit-tooltip style="--tooltip-max-width: 500px;"
             content=${shouldDisplayTooltip ? header.name : ""}>
-              <div style=${headerWidthStyles}
+            <div slot="tooltip-anchor" style=${headerWidthStyles}
               class="header-text">${header.name}</div>
           </lit-tooltip>`;
       header.rightAlign =
@@ -743,7 +743,7 @@ export class DataTable extends ReactiveElement {
         <lit-tooltip .content=${"Go to a random page"}
           .tooltipPosition=${"above"}>
           <mwc-icon class='icon-button mdi-outlined icon-button-fix-offset'
-            @click=${randomPage}>
+            @click=${randomPage} slot="tooltip-anchor">
             casino
           </mwc-icon>
         </lit-tooltip>

diff --git a/lit_nlp/client/elements/token_chips.ts b/lit_nlp/client/elements/token_chips.ts
@@ -57,7 +57,7 @@ export class TokenChips extends LitElement {
     return html`
       <div class="salient-token" style=${tokenStyle}>
         <lit-tooltip content=${weight.toPrecision(3)}>
-          <span>${token}</span>
+          <span slot="tooltip-anchor">${token}</span>
         </lit-tooltip>
       </div>`;
     // clang-format on

diff --git a/lit_nlp/client/elements/tooltip.ts b/lit_nlp/client/elements/tooltip.ts
@@ -31,10 +31,13 @@ import {styles} from './tooltip.css';
 /**
  * A tooltip element that displays on hover and on click.
  *
- * Usage:
+ * Use the `tooltip-anchor` slot for the control; this will be rendered where
+ * the <lit-tooltip> element is placed.
  *
- *   <lit-tooltip .content=${tooltipMarkdown}>
- *     <button></button>
+ * Usage:
+ *   <lit-tooltip style=${tooltipStyle> .content=${tooltipMarkdown}>
+ *     <button slot="tooltip-anchor">
+ *     </button>
  *   </lit-tooltip>
  */
 @customElement('lit-tooltip')
@@ -65,7 +68,7 @@ export class LitTooltip extends ReactiveElement {
 
     return html`
       <div class='lit-tooltip'>
-        <slot>
+        <slot name="tooltip-anchor">
           ${this.content === '' ? '' : html`
             <span class="help-icon material-icon-outlined icon-button">
               help_outline