Adds redux code for displaying shared hparam columns in the Time Series page

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,82 @@ 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;
+      }
+    }
+    let newColumn = {...column, enabled: true};
+    let 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,
+        };
+      } else {
+        return column;
+      }
+    });
+
+    return {
+      ...state,
+      dashboardDisplayedHparamColumns: newColumns,
+    };
+  }),
+  on(
+    actions.dashboardHparamColumnOrderChanged,
+    (state, {source, destination, side}) => {
+      const {dashboardDisplayedHparamColumns: columns} = state;
+      let 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) {
+        destinationIndex = side === Side.LEFT ? 0 : columns.length - 1;
+      }
+
+      const newColumns = [...columns];
+      newColumns.splice(sourceIndex, 1);
+      newColumns.splice(destinationIndex, 0, source);
+
+      return {
+        ...state,
+        dashboardDisplayedHparamColumns: newColumns,
+      };
+    }
+  )
 );
 
 export function reducers(state: HparamsState | undefined, action: Action) {