From 7d3040819cfda82fe5ac2ce5b9fc46556918da20 Mon Sep 17 00:00:00 2001 From: Crystal Qian Date: Thu, 19 Jan 2023 19:12:11 -0800 Subject: [PATCH] Migrate more titles to tooltip element and remove redundant titles. PiperOrigin-RevId: 503324949 --- lit_nlp/client/core/app_toolbar.css | 2 +- lit_nlp/client/core/app_toolbar.ts | 130 +++++++++++-------- lit_nlp/client/core/widget_group.css | 2 +- lit_nlp/client/core/widget_group.ts | 2 + lit_nlp/client/elements/color_legend.css | 3 + lit_nlp/client/elements/color_legend.ts | 15 ++- lit_nlp/client/elements/table.ts | 5 +- lit_nlp/client/modules/embeddings_module.ts | 14 +- lit_nlp/client/modules/tcav_module.ts | 12 +- lit_nlp/client/modules/thresholder_module.ts | 14 +- 10 files changed, 120 insertions(+), 79 deletions(-) diff --git a/lit_nlp/client/core/app_toolbar.css b/lit_nlp/client/core/app_toolbar.css index ba8baf18..ce1fbac0 100644 --- a/lit_nlp/client/core/app_toolbar.css +++ b/lit_nlp/client/core/app_toolbar.css @@ -24,7 +24,7 @@ align-items: center; } -.headline-section > * { +.headline-section > div:not(.vertical-separator), button, mwc-icon { padding: 4px; display: flex; justify-content: center; diff --git a/lit_nlp/client/core/app_toolbar.ts b/lit_nlp/client/core/app_toolbar.ts index 0bff1019..0695d626 100644 --- a/lit_nlp/client/core/app_toolbar.ts +++ b/lit_nlp/client/core/app_toolbar.ts @@ -147,25 +147,32 @@ export class ToolbarComponent extends MobxLitElement { this.settingsService.updateSettings({'models': [...modelSet]}); this.requestUpdate(); }; + + const tooltip = `${isSelected ? 'Unselect' : 'Select'} model ${name}`; // clang-format off return html` - + + + `; // clang-format on }); // clang-format off return html` ${modelChips} - + + + `; // clang-format on } else { @@ -173,14 +180,16 @@ export class ToolbarComponent extends MobxLitElement { const buttonText = this.appState.currentModels.join(', '); // clang-format off return html` - + + + `; // clang-format on } @@ -191,14 +200,16 @@ export class ToolbarComponent extends MobxLitElement { // clang-format off return html`
- + + + `; // clang-format on } @@ -225,12 +236,14 @@ export class ToolbarComponent extends MobxLitElement { }; // clang-format off return html` - + + + `; // clang-format on }); @@ -241,14 +254,16 @@ export class ToolbarComponent extends MobxLitElement { // Otherwise, give a regular button that opens the layouts menu. // clang-format off return html` - + + + `; // clang-format on } @@ -272,27 +287,34 @@ export class ToolbarComponent extends MobxLitElement { renderRightCorner() { // clang-format off const settingsButton = html` - `; + + + `; const docButton = this.appState.metadata != null ? html` + help_outline - ` : null; + + ` : null; + return html` ${settingsButton} - + + + ${docButton} `; // clang-format on diff --git a/lit_nlp/client/core/widget_group.css b/lit_nlp/client/core/widget_group.css index f335e101..ddbbfdd8 100644 --- a/lit_nlp/client/core/widget_group.css +++ b/lit_nlp/client/core/widget_group.css @@ -118,7 +118,7 @@ lit-widget { max-width: var(--lit-group-header-height); } -:host([minimized]) .header { +:host([minimized]) .header:not(.tooltip-text){ padding-top: 8px; padding-bottom: 2px; /* top icon should align with horizontal toolbar */ padding-left: 0; diff --git a/lit_nlp/client/core/widget_group.ts b/lit_nlp/client/core/widget_group.ts index fca58d64..8858a2fe 100644 --- a/lit_nlp/client/core/widget_group.ts +++ b/lit_nlp/client/core/widget_group.ts @@ -148,6 +148,8 @@ export class WidgetGroup extends ReactiveElement { const tooltipHtml = html``; + // TODO(b/255799266): Add fast tooltips to module controls without + // rotating on collapse. // clang-format off return html`
diff --git a/lit_nlp/client/elements/color_legend.css b/lit_nlp/client/elements/color_legend.css index 7369eb19..8b3b7e07 100644 --- a/lit_nlp/client/elements/color_legend.css +++ b/lit_nlp/client/elements/color_legend.css @@ -19,6 +19,9 @@ margin: 2px; border: 1px solid gray; border-radius: 1px; + /* This helps to offset a rendering differential between + * tooltip and color blocks. */ + transform: translateY(2px); } .legend-label { diff --git a/lit_nlp/client/elements/color_legend.ts b/lit_nlp/client/elements/color_legend.ts index b616316f..8a6bfcb4 100644 --- a/lit_nlp/client/elements/color_legend.ts +++ b/lit_nlp/client/elements/color_legend.ts @@ -146,7 +146,9 @@ export class ColorLegend extends ReactiveElement { // clang-format off return html`
-
+ +
+
${val}
`; @@ -169,11 +171,12 @@ export class ColorLegend extends ReactiveElement { const background = this.scale(colorVal); const style = styleMap({'background': background}); - // TODO(b/237418328): Add a custom tooltip for a faster display time. // clang-format off return html`
-
+ +
+
`; // clang-format on @@ -194,8 +197,7 @@ export class ColorLegend extends ReactiveElement { palette -
+
${this.label}
@@ -226,8 +228,7 @@ export class ColorLegend extends ReactiveElement { palette -
+
${this.label}
diff --git a/lit_nlp/client/elements/table.ts b/lit_nlp/client/elements/table.ts index fa72afcd..15ee1ab2 100644 --- a/lit_nlp/client/elements/table.ts +++ b/lit_nlp/client/elements/table.ts @@ -825,10 +825,13 @@ export class DataTable extends ReactiveElement { const headerClasses = classMap({'column-header': true, 'right-align': header.rightAlign!}); + + // TODO(b/255799266): Add fast tooltips to icons. + // There's some rendering trickiness around the table element and tooltips. // clang-format off return html` -
+
${header.html!}
${this.searchEnabled ? html` diff --git a/lit_nlp/client/modules/embeddings_module.ts b/lit_nlp/client/modules/embeddings_module.ts index 7624c78d..729afadf 100644 --- a/lit_nlp/client/modules/embeddings_module.ts +++ b/lit_nlp/client/modules/embeddings_module.ts @@ -590,11 +590,15 @@ export class EmbeddingsModule extends LitModule { label=${this.colorService.selectedColorOption.name} .scale=${this.colorService.selectedColorOption.scale}> - + + +
`; diff --git a/lit_nlp/client/modules/tcav_module.ts b/lit_nlp/client/modules/tcav_module.ts index 5a1477ff..3a7cf75f 100644 --- a/lit_nlp/client/modules/tcav_module.ts +++ b/lit_nlp/client/modules/tcav_module.ts @@ -271,7 +271,7 @@ export class TCAVModule extends LitModule { this.selectedLayers.size; const disabledText = - `select a slice with ${MIN_EXAMPLES_LENGTH} or more examples`; + `Select a slice with ${MIN_EXAMPLES_LENGTH} or more examples.`; // The width of the SVG increase by 60px for each additional entry after // the first bar, so their labels don't overlap. @@ -306,10 +306,12 @@ export class TCAVModule extends LitModule { this.selectedLayers.size === 0 && this.selectedSlices.size === 0 && this.negativeSlices.size === 0}>Clear - + + +
diff --git a/lit_nlp/client/modules/thresholder_module.ts b/lit_nlp/client/modules/thresholder_module.ts index 700e009c..656395b5 100644 --- a/lit_nlp/client/modules/thresholder_module.ts +++ b/lit_nlp/client/modules/thresholder_module.ts @@ -255,14 +255,18 @@ export class ThresholderModule extends LitModule { "using the cost ratio and a number of different techniques"; return html` ${this.facetingControl} -
Cost ratio (FP/FN):
+ +
Cost ratio (FP/FN):
+ - `; + + + `; } override renderImpl() {