HParams: Use experiment alias in experiment column (#6485)

## Motivation for features / changes
The Experiment column in the current runs table uses the
tb-experiment-alias widget to nicely display the experiment alias and
alias number. Our RunsDataTable simply displayed the experiment name.
This changes the RunsDataTable to use the same tb-experiment-alias
widget in its Experiment column.

## Technical description of changes
Since the ExperimentAlias interface does not conform to the TableData
value which is defined as string|number|boolean. I had to add object as
an option. Values that use an object require specific logic for sorting.
I added that logic into for the experimentAlias. I also added a place
for that logic if an object is ever used in the Scalar Table with a
comment explaining its purpose.

## Screenshots of UI changes (or N/A)
<img width="118" alt="Screenshot 2023-07-07 at 3 53 10 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/cd1571f5-e4c8-4aa4-808a-7e4307ff34f5">

## Detailed steps to verify changes work correctly (as executed by you)
I imported this and ran internally to ensure this worked.

## Alternate designs / implementations considered (or N/A)
I also considered having the experimentAlias DataTable object simply
contain the experimentId and then pass the ExperimentIdToAliasMap into
the RunsDataTable. However, that would actually make sorting even more
difficult. I also think supporting objects might prove useful in the
future.

Author: JamesHollyer

tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ts

@@ -303,8 +303,15 @@ export class ScalarCardDataTable {
 }
 
 function makeValueSortable(
-  value: number | string | boolean | null | undefined
+  value: number | string | boolean | null | undefined | object
 ) {
+  if (typeof value === 'object') {
+    // The Scalar table does not currently support any objects.
+    // When support is added specific sorting logic to that object type should
+    // be added here.
+    return -Infinity;
+  }
+
   if (
     Number.isNaN(value) ||
     value === 'NaN' ||

tensorboard/webapp/runs/store/runs_reducers.ts

@@ -345,14 +345,14 @@ const {initialState: uiInitialState, reducers: uiNamespaceContextedReducers} =
         if (
           newRoute.routeKind === RouteKind.COMPARE_EXPERIMENT &&
           !state.runsTableHeaders.find(
-            (header) => header.name === 'experimentName'
+            (header) => header.name === 'experimentAlias'
           )
         ) {
           const newRunsTableHeaders = [
             ...state.runsTableHeaders,
             {
-              type: ColumnHeaderType.EXPERIMENT,
-              name: 'experimentName',
+              type: ColumnHeaderType.CUSTOM,
+              name: 'experimentAlias',
               displayName: 'Experiment',
               enabled: true,
               movable: true,
@@ -370,7 +370,7 @@ const {initialState: uiInitialState, reducers: uiNamespaceContextedReducers} =
           newRoute.routeKind !== RouteKind.COMPARE_EXPERIMENT
         ) {
           const newRunsTableHeaders = state.runsTableHeaders.filter(
-            (column) => column.name !== 'experimentName'
+            (column) => column.name !== 'experimentAlias'
           );
 
           return {

tensorboard/webapp/runs/store/runs_reducers_test.ts

@@ -1354,7 +1354,7 @@ describe('runs_reducers', () => {
       expect(nextState.data.initialGroupBy.key).toBe(GroupByKey.RUN);
     });
 
-    it('adds the experiment name column to the runs table columns list', () => {
+    it('adds the experiment alias column to the runs table columns list', () => {
       const state = buildRunsState(
         {},
         {
@@ -1377,18 +1377,18 @@ describe('runs_reducers', () => {
       );
       expect(
         nextState.ui.runsTableHeaders.map((column) => column.name)
-      ).toEqual(['run', 'experimentName']);
+      ).toEqual(['run', 'experimentAlias']);
     });
 
-    it('does not add duplicate experiment name columns', () => {
+    it('does not add duplicate experiment alias columns', () => {
       const state = buildRunsState(
         {},
         {
           runsTableHeaders: [
             {
-              type: ColumnHeaderType.EXPERIMENT,
-              name: 'experimentName',
-              displayName: 'ExperimentName',
+              type: ColumnHeaderType.CUSTOM,
+              name: 'experimentAlias',
+              displayName: 'Experiment',
               enabled: true,
             },
             {
@@ -1409,18 +1409,18 @@ describe('runs_reducers', () => {
       );
       expect(
         nextState.ui.runsTableHeaders.map((column) => column.name)
-      ).toEqual(['experimentName', 'run']);
+      ).toEqual(['experimentAlias', 'run']);
     });
 
-    it('removes the experiment name column when changing away comparison view', () => {
+    it('removes the experiment alias column when changing away comparison view', () => {
       const state = buildRunsState(
         {},
         {
           runsTableHeaders: [
             {
-              type: ColumnHeaderType.EXPERIMENT,
-              name: 'experimentName',
-              displayName: 'ExperimentName',
+              type: ColumnHeaderType.CUSTOM,
+              name: 'experimentAlias',
+              displayName: 'Experiment',
               enabled: true,
             },
             {

tensorboard/webapp/runs/views/runs_table/runs_data_table.ng.html

@@ -86,6 +86,11 @@
                   (click)="selectionClick($event, dataRow['id'])"
                 ></mat-checkbox>
               </div>
+              <span *ngSwitchCase="'experimentAlias'">
+                <tb-experiment-alias
+                  [alias]="dataRow['experimentAlias']"
+                ></tb-experiment-alias>
+              </span>
             </ng-container>
           </tb-data-table-content-cell>
         </ng-container>

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

@@ -257,6 +257,34 @@ describe('runs_data_table', () => {
     });
   });
 
+  it('adds ExperimentAlias widget on experimentAlias column', () => {
+    const fixture = createComponent({
+      headers: [
+        {
+          name: 'experimentAlias',
+          type: ColumnHeaderType.CUSTOM,
+          displayName: 'Experiment Alias',
+          enabled: true,
+        },
+      ],
+    });
+
+    const dataTable = fixture.debugElement.query(
+      By.directive(DataTableComponent)
+    );
+
+    const cells = dataTable.queryAll(By.directive(ContentCellComponent));
+
+    const selectedContentCells = cells.filter((cell) => {
+      return cell.componentInstance.header.name === 'experimentAlias';
+    });
+
+    expect(selectedContentCells.length).toBe(1);
+    selectedContentCells.forEach((cell) => {
+      expect(cell.query(By.css('tb-experiment-alias'))).toBeTruthy();
+    });
+  });
+
   it('emits onAllSelectionToggle event when selected header checkbox is clicked', () => {
     const fixture = createComponent({});
 

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

@@ -189,8 +189,13 @@ function sortTableDataItems(
   const sortedItems = [...items];
 
   sortedItems.sort((a, b) => {
-    const aValue = a[sort.name];
-    const bValue = b[sort.name];
+    let aValue = a[sort.name];
+    let bValue = b[sort.name];
+
+    if (sort.name === 'experimentAlias') {
+      aValue = (aValue as ExperimentAlias).aliasNumber;
+      bValue = (bValue as ExperimentAlias).aliasNumber;
+    }
 
     if (aValue === bValue) {
       return 0;
@@ -376,7 +381,7 @@ export class RunsTableContainer implements OnInit, OnDestroy {
             ...Object.fromEntries(runTableItem.hparams.entries()),
             id: runTableItem.run.id,
             run: runTableItem.run.name,
-            experimentName: runTableItem.experimentName,
+            experimentAlias: runTableItem.experimentAlias,
             selected: runTableItem.selected,
             color: runTableItem.runColor,
           };

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

@@ -3210,37 +3210,27 @@ describe('runs_table', () => {
       ).toBeTruthy();
     });
 
-    it('passes run name, selected value, and color to data table', () => {
+    it('passes run name, experiment alias, selected value, and color to data table', () => {
       // To make sure we only return the runs when called with the right props.
       const selectSpy = spyOn(store, 'select').and.callThrough();
       selectSpy.withArgs(getFilteredRenderableRunsFromRoute).and.returnValue(
         of([
           {
             run: buildRun({id: 'book1', name: "The Philosopher's Stone"}),
             runColor: '#000',
-            experimentName: 'book',
+            experimentAlias: {aliasText: 'book', aliasNumber: 1},
             selected: true,
             hparams: new Map(),
           },
           {
             run: buildRun({id: 'book2', name: 'The Chamber Of Secrets'}),
             runColor: '#111',
-            experimentName: 'book',
+            experimentAlias: {aliasText: 'book', aliasNumber: 1},
             selected: false,
             hparams: new Map(),
           },
         ])
       );
-      selectSpy.withArgs(getRunsTableHeaders).and.returnValue(
-        of([
-          {
-            type: ColumnHeaderType.RUN,
-            name: 'run',
-            displayName: 'Run',
-            enabled: true,
-          },
-        ])
-      );
 
       const fixture = createComponent(['book']);
       fixture.detectChanges();
@@ -3253,14 +3243,14 @@ describe('runs_table', () => {
           id: 'book1',
           color: '#000',
           run: "The Philosopher's Stone",
-          experimentName: 'book',
+          experimentAlias: {aliasNumber: 1, aliasText: 'book'},
           selected: true,
         },
         {
           id: 'book2',
           color: '#111',
           run: 'The Chamber Of Secrets',
-          experimentName: 'book',
+          experimentAlias: {aliasNumber: 1, aliasText: 'book'},
           selected: false,
         },
       ]);
@@ -3351,6 +3341,7 @@ describe('runs_table', () => {
         store.overrideSelector(getFilteredRenderableRunsFromRoute, [
           {
             run: run1,
+            experimentAlias: {aliasNumber: 1, aliasText: 'bbb'},
             hparams: new Map<string, number | string | boolean>([
               ['batch_size', 2],
               ['good_hparam', false],
@@ -3359,13 +3350,15 @@ describe('runs_table', () => {
           } as RunTableItem,
           {
             run: run2,
+            experimentAlias: {aliasNumber: 2, aliasText: 'ccc'},
             hparams: new Map<string, number | string | boolean>([
               ['batch_size', 1],
               ['good_hparam', true],
             ]),
           } as RunTableItem,
           {
             run: run3,
+            experimentAlias: {aliasNumber: 3, aliasText: 'aaa'},
             hparams: new Map<string, number | string | boolean>([
               ['batch_size', 3],
               ['good_hparam', false],
@@ -3514,6 +3507,44 @@ describe('runs_table', () => {
           runsDataTable.componentInstance.data[2]['scarce']
         ).toBeUndefined();
       });
+
+      it('sorts experiment alias by alias number.', () => {
+        store.overrideSelector(getRunsTableSortingInfo, {
+          name: 'experimentAlias',
+          order: SortingOrder.ASCENDING,
+        });
+        const fixture = createComponent(['book']);
+        const runsDataTable = fixture.debugElement.query(
+          By.directive(RunsDataTable)
+        );
+
+        expect(
+          runsDataTable.componentInstance.data[0]['experimentAlias'].aliasNumber
+        ).toEqual(1);
+        expect(
+          runsDataTable.componentInstance.data[1]['experimentAlias'].aliasNumber
+        ).toEqual(2);
+        expect(
+          runsDataTable.componentInstance.data[2]['experimentAlias'].aliasNumber
+        ).toEqual(3);
+
+        store.overrideSelector(getRunsTableSortingInfo, {
+          name: 'experimentAlias',
+          order: SortingOrder.DESCENDING,
+        });
+        store.refreshState();
+        fixture.detectChanges();
+
+        expect(
+          runsDataTable.componentInstance.data[0]['experimentAlias'].aliasNumber
+        ).toEqual(3);
+        expect(
+          runsDataTable.componentInstance.data[1]['experimentAlias'].aliasNumber
+        ).toEqual(2);
+        expect(
+          runsDataTable.componentInstance.data[2]['experimentAlias'].aliasNumber
+        ).toEqual(1);
+      });
     });
   });
 });

tensorboard/webapp/widgets/data_table/content_cell_component.ts

@@ -47,7 +47,6 @@ export class ContentCellComponent {
     }
     switch (this.header.type) {
       case ColumnHeaderType.RUN:
-      case ColumnHeaderType.EXPERIMENT:
         return this.datum as string;
       case ColumnHeaderType.VALUE:
       case ColumnHeaderType.STEP:

tensorboard/webapp/widgets/data_table/types.ts

@@ -23,7 +23,6 @@ export enum ColumnHeaderType {
   RELATIVE_TIME = 'RELATIVE_TIME',
   RUN = 'RUN',
   STEP = 'STEP',
-  EXPERIMENT = 'EXPERIMENT',
   TIME = 'TIME',
   VALUE = 'VALUE',
   SMOOTHED = 'SMOOTHED',
@@ -75,7 +74,7 @@ export interface SortingInfo {
  * DataTable. It will have a value for each required ColumnHeader for a given
  * run.
  */
-export type TableData = Record<string, string | number | boolean> & {
+export type TableData = Record<string, string | number | boolean | object> & {
   id: string;
 };