HParam UI: Replace RunsTableComponent with DataTable widget behind flag (#6394)

## Motivation for features / changes
We are adding lots of functionality to the scalar data table and the
runs table. For consistency and reuse we are replacing the table in the
runs table with a DataTable widget. This is the first step towards that
change.

## Technical description of changes
Besides the data all the values which are passed in are hard coded into
the runs_table_container. This is done so that we have a data table to
work with quickly and unblock some other work. These values will be set
up in ngrx in future PRs.

## Screenshots of UI changes (or N/A)
We have a plan to restyle this table for the Runs Table. However, that
will come later. For now it is just the standard data table which looks
like this.
<img width="775" alt="Screenshot 2023-05-17 at 4 13 21 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/57cb2919-c046-40e0-8057-b753fac87176">

## Alternate designs / implementations considered (or N/A)
We considered leaving the runs table and adding all features to both.

Author: JamesHollyer

tensorboard/webapp/runs/views/runs_table/BUILD

@@ -82,6 +82,7 @@ tf_ng_module(
         "//tensorboard/webapp/app_routing",
         "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/experiments:types",
+        "//tensorboard/webapp/feature_flag/store",
         "//tensorboard/webapp/hparams",
         "//tensorboard/webapp/hparams:types",
         "//tensorboard/webapp/runs:types",
@@ -95,6 +96,8 @@ tf_ng_module(
         "//tensorboard/webapp/types:ui",
         "//tensorboard/webapp/util:colors",
         "//tensorboard/webapp/util:matcher",
+        "//tensorboard/webapp/widgets/data_table",
+        "//tensorboard/webapp/widgets/data_table:types",
         "//tensorboard/webapp/widgets/experiment_alias",
         "//tensorboard/webapp/widgets/filter_input",
         "//tensorboard/webapp/widgets/range_input",
@@ -135,6 +138,7 @@ tf_ts_library(
         "//tensorboard/webapp/app_routing:testing",
         "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/experiments/store:testing",
+        "//tensorboard/webapp/feature_flag/store",
         "//tensorboard/webapp/hparams",
         "//tensorboard/webapp/hparams:testing",
         "//tensorboard/webapp/hparams:types",
@@ -150,6 +154,7 @@ tf_ts_library(
         "//tensorboard/webapp/testing:utils",
         "//tensorboard/webapp/types",
         "//tensorboard/webapp/types:ui",
+        "//tensorboard/webapp/widgets/data_table",
         "//tensorboard/webapp/widgets/experiment_alias",
         "//tensorboard/webapp/widgets/filter_input",
         "//tensorboard/webapp/widgets/range_input",

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

@@ -20,7 +20,7 @@ import {
   OnInit,
 } from '@angular/core';
 import {createSelector, Store} from '@ngrx/store';
-import {combineLatest, Observable, of, Subject} from 'rxjs';
+import {BehaviorSubject, combineLatest, Observable, of, Subject} from 'rxjs';
 import {
   distinctUntilChanged,
   filter,
@@ -61,6 +61,12 @@ import {
 import {DataLoadState, LoadState} from '../../../types/data';
 import {SortDirection} from '../../../types/ui';
 import {matchRunToRegex} from '../../../util/matcher';
+import {getEnableHparamsInTimeSeries} from '../../../feature_flag/store/feature_flag_selectors';
+import {
+  ColumnHeaderType,
+  SortingOrder,
+  TableData,
+} from '../../../widgets/data_table/types';
 import {
   runColorChanged,
   runPageSelectionToggled,
@@ -194,6 +200,7 @@ function matchFilter(
   selector: 'runs-table',
   template: `
     <runs-table-component
+      *ngIf="!HParamsEnabled.value"
       [experimentIds]="experimentIds"
       [useFlexibleLayout]="useFlexibleLayout"
       [numSelectedItems]="numSelectedItems$ | async"
@@ -220,6 +227,16 @@ function matchFilter(
       (onHparamDiscreteFilterChanged)="onHparamDiscreteFilterChanged($event)"
       (onMetricFilterChanged)="onMetricFilterChanged($event)"
     ></runs-table-component>
+    <tb-data-table
+      *ngIf="HParamsEnabled.value"
+      [headers]="runsColumns"
+      [data]="allRunsTableData$ | async"
+      [sortingInfo]="sortingInfo"
+      [columnCustomizationEnabled]="columnCustomizationEnabled"
+      [smoothingEnabled]="smoothingEnabled"
+      (sortDataBy)="sortDataBy($event)"
+      (orderColumns)="orderColumns($event)"
+    ></tb-data-table>
   `,
   host: {
     '[class.flex-layout]': 'useFlexibleLayout',
@@ -239,12 +256,30 @@ function matchFilter(
 })
 export class RunsTableContainer implements OnInit, OnDestroy {
   private allUnsortedRunTableItems$?: Observable<RunTableItem[]>;
+  allRunsTableData$: Observable<TableData[]> = of([]);
   loading$: Observable<boolean> | null = null;
   filteredItemsLength$?: Observable<number>;
   allItemsLength$?: Observable<number>;
   pageItems$?: Observable<RunTableItem[]>;
   numSelectedItems$?: Observable<number>;
 
+  // TODO(jameshollyer): Move these values to ngrx and make these Observables.
+  runsColumns = [
+    {
+      type: ColumnHeaderType.RUN,
+      name: 'run',
+      displayName: 'Run',
+      enabled: true,
+    },
+  ];
+  sortingInfo = {
+    header: ColumnHeaderType.RUN,
+    name: 'run',
+    order: SortingOrder.ASCENDING,
+  };
+  columnCustomizationEnabled = true;
+  smoothingEnabled = false;
+
   hparamColumns$: Observable<HparamColumn[]> = of([]);
   metricColumns$: Observable<MetricColumn[]> = of([]);
 
@@ -275,6 +310,7 @@ export class RunsTableContainer implements OnInit, OnDestroy {
   sortOption$ = this.store.select(getRunSelectorSort);
   paginationOption$ = this.store.select(getRunSelectorPaginationOption);
   regexFilter$ = this.store.select(getRunSelectorRegexFilter);
+  HParamsEnabled = new BehaviorSubject<boolean>(false);
   private readonly ngUnsubscribe = new Subject<void>();
 
   constructor(private readonly store: Store<State>) {}
@@ -286,10 +322,24 @@ export class RunsTableContainer implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.store.select(getEnableHparamsInTimeSeries).subscribe((enabled) => {
+      this.HParamsEnabled.next(enabled);
+    });
     const getRunTableItemsPerExperiment = this.experimentIds.map((id) =>
       this.getRunTableItemsForExperiment(id)
     );
 
+    const getRunTableDataPerExperiment$ = this.experimentIds.map((id) =>
+      this.getRunTableDataForExperiment(id)
+    );
+
+    this.allRunsTableData$ = combineLatest(getRunTableDataPerExperiment$).pipe(
+      map((itemsForExperiments: TableData[][]) => {
+        const items = [] as TableData[];
+        return items.concat(...itemsForExperiments);
+      })
+    );
+
     const rawAllUnsortedRunTableItems$ = combineLatest(
       getRunTableItemsPerExperiment
     ).pipe(
@@ -519,6 +569,34 @@ export class RunsTableContainer implements OnInit, OnDestroy {
     return slicedItems;
   }
 
+  private getRunTableDataForExperiment(
+    experimentId: string
+  ): Observable<TableData[]> {
+    return combineLatest([
+      this.store.select(getRuns, {experimentId}),
+      this.store.select(getRunColorMap),
+    ]).pipe(
+      map(([runs, colorMap]) => {
+        return runs.map((run) => {
+          const tableData: TableData = {
+            id: run.id,
+            color: colorMap[run.id],
+          };
+          this.runsColumns.forEach((column) => {
+            switch (column.type) {
+              case ColumnHeaderType.RUN:
+                tableData[column.name!] = run.name;
+                break;
+              default:
+                break;
+            }
+          });
+          return tableData;
+        });
+      })
+    );
+  }
+
   private getRunTableItemsForExperiment(
     experimentId: string
   ): Observable<RunTableItem[]> {

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

@@ -31,6 +31,7 @@ import {MatSortModule} from '@angular/material/sort';
 import {MatTableModule} from '@angular/material/table';
 import {ColorPickerModule} from 'ngx-color-picker';
 import {AlertModule} from '../../../alert/alert_module';
+import {DataTableModule} from '../../../widgets/data_table/data_table_module';
 import {ExperimentAliasModule} from '../../../widgets/experiment_alias/experiment_alias_module';
 import {FilterInputModule} from '../../../widgets/filter_input/filter_input_module';
 import {RangeInputModule} from '../../../widgets/range_input/range_input_module';
@@ -45,6 +46,7 @@ import {RunsTableContainer} from './runs_table_container';
   imports: [
     ColorPickerModule,
     CommonModule,
+    DataTableModule,
     ExperimentAliasModule,
     FilterInputModule,
     MatFormFieldModule,

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

@@ -44,6 +44,7 @@ import {buildExperimentRouteFromId} from '../../../app_routing/testing';
 import {RouteKind} from '../../../app_routing/types';
 import {State} from '../../../app_state';
 import {buildExperiment} from '../../../experiments/store/testing';
+import {getEnableHparamsInTimeSeries} from '../../../feature_flag/store/feature_flag_selectors';
 import {
   actions as hparamsActions,
   selectors as hparamsSelectors,
@@ -79,6 +80,8 @@ import {MatIconTestingModule} from '../../../testing/mat_icon_module';
 import {provideMockTbStore} from '../../../testing/utils';
 import {DataLoadState} from '../../../types/data';
 import {SortDirection} from '../../../types/ui';
+import {DataTableModule} from '../../../widgets/data_table/data_table_module';
+import {DataTableComponent} from '../../../widgets/data_table/data_table_component';
 import {ExperimentAliasModule} from '../../../widgets/experiment_alias/experiment_alias_module';
 import {FilterInputModule} from '../../../widgets/filter_input/filter_input_module';
 import {RangeInputModule} from '../../../widgets/range_input/range_input_module';
@@ -239,6 +242,7 @@ describe('runs_table', () => {
         FilterInputModule,
         RangeInputModule,
         ExperimentAliasModule,
+        DataTableModule,
       ],
       declarations: [
         RunsGroupMenuButtonComponent,
@@ -305,6 +309,7 @@ describe('runs_table', () => {
       settingsSelectors.getColorPalette,
       buildColorPalette()
     );
+    store.overrideSelector(getEnableHparamsInTimeSeries, false);
     dispatchSpy = spyOn(store, 'dispatch').and.callFake((action: Action) => {
       actualActions.push(action);
     });
@@ -3169,4 +3174,51 @@ describe('runs_table', () => {
       });
     });
   });
+
+  describe('runs data table', () => {
+    beforeEach(() => {
+      store.overrideSelector(getEnableHparamsInTimeSeries, true);
+    });
+
+    it('renders data table when hparam flag is on', () => {
+      const fixture = createComponent(['book']);
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.query(By.directive(DataTableComponent))
+      ).toBeTruthy();
+      expect(
+        fixture.nativeElement.querySelector('runs-table-component')
+      ).toBeFalsy();
+    });
+
+    it('passes run name 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(getRuns, {experimentId: 'book'})
+        .and.returnValue(
+          of([
+            buildRun({id: 'book1', name: "The Philosopher's Stone"}),
+            buildRun({id: 'book2', name: 'The Chamber Of Secrets'}),
+          ])
+        );
+
+      store.overrideSelector(getRunColorMap, {
+        book1: '#000',
+        book2: '#111',
+      });
+
+      const fixture = createComponent(['book']);
+      fixture.detectChanges();
+      const dataTableComponent = fixture.debugElement.query(
+        By.directive(DataTableComponent)
+      );
+
+      expect(dataTableComponent.componentInstance.data).toEqual([
+        {id: 'book1', color: '#000', run: "The Philosopher's Stone"},
+        {id: 'book2', color: '#111', run: 'The Chamber Of Secrets'},
+      ]);
+    });
+  });
 });