Hparams: Allow users to load more Hparams if they are not all included in default. (#6780)

In #6777 we limited the number of hparams we load by default.

Now we add the option for the user to load all hparams in spite of the
performance implications.

OSS Light Mode:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/891856ac-bbf7-4b8b-be94-b776fe4bbe1e)

OSS Dark Mode:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/7f6fff68-73c2-4321-8912-8deb651be83d)

Internal Light Mode:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/b0e251c2-6b07-45e6-948d-bce24923d75a)

Internal Dark Mode:

![image](https://github.com/tensorflow/tensorboard/assets/17152369/d8959cd1-d12c-401e-9a75-45eae5fa4551)

Author: bmd3k

tensorboard/webapp/hparams/_redux/hparams_actions.ts

@@ -71,3 +71,7 @@ export const dashboardHparamColumnOrderChanged = createAction(
   '[Hparams] Dashboard Hparam Column Order Changed',
   props<ReorderColumnEvent>()
 );
+
+export const loadAllDashboardHparams = createAction(
+  '[Hparams] Load all Hparams'
+);

tensorboard/webapp/hparams/_redux/hparams_effects.ts

@@ -62,7 +62,11 @@ export class HparamsEffects {
 
   private readonly loadHparamsOnReload$: Observable<string[]> =
     this.actions$.pipe(
-      ofType(coreActions.reload, coreActions.manualReload),
+      ofType(
+        coreActions.reload,
+        coreActions.manualReload,
+        hparamsActions.loadAllDashboardHparams
+      ),
       withLatestFrom(this.store.select(getExperimentIdsFromRoute)),
       filter(([, experimentIds]) => Boolean(experimentIds)),
       map(([, experimentIds]) => experimentIds as string[])

tensorboard/webapp/hparams/_redux/hparams_effects_test.ts

@@ -101,6 +101,10 @@ describe('hparams effects', () => {
     dataSource.fetchSessionGroups.and.returnValue(of(mockSessionGroups));
   });
 
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
   describe('loadHparamsData$', () => {
     beforeEach(() => {
       effects.loadHparamsData$.subscribe((action) => {
@@ -162,41 +166,32 @@ describe('hparams effects', () => {
       ]);
     });
 
-    it('fetches data on reload', () => {
-      action.next(coreActions.reload());
-      expect(dataSource.fetchExperimentInfo).toHaveBeenCalledWith(
-        ['expFromRoute'],
-        1111
-      );
-      expect(dataSource.fetchSessionGroups).toHaveBeenCalledWith(
-        ['expFromRoute'],
-        [buildHparamSpec({name: 'h1'})]
-      );
-      expect(actualActions).toEqual([
-        hparamsActions.hparamsFetchSessionGroupsSucceeded({
-          hparamSpecs: mockHparamSpecs,
-          sessionGroups: mockSessionGroups,
-        }),
-      ]);
-    });
-
-    it('fetches data on manualReload', () => {
-      action.next(coreActions.manualReload());
-      expect(dataSource.fetchExperimentInfo).toHaveBeenCalledWith(
-        ['expFromRoute'],
-        1111
-      );
-      expect(dataSource.fetchSessionGroups).toHaveBeenCalledWith(
-        ['expFromRoute'],
-        [buildHparamSpec({name: 'h1'})]
-      );
-      expect(actualActions).toEqual([
-        hparamsActions.hparamsFetchSessionGroupsSucceeded({
-          hparamSpecs: mockHparamSpecs,
-          sessionGroups: mockSessionGroups,
-        }),
-      ]);
-    });
+    for (const {actionName, actionInstance} of [
+      {actionName: 'reload', actionInstance: coreActions.reload()},
+      {actionName: 'manualReload', actionInstance: coreActions.manualReload()},
+      {
+        actionName: 'loadAllDashboardHparams',
+        actionInstance: hparamsActions.loadAllDashboardHparams(),
+      },
+    ]) {
+      it(`fetches data on ${actionName}`, () => {
+        action.next(actionInstance);
+        expect(dataSource.fetchExperimentInfo).toHaveBeenCalledWith(
+          ['expFromRoute'],
+          1111
+        );
+        expect(dataSource.fetchSessionGroups).toHaveBeenCalledWith(
+          ['expFromRoute'],
+          [buildHparamSpec({name: 'h1'})]
+        );
+        expect(actualActions).toEqual([
+          hparamsActions.hparamsFetchSessionGroupsSucceeded({
+            hparamSpecs: mockHparamSpecs,
+            sessionGroups: mockSessionGroups,
+          }),
+        ]);
+      });
+    }
 
     it('does not attempt to load hparams when experiment ids are null', () => {
       store.overrideSelector(selectors.getExperimentIdsFromRoute, null);

tensorboard/webapp/hparams/_redux/hparams_reducers.ts

@@ -166,7 +166,13 @@ const reducer: ActionReducer<HparamsState, Action> = createReducer(
         dashboardDisplayedHparamColumns: newColumns,
       };
     }
-  )
+  ),
+  on(actions.loadAllDashboardHparams, (state) => {
+    return {
+      ...state,
+      numDashboardHparamsToLoad: 0, // All.
+    };
+  })
 );
 
 export function reducers(state: HparamsState | undefined, action: Action) {

tensorboard/webapp/hparams/_redux/hparams_reducers_test.ts

@@ -712,4 +712,16 @@ describe('hparams/_redux/hparams_reducers_test', () => {
       ]);
     });
   });
+
+  describe('loadAllDashboardHparams', () => {
+    it('sets numDashboardHparamsToLoad to 0', () => {
+      const state = buildHparamsState({
+        numDashboardHparamsToLoad: 1000,
+      });
+
+      const state2 = reducers(state, actions.loadAllDashboardHparams());
+
+      expect(state2.numDashboardHparamsToLoad).toEqual(0);
+    });
+  });
 });

tensorboard/webapp/hparams/_redux/hparams_selectors_test.ts

@@ -15,7 +15,6 @@ limitations under the License.
 
 import {ColumnHeaderType} from '../../widgets/data_table/types';
 import {DomainType} from '../types';
-import {State} from './types';
 import * as selectors from './hparams_selectors';
 import {
   buildHparamSpec,

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -211,6 +211,7 @@
       (removeColumn)="removeColumn.emit($event)"
       (hideColumn)="hideColumn.emit($event)"
       (addFilter)="addFilter.emit($event)"
+      (loadAllColumns)="loadAllColumns.emit()"
     >
     </scalar-card-data-table>
   </div>

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

@@ -132,6 +132,7 @@ export class ScalarCardComponent<Downloader> {
   @Output() addColumn = new EventEmitter<AddColumnEvent>();
   @Output() removeColumn = new EventEmitter<HeaderToggleInfo>();
   @Output() addFilter = new EventEmitter<FilterAddedEvent>();
+  @Output() loadAllColumns = new EventEmitter<null>();
 
   @Output() onLineChartZoom = new EventEmitter<Extent | null>();
   @Output() onCardStateChanged = new EventEmitter<Partial<CardState>>();

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

@@ -211,6 +211,7 @@ function areSeriesEqual(
       (addColumn)="onAddColumn($event)"
       (removeColumn)="onRemoveColumn($event)"
       (addFilter)="addHparamFilter($event)"
+      (loadAllColumns)="loadAllColumns()"
     ></scalar-card-component>
   `,
   styles: [
@@ -763,4 +764,8 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
       })
     );
   }
+
+  loadAllColumns() {
+    this.store.dispatch(hparamsActions.loadAllDashboardHparams());
+  }
 }

tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ng.html

@@ -27,6 +27,7 @@
   (addColumn)="addColumn.emit($event)"
   (removeColumn)="onRemoveColumn($event)"
   (addFilter)="addFilter.emit($event)"
+  (loadAllColumns)="loadAllColumns.emit()"
 >
   <ng-container header>
     <ng-container *ngFor="let header of getHeaders()">

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

@@ -70,6 +70,7 @@ export class ScalarCardDataTable {
   @Output() addColumn = new EventEmitter<AddColumnEvent>();
   @Output() removeColumn = new EventEmitter<HeaderToggleInfo>();
   @Output() addFilter = new EventEmitter<FilterAddedEvent>();
+  @Output() loadAllColumns = new EventEmitter<null>();
 
   ColumnHeaderType = ColumnHeaderType;
 

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

@@ -38,6 +38,7 @@
     (addColumn)="addColumn.emit($event)"
     (removeColumn)="removeColumn.emit($event)"
     (addFilter)="addFilter.emit($event)"
+    (loadAllColumns)="loadAllColumns.emit()"
   >
     <ng-container header>
       <ng-container *ngFor="let header of getHeaders()">

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

@@ -65,6 +65,7 @@ export class RunsDataTable {
   @Output() removeColumn = new EventEmitter<ColumnHeader>();
   @Output() onSelectionDblClick = new EventEmitter<string>();
   @Output() addFilter = new EventEmitter<FilterAddedEvent>();
+  @Output() loadAllColumns = new EventEmitter<null>();
 
   // These columns must be stored and reused to stop needless re-rendering of
   // the content and headers in these columns. This has been known to cause

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

@@ -115,6 +115,7 @@ const getRunsLoading = createSelector<
       (addColumn)="addColumn($event)"
       (removeColumn)="removeColumn($event)"
       (addFilter)="addHparamFilter($event)"
+      (loadAllColumns)="loadAllColumns()"
     ></runs-data-table>
   `,
   styles: [
@@ -361,6 +362,10 @@ export class RunsTableContainer implements OnInit, OnDestroy {
       })
     );
   }
+
+  loadAllColumns() {
+    this.store.dispatch(hparamsActions.loadAllDashboardHparams());
+  }
 }
 
 export const TEST_ONLY = {

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

@@ -25,9 +25,14 @@
 
   <div class="column-load-info">
     <label>{{ numColumnsLoaded }} columns loaded.</label>
-    <label *ngIf="hasMoreColumnsToLoad">
-      Warning: There were too many columns to load all of them.
-    </label>
+    <div *ngIf="hasMoreColumnsToLoad" class="load-more-columns">
+      <label>
+        Warning: There were too many columns to load all of them efficiently.
+      </label>
+      <button mat-stroked-button (click)="loadAllColumnsClicked()">
+        Load all anyway
+      </button>
+    </div>
   </div>
 
   <div #columnList class="column-list">

tensorboard/webapp/widgets/data_table/column_selector_component.scss

@@ -48,6 +48,20 @@ limitations under the License.
     margin-bottom: 12px;
   }
 
+  .load-more-columns {
+    color: mat.get-color-from-palette($tb-warn, 600);
+    display: flex;
+    flex-direction: column;
+    margin-top: 6px;
+
+    button {
+      color: inherit;
+      font-size: inherit;
+      height: 24px;
+      margin-top: 8px;
+    }
+  }
+
   .column-list {
     display: flex;
     flex-direction: column;

tensorboard/webapp/widgets/data_table/column_selector_component.ts

@@ -38,6 +38,7 @@ export class ColumnSelectorComponent implements OnInit, AfterViewInit {
   @Input() numColumnsLoaded!: number;
   @Input() hasMoreColumnsToLoad!: boolean;
   @Output() columnSelected = new EventEmitter<ColumnHeader>();
+  @Output() loadAllColumns = new EventEmitter<null>();
 
   @ViewChild('search')
   private readonly searchField!: ElementRef;
@@ -124,6 +125,10 @@ export class ColumnSelectorComponent implements OnInit, AfterViewInit {
     this.columnSelected.emit(header);
   }
 
+  loadAllColumnsClicked() {
+    this.loadAllColumns.emit();
+  }
+
   activate() {
     this.isActive = true;
   }

tensorboard/webapp/widgets/data_table/column_selector_test.ts

@@ -41,6 +41,10 @@ describe('column selector', () => {
     return fixture.debugElement.query(By.css('button.selected'));
   }
 
+  function getLoadAllColumnsButton() {
+    return fixture.debugElement.query(By.css('.column-load-info button'));
+  }
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ColumnSelectorComponent],
@@ -217,13 +221,34 @@ describe('column selector', () => {
   }));
 
   it('renders too many columns warning', fakeAsync(() => {
-    fixture.componentInstance.numColumnsLoaded = 100;
     fixture.componentInstance.hasMoreColumnsToLoad = true;
     fixture.detectChanges();
 
-    const numColumns = fixture.debugElement.query(By.css('.column-load-info'));
-    expect(numColumns.nativeElement.textContent).toContain(
-      'Warning: There were too many columns to load all of them.'
+    const numColumnsEl = fixture.debugElement.query(
+      By.css('.column-load-info')
     );
+    expect(numColumnsEl.nativeElement.textContent).toContain(
+      'Warning: There were too many columns to load all of them efficiently.'
+    );
+  }));
+
+  it('does not render "load all" button by default', fakeAsync(() => {
+    const loadAllButton = getLoadAllColumnsButton();
+    expect(loadAllButton).toBeFalsy();
+  }));
+
+  it('renders "load all" button and responds to click', fakeAsync(() => {
+    let loadAllColumnsClicked = false;
+    fixture.componentInstance.loadAllColumns.subscribe(() => {
+      loadAllColumnsClicked = true;
+    });
+    fixture.componentInstance.hasMoreColumnsToLoad = true;
+    fixture.detectChanges();
+
+    const loadAllButton = getLoadAllColumnsButton();
+    loadAllButton.nativeElement.click();
+    flush();
+
+    expect(loadAllColumnsClicked).toBeTrue();
   }));
 });

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

@@ -83,6 +83,7 @@
     [numColumnsLoaded]="numColumnsLoaded"
     [hasMoreColumnsToLoad]="hasMoreColumnsToLoad"
     (columnSelected)="onColumnAdded($event)"
+    (loadAllColumns)="loadAllColumns.emit()"
   ></tb-data-table-column-selector-component>
 </custom-modal>
 

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -83,6 +83,7 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
   @Output() removeColumn = new EventEmitter<ColumnHeader>();
   @Output() addColumn = new EventEmitter<AddColumnEvent>();
   @Output() addFilter = new EventEmitter<FilterAddedEvent>();
+  @Output() loadAllColumns = new EventEmitter<null>();
 
   @ViewChild('columnSelectorModal', {static: false})
   private readonly columnSelectorModal!: CustomModalComponent;