HParams: Add new hparams selector factories (#6323)

## Motivation for features / changes
As part of the effort to bring hparams to the time series dashboard a
handful of new selectors need to be created. Rather than further the
practice of creating selectors with props ([which is
deprecated](https://ngrx.io/guide/migration/v12)) I am choosing to
create them using the recommended solution of a selector factory.
Unfortunately selector factories don't play nicely with selectors
dependent selectors WITH props. There are a handful of hacky solutions
to this problem but I am opting to create new dependent selectors using
the factory pattern.

## Technical description of changes
I extracted the result functions from the existing selectors, then
created new factories which call them with an additional closured
parameter.

## Screenshots of UI changes
None

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

## Alternate designs / implementations considered
I could have just wrapped the existing selectors and then called them
passing in the global state instead. I chose this approach instead with
the hope of removing the old selectors in a later pr.

Author: rileyajones

tensorboard/webapp/hparams/_redux/BUILD

@@ -74,6 +74,7 @@ tf_ts_library(
         ":hparams_actions",
         ":types",
         ":utils",
+        "//tensorboard/webapp:app_state",
         "//tensorboard/webapp/hparams:types",
         "//tensorboard/webapp/runs/actions",
         "@npm//@ngrx/store",

tensorboard/webapp/hparams/_redux/hparams_selectors.ts

@@ -25,81 +25,126 @@ import {
 const getHparamsState =
   createFeatureSelector<HparamsState>(HPARAMS_FEATURE_KEY);
 
-const getHparamsDefaultFiltersForExperiments = createSelector(
-  getHparamsState,
-  (
-    state: HparamsState,
-    experimentIds: string[]
-  ): Map<string, DiscreteFilter | IntervalFilter> => {
-    const defaultFilterMaps: Array<
-      Map<string, DiscreteFilter | IntervalFilter>
-    > = [];
-
-    for (const experimentId of experimentIds) {
-      if (!state.specs[experimentId]) {
-        continue;
-      }
-
-      defaultFilterMaps.push(state.specs[experimentId].hparam.defaultFilters);
+function getHparamsDefaultFiltersForExperimentsResultFunction(
+  state: HparamsState,
+  experimentIds: string[]
+): Map<string, DiscreteFilter | IntervalFilter> {
+  const defaultFilterMaps: Array<Map<string, DiscreteFilter | IntervalFilter>> =
+    [];
+
+  for (const experimentId of experimentIds) {
+    if (!state.specs[experimentId]) {
+      continue;
     }
 
-    return combineDefaultHparamFilters(defaultFilterMaps);
+    defaultFilterMaps.push(state.specs[experimentId].hparam.defaultFilters);
   }
-);
 
-export const getHparamFilterMap = createSelector(
-  getHparamsDefaultFiltersForExperiments,
+  return combineDefaultHparamFilters(defaultFilterMaps);
+}
+
+const getHparamsDefaultFiltersForExperiments = createSelector(
   getHparamsState,
-  (
-    combinedDefaultfilterMap,
-    hparamState,
-    experimentIds: string[]
-  ): Map<string, IntervalFilter | DiscreteFilter> => {
-    const id = getIdFromExperimentIds(experimentIds);
-    const otherFilter = hparamState.filters[id];
-
-    return new Map([
-      ...combinedDefaultfilterMap,
-      ...(otherFilter?.hparams ?? []),
-    ]);
-  }
+  getHparamsDefaultFiltersForExperimentsResultFunction
 );
 
-const getMetricsDefaultFiltersForExperiments = createSelector(
-  getHparamsState,
-  (
-    state: HparamsState,
-    experimentIds: string[]
-  ): Map<string, IntervalFilter> => {
-    const defaultFilterMaps: Array<Map<string, IntervalFilter>> = [];
+function getHparamsDefaultFiltersForExperimentsFromExperimentIds(
+  experimentIds: string[]
+) {
+  return createSelector(getHparamsState, (state) =>
+    getHparamsDefaultFiltersForExperimentsResultFunction(state, experimentIds)
+  );
+}
+
+function getHparamFilterMapResultFunction(
+  hparamState: HparamsState,
+  combinedDefaultfilterMap: Map<string, DiscreteFilter | IntervalFilter>,
+  experimentIds: string[]
+): Map<string, IntervalFilter | DiscreteFilter> {
+  const id = getIdFromExperimentIds(experimentIds);
+  const otherFilter = hparamState.filters[id];
+
+  return new Map([
+    ...combinedDefaultfilterMap,
+    ...(otherFilter?.hparams ?? []),
+  ]);
+}
 
-    for (const experimentId of experimentIds) {
-      if (!state.specs[experimentId]) {
-        continue;
-      }
+export const getHparamFilterMap = createSelector(
+  getHparamsState,
+  getHparamsDefaultFiltersForExperiments,
+  getHparamFilterMapResultFunction
+);
 
-      defaultFilterMaps.push(state.specs[experimentId].metric.defaultFilters);
+export function getHparamFilterMapFromExperimentIds(experimentIds: string[]) {
+  return createSelector(
+    getHparamsState,
+    getHparamsDefaultFiltersForExperimentsFromExperimentIds(experimentIds),
+    (hparamState, combinedDefaultFilterMap) =>
+      getHparamFilterMapResultFunction(
+        hparamState,
+        combinedDefaultFilterMap,
+        experimentIds
+      )
+  );
+}
+
+function getMetricsDefaultFiltersForExperimentsResultFunction(
+  state: HparamsState,
+  experimentIds: string[]
+): Map<string, IntervalFilter> {
+  const defaultFilterMaps: Array<Map<string, IntervalFilter>> = [];
+
+  for (const experimentId of experimentIds) {
+    if (!state.specs[experimentId]) {
+      continue;
     }
 
-    return combineDefaultMetricFilters(defaultFilterMaps);
+    defaultFilterMaps.push(state.specs[experimentId].metric.defaultFilters);
   }
+
+  return combineDefaultMetricFilters(defaultFilterMaps);
+}
+
+const getMetricsDefaultFiltersForExperiments = createSelector(
+  getHparamsState,
+  getMetricsDefaultFiltersForExperimentsResultFunction
 );
 
+function getMetricsDefaultFiltersForExperimentsFromExperimentIds(
+  experimentIds: string[]
+) {
+  return createSelector(getHparamsState, (state) =>
+    getMetricsDefaultFiltersForExperimentsResultFunction(state, experimentIds)
+  );
+}
+
+function getMetricFilterMapResultFunction(
+  hparamState: HparamsState,
+  defaultFilterMap: Map<string, IntervalFilter>,
+  experimentIds: string[]
+): Map<string, IntervalFilter> {
+  const id = getIdFromExperimentIds(experimentIds);
+  const otherFilter = hparamState.filters[id];
+
+  return new Map([...defaultFilterMap, ...(otherFilter?.metrics ?? [])]);
+}
+
 export const getMetricFilterMap = createSelector(
-  getMetricsDefaultFiltersForExperiments,
   getHparamsState,
-  (
-    defaultfilterMap,
-    hparamState,
-    experimentIds: string[]
-  ): Map<string, IntervalFilter> => {
-    const id = getIdFromExperimentIds(experimentIds);
-    const otherFilter = hparamState.filters[id];
-
-    return new Map([...defaultfilterMap, ...(otherFilter?.metrics ?? [])]);
-  }
+  getMetricsDefaultFiltersForExperiments,
+  getMetricFilterMapResultFunction
 );
 
+export function getMetricFilterMapFromExperimentIds(experimentIds: string[]) {
+  return createSelector(
+    getHparamsState,
+    getMetricsDefaultFiltersForExperimentsFromExperimentIds(experimentIds),
+    (state, defaultFilterMap) =>
+      getMetricFilterMapResultFunction(state, defaultFilterMap, experimentIds)
+  );
+}
+
 /**
  * Returns Observable that emits hparams and metrics specs of experiments.
  */