HParam: Add a new selector to create columns for hparams (#6406)

## Motivation for features / changes
As part of the upcoming hparams in timeseries feature we want to be able
to display hparams as columns in both the scalar card data table and the
runs table. Because we do not want all the hparams displayed all the
time (there may be too many) we are building an interface for selecting
columns. Towards that goal I have created this selector which finds all
the hparams and generates a column header for them.

## Screenshots of UI changes (or N/A)
N/A

Author: rileyajones

tensorboard/webapp/metrics/views/main_view/BUILD

@@ -89,6 +89,7 @@ tf_ts_library(
         "//tensorboard/webapp/metrics/store",
         "//tensorboard/webapp/metrics/views:types",
         "//tensorboard/webapp/metrics/views:utils",
+        "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types",
         "//tensorboard/webapp/runs:types",
         "//tensorboard/webapp/runs/views/runs_table:types",
         "//tensorboard/webapp/util:matcher",
@@ -194,13 +195,15 @@ tf_ts_library(
         "//tensorboard/webapp/customization",
         "//tensorboard/webapp/experiments/store:testing",
         "//tensorboard/webapp/hparams:types",
+        "//tensorboard/webapp/hparams/_redux:testing",
         "//tensorboard/webapp/metrics:test_lib",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/data_source",
         "//tensorboard/webapp/metrics/store",
         "//tensorboard/webapp/metrics/views:types",
         "//tensorboard/webapp/metrics/views/card_renderer",
+        "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types",
         "//tensorboard/webapp/runs/store:selectors",
         "//tensorboard/webapp/runs/store:testing",
         "//tensorboard/webapp/runs/store:types",

tensorboard/webapp/metrics/views/main_view/common_selectors.ts

@@ -25,11 +25,14 @@ import {
   getRunSelectorRegexFilter,
   getRouteKind,
   getRunsFromExperimentIds,
+  getColumnHeadersForCard,
+  getCardMetadata,
 } from '../../../selectors';
 import {DeepReadonly} from '../../../util/types';
 import {
   getHparamFilterMapFromExperimentIds,
   getMetricFilterMapFromExperimentIds,
+  getExperimentsHparamsAndMetricsSpecs,
 } from '../../../hparams/_redux/hparams_selectors';
 import {
   DiscreteFilter,
@@ -48,6 +51,10 @@ import {compareTagNames} from '../../utils';
 import {CardIdWithMetadata} from '../metrics_view_types';
 import {RouteKind} from '../../../app_routing/types';
 import {memoize} from '../../../util/memoize';
+import {
+  ColumnHeader,
+  ColumnHeaderType,
+} from '../card_renderer/scalar_card_types';
 
 export const getScalarTagsForRunSelection = createSelector(
   getMetricsTagMetadata,
@@ -254,6 +261,39 @@ export const getFilteredRenderableRunsIdsFromRoute = createSelector(
   }
 );
 
+export const getPotentialHparamColumns = createSelector(
+  (state: State) => state,
+  getExperimentIdsFromRoute,
+  (state, experimentIds): ColumnHeader[] => {
+    if (!experimentIds) {
+      return [];
+    }
+
+    const {hparams} = getExperimentsHparamsAndMetricsSpecs(state, {
+      experimentIds,
+    });
+
+    return hparams.map((spec) => ({
+      type: ColumnHeaderType.HPARAM,
+      name: spec.name,
+      // According to the api spec when the displayName is empty, the name should
+      // be displayed tensorboard/plugins/hparams/api.proto
+      displayName: spec.displayName || spec.name,
+      enabled: false,
+    }));
+  }
+);
+
+export const getAllPotentialColumnsForCard = memoize((cardId: string) => {
+  return createSelector(
+    getColumnHeadersForCard(cardId),
+    getPotentialHparamColumns,
+    (staticColumnHeaders, potentialHparamColumns) => {
+      return [...staticColumnHeaders, ...potentialHparamColumns];
+    }
+  );
+});
+
 export const factories = {
   getRenderableRuns,
   getFilteredRenderableRuns,

tensorboard/webapp/metrics/views/main_view/common_selectors_test.ts

@@ -13,6 +13,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {RouteKind} from '../../../app_routing';
+import {
+  buildSpecs,
+  buildHparamSpec,
+  buildMetricSpec,
+} from '../../../hparams/_redux/testing';
 import {
   buildAppRoutingState,
   buildStateFromAppRoutingState,
@@ -35,6 +40,7 @@ import {
 } from '../../testing';
 import {PluginType} from '../../types';
 import * as selectors from './common_selectors';
+import {ColumnHeaderType} from '../card_renderer/scalar_card_types';
 
 describe('common selectors', () => {
   let runIds: Record<string, string[]>;
@@ -171,6 +177,18 @@ describe('common selectors', () => {
           },
         },
       } as any,
+      hparams: {
+        specs: buildSpecs('defaultExperimentId', {
+          hparam: {
+            specs: [buildHparamSpec({name: 'foo', displayName: 'Foo'})],
+            defaultFilters: new Map(),
+          },
+          metric: {
+            specs: [buildMetricSpec({displayName: 'Bar'})],
+            defaultFilters: new Map(),
+          },
+        }),
+      } as any,
     });
   });
 
@@ -968,4 +986,43 @@ describe('common selectors', () => {
       expect(result).toEqual(new Set());
     });
   });
+
+  describe('getPotentialHparamColumns', () => {
+    it('returns empty list when there are no experiments', () => {
+      state.app_routing!.activeRoute!.routeKind = RouteKind.EXPERIMENTS;
+
+      expect(selectors.getPotentialHparamColumns(state)).toEqual([]);
+    });
+
+    it('creates columns for each hparam', () => {
+      expect(selectors.getPotentialHparamColumns(state)).toEqual([
+        {
+          type: ColumnHeaderType.HPARAM,
+          name: 'foo',
+          displayName: 'Foo',
+          enabled: false,
+        },
+      ]);
+    });
+
+    it('sets name as display name when a display name is not provided', () => {
+      state.hparams!.specs['defaultExperimentId'].hparam.specs.push(
+        buildHparamSpec({name: 'bar', displayName: ''})
+      );
+      expect(selectors.getPotentialHparamColumns(state)).toEqual([
+        {
+          type: ColumnHeaderType.HPARAM,
+          name: 'foo',
+          displayName: 'Foo',
+          enabled: false,
+        },
+        {
+          type: ColumnHeaderType.HPARAM,
+          name: 'bar',
+          displayName: 'bar',
+          enabled: false,
+        },
+      ]);
+    });
+  });
 });

tensorboard/webapp/testing/BUILD

@@ -78,6 +78,7 @@ tf_ts_library(
         "//tensorboard/webapp/feature_flag/store:testing",
         "//tensorboard/webapp/feature_flag/store:types",
         "//tensorboard/webapp/hparams/_redux:testing",
+        "//tensorboard/webapp/hparams/_redux:types",
         "//tensorboard/webapp/metrics:test_lib",
         "//tensorboard/webapp/metrics/store",
         "//tensorboard/webapp/notification_center/_redux:testing",

tensorboard/webapp/testing/utils.ts

@@ -56,6 +56,7 @@ import {
   createState as createSettings,
   createSettingsState,
 } from '../settings/testing';
+import {HPARAMS_FEATURE_KEY} from '../hparams/_redux/types';
 
 export function buildMockState(overrides: Partial<State> = {}): State {
   return {
@@ -81,7 +82,12 @@ export function buildMockState(overrides: Partial<State> = {}): State {
       buildAppRoutingState(overrides[APP_ROUTING_FEATURE_KEY])
     ),
     ...buildStateFromFeatureFlagsState(buildFeatureFlagState()),
-    ...buildStateFromHparamsState(buildHparamsState()),
+    ...buildStateFromHparamsState(
+      buildHparamsState(
+        overrides[HPARAMS_FEATURE_KEY]?.specs,
+        overrides[HPARAMS_FEATURE_KEY]?.filters
+      )
+    ),
     ...buildStateFromNotificationState(
       buildNotificationState(overrides[NOTIFICATION_FEATURE_KEY] || {})
     ),

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -95,7 +95,11 @@ export class DataTableComponent implements OnDestroy {
       case ColumnHeaderType.STEP_AT_MAX:
       case ColumnHeaderType.STEP_AT_MIN:
       case ColumnHeaderType.MEAN:
-        return intlNumberFormatter.formatShort(datum as number);
+      case ColumnHeaderType.HPARAM:
+        if (typeof datum === 'number') {
+          return intlNumberFormatter.formatShort(datum as number);
+        }
+        return datum;
       case ColumnHeaderType.TIME:
         const time = new Date(datum!);
         return time.toISOString();