Data Table: Sort Run Names Without Id and Alias (#5987)

* Motivation for features / changes
For Googlers [b/254089050](b/254089050)
Run names are currently sorted differently in the data table than in the
tool tip. I'm changing the sorting to be consistent with the tooltips
alphabetical sort.

* Screenshots of UI changes

![51842c87-6bf0-4492-8c93-34535f845943](https://user-images.githubusercontent.com/78179109/196759166-be218ef4-1aaf-4383-9d61-fc6395a3db9a.gif)

* Detailed steps to verify changes work correctly (as executed by you)
1) Start tensorboard
2) Visit localhost:6006?enableDataTable&enableRangeSelection
3) Click the "Enable Range Selection" checkbox in the settings panel
4) Sort the scalar card data table
5) Assert that the table is sorted by the run name only (not the alias
or alias id)

* Alternate designs / implementations considered
I considered creating a column alias map but this approach seemed more
flexible.

Author: rileyajones

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

@@ -104,7 +104,9 @@ export class ScalarCardDataTable {
           closestEndPointIndex = findClosestIndex(datum.points, endStep);
           closestEndPoint = datum.points[closestEndPointIndex];
         }
-        const selectedStepData: SelectedStepRunData = {};
+        const selectedStepData: SelectedStepRunData = {
+          id: datum.id,
+        };
         selectedStepData.COLOR = metadata.color;
         for (const header of this.dataHeaders) {
           switch (header) {
@@ -189,8 +191,8 @@ export class ScalarCardDataTable {
       });
     dataTableData.sort(
       (point1: SelectedStepRunData, point2: SelectedStepRunData) => {
-        const p1 = getSortableValue(point1[this.sortingInfo.header]);
-        const p2 = getSortableValue(point2[this.sortingInfo.header]);
+        const p1 = this.getSortableValue(point1, this.sortingInfo.header);
+        const p2 = this.getSortableValue(point2, this.sortingInfo.header);
         if (p1 < p2) {
           return this.sortingInfo.order === SortingOrder.ASCENDING ? -1 : 1;
         }
@@ -203,9 +205,20 @@ export class ScalarCardDataTable {
     );
     return dataTableData;
   }
+
+  private getSortableValue(point: SelectedStepRunData, header: ColumnHeaders) {
+    switch (header) {
+      // The value shown in the "RUN" column is a string concatenation of Alias Id + Alias + Run Name
+      // but we would actually prefer to sort by just the run name.
+      case ColumnHeaders.RUN:
+        return makeValueSortable(this.chartMetadataMap[point.id].displayName);
+      default:
+        return makeValueSortable(point[header]);
+    }
+  }
 }
 
-function getSortableValue(value: number | string | undefined | null) {
+function makeValueSortable(value: number | string | null | undefined) {
   if (
     Number.isNaN(value) ||
     value === 'NaN' ||

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

@@ -2541,13 +2541,15 @@ describe('scalar card', () => {
 
       expect(data).toEqual([
         {
+          id: 'run1',
           COLOR: '#fff',
           RELATIVE_TIME: 1000,
           RUN: 'run1',
           STEP: 2,
           VALUE: 10,
         },
         {
+          id: 'run2',
           COLOR: '#fff',
           RELATIVE_TIME: 1000,
           RUN: 'run2',
@@ -2601,6 +2603,7 @@ describe('scalar card', () => {
 
       expect(data).toEqual([
         {
+          id: 'run1',
           COLOR: '#fff',
           RUN: 'run1',
           VALUE_CHANGE: 19,
@@ -2613,6 +2616,7 @@ describe('scalar card', () => {
           PERCENTAGE_CHANGE: 19, // percentage change from 1 to 20 is 1900%
         },
         {
+          id: 'run2',
           COLOR: '#fff',
           RUN: 'run2',
           VALUE_CHANGE: 24,
@@ -3093,6 +3097,95 @@ describe('scalar card', () => {
       expect(data[5].RUN).toEqual('run6');
       expect(data[6].RUN).toEqual('run7');
     }));
+
+    it('Sorts RUNS column by displayName', fakeAsync(() => {
+      const runToSeries = {
+        run1: [{wallTime: 1, value: 1, step: 1}],
+        run2: [{wallTime: 1, value: 2, step: 1}],
+        run3: [{wallTime: 1, value: 3, step: 1}],
+        run4: [{wallTime: 1, value: NaN, step: 1}],
+        run5: [{wallTime: 1, value: 'NaN', step: 1}],
+        run6: [{wallTime: 1, value: null, step: 1}],
+        run7: [{wallTime: 1, value: undefined, step: 1}],
+      };
+      provideMockCardRunToSeriesData(
+        selectSpy,
+        PluginType.SCALARS,
+        'card1',
+        null /* metadataOverride */,
+        runToSeries as any
+      );
+      store.overrideSelector(
+        selectors.getCurrentRouteRunSelection,
+        new Map([
+          ['run1', true],
+          ['run2', true],
+          ['run3', true],
+          ['run4', true],
+          ['run5', true],
+          ['run6', true],
+          ['run7', true],
+        ])
+      );
+
+      store.overrideSelector(getMetricsLinkedTimeSelection, {
+        start: {step: 1},
+        end: null,
+      });
+
+      const fixture = createComponent('card1');
+      const scalarCardDataTable = fixture.debugElement.query(
+        By.directive(ScalarCardDataTable)
+      );
+      scalarCardDataTable.componentInstance.sortingInfo = {
+        header: ColumnHeaders.RUN,
+        order: SortingOrder.ASCENDING,
+      };
+      scalarCardDataTable.componentInstance.chartMetadataMap.run1.alias = {
+        aliasText: 'g',
+        aliasNumber: 5,
+      };
+      scalarCardDataTable.componentInstance.chartMetadataMap.run2.alias = {
+        aliasText: 'f',
+        aliasNumber: 6,
+      };
+      scalarCardDataTable.componentInstance.chartMetadataMap.run3.alias = {
+        aliasText: 'e',
+        aliasNumber: 7,
+      };
+      scalarCardDataTable.componentInstance.chartMetadataMap.run4.alias = {
+        aliasText: 'd',
+        aliasNumber: 4,
+      };
+      scalarCardDataTable.componentInstance.chartMetadataMap.run5.alias = {
+        aliasText: 'b',
+        aliasNumber: 2,
+      };
+      scalarCardDataTable.componentInstance.chartMetadataMap.run6.alias = {
+        aliasText: 'c',
+        aliasNumber: 3,
+      };
+      scalarCardDataTable.componentInstance.chartMetadataMap.run7.alias = {
+        aliasText: 'a',
+        aliasNumber: 1,
+      };
+      console.log(
+        'ChartMetadatMap: ',
+        scalarCardDataTable.componentInstance.chartMetadataMap
+      );
+      fixture.detectChanges();
+
+      const data =
+        scalarCardDataTable.componentInstance.getTimeSelectionTableData();
+
+      expect(data[0].RUN).toEqual('5 g/run1');
+      expect(data[1].RUN).toEqual('6 f/run2');
+      expect(data[2].RUN).toEqual('7 e/run3');
+      expect(data[3].RUN).toEqual('4 d/run4');
+      expect(data[4].RUN).toEqual('2 b/run5');
+      expect(data[5].RUN).toEqual('3 c/run6');
+      expect(data[6].RUN).toEqual('1 a/run7');
+    }));
   });
 
   describe('step selector feature integration', () => {

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

@@ -111,7 +111,7 @@ export interface SortingInfo {
  */
 export type SelectedStepRunData = {
   [key in ColumnHeaders]?: string | number;
-};
+} & {id: string};
 
 /**
  * An object which is intended to hold the min and max step within each scalar

tensorboard/webapp/widgets/data_table/data_table_test.ts

@@ -148,6 +148,7 @@ describe('data table', () => {
       ],
       data: [
         {
+          id: 'someid',
           RUN: 'run name',
           VALUE: 3,
           STEP: 1,
@@ -202,7 +203,7 @@ describe('data table', () => {
         ColumnHeaders.STEP,
         ColumnHeaders.RELATIVE_TIME,
       ],
-      data: [{}],
+      data: [{id: 'someid'}],
     });
     fixture.detectChanges();
     const dataElements = fixture.debugElement.queryAll(By.css('td'));