Allow user to load all hparams if they weren't all loaded by default.

Author: bmd3k

tensorboard/webapp/hparams/_redux/hparams_actions.ts

@@ -71,3 +71,5 @@ 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,7 @@ 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

@@ -162,41 +162,28 @@ 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,19 @@ 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,
@@ -165,7 +164,13 @@ describe('hparams/_redux/hparams_selectors_test', () => {
   });
 
   describe('#getNumDashboardHparamsToLoad', () => {
-    it('returns dashboard specs', () => {
+    beforeEach(() => {
+      // Clear the memoization.
+      selectors.getNumDashboardHparamsToLoad.clearResult();
+      selectors.getNumDashboardHparamsToLoad.release();
+    });
+
+    it('returns value', () => {
       const state = buildStateFromHparamsState(
         buildHparamsState({
           numDashboardHparamsToLoad: 5,
@@ -176,8 +181,14 @@ describe('hparams/_redux/hparams_selectors_test', () => {
     });
   });
 
-  describe('#getNumDashboardHparamsToLoad', () => {
-    it('returns dashboard specs', () => {
+  describe('#getNumDashboardHparamsLoaded', () => {
+    beforeEach(() => {
+      // Clear the memoization.
+      selectors.getNumDashboardHparamsLoaded.clearResult();
+      selectors.getNumDashboardHparamsLoaded.release();
+    });
+
+    it('returns value', () => {
       const state = buildStateFromHparamsState(
         buildHparamsState({
           numDashboardHparamsLoaded: 22,

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;
   }
@@ -156,4 +161,5 @@ export class ColumnSelectorComponent implements OnInit, AfterViewInit {
       this.getFilteredColumns()[this.selectedIndex$.getValue()]
     );
   }
+
 }

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,32 @@ 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(
+    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.'
     );
   }));
+
+  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;