Column Customization: New affordances (#6252)

* Motivation for features / changes
This PR adds a new affordance for opening the column editor directly
from the card menu. It also adds a close button inside the editor.

* Screenshots of UI
<img width="239" alt="Screenshot 2023-03-24 at 3 28 25 PM"
src="https://user-images.githubusercontent.com/8672809/227654782-22bcbe4e-402d-4ed1-96a1-41ad105138ec.png">
<img width="259" alt="Screenshot 2023-03-24 at 3 28 18 PM"
src="https://user-images.githubusercontent.com/8672809/227654785-d9b9be95-295f-44a7-b32f-744ad03282a6.png">



<img width="683" alt="Screenshot 2023-03-21 at 11 52 01 AM"
src="https://user-images.githubusercontent.com/8672809/226712053-e0b78c56-0d57-4945-a17c-4bd7a6f8447b.png">
I changes

Author: JamesHollyer

tensorboard/webapp/metrics/actions/index.ts

@@ -51,6 +51,14 @@ export const metricsSlideoutMenuToggled = createAction(
   '[Metrics] Slide out settings menu toggled'
 );
 
+export const metricsSlideoutMenuOpened = createAction(
+  '[Metrics] User requested to open the slide out menu'
+);
+
+export const metricsSlideoutMenuClosed = createAction(
+  '[Metrics] Slide out settings menu closed'
+);
+
 export const metricsTagMetadataRequested = createAction(
   '[Metrics] Metrics Tag Metadata Requested'
 );

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -1358,6 +1358,16 @@ const reducer = createReducer(
   }),
   on(actions.metricsSlideoutMenuToggled, (state) => {
     return {...state, isSlideoutMenuOpen: !state.isSlideoutMenuOpen};
+  }),
+  on(actions.metricsSlideoutMenuOpened, (state) => {
+    // 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};
+  }),
+  on(actions.metricsSlideoutMenuClosed, (state) => {
+    return {...state, isSlideoutMenuOpen: false};
   })
 );
 

tensorboard/webapp/metrics/store/metrics_reducers_test.ts

@@ -3912,4 +3912,62 @@ describe('metrics reducers', () => {
       expect(state3.isSettingsPaneOpen).toBe(false);
     });
   });
+
+  describe('Metrics Slideout Menu', () => {
+    describe('#metricsSlideoutMenuToggled', () => {
+      it('toggles the isSlideoutMenuOpen state', () => {
+        const state1 = buildMetricsState({
+          isSlideoutMenuOpen: false,
+        });
+
+        const state2 = reducers(state1, actions.metricsSlideoutMenuToggled());
+        expect(state2.isSlideoutMenuOpen).toBe(true);
+
+        const state3 = reducers(state2, actions.metricsSlideoutMenuToggled());
+        expect(state3.isSlideoutMenuOpen).toBe(false);
+      });
+    });
+
+    describe('#metricsSlideoutMenuOpened', () => {
+      it('sets the isSlideoutMenuOpen and isSettingsPaneOpen to true', () => {
+        const state1 = buildMetricsState({
+          isSlideoutMenuOpen: false,
+          isSettingsPaneOpen: false,
+        });
+
+        const state2 = reducers(state1, actions.metricsSlideoutMenuOpened());
+        expect(state2.isSlideoutMenuOpen).toBe(true);
+        expect(state2.isSettingsPaneOpen).toBe(true);
+
+        const state3 = reducers(state1, actions.metricsSlideoutMenuOpened());
+        expect(state3.isSlideoutMenuOpen).toBe(true);
+        expect(state3.isSettingsPaneOpen).toBe(true);
+      });
+
+      it('leaves isSettingsPaneOpen as true when it is already set', () => {
+        const state1 = buildMetricsState({
+          isSlideoutMenuOpen: false,
+          isSettingsPaneOpen: true,
+        });
+
+        const state2 = reducers(state1, actions.metricsSlideoutMenuOpened());
+        expect(state2.isSlideoutMenuOpen).toBe(true);
+        expect(state2.isSettingsPaneOpen).toBe(true);
+      });
+    });
+
+    describe('#metricsSlideoutMenuClosed', () => {
+      it('sets the isSlideoutMenuOpen to false', () => {
+        const state1 = buildMetricsState({
+          isSlideoutMenuOpen: true,
+        });
+
+        const state2 = reducers(state1, actions.metricsSlideoutMenuClosed());
+        expect(state2.isSlideoutMenuOpen).toBe(false);
+
+        const state3 = reducers(state1, actions.metricsSlideoutMenuClosed());
+        expect(state3.isSlideoutMenuOpen).toBe(false);
+      });
+    });
+  });
 });

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

@@ -93,6 +93,15 @@
           <mat-icon svgIcon="get_app_24px"></mat-icon>
           <span>Download data</span>
         </button>
+        <button
+          *ngIf="columnCustomizationEnabled"
+          mat-menu-item
+          (click)="openSlideoutColumnEditMenu.emit()"
+          aria-label="Open menu to edit data table columns"
+        >
+          <mat-icon svgIcon="edit_24px"></mat-icon>
+          <span>Edit Table Columns</span>
+        </button>
       </mat-menu>
     </span>
   </div>

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

@@ -109,6 +109,7 @@ export class ScalarCardComponent<Downloader> {
     new EventEmitter<TimeSelectionToggleAffordance>();
   @Output() onDataTableSorting = new EventEmitter<SortingInfo>();
   @Output() reorderColumnHeaders = new EventEmitter<ColumnHeader[]>();
+  @Output() openSlideoutColumnEditMenu = new EventEmitter<void>();
 
   @Output() onLineChartZoom = new EventEmitter<Extent>();
 

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

@@ -74,6 +74,7 @@ import {
   sortingDataTable,
   stepSelectorToggled,
   timeSelectionChanged,
+  metricsSlideoutMenuOpened,
 } from '../../actions';
 import {PluginType, ScalarStepDatum} from '../../data_source';
 import {
@@ -183,6 +184,7 @@ function isMinMaxStepValid(minMax: MinMaxStep | undefined): boolean {
       (onLineChartZoom)="onLineChartZoom($event)"
       (reorderColumnHeaders)="reorderColumnHeaders($event)"
       (onCardStateChanged)="onCardStateChanged($event)"
+      (openSlideoutColumnEditMenu)="openSlideoutColumnEditMenu()"
     ></scalar-card-component>
   `,
   styles: [
@@ -664,4 +666,8 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
   reorderColumnHeaders(headers: ColumnHeader[]) {
     this.store.dispatch(dataTableColumnDrag({newOrder: headers}));
   }
+
+  openSlideoutColumnEditMenu() {
+    this.store.dispatch(metricsSlideoutMenuOpened());
+  }
 }

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

@@ -80,6 +80,7 @@ import {
   metricsCardStateUpdated,
   stepSelectorToggled,
   timeSelectionChanged,
+  metricsSlideoutMenuOpened,
 } from '../../actions';
 import {PluginType} from '../../data_source';
 import {
@@ -841,6 +842,21 @@ describe('scalar card', () => {
       // Clicking on overflow menu and mat button enqueue asyncs. Flush them.
       flush();
     }));
+
+    it('dispatches metricsSlideoutMenuOpened when edit columns button is clicked', fakeAsync(() => {
+      store.overrideSelector(
+        selectors.getIsScalarColumnCustomizationEnabled,
+        true
+      );
+      const fixture = createComponent('card1');
+
+      openOverflowMenu(fixture);
+      getMenuButton('Open menu to edit data table columns').click();
+      fixture.detectChanges();
+
+      expect(dispatchedActions[0]).toEqual(metricsSlideoutMenuOpened());
+      flush();
+    }));
   });
 
   describe('full size', () => {

tensorboard/webapp/metrics/views/main_view/main_view_component.scss

@@ -168,7 +168,8 @@ limitations under the License.
 
 .slide-out-menu {
   background-color: mat.get-color-from-palette($tb-background, background);
-  height: 100%;
+  // Make the menu the full height minus the size of the toolbar.
+  height: calc(100% - 49px);
   position: absolute;
   right: 50px;
   top: 49px;

tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ng.html

@@ -14,7 +14,7 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<div>
+<div class="editor-controls">
   <mat-tab-group class="tab-group">
     <mat-tab [label]="'Single'">
       <ngContext
@@ -30,6 +30,17 @@
     </mat-tab>
   </mat-tab-group>
 </div>
+<div class="footer">
+  <button
+    mat-button
+    class="close-button"
+    (click)="onScalarTableColumnEditorClosed.emit()"
+    i18n-aria-label="Label on a button to close the column editor."
+    aria-label="Close column editor"
+  >
+    Close
+  </button>
+</div>
 
 <ng-template
   #headerList

tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss

@@ -19,12 +19,18 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
 
 :host ::ng-deep .mat-tab-label {
   min-width: 0;
+  padding: 0 30px;
+}
+.editor-controls {
+  // controls should fill the full height except for the height of the footer.
+  height: calc(100% - 45px);
 }
 .tab-group {
   // Override static position so this object is not seen in front of the
   // settings panel.
   position: relative;
   z-index: 0;
+  height: 100%;
 }
 .header-list {
   margin-top: 5%;
@@ -46,3 +52,29 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
 .highlight-top {
   border-top: 2px solid mat.get-color-from-palette($_accent);
 }
+
+.footer {
+  display: flex;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 4px;
+  border-top: 1px solid mat.get-color-from-palette($tb-foreground, border);
+
+  @include tb-dark-theme {
+    border-color: mat.get-color-from-palette($tb-dark-foreground, border);
+  }
+}
+
+.close-button {
+  color: mat.get-color-from-palette($tb-foreground, secondary-text);
+  width: 84px;
+
+  @include tb-dark-theme {
+    color: mat.get-color-from-palette($tb-dark-foreground, secondary-text);
+  }
+}