HParams: Start showing hparams in runs table based on the enableHparamsInTimeSeries flag (#6317)

Nothing will be displayed until ~#6318~ is merged

## Motivation for features / changes
We are working on surfacing hparam data in the time series dashboard. As
part of this effort we would like to show the value of hparams in the
runs table. The runs table already has partial support for this but it
is currently disabled.

I am enabling the columns based on the feature flag I added in #6308.

Note that you will not see anything in OSS until we fix the call to
session_groups

## Technical description of changes
I added a new selector to get the feature flag, then modified the
metrics_container to read the value of the flag

## Screenshots of UI changes
Disabled

![image](https://user-images.githubusercontent.com/78179109/231893521-e75c2176-af9e-4585-991c-126e277d2acb.png)

Enabled

![image](https://user-images.githubusercontent.com/78179109/231893683-71ea69cd-7cbf-46ed-a0ae-4829bd5b21bd.png)


## Detailed steps to verify changes work correctly (as executed by you)

## Alternate designs / implementations considered

Author: rileyajones

tensorboard/webapp/feature_flag/store/feature_flag_selectors.ts

@@ -174,3 +174,10 @@ export const getIsScalarColumnCustomizationEnabled = createSelector(
     return flags.enableScalarColumnCustomization;
   }
 );
+
+export const getEnableHparamsInTimeSeries = createSelector(
+  getFeatureFlags,
+  (flags: FeatureFlags): boolean => {
+    return flags.enableHparamsInTimeSeries;
+  }
+);

tensorboard/webapp/feature_flag/store/feature_flag_selectors_test.ts

@@ -444,4 +444,28 @@ describe('feature_flag_selectors', () => {
       );
     });
   });
+
+  describe('#getEnableHparamsInTimeSeries', () => {
+    it('returns true when enableHparamsInTimeSeries is true', () => {
+      let state = buildState(
+        buildFeatureFlagState({
+          defaultFlags: buildFeatureFlag({
+            enableHparamsInTimeSeries: true,
+          }),
+        })
+      );
+      expect(selectors.getEnableHparamsInTimeSeries(state)).toBeTrue();
+    });
+
+    it('returns false when enableHparamsInTimeSeries is false', () => {
+      let state = buildState(
+        buildFeatureFlagState({
+          defaultFlags: buildFeatureFlag({
+            enableHparamsInTimeSeries: false,
+          }),
+        })
+      );
+      expect(selectors.getEnableHparamsInTimeSeries(state)).toBeFalse();
+    });
+  });
 });

tensorboard/webapp/metrics/views/BUILD

@@ -34,12 +34,15 @@ tf_ng_module(
         "//tensorboard/webapp/angular:expect_angular_material_icon",
         "//tensorboard/webapp/core",
         "//tensorboard/webapp/customization",
+        "//tensorboard/webapp/feature_flag/store",
+        "//tensorboard/webapp/feature_flag/store:types",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/views/main_view",
         "//tensorboard/webapp/metrics/views/right_pane",
         "//tensorboard/webapp/runs/views/runs_selector",
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//@ngrx/store",
     ],
 )
 
@@ -73,11 +76,15 @@ tf_ts_library(
         ":types",
         ":utils",
         ":views",
+        "//tensorboard/webapp:app_state",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
         "//tensorboard/webapp/angular:expect_angular_platform_browser_animations",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
+        "//tensorboard/webapp/feature_flag/store",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/data_source",
+        "//tensorboard/webapp/runs/views/runs_selector",
+        "//tensorboard/webapp/testing:utils",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//@types/jasmine",

tensorboard/webapp/metrics/views/metrics_container.ts

@@ -13,16 +13,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {Store} from '@ngrx/store';
+import {getEnableHparamsInTimeSeries} from '../../feature_flag/store/feature_flag_selectors';
+import {State} from '../../feature_flag/store/feature_flag_types';
 
 @Component({
   selector: 'metrics-dashboard',
   template: `
     <tb-dashboard-layout>
-      <runs-selector sidebar></runs-selector>
+      <runs-selector
+        [showHparamsAndMetrics]="showHparamsAndMetrics$ | async"
+        sidebar
+      ></runs-selector>
       <metrics-main-view main></metrics-main-view>
     </tb-dashboard-layout>
   `,
   styleUrls: ['metrics_container.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MetricsDashboardContainer {}
+export class MetricsDashboardContainer {
+  showHparamsAndMetrics$ = this.store.select(getEnableHparamsInTimeSeries);
+
+  constructor(readonly store: Store<State>) {}
+}

tensorboard/webapp/metrics/views/metrics_container_test.ts

@@ -15,22 +15,53 @@ limitations under the License.
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {Store} from '@ngrx/store';
+import {MockStore} from '@ngrx/store/testing';
+import {State} from '../../app_state';
+import {getEnableHparamsInTimeSeries} from '../../feature_flag/store/feature_flag_selectors';
+import {RunsSelectorContainer} from '../../runs/views/runs_selector/runs_selector_container';
+import {provideMockTbStore} from '../../testing/utils';
 import {MetricsDashboardContainer} from './metrics_container';
 
 describe('metrics view', () => {
+  let store: MockStore<State>;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MetricsDashboardContainer],
-      providers: [],
+      declarations: [MetricsDashboardContainer, RunsSelectorContainer],
+      providers: [provideMockTbStore()],
       // Ignore errors from components that are out-of-scope for this test:
       // 'runs-selector'.
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
+
+    store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
   });
 
   it('renders', () => {
+    store.overrideSelector(getEnableHparamsInTimeSeries, false);
     const fixture = TestBed.createComponent(MetricsDashboardContainer);
     fixture.detectChanges();
     expect(fixture.debugElement.query(By.css('runs-selector'))).not.toBeNull();
   });
+
+  it('enables hparamsAndMetrics when enableHparamsInTimeSeries is true', () => {
+    store.overrideSelector(getEnableHparamsInTimeSeries, true);
+    const fixture = TestBed.createComponent(MetricsDashboardContainer);
+    fixture.detectChanges();
+    expect(
+      fixture.debugElement.query(By.css('runs-selector')).componentInstance
+        .showHparamsAndMetrics
+    ).toBeTrue();
+  });
+
+  it('disables hparamsAndMetrics when enableHparamsInTimeSeries is false', () => {
+    store.overrideSelector(getEnableHparamsInTimeSeries, false);
+    const fixture = TestBed.createComponent(MetricsDashboardContainer);
+    fixture.detectChanges();
+    expect(
+      fixture.debugElement.query(By.css('runs-selector')).componentInstance
+        .showHparamsAndMetrics
+    ).toBeFalse();
+  });
 });