Adds redux code for displaying shared hparam columns in the Time Series page (#6727)

## Motivation for features / changes
Required redux edits for displaying hparams in time series.

## Technical description of changes
Adds a new property to HparamsState, `dashboardDisplayedHparamColumns`
to represent the columns shown across the time series page (similar in
concept to the existing `dashboardFilters`)

Adds four actions for hparam column manipulation:
- dashboardHparamColumnAdded
- dashboardHparamColumnRemoved
- dashboardHparamColumnToggled
- dashboardHparamColumnOrderChanged

and reducer logic to handle these events.

Note that the add actions cannot simply pass the header index in this
case as the table components will not have knowledge of the relative
index of hparam columns. The actions instead specify the column to
insert next to and the side, and the indices are computed from within
the reducer (this can be seen as simply moving the index computation
from the component to the reducer, which better conforms to
https://redux.js.org/style-guide/#put-as-much-logic-as-possible-in-reducers
)

Also exports required types from widgets/data_table - these will be also
used by the runs and metrics tables the following PRs

## Detailed steps to verify changes work correctly (as executed by you)
- Unit tests pass

## Alternate designs / implementations considered (or N/A)
An alternative is to duplicate the hparams state across the runs and
scalar card tables as RunsDataState.runsTableHeaders and
MetricsState.singleSelectionHeaders/MetricsState.rangeSelectionHeaders,
but this would either incur massive complications in syncing the various
column operations (add/remove/hide/sort) or alternatively, would force
the user to duplicate operations multiple times to get the hparams
columns in sync. The chosen design also aligns with [keeping state
minimal](https://redux.js.org/style-guide/#keep-state-minimal-and-derive-additional-values).

Author: hoonji

tensorboard/webapp/hparams/BUILD

@@ -37,7 +37,9 @@ tf_ng_module(
         "//tensorboard/webapp/hparams/_redux:hparams_actions",
         "//tensorboard/webapp/hparams/_redux:hparams_module",
         "//tensorboard/webapp/hparams/_redux:hparams_selectors",
+        "//tensorboard/webapp/persistent_settings:config_module",
         "@npm//@angular/core",
+        "@npm//@ngrx/store",
     ],
 )
 

tensorboard/webapp/hparams/_redux/BUILD

@@ -50,6 +50,7 @@ tf_ts_library(
     deps = [
         ":types",
         "//tensorboard/webapp/hparams:types",
+        "//tensorboard/webapp/widgets/data_table:types",
         "@npm//@ngrx/store",
     ],
 )
@@ -65,6 +66,7 @@ tf_ts_library(
         ":utils",
         "//tensorboard/webapp/hparams:_types",
         "//tensorboard/webapp/runs/actions",
+        "//tensorboard/webapp/widgets/data_table:types",
         "@npm//@ngrx/store",
     ],
 )
@@ -171,6 +173,7 @@ tf_ts_library(
         "//tensorboard/webapp/testing:utils",
         "//tensorboard/webapp/util:types",
         "//tensorboard/webapp/webapp_data_source:http_client_testing",
+        "//tensorboard/webapp/widgets/data_table:types",
         "@npm//@ngrx/effects",
         "@npm//@ngrx/store",
         "@npm//@types/jasmine",

tensorboard/webapp/hparams/_redux/hparams_actions.ts

@@ -17,7 +17,11 @@ limitations under the License.
  */
 
 import {createAction, props} from '@ngrx/store';
-import {HparamAndMetricSpec, SessionGroup} from '../types';
+import {
+  AddColumnEvent,
+  ReorderColumnEvent,
+} from '../../widgets/data_table/types';
+import {HparamAndMetricSpec, SessionGroup, ColumnHeader} from '../types';
 import {HparamFilter, MetricFilter} from './types';
 
 export const hparamsFetchSessionGroupsSucceeded = createAction(
@@ -47,3 +51,23 @@ export const dashboardMetricFilterRemoved = createAction(
   '[Hparams] Dashboard Metric Filter Removed',
   props<{name: string}>()
 );
+
+export const dashboardHparamColumnAdded = createAction(
+  '[Hparams] Dashboard Hparam Column Added',
+  props<AddColumnEvent>()
+);
+
+export const dashboardHparamColumnRemoved = createAction(
+  '[Hparams] Dashboard Hparam Column Removed',
+  props<{column: ColumnHeader}>()
+);
+
+export const dashboardHparamColumnToggled = createAction(
+  '[Hparams] Dashboard Hparam Column Toggled',
+  props<{column: ColumnHeader}>()
+);
+
+export const dashboardHparamColumnOrderChanged = createAction(
+  '[Hparams] Dashboard Hparam Column Order Changed',
+  props<ReorderColumnEvent>()
+);

tensorboard/webapp/hparams/_redux/hparams_reducers.ts

@@ -13,6 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Action, ActionReducer, createReducer, on} from '@ngrx/store';
+import {ColumnHeader, Side} from '../../widgets/data_table/types';
 import * as actions from './hparams_actions';
 import {HparamsState} from './types';
 
@@ -26,6 +27,7 @@ const initialState: HparamsState = {
     hparams: new Map(),
     metrics: new Map(),
   },
+  dashboardDisplayedHparamColumns: [],
 };
 
 const reducer: ActionReducer<HparamsState, Action> = createReducer(
@@ -87,7 +89,86 @@ const reducer: ActionReducer<HparamsState, Action> = createReducer(
         metrics: nextMetricFilters,
       },
     };
-  })
+  }),
+  on(actions.dashboardHparamColumnAdded, (state, {column, nextTo, side}) => {
+    const {dashboardDisplayedHparamColumns: oldColumns} = state;
+
+    let destinationIndex = oldColumns.length; // Default to append at end.
+    if (nextTo !== undefined && side !== undefined) {
+      const nextToIndex = oldColumns.findIndex(
+        (col) => col.name === nextTo.name
+      );
+      if (nextToIndex !== -1) {
+        destinationIndex = side === Side.RIGHT ? nextToIndex + 1 : nextToIndex;
+      }
+    }
+    const newColumn = {...column, enabled: true};
+    const newColumns = [...oldColumns];
+    newColumns.splice(destinationIndex, 0, newColumn);
+
+    return {
+      ...state,
+      dashboardDisplayedHparamColumns: newColumns,
+    };
+  }),
+  on(actions.dashboardHparamColumnRemoved, (state, {column}) => {
+    const newColumns = state.dashboardDisplayedHparamColumns.filter(
+      ({name}) => name !== column.name
+    );
+
+    return {
+      ...state,
+      dashboardDisplayedHparamColumns: newColumns,
+    };
+  }),
+  on(actions.dashboardHparamColumnToggled, (state, {column: toggledColumn}) => {
+    const newColumns = state.dashboardDisplayedHparamColumns.map((column) => {
+      if (column.name === toggledColumn.name) {
+        return {
+          ...column,
+          enabled: !toggledColumn.enabled,
+        };
+      }
+      return column;
+    });
+
+    return {
+      ...state,
+      dashboardDisplayedHparamColumns: newColumns,
+    };
+  }),
+  on(
+    actions.dashboardHparamColumnOrderChanged,
+    (state, {source, destination, side}) => {
+      const {dashboardDisplayedHparamColumns: columns} = state;
+      const sourceIndex = columns.findIndex(
+        (column: ColumnHeader) => column.name === source.name
+      );
+      let destinationIndex = columns.findIndex(
+        (column: ColumnHeader) => column.name === destination.name
+      );
+      if (sourceIndex === -1 || sourceIndex === destinationIndex) {
+        return state;
+      }
+      if (destinationIndex === -1) {
+        // Use side as a backup to determine source position if destination isn't found.
+        if (side !== undefined) {
+          destinationIndex = side === Side.LEFT ? 0 : columns.length - 1;
+        } else {
+          return state;
+        }
+      }
+
+      const newColumns = [...columns];
+      newColumns.splice(sourceIndex, 1);
+      newColumns.splice(destinationIndex, 0, source);
+
+      return {
+        ...state,
+        dashboardDisplayedHparamColumns: newColumns,
+      };
+    }
+  )
 );
 
 export function reducers(state: HparamsState | undefined, action: Action) {