Column Customization: Move header order to NGRX (#6078)

* Motivation for features / changes
This is part of the Column Customization effort which will allow users
to select which headers they want to appear in the scalar card data
table and in which order. In order to do this we need to have that
selection and order stored in the ngrx state . This change simply moves
that information from being set in the ScalarCardContainer to being set
in the default ngrx state.

* Technical description of changes
In order to make no visible changes in production I added special logic
to remove the smoothed column if smoothing is disabled. I think there
should be some discussion on how this is handled in the future.

* Screenshots of UI changes
No visible change to users

Author: JamesHollyer

tensorboard/webapp/metrics/store/BUILD

@@ -22,6 +22,7 @@ tf_ts_library(
         "//tensorboard/webapp/metrics:utils",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/data_source",
+        "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types",
         "//tensorboard/webapp/persistent_settings",
         "//tensorboard/webapp/types",
         "//tensorboard/webapp/util:dom",
@@ -69,6 +70,7 @@ tf_ts_library(
         "//tensorboard/webapp/app_routing:namespaced_state_reducer_helper",
         "//tensorboard/webapp/metrics:internal_types",
         "//tensorboard/webapp/metrics/data_source",
+        "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types",
         "//tensorboard/webapp/types",
         "//tensorboard/webapp/util:dom",
     ],

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -46,6 +46,7 @@ import {
   URLDeserializedState,
 } from '../internal_types';
 import {groupCardIdWithMetdata} from '../utils';
+import {ColumnHeaders} from '../views/card_renderer/scalar_card_types';
 import {
   buildOrReturnStateWithPinnedCopy,
   buildOrReturnStateWithUnresolvedImportedPins,
@@ -262,6 +263,24 @@ const {initialState, reducers: namespaceContextedReducer} =
       linkedTimeEnabled: false,
       stepSelectorEnabled: false,
       rangeSelectionEnabled: false,
+      singleSelectionHeaders: [
+        ColumnHeaders.RUN,
+        ColumnHeaders.SMOOTHED,
+        ColumnHeaders.VALUE,
+        ColumnHeaders.STEP,
+        ColumnHeaders.RELATIVE_TIME,
+      ],
+      rangeSelectionHeaders: [
+        ColumnHeaders.RUN,
+        ColumnHeaders.MIN_VALUE,
+        ColumnHeaders.MAX_VALUE,
+        ColumnHeaders.START_VALUE,
+        ColumnHeaders.END_VALUE,
+        ColumnHeaders.VALUE_CHANGE,
+        ColumnHeaders.PERCENTAGE_CHANGE,
+        ColumnHeaders.START_STEP,
+        ColumnHeaders.END_STEP,
+      ],
       filteredPluginTypes: new Set(),
       stepMinMax: {
         min: Infinity,

tensorboard/webapp/metrics/store/metrics_selectors.ts

@@ -30,6 +30,7 @@ import {
   TooltipSort,
   XAxisType,
 } from '../internal_types';
+import {ColumnHeaders} from '../views/card_renderer/scalar_card_types';
 import * as storeUtils from './metrics_store_internal_utils';
 import {
   CardMetadataMap,
@@ -386,6 +387,20 @@ export const getMetricsStepMinMax = createSelector(
   }
 );
 
+export const getSingleSelectionHeaders = createSelector(
+  selectMetricsState,
+  (state: MetricsState): ColumnHeaders[] => {
+    return state.singleSelectionHeaders;
+  }
+);
+
+export const getRangeSelectionHeaders = createSelector(
+  selectMetricsState,
+  (state: MetricsState): ColumnHeaders[] => {
+    return state.rangeSelectionHeaders;
+  }
+);
+
 /**
  * Returns value of the linked time set by user. When linked time selection is never
  * set, it returns the default value which is derived from the timeseries data

tensorboard/webapp/metrics/store/metrics_types.ts

@@ -36,6 +36,7 @@ import {
   TooltipSort,
   XAxisType,
 } from '../internal_types';
+import {ColumnHeaders} from '../views/card_renderer/scalar_card_types';
 
 export const METRICS_FEATURE_KEY = 'metrics';
 
@@ -176,6 +177,8 @@ export interface MetricsNamespacedState {
   linkedTimeEnabled: boolean;
   stepSelectorEnabled: boolean;
   rangeSelectionEnabled: boolean;
+  singleSelectionHeaders: ColumnHeaders[];
+  rangeSelectionHeaders: ColumnHeaders[];
   // Empty Set would signify "show all". `filteredPluginTypes` will never have
   // all pluginTypes in the Set.
   filteredPluginTypes: Set<PluginType>;

tensorboard/webapp/metrics/testing.ts

@@ -102,6 +102,8 @@ function buildBlankState(): MetricsState {
     linkedTimeEnabled: false,
     stepSelectorEnabled: false,
     rangeSelectionEnabled: false,
+    singleSelectionHeaders: [],
+    rangeSelectionHeaders: [],
     filteredPluginTypes: new Set(),
     stepMinMax: {min: Infinity, max: -Infinity},
     isSettingsPaneOpen: false,

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

@@ -83,6 +83,8 @@ import {
   getMetricsScalarSmoothing,
   getMetricsTooltipSort,
   getMetricsXAxisType,
+  getRangeSelectionHeaders,
+  getSingleSelectionHeaders,
   RunToSeries,
 } from '../../store';
 import {CardId, CardMetadata, XAxisType} from '../../types';
@@ -483,32 +485,33 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
     this.columnHeaders$ = combineLatest([
       this.smoothingEnabled$,
       this.stepOrLinkedTimeSelection$,
+      this.store.select(getSingleSelectionHeaders),
+      this.store.select(getRangeSelectionHeaders),
     ]).pipe(
-      map(([smoothingEnabled, timeSelection]) => {
-        const headers: ColumnHeaders[] = [];
-        if (timeSelection === null || timeSelection.end === null) {
-          // Single Step Selected
-          headers.push(ColumnHeaders.RUN);
-          if (smoothingEnabled) {
-            headers.push(ColumnHeaders.SMOOTHED);
+      map(
+        ([
+          smoothingEnabled,
+          timeSelection,
+          singleSelectionHeaders,
+          rangeSelectionHeaders,
+        ]) => {
+          const headers: ColumnHeaders[] = [];
+          if (timeSelection === null || timeSelection.end === null) {
+            if (!smoothingEnabled) {
+              // Return single selection headers without smoothed header.
+              const indexOfSmoothed = singleSelectionHeaders.indexOf(
+                ColumnHeaders.SMOOTHED
+              );
+              return singleSelectionHeaders
+                .slice(0, indexOfSmoothed)
+                .concat(singleSelectionHeaders.slice(indexOfSmoothed + 1));
+            }
+            return singleSelectionHeaders;
+          } else {
+            return rangeSelectionHeaders;
           }
-          headers.push(ColumnHeaders.VALUE);
-          headers.push(ColumnHeaders.STEP);
-          headers.push(ColumnHeaders.RELATIVE_TIME);
-        } else {
-          // Range selection headers.
-          headers.push(ColumnHeaders.RUN);
-          headers.push(ColumnHeaders.MIN_VALUE);
-          headers.push(ColumnHeaders.MAX_VALUE);
-          headers.push(ColumnHeaders.START_VALUE);
-          headers.push(ColumnHeaders.END_VALUE);
-          headers.push(ColumnHeaders.VALUE_CHANGE);
-          headers.push(ColumnHeaders.PERCENTAGE_CHANGE);
-          headers.push(ColumnHeaders.START_STEP);
-          headers.push(ColumnHeaders.END_STEP);
         }
-        return headers;
-      })
+      )
     );
 
     this.chartMetadataMap$ = partitionedSeries$.pipe(

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

@@ -81,6 +81,8 @@ import {
   getMetricsRangeSelectionEnabled,
   getMetricsScalarSmoothing,
   getMetricsStepSelectorEnabled,
+  getRangeSelectionHeaders,
+  getSingleSelectionHeaders,
 } from '../../store';
 import {
   appStateFromMetricsState,
@@ -2552,6 +2554,24 @@ describe('scalar card', () => {
   describe('getTimeSelectionTableData', () => {
     beforeEach(() => {
       store.overrideSelector(getMetricsLinkedTimeEnabled, true);
+      store.overrideSelector(getSingleSelectionHeaders, [
+        ColumnHeaders.RUN,
+        ColumnHeaders.SMOOTHED,
+        ColumnHeaders.VALUE,
+        ColumnHeaders.STEP,
+        ColumnHeaders.RELATIVE_TIME,
+      ]);
+      store.overrideSelector(getRangeSelectionHeaders, [
+        ColumnHeaders.RUN,
+        ColumnHeaders.MIN_VALUE,
+        ColumnHeaders.MAX_VALUE,
+        ColumnHeaders.START_VALUE,
+        ColumnHeaders.END_VALUE,
+        ColumnHeaders.VALUE_CHANGE,
+        ColumnHeaders.PERCENTAGE_CHANGE,
+        ColumnHeaders.START_STEP,
+        ColumnHeaders.END_STEP,
+      ]);
     });
 
     it('builds single selected step data object', fakeAsync(() => {