Column Customization: Open Editor to the expected tab (#6305)

## Motivation for features / changes
When the Column Editor is opened from the scalar card it opens to
whatever the default or last selected tab is. However, it would be
expected to open to the mode that the card used to open it is in(Single
vs Range). This makes that happen

## Technical description of changes
This PR creates a new value in the metricsState(tableEditorSelectedTab)
which reflects the selected tab in the table editor. It then pulls that
value into the editor and uses it to select the tab. It is kept up to
date with calls to tableEditorTabChanged (a new action created for this
purpose) when the tab is changed inside the controller.

Lastly it adds a new prop to the metricsSlideoutMenuOpened action which
contains the current mode of the chart which dispatched the action. This
mode is used to update the new tableEditorSelectedTab value.

## Screenshots of UI changes
![2023-04-13_23-47-03
(1)](https://user-images.githubusercontent.com/8672809/231965710-9b124054-cf47-4394-9789-18894e06574c.gif)

Author: JamesHollyer

tensorboard/webapp/metrics/BUILD

@@ -88,6 +88,7 @@ tf_ts_library(
         "//tensorboard/webapp/metrics/data_source",
         "//tensorboard/webapp/metrics/store",
         "//tensorboard/webapp/metrics/store:types",
+        "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types",
         "//tensorboard/webapp/types",
         "//tensorboard/webapp/widgets/histogram:types",
         "@npm//@angular/core",

tensorboard/webapp/metrics/actions/index.ts

@@ -36,6 +36,7 @@ import {
 } from '../types';
 import {
   ColumnHeader,
+  DataTableMode,
   SortingInfo,
 } from '../views/card_renderer/scalar_card_types';
 
@@ -52,7 +53,13 @@ export const metricsSlideoutMenuToggled = createAction(
 );
 
 export const metricsSlideoutMenuOpened = createAction(
-  '[Metrics] User requested to open the slide out menu'
+  '[Metrics] User requested to open the slide out menu',
+  props<{mode: DataTableMode}>()
+);
+
+export const tableEditorTabChanged = createAction(
+  '[Metrics] User changed the tab in the table editor',
+  props<{tab: DataTableMode}>()
 );
 
 export const metricsSlideoutMenuClosed = createAction(

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -299,6 +299,7 @@ const {initialState, reducers: namespaceContextedReducer} =
     {
       isSettingsPaneOpen: true,
       isSlideoutMenuOpen: false,
+      tableEditorSelectedTab: DataTableMode.SINGLE,
       timeSeriesData: {
         scalars: {},
         histograms: {},
@@ -1252,6 +1253,12 @@ const reducer = createReducer(
       linkedTimeSelection: null,
     };
   }),
+  on(actions.tableEditorTabChanged, (state, {tab}) => {
+    return {
+      ...state,
+      tableEditorSelectedTab: tab,
+    };
+  }),
   on(actions.dataTableColumnEdited, (state, {dataTableMode, headers}) => {
     const enabledNewHeaders: ColumnHeader[] = [];
     const disabledNewHeaders: ColumnHeader[] = [];
@@ -1346,12 +1353,17 @@ const reducer = createReducer(
   on(actions.metricsSlideoutMenuToggled, (state) => {
     return {...state, isSlideoutMenuOpen: !state.isSlideoutMenuOpen};
   }),
-  on(actions.metricsSlideoutMenuOpened, (state) => {
+  on(actions.metricsSlideoutMenuOpened, (state, {mode}) => {
     // The reason the toggle action does not open the settings pane is because
     // the settings pane is the only place the menu can be toggled. The open
     // request can be made from the card when the settings menu is closed,
     // therefore we need to make sure the settings menu is opened, too.
-    return {...state, isSlideoutMenuOpen: true, isSettingsPaneOpen: true};
+    return {
+      ...state,
+      isSlideoutMenuOpen: true,
+      isSettingsPaneOpen: true,
+      tableEditorSelectedTab: mode,
+    };
   }),
   on(actions.metricsSlideoutMenuClosed, (state) => {
     return {...state, isSlideoutMenuOpen: false};

tensorboard/webapp/metrics/store/metrics_reducers_test.ts

@@ -3929,19 +3929,27 @@ describe('metrics reducers', () => {
     });
 
     describe('#metricsSlideoutMenuOpened', () => {
-      it('sets the isSlideoutMenuOpen and isSettingsPaneOpen to true', () => {
+      it('sets the isSlideoutMenuOpen and isSettingsPaneOpen to true and always updates tableEditorSelectedTab', () => {
         const state1 = buildMetricsState({
           isSlideoutMenuOpen: false,
           isSettingsPaneOpen: false,
         });
 
-        const state2 = reducers(state1, actions.metricsSlideoutMenuOpened());
+        const state2 = reducers(
+          state1,
+          actions.metricsSlideoutMenuOpened({mode: DataTableMode.RANGE})
+        );
         expect(state2.isSlideoutMenuOpen).toBe(true);
         expect(state2.isSettingsPaneOpen).toBe(true);
+        expect(state2.tableEditorSelectedTab).toBe(DataTableMode.RANGE);
 
-        const state3 = reducers(state1, actions.metricsSlideoutMenuOpened());
+        const state3 = reducers(
+          state2,
+          actions.metricsSlideoutMenuOpened({mode: DataTableMode.SINGLE})
+        );
         expect(state3.isSlideoutMenuOpen).toBe(true);
         expect(state3.isSettingsPaneOpen).toBe(true);
+        expect(state3.tableEditorSelectedTab).toBe(DataTableMode.SINGLE);
       });
 
       it('leaves isSettingsPaneOpen as true when it is already set', () => {
@@ -3950,7 +3958,10 @@ describe('metrics reducers', () => {
           isSettingsPaneOpen: true,
         });
 
-        const state2 = reducers(state1, actions.metricsSlideoutMenuOpened());
+        const state2 = reducers(
+          state1,
+          actions.metricsSlideoutMenuOpened({mode: DataTableMode.SINGLE})
+        );
         expect(state2.isSlideoutMenuOpen).toBe(true);
         expect(state2.isSettingsPaneOpen).toBe(true);
       });

tensorboard/webapp/metrics/store/metrics_selectors.ts

@@ -31,6 +31,7 @@ import {
 } from '../types';
 import {
   ColumnHeader,
+  DataTableMode,
   MinMaxStep,
 } from '../views/card_renderer/scalar_card_types';
 import {formatTimeSelection} from '../views/card_renderer/utils';
@@ -484,6 +485,11 @@ export const isMetricsSlideoutMenuOpen = createSelector(
   (state): boolean => state.isSlideoutMenuOpen
 );
 
+export const getTableEditorSelectedTab = createSelector(
+  selectMetricsState,
+  (state): DataTableMode => state.tableEditorSelectedTab
+);
+
 export const getMetricsCardRangeSelectionEnabled = createSelector(
   getMetricsRangeSelectionEnabled,
   getMetricsLinkedTimeEnabled,

tensorboard/webapp/metrics/store/metrics_selectors_test.ts

@@ -26,6 +26,7 @@ import {
   createTimeSeriesData,
 } from '../testing';
 import {HistogramMode, TooltipSort, XAxisType} from '../types';
+import {DataTableMode} from '../views/card_renderer/scalar_card_types';
 import * as selectors from './metrics_selectors';
 import {CardFeatureOverride, MetricsState} from './metrics_types';
 
@@ -1473,4 +1474,19 @@ describe('metrics selectors', () => {
       expect(selectors.isMetricsSettingsPaneOpen(state)).toEqual(false);
     });
   });
+
+  describe('#getTableEditorSelectedTab', () => {
+    beforeEach(() => {
+      selectors.getTableEditorSelectedTab.release();
+    });
+
+    it('returns current settings pane open state', () => {
+      const state = appStateFromMetricsState(
+        buildMetricsState({tableEditorSelectedTab: DataTableMode.RANGE})
+      );
+      expect(selectors.getTableEditorSelectedTab(state)).toEqual(
+        DataTableMode.RANGE
+      );
+    });
+  });
 });

tensorboard/webapp/metrics/store/metrics_types.ts

@@ -37,7 +37,10 @@ import {
   TooltipSort,
   XAxisType,
 } from '../types';
-import {ColumnHeader} from '../views/card_renderer/scalar_card_types';
+import {
+  ColumnHeader,
+  DataTableMode,
+} from '../views/card_renderer/scalar_card_types';
 
 export const METRICS_FEATURE_KEY = 'metrics';
 
@@ -244,6 +247,7 @@ export interface MetricsNonNamespacedState {
   timeSeriesData: TimeSeriesData;
   isSettingsPaneOpen: boolean;
   isSlideoutMenuOpen: boolean;
+  tableEditorSelectedTab: DataTableMode;
   // Default settings. For the legacy reasons, we cannot change the name of the
   // prop. It either is set by application or a user via settings storage.
   settings: MetricsSettings;

tensorboard/webapp/metrics/testing.ts

@@ -42,6 +42,7 @@ import {
   StepDatum,
 } from './store/metrics_types';
 import {CardId, CardMetadata, TooltipSort, XAxisType} from './types';
+import {DataTableMode} from './views/card_renderer/scalar_card_types';
 
 export function buildMetricsSettingsState(
   overrides?: Partial<MetricsSettings>
@@ -110,6 +111,7 @@ function buildBlankState(): MetricsState {
     stepMinMax: {min: Infinity, max: -Infinity},
     isSettingsPaneOpen: false,
     isSlideoutMenuOpen: false,
+    tableEditorSelectedTab: DataTableMode.SINGLE,
   };
 }
 

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -96,7 +96,7 @@
         <button
           *ngIf="columnCustomizationEnabled"
           mat-menu-item
-          (click)="openSlideoutColumnEditMenu.emit()"
+          (click)="openTableEditMenu()"
           aria-label="Open menu to edit data table columns"
         >
           <mat-icon svgIcon="edit_24px"></mat-icon>

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

@@ -48,6 +48,7 @@ import {HeaderEditInfo, TooltipSort, XAxisType} from '../../types';
 import {
   ColumnHeader,
   ColumnHeaderType,
+  DataTableMode,
   MinMaxStep,
   ScalarCardDataSeries,
   ScalarCardSeriesMetadata,
@@ -98,6 +99,7 @@ export class ScalarCardComponent<Downloader> {
   @Input() isProspectiveFobFeatureEnabled: Boolean = false;
   @Input() minMaxStep!: MinMaxStep;
   @Input() columnHeaders!: ColumnHeader[];
+  @Input() rangeEnabled!: boolean;
 
   @Output() onFullSizeToggle = new EventEmitter<void>();
   @Output() onPinClicked = new EventEmitter<boolean>();
@@ -109,7 +111,7 @@ export class ScalarCardComponent<Downloader> {
     new EventEmitter<TimeSelectionToggleAffordance>();
   @Output() onDataTableSorting = new EventEmitter<SortingInfo>();
   @Output() editColumnHeaders = new EventEmitter<HeaderEditInfo>();
-  @Output() openSlideoutColumnEditMenu = new EventEmitter<void>();
+  @Output() openTableEditMenuToMode = new EventEmitter<DataTableMode>();
 
   @Output() onLineChartZoom = new EventEmitter<Extent>();
 
@@ -282,4 +284,11 @@ export class ScalarCardComponent<Downloader> {
       this.dataTableContainer.nativeElement.style.height = '';
     }
   }
+
+  openTableEditMenu() {
+    const currentTableMode = this.rangeEnabled
+      ? DataTableMode.RANGE
+      : DataTableMode.SINGLE;
+    this.openTableEditMenuToMode.emit(currentTableMode);
+  }
 }