Column Customization: Add Data Table Column Dragging (#6086)

* Motivation for features / changes
This adds the main logic for dragging columns directly in the data
table.

* Technical description of changes
This both adds the action/reducer which makes the actual change of
column order and the UI logic while dragging.

* Screenshots of UI changes

![columnDragging](https://user-images.githubusercontent.com/8672809/205188544-6db9e191-de3e-44be-9401-2684f8a55689.gif)

Author: JamesHollyer

tensorboard/webapp/metrics/actions/index.ts

@@ -30,7 +30,10 @@ import {
   TooltipSort,
   XAxisType,
 } from '../internal_types';
-import {SortingInfo} from '../views/card_renderer/scalar_card_types';
+import {
+  ColumnHeaders,
+  SortingInfo,
+} from '../views/card_renderer/scalar_card_types';
 
 export const metricsSettingsPaneClosed = createAction(
   '[Metrics] Metrics Settings Pane Closed'
@@ -197,6 +200,13 @@ export const sortingDataTable = createAction(
   props<SortingInfo>()
 );
 
+export const dataTableColumnDrag = createAction(
+  '[Metrics] Data table column dragged',
+  props<{
+    newOrder: ColumnHeaders[];
+  }>()
+);
+
 export const stepSelectorToggled = createAction(
   '[Metrics] Time Selector Enable Toggle',
   props<{

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -1092,6 +1092,34 @@ const reducer = createReducer(
       linkedTimeSelection: null,
     };
   }),
+  on(actions.dataTableColumnDrag, (state, {newOrder}) => {
+    if (state.rangeSelectionEnabled) {
+      return {
+        ...state,
+        rangeSelectionHeaders: newOrder,
+      };
+    }
+
+    // TODO(@jameshollyer): remove this logic with smoothing refactor *******
+    let orderAdjustedForSmoothed = newOrder;
+    const newSmoothedColumnIndex = newOrder.indexOf(ColumnHeaders.SMOOTHED);
+    const oldSmoothedColumnIndex = state.singleSelectionHeaders.indexOf(
+      ColumnHeaders.SMOOTHED
+    );
+
+    if (newSmoothedColumnIndex < 0 && oldSmoothedColumnIndex > 0) {
+      orderAdjustedForSmoothed = newOrder
+        .slice(0, oldSmoothedColumnIndex)
+        .concat([ColumnHeaders.SMOOTHED])
+        .concat(newOrder.slice(oldSmoothedColumnIndex, newOrder.length));
+    }
+    // *********************************************************************
+
+    return {
+      ...state,
+      singleSelectionHeaders: orderAdjustedForSmoothed,
+    };
+  }),
   on(actions.metricsToggleVisiblePlugin, (state, {plugin}) => {
     let nextFilteredPluginTypes = new Set(state.filteredPluginTypes);
     if (nextFilteredPluginTypes.has(plugin)) {

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

@@ -177,7 +177,9 @@
       [stepOrLinkedTimeSelection]="stepOrLinkedTimeSelection"
       [dataHeaders]="dataHeaders"
       [sortingInfo]="sortingInfo"
+      [columnCustomizationEnabled]="columnCustomizationEnabled"
       (sortDataBy)="sortDataBy($event)"
+      (orderColumns)="reorderColumnHeaders.emit($event)"
     >
     </scalar-card-data-table>
   </div>

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

@@ -90,6 +90,7 @@ export class ScalarCardComponent<Downloader> {
   @Input() xScaleType!: ScaleType;
   @Input() useDarkMode!: boolean;
   @Input() forceSvg!: boolean;
+  @Input() columnCustomizationEnabled!: boolean;
   @Input() linkedTimeSelection!: TimeSelectionView | null;
   @Input() stepOrLinkedTimeSelection!: TimeSelection | null;
   @Input() rangeSelectionEnabled: boolean = false;
@@ -106,6 +107,7 @@ export class ScalarCardComponent<Downloader> {
   @Output() onStepSelectorToggled =
     new EventEmitter<TimeSelectionToggleAffordance>();
   @Output() onDataTableSorting = new EventEmitter<SortingInfo>();
+  @Output() reorderColumnHeaders = new EventEmitter<ColumnHeaders[]>();
 
   @Output() onLineChartZoom = new EventEmitter<Extent>();
 

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

@@ -44,7 +44,10 @@ import {
 } from 'rxjs/operators';
 import {State} from '../../../app_state';
 import {ExperimentAlias} from '../../../experiments/types';
-import {getForceSvgFeatureFlag} from '../../../feature_flag/store/feature_flag_selectors';
+import {
+  getForceSvgFeatureFlag,
+  getIsScalarColumnCustomizationEnabled,
+} from '../../../feature_flag/store/feature_flag_selectors';
 import {
   getCardPinnedState,
   getCurrentRouteRunSelection,
@@ -68,6 +71,7 @@ import {classicSmoothing} from '../../../widgets/line_chart_v2/data_transformer'
 import {Extent} from '../../../widgets/line_chart_v2/lib/public_types';
 import {ScaleType} from '../../../widgets/line_chart_v2/types';
 import {
+  dataTableColumnDrag,
   sortingDataTable,
   stepSelectorToggled,
   timeSelectionChanged,
@@ -162,6 +166,7 @@ function areSeriesEqual(
       [rangeSelectionEnabled]="rangeSelectionEnabled$ | async"
       [isProspectiveFobFeatureEnabled]="isProspectiveFobFeatureEnabled$ | async"
       [forceSvg]="forceSvg$ | async"
+      [columnCustomizationEnabled]="columnCustomizationEnabled$ | async"
       [minMaxStep]="minMaxSteps$ | async"
       [dataHeaders]="columnHeaders$ | async"
       (onFullSizeToggle)="onFullSizeToggle()"
@@ -172,6 +177,7 @@ function areSeriesEqual(
       (onStepSelectorToggled)="onStepSelectorToggled($event)"
       (onDataTableSorting)="onDataTableSorting($event)"
       (onLineChartZoom)="onLineChartZoom($event)"
+      (reorderColumnHeaders)="reorderColumnHeaders($event)"
     ></scalar-card-component>
   `,
   styles: [
@@ -234,6 +240,9 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
   readonly tooltipSort$ = this.store.select(getMetricsTooltipSort);
   readonly xAxisType$ = this.store.select(getMetricsXAxisType);
   readonly forceSvg$ = this.store.select(getForceSvgFeatureFlag);
+  readonly columnCustomizationEnabled$ = this.store.select(
+    getIsScalarColumnCustomizationEnabled
+  );
   readonly xScaleType$ = this.store.select(getMetricsXAxisType).pipe(
     map((xAxisType) => {
       switch (xAxisType) {
@@ -495,7 +504,6 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
           singleSelectionHeaders,
           rangeSelectionHeaders,
         ]) => {
-          const headers: ColumnHeaders[] = [];
           if (timeSelection === null || timeSelection.end === null) {
             if (!smoothingEnabled) {
               // Return single selection headers without smoothed header.
@@ -727,4 +735,8 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
     };
     this.lineChartZoom$.next(minMaxStepInViewPort);
   }
+
+  reorderColumnHeaders(headers: ColumnHeaders[]) {
+    this.store.dispatch(dataTableColumnDrag({newOrder: headers}));
+  }
 }

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

@@ -38,7 +38,9 @@ import {
       [headers]="dataHeaders"
       [data]="getTimeSelectionTableData()"
       [sortingInfo]="sortingInfo"
+      [columnCustomizationEnabled]="columnCustomizationEnabled"
       (sortDataBy)="sortDataBy.emit($event)"
+      (orderColumns)="orderColumns.emit($event)"
     ></tb-data-table>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -49,8 +51,10 @@ export class ScalarCardDataTable {
   @Input() stepOrLinkedTimeSelection!: TimeSelection;
   @Input() dataHeaders!: ColumnHeaders[];
   @Input() sortingInfo!: SortingInfo;
+  @Input() columnCustomizationEnabled!: boolean;
 
   @Output() sortDataBy = new EventEmitter<SortingInfo>();
+  @Output() orderColumns = new EventEmitter<ColumnHeaders[]>();
 
   getMinValueInRange(
     points: ScalarCardPoint[],

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

@@ -336,6 +336,10 @@ describe('scalar card', () => {
     store.overrideSelector(selectors.getRunColorMap, {});
     store.overrideSelector(selectors.getDarkModeEnabled, false);
     store.overrideSelector(selectors.getForceSvgFeatureFlag, false);
+    store.overrideSelector(
+      selectors.getIsScalarColumnCustomizationEnabled,
+      false
+    );
     store.overrideSelector(selectors.getMetricsStepSelectorEnabled, false);
     store.overrideSelector(
       selectors.getIsLinkedTimeProspectiveFobEnabled,

tensorboard/webapp/widgets/data_table/data_table_component.ng.html

@@ -21,7 +21,15 @@
         </th>
         <ng-container *ngFor="let header of headers;">
           <th (click)="headerClicked(header)">
-            <div [ngSwitch]="header" class="cell">
+            <div
+              [draggable]="columnCustomizationEnabled"
+              (dragstart)="dragStart(header)"
+              (dragend)="dragEnd()"
+              (dragenter)="dragEnter(header)"
+              [ngSwitch]="header"
+              class="cell"
+              [ngClass]="getHeaderHighlightStyle(header)"
+            >
               <!-- order icon -->
               <mat-icon
                 *ngSwitchCase="ColumnHeaders.VALUE_CHANGE"
@@ -35,16 +43,15 @@
 
               <span>{{ getHeaderTextColumn(header) }}</span>
 
-              <div
-                class="sorting-icon-container"
-                [ngClass]="header === sortingInfo.header ? 'show' : 'show-on-hover'"
-              >
+              <div class="sorting-icon-container">
                 <mat-icon
                   *ngIf="sortingInfo.order === SortingOrder.ASCENDING || header !== sortingInfo.header"
+                  [ngClass]="header === sortingInfo.header ? 'show' : 'show-on-hover'"
                   svgIcon="arrow_upward_24px"
                 ></mat-icon>
                 <mat-icon
                   *ngIf="sortingInfo.order === SortingOrder.DESCENDING && header === sortingInfo.header"
+                  [ngClass]="header === sortingInfo.header ? 'show' : 'show-on-hover'"
                   svgIcon="arrow_downward_24px"
                 ></mat-icon>
               </div>

tensorboard/webapp/widgets/data_table/data_table_component.scss

@@ -15,6 +15,8 @@ limitations under the License.
 @use '@angular/material' as mat;
 @import 'tensorboard/webapp/theme/tb_theme';
 
+$_accent: map-get(mat.get-color-config($tb-theme), accent);
+
 .data-table {
   border-spacing: 4px;
   font-size: 13px;
@@ -75,6 +77,7 @@ limitations under the License.
   .sorting-icon-container {
     width: 12px;
     height: 12px;
+    border-radius: 5px;
   }
 
   .show {
@@ -88,4 +91,16 @@ limitations under the License.
   th:hover .show-on-hover {
     opacity: 0.3;
   }
+
+  .highlight {
+    background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
+  }
+
+  .highlight-border-right {
+    border-right: 2px solid mat.get-color-from-palette($_accent);
+  }
+
+  .highlight-border-left {
+    border-left: 2px solid mat.get-color-from-palette($_accent);
+  }
 }

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -18,6 +18,7 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnDestroy,
   Output,
 } from '@angular/core';
 import {
@@ -32,23 +33,43 @@ import {
   relativeTimeFormatter,
 } from '../line_chart_v2/lib/formatter';
 
+enum Side {
+  RIGHT,
+  LEFT,
+}
+
+const preventDefault = function (e: MouseEvent) {
+  e.preventDefault();
+};
+
 @Component({
   selector: 'tb-data-table',
   templateUrl: 'data_table_component.ng.html',
   styleUrls: ['data_table_component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DataTableComponent {
+export class DataTableComponent implements OnDestroy {
   // The order of this array of headers determines the order which they are
   // displayed in the table.
   @Input() headers!: ColumnHeaders[];
   @Input() data!: SelectedStepRunData[];
   @Input() sortingInfo!: SortingInfo;
+  @Input() columnCustomizationEnabled!: boolean;
 
   @Output() sortDataBy = new EventEmitter<SortingInfo>();
+  @Output() orderColumns = new EventEmitter<ColumnHeaders[]>();
 
   readonly ColumnHeaders = ColumnHeaders;
   readonly SortingOrder = SortingOrder;
+  readonly Side = Side;
+
+  draggingHeader: ColumnHeaders | undefined;
+  highlightedColumn: ColumnHeaders | undefined;
+  highlightSide: Side = Side.RIGHT;
+
+  ngOnDestroy() {
+    document.removeEventListener('dragover', preventDefault);
+  }
 
   getHeaderTextColumn(columnHeader: ColumnHeaders): string {
     switch (columnHeader) {
@@ -200,4 +221,63 @@ export class DataTableComponent {
     }
     this.sortDataBy.emit({header, order: SortingOrder.ASCENDING});
   }
+
+  dragStart(header: ColumnHeaders) {
+    this.draggingHeader = header;
+
+    // This stop the end drag animation
+    document.addEventListener('dragover', preventDefault);
+  }
+
+  dragEnd() {
+    if (!this.draggingHeader || !this.highlightedColumn) {
+      return;
+    }
+
+    this.orderColumns.emit(
+      this.moveHeader(
+        this.headers.indexOf(this.draggingHeader),
+        this.headers.indexOf(this.highlightedColumn)
+      )
+    );
+    this.draggingHeader = undefined;
+    this.highlightedColumn = undefined;
+    document.removeEventListener('dragover', preventDefault);
+  }
+
+  dragEnter(header: ColumnHeaders) {
+    if (!this.draggingHeader) {
+      return;
+    }
+    if (
+      this.headers.indexOf(header) < this.headers.indexOf(this.draggingHeader)
+    ) {
+      this.highlightSide = Side.LEFT;
+    } else {
+      this.highlightSide = Side.RIGHT;
+    }
+    this.highlightedColumn = header;
+  }
+
+  // Move the item at sourceIndex to destinationIndex
+  moveHeader(sourceIndex: number, destinationIndex: number) {
+    const newHeaders = [...this.headers];
+    // Delete from original location
+    newHeaders.splice(sourceIndex, 1);
+    // Insert at destinationIndex.
+    newHeaders.splice(destinationIndex, 0, this.headers[sourceIndex]);
+    return newHeaders;
+  }
+
+  getHeaderHighlightStyle(header: ColumnHeaders) {
+    if (header !== this.highlightedColumn) {
+      return {};
+    }
+
+    return {
+      highlight: true,
+      'highlight-border-right': this.highlightSide === Side.RIGHT,
+      'highlight-border-left': this.highlightSide === Side.LEFT,
+    };
+  }
 }