HParams: Only filter scalar card runs by hparams when enableHparamsInTimeSeries is true (#6399)

## Motivation for features / changes
We have been discovering issues with the way the hparam domains are
defined. This has lead to issues due to #6377 causing scalar cards to
appear empty when one of these issues occurs. I attempted to fix this in
#6393 but missed the situation where a string type hparam with more than
10 values returns an empty domain (Googlers see tb/3183400180427144287
for an example).

I am moving the new filtering logic added in by #6377 behind a flag
while we fix this issue on the backend.

## Screenshots of UI changes (or N/A)
Screenshots for Googlers only

Before: https://screenshot.googleplex.com/AELb2oHqhxa8UNF

After:
Feature Flag Enabled: https://screenshot.googleplex.com/AcPxsbNNXSSFGx9
Feature Flag Disabled: https://screenshot.googleplex.com/3aEXpfHrGZdzYgZ

Author: rileyajones

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

@@ -38,6 +38,7 @@ import {
 import {State} from '../../../app_state';
 import {ExperimentAlias} from '../../../experiments/types';
 import {
+  getEnableHparamsInTimeSeries,
   getForceSvgFeatureFlag,
   getIsScalarColumnCustomizationEnabled,
 } from '../../../feature_flag/store/feature_flag_selectors';
@@ -498,6 +499,7 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
       }),
       combineLatestWith(
         this.store.select(getCurrentRouteRunSelection),
+        this.store.select(getEnableHparamsInTimeSeries),
         this.store.select(getFilteredRenderableRunsIdsFromRoute),
         this.store.select(getRunColorMap),
         this.store.select(getMetricsScalarSmoothing)
@@ -511,6 +513,7 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
         ([
           namedPartitionedSeries,
           runSelectionMap,
+          hparamsInTimeSeriesEnabled,
           renderableRuns,
           colorMap,
           smoothing,
@@ -539,7 +542,7 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
               visible: Boolean(
                 runSelectionMap &&
                   runSelectionMap.get(runId) &&
-                  renderableRuns.has(runId)
+                  (!hparamsInTimeSeriesEnabled || renderableRuns.has(runId))
               ),
               color: colorMap[runId] ?? '#fff',
               aux: false,

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

@@ -3631,6 +3631,73 @@ describe('scalar card', () => {
       expect(data[5].run).toEqual('3 c/run6');
       expect(data[6].run).toEqual('1 a/run7');
     }));
+
+    describe('while integrated with hparams in timeseries', () => {
+      beforeEach(() => {
+        const runToSeries = {
+          run1: [{wallTime: 1, value: 1, step: 1}],
+          run2: [{wallTime: 1, value: 2, step: 1}],
+          run3: [{wallTime: 1, value: 3, step: 1}],
+          run4: [{wallTime: 1, value: NaN, step: 1}],
+          run5: [{wallTime: 1, value: 'NaN', step: 1}],
+          run6: [{wallTime: 1, value: null, step: 1}],
+          run7: [{wallTime: 1, value: undefined, step: 1}],
+        };
+        provideMockCardRunToSeriesData(
+          selectSpy,
+          PluginType.SCALARS,
+          'card1',
+          null /* metadataOverride */,
+          runToSeries as any
+        );
+        store.overrideSelector(
+          selectors.getCurrentRouteRunSelection,
+          new Map([
+            ['run1', true],
+            ['run2', true],
+          ])
+        );
+
+        store.overrideSelector(
+          commonSelectors.getFilteredRenderableRunsIdsFromRoute,
+          new Set(['run1'])
+        );
+
+        store.overrideSelector(getMetricsLinkedTimeSelection, {
+          start: {step: 1},
+          end: null,
+        });
+      });
+
+      it('filters runs by hparam when enableHparamsInTimeSeries is true', fakeAsync(() => {
+        store.overrideSelector(selectors.getEnableHparamsInTimeSeries, true);
+
+        const fixture = createComponent('card1');
+        const scalarCardDataTable = fixture.debugElement.query(
+          By.directive(ScalarCardDataTable)
+        );
+
+        const data =
+          scalarCardDataTable.componentInstance.getTimeSelectionTableData();
+        expect(data.length).toEqual(1);
+        expect(data[0].run).toEqual('run1');
+      }));
+
+      it('does not filter runs by hparam when enableHparamsInTimeSeries is false', fakeAsync(() => {
+        store.overrideSelector(selectors.getEnableHparamsInTimeSeries, false);
+
+        const fixture = createComponent('card1');
+        const scalarCardDataTable = fixture.debugElement.query(
+          By.directive(ScalarCardDataTable)
+        );
+
+        const data =
+          scalarCardDataTable.componentInstance.getTimeSelectionTableData();
+        expect(data.length).toEqual(2);
+        expect(data[0].run).toEqual('run1');
+        expect(data[1].run).toEqual('run2');
+      }));
+    });
   });
 
   describe('toggleTableExpanded', () => {