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()">