HParam UI: display the displayName (tensorflow#6359)

## Motivation for features / changes
In tensorflow#6346 we added a displayName attribute to the ColumnHeader. This PR
uses that name to be displayed in the headers.

## Technical description of changes
I removed lots of headers from a test since now we do not need to test
that each type has the proper text displayed.

Author: JamesHollyer

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

@@ -28,6 +28,6 @@
   <div *ngSwitchDefault class="extra-right-padding"></div>
 
   <span [ngClass]="getSpecialTypeClasses(header.type)"
-    >{{ getHeaderTextColumn(header.type) }}</span
+    >{{ header.displayName }}</span
   >
 </div>

tensorboard/webapp/widgets/data_table/data_table_header_component.ts

@@ -29,49 +29,6 @@ export class DataTableHeaderComponent {
   @Input() header!: ColumnHeader;
   ColumnHeaderType = ColumnHeaderType;
 
-  getHeaderTextColumn(columnHeader: ColumnHeaderType): string {
-    switch (columnHeader) {
-      case ColumnHeaderType.RUN:
-        return 'Run';
-      case ColumnHeaderType.VALUE:
-        return 'Value';
-      case ColumnHeaderType.STEP:
-        return 'Step';
-      case ColumnHeaderType.TIME:
-        return 'Time';
-      case ColumnHeaderType.RELATIVE_TIME:
-        return 'Relative';
-      case ColumnHeaderType.SMOOTHED:
-        return 'Smoothed';
-      case ColumnHeaderType.VALUE_CHANGE:
-        return 'Value';
-      case ColumnHeaderType.START_STEP:
-        return 'Start Step';
-      case ColumnHeaderType.END_STEP:
-        return 'End Step';
-      case ColumnHeaderType.START_VALUE:
-        return 'Start Value';
-      case ColumnHeaderType.END_VALUE:
-        return 'End Value';
-      case ColumnHeaderType.MIN_VALUE:
-        return 'Min';
-      case ColumnHeaderType.MAX_VALUE:
-        return 'Max';
-      case ColumnHeaderType.PERCENTAGE_CHANGE:
-        return '%';
-      case ColumnHeaderType.STEP_AT_MAX:
-        return 'Step at Max';
-      case ColumnHeaderType.STEP_AT_MIN:
-        return 'Step at Min';
-      case ColumnHeaderType.MEAN:
-        return 'Mean';
-      case ColumnHeaderType.RAW_CHANGE:
-        return 'Real Value';
-      default:
-        return '';
-    }
-  }
-
   getSpecialTypeClasses(columnHeader: ColumnHeaderType) {
     switch (columnHeader) {
       case ColumnHeaderType.STEP_AT_MIN:

tensorboard/webapp/widgets/data_table/data_table_test.ts

@@ -113,60 +113,12 @@ describe('data table', () => {
           displayName: 'Run',
           enabled: true,
         },
-        {
-          type: ColumnHeaderType.STEP,
-          name: 'step',
-          displayName: 'Step',
-          enabled: true,
-        },
-        {
-          type: ColumnHeaderType.RELATIVE_TIME,
-          name: 'relativeTime',
-          displayName: 'Relative',
-          enabled: true,
-        },
         {
           type: ColumnHeaderType.VALUE_CHANGE,
           name: 'valueChanged',
           displayName: 'Value',
           enabled: true,
         },
-        {
-          type: ColumnHeaderType.START_STEP,
-          name: 'startStep',
-          displayName: 'Start Step',
-          enabled: true,
-        },
-        {
-          type: ColumnHeaderType.END_STEP,
-          name: 'endStep',
-          displayName: 'End Step',
-          enabled: true,
-        },
-        {
-          type: ColumnHeaderType.START_VALUE,
-          name: 'startValue',
-          displayName: 'Start Value',
-          enabled: true,
-        },
-        {
-          type: ColumnHeaderType.END_VALUE,
-          name: 'endValue',
-          displayName: 'End Value',
-          enabled: true,
-        },
-        {
-          type: ColumnHeaderType.MIN_VALUE,
-          name: 'minValue',
-          displayName: 'Min',
-          enabled: true,
-        },
-        {
-          type: ColumnHeaderType.MAX_VALUE,
-          name: 'maxValue',
-          displayName: 'Max',
-          enabled: true,
-        },
         {
           type: ColumnHeaderType.PERCENTAGE_CHANGE,
           name: 'percentageChanged',
@@ -188,27 +140,19 @@ describe('data table', () => {
     expect(headerElements[0].nativeElement.innerText).toBe('');
     expect(headerElements[1].nativeElement.innerText).toBe('Value');
     expect(headerElements[2].nativeElement.innerText).toBe('Run');
-    expect(headerElements[3].nativeElement.innerText).toBe('Step');
-    expect(headerElements[4].nativeElement.innerText).toBe('Relative');
-    expect(headerElements[5].nativeElement.innerText).toBe('Value');
+    expect(headerElements[3].nativeElement.innerText).toBe('Value');
     expect(
-      headerElements[5]
+      headerElements[3]
         .queryAll(By.css('mat-icon'))[0]
         .nativeElement.getAttribute('svgIcon')
     ).toBe('change_history_24px');
-    expect(headerElements[6].nativeElement.innerText).toBe('Start Step');
-    expect(headerElements[7].nativeElement.innerText).toBe('End Step');
-    expect(headerElements[8].nativeElement.innerText).toBe('Start Value');
-    expect(headerElements[9].nativeElement.innerText).toBe('End Value');
-    expect(headerElements[10].nativeElement.innerText).toBe('Min');
-    expect(headerElements[11].nativeElement.innerText).toBe('Max');
-    expect(headerElements[12].nativeElement.innerText).toBe('%');
+    expect(headerElements[4].nativeElement.innerText).toBe('%');
     expect(
-      headerElements[12]
+      headerElements[4]
         .queryAll(By.css('mat-icon'))[0]
         .nativeElement.getAttribute('svgIcon')
     ).toBe('change_history_24px');
-    expect(headerElements[13].nativeElement.innerText).toBe('Smoothed');
+    expect(headerElements[5].nativeElement.innerText).toBe('Smoothed');
   });
 
   it('displays data in order', () => {