step selector: add step selector toggle state and action (#5742)

This is part of the work to wiring the "sticky data table" (aka step selector) to its own feature. Following up #5734, we create the ngrx state and toggle to change the state status, which will be used to turn on/off the feature.

tensorboard/webapp/metrics/actions/index.ts

@@ -189,6 +189,10 @@ export const useRangeSelectTimeToggled = createAction(
   '[Metrics] Use Range Select Time Toggle'
 );
 
+export const stepSelectorEnableToggled = createAction(
+  '[Metrics] Time Selector Enable Toggle'
+);
+
 export const metricsPromoDismissed = createAction(
   '[Metrics] Metrics Promo Dismissed'
 );

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -259,6 +259,7 @@ const {initialState, reducers: namespaceContextedReducer} =
       tagGroupExpanded: new Map<string, boolean>(),
       selectedTime: null,
       selectTimeEnabled: false,
+      stepSelectorEnabled: false,
       useRangeSelectTime: false,
       filteredPluginTypes: new Set(),
       stepMinMax: {
@@ -1009,6 +1010,12 @@ const reducer = createReducer(
       useRangeSelectTime,
     };
   }),
+  on(actions.stepSelectorEnableToggled, (state) => {
+    return {
+      ...state,
+      stepSelectorEnabled: !state.stepSelectorEnabled,
+    };
+  }),
   on(actions.useRangeSelectTimeToggled, (state) => {
     return {
       ...state,

tensorboard/webapp/metrics/store/metrics_reducers_test.ts

@@ -2867,6 +2867,20 @@ describe('metrics reducers', () => {
     });
   });
 
+  describe('step selector features', () => {
+    it('toggles whether stepSelector is enabled or not', () => {
+      const state1 = buildMetricsState({
+        stepSelectorEnabled: false,
+      });
+
+      const state2 = reducers(state1, actions.stepSelectorEnableToggled());
+      expect(state2.stepSelectorEnabled).toBe(true);
+
+      const state3 = reducers(state2, actions.stepSelectorEnableToggled());
+      expect(state3.stepSelectorEnabled).toBe(false);
+    });
+  });
+
   describe('plugin filtering feature', () => {
     describe('#metricsToggleVisiblePlugin', () => {
       it('toggles plugin types', () => {

tensorboard/webapp/metrics/store/metrics_types.ts

@@ -165,6 +165,7 @@ export interface MetricsNamespacedState {
   tagGroupExpanded: Map<string, boolean>;
   selectedTime: LinkedTime | null;
   selectTimeEnabled: boolean;
+  stepSelectorEnabled: boolean;
   useRangeSelectTime: boolean;
   // Empty Set would signify "show all". `filteredPluginTypes` will never have
   // all pluginTypes in the Set.

tensorboard/webapp/metrics/testing.ts

@@ -100,6 +100,7 @@ function buildBlankState(): MetricsState {
     tagGroupExpanded: new Map(),
     selectedTime: null,
     selectTimeEnabled: false,
+    stepSelectorEnabled: false,
     useRangeSelectTime: false,
     filteredPluginTypes: new Set(),
     stepMinMax: {min: Infinity, max: -Infinity},

tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts

@@ -550,6 +550,17 @@ describe('metrics right_pane', () => {
           ]
         ).toBe('false');
       });
+
+      it('dispatches stepSelectorEnableToggled on toggle', () => {
+        const fixture = TestBed.createComponent(SettingsViewContainer);
+        fixture.detectChanges();
+
+        select(fixture, '.scalars-step-selector input').nativeElement.click();
+
+        expect(dispatchSpy).toHaveBeenCalledWith(
+          actions.stepSelectorEnableToggled()
+        );
+      });
     });
   });
 });

tensorboard/webapp/metrics/views/right_pane/settings_view_container.ts

@@ -33,6 +33,7 @@ import {
   metricsToggleIgnoreOutliers,
   metricsToggleImageShowActualSize,
   selectTimeEnableToggled,
+  stepSelectorEnableToggled,
   timeSelectionChanged,
 } from '../../actions';
 import {HistogramMode, LinkedTime, TooltipSort, XAxisType} from '../../types';
@@ -197,7 +198,7 @@ export class SettingsViewContainer {
   }
 
   onStepSelectorEnableToggled() {
-    // TODO(japie1235813): Dispatch toggled event to update ngrx state.
+    this.store.dispatch(stepSelectorEnableToggled());
   }
 
   onSelectTimeChanged(newValue: LinkedTime) {