Add tooltips for columns with names that don't match display names. (#6781)

Add tooltips for hparam column names when the name does not match the
display name (using case-insentive comparison).

Author: bmd3k

tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts

@@ -133,6 +133,16 @@ describe('runs_data_table', () => {
     }).compileComponents();
   });
 
+  afterAll(() => {
+    // These elements are being left in the dom from the tooltip. Removing them
+    // to prevent them from affecting other tests.
+    document
+      .querySelectorAll('.cdk-describedby-message-container')
+      .forEach((el) => {
+        el.remove();
+      });
+  });
+
   it('renders', () => {
     const fixture = createComponent({});
     expect(

tensorboard/webapp/widgets/data_table/BUILD

@@ -106,6 +106,7 @@ tf_ng_module(
     deps = [
         ":types",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "//tensorboard/webapp/angular:expect_angular_material_tooltip",
         "@npm//@angular/common",
         "@npm//@angular/core",
     ],
@@ -126,6 +127,7 @@ tf_ng_module(
         "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
         "//tensorboard/webapp/angular:expect_angular_material_input",
+        "//tensorboard/webapp/angular:expect_angular_material_tooltip",
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",

tensorboard/webapp/widgets/data_table/column_selector_component.ng.html

@@ -39,6 +39,8 @@
         'selected': i === (selectedIndex$ | async)
       }"
       (click)="selectColumn(column)"
+      [matTooltip]="column.name"
+      [matTooltipDisabled]="column.name.localeCompare(column.displayName, undefined, {sensitivity: 'accent'}) === 0"
     >
       {{column.displayName}}
     </button>

tensorboard/webapp/widgets/data_table/column_selector_module.ts

@@ -18,6 +18,7 @@ import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
 import {MatButtonModule} from '@angular/material/button';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {ColumnSelectorComponent} from './column_selector_component';
 import {FormsModule} from '@angular/forms';
 
@@ -29,6 +30,7 @@ import {FormsModule} from '@angular/forms';
     MatInputModule,
     MatButtonModule,
     FormsModule,
+    MatTooltipModule,
   ],
   exports: [ColumnSelectorComponent],
 })

tensorboard/webapp/widgets/data_table/data_table_header_component.ng.html

@@ -27,7 +27,10 @@
   ></mat-icon>
   <div *ngSwitchDefault class="extra-right-padding"></div>
 
-  <span [ngClass]="getSpecialTypeClasses(header.type)"
+  <span
+    [ngClass]="getSpecialTypeClasses(header.type)"
+    [matTooltip]="header.name"
+    [matTooltipDisabled]="header.name.localeCompare(header.displayName, undefined, {sensitivity: 'accent'}) === 0"
     >{{ header.displayName }}</span
   >
 </div>

tensorboard/webapp/widgets/data_table/data_table_header_module.ts

@@ -16,11 +16,12 @@ limitations under the License.
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {DataTableHeaderComponent} from './data_table_header_component';
 
 @NgModule({
   declarations: [DataTableHeaderComponent],
   exports: [DataTableHeaderComponent],
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, MatIconModule, MatTooltipModule],
 })
 export class DataTableHeaderModule {}

tensorboard/webapp/widgets/data_table/data_table_test.ts

@@ -119,6 +119,16 @@ describe('data table', () => {
     }).compileComponents();
   });
 
+  afterAll(() => {
+    // These elements are being left in the dom from the tooltip. Removing them
+    // to prevent them from affecting other tests.
+    document
+      .querySelectorAll('.cdk-describedby-message-container')
+      .forEach((el) => {
+        el.remove();
+      });
+  });
+
   function createComponent(input: {
     headers?: ColumnHeader[];
     sortingInfo?: SortingInfo;