HParam UI: Change SelectedStepRunData to use name (#6362)

## Motivation for features / changes
The eventual goal is to allow dynamic HParam columns in the data table.
To do this we introduced the name and displayName attributes to the
ColumnHeader in #6346. The name attribute is now going to be the unique
identifier for a column instead of the type enum.

## Technical description of changes
The SelectedStepRunData is used to hold the data for the table for a
specific run. Previously this was an object with an optional property
for all values of the ColumnHeaderType enum. This will no longer work as
these values need to be more dynamic to allow for all possible Hparam
values. This PR changes that object to add an array which holds all the
data points associated with the name of the column which they correspond
to.

Unfortunately this breaks the sorting as the array of
SelectedStepRunData which is passed to the DataTable is sorted based on
which header type the user chose to sort by. So that had to be updated
to use the name of the column which the user chose to sort by.

## Alternate designs / implementations considered (or N/A)
I thought about adding a new field to the SelectedStepRunData object
called HParam value and keeping all the optional attributes. This was a
big headache for ordering and sorting.

Author: JamesHollyer

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

@@ -122,7 +122,8 @@ export class ScalarCardComponent<Downloader> {
   @ViewChild(LineChartComponent)
   lineChart?: LineChartComponent;
   sortingInfo: SortingInfo = {
-    header: ColumnHeaderType.RUN,
+    header: ColumnHeaderType.RUN, //This is no longer used but the type needs it or it will break sync. TODO(jameshollyer): remove this once internal code all uses name.
+    name: 'run',
     order: SortingOrder.ASCENDING,
   };
 

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

@@ -131,60 +131,60 @@ export class ScalarCardDataTable {
         }
         const selectedStepData: SelectedStepRunData = {
           id: datum.id,
+          color: metadata.color,
         };
-        selectedStepData.COLOR = metadata.color;
         for (const header of this.columnHeaders) {
           switch (header.type) {
             case ColumnHeaderType.RUN:
               let alias = '';
               if (metadata.alias) {
                 alias = `${metadata.alias.aliasNumber} ${metadata.alias.aliasText}/`;
               }
-              selectedStepData.RUN = `${alias}${metadata.displayName}`;
+              selectedStepData[header.name] = `${alias}${metadata.displayName}`;
               continue;
             case ColumnHeaderType.STEP:
-              selectedStepData.STEP = closestStartPoint.step;
+              selectedStepData[header.name] = closestStartPoint.step;
               continue;
             case ColumnHeaderType.VALUE:
-              selectedStepData.VALUE = closestStartPoint.value;
+              selectedStepData[header.name] = closestStartPoint.value;
               continue;
             case ColumnHeaderType.RELATIVE_TIME:
-              selectedStepData.RELATIVE_TIME =
+              selectedStepData[header.name] =
                 closestStartPoint.relativeTimeInMs;
               continue;
             case ColumnHeaderType.SMOOTHED:
-              selectedStepData.SMOOTHED = closestStartPoint.y;
+              selectedStepData[header.name] = closestStartPoint.y;
               continue;
             case ColumnHeaderType.VALUE_CHANGE:
               if (!closestEndPoint) {
                 continue;
               }
-              selectedStepData.VALUE_CHANGE =
+              selectedStepData[header.name] =
                 closestEndPoint.y - closestStartPoint.y;
               continue;
             case ColumnHeaderType.START_STEP:
-              selectedStepData.START_STEP = closestStartPoint.step;
+              selectedStepData[header.name] = closestStartPoint.step;
               continue;
             case ColumnHeaderType.END_STEP:
               if (!closestEndPoint) {
                 continue;
               }
-              selectedStepData.END_STEP = closestEndPoint.step;
+              selectedStepData[header.name] = closestEndPoint.step;
               continue;
             case ColumnHeaderType.START_VALUE:
-              selectedStepData.START_VALUE = closestStartPoint.y;
+              selectedStepData[header.name] = closestStartPoint.y;
               continue;
             case ColumnHeaderType.END_VALUE:
               if (!closestEndPoint) {
                 continue;
               }
-              selectedStepData.END_VALUE = closestEndPoint.y;
+              selectedStepData[header.name] = closestEndPoint.y;
               continue;
             case ColumnHeaderType.MIN_VALUE:
               if (!closestEndPointIndex) {
                 continue;
               }
-              selectedStepData.MIN_VALUE = this.getMinPointInRange(
+              selectedStepData[header.name] = this.getMinPointInRange(
                 datum.points,
                 closestStartPointIndex,
                 closestEndPointIndex
@@ -194,7 +194,7 @@ export class ScalarCardDataTable {
               if (!closestEndPointIndex) {
                 continue;
               }
-              selectedStepData.MAX_VALUE = this.getMaxPointInRange(
+              selectedStepData[header.name] = this.getMaxPointInRange(
                 datum.points,
                 closestStartPointIndex,
                 closestEndPointIndex
@@ -204,14 +204,14 @@ export class ScalarCardDataTable {
               if (!closestEndPoint) {
                 continue;
               }
-              selectedStepData.PERCENTAGE_CHANGE =
+              selectedStepData[header.name] =
                 (closestEndPoint.y - closestStartPoint.y) / closestStartPoint.y;
               continue;
             case ColumnHeaderType.STEP_AT_MAX:
               if (!closestEndPointIndex) {
                 continue;
               }
-              selectedStepData.STEP_AT_MAX = this.getMaxPointInRange(
+              selectedStepData[header.name] = this.getMaxPointInRange(
                 datum.points,
                 closestStartPointIndex,
                 closestEndPointIndex
@@ -221,7 +221,7 @@ export class ScalarCardDataTable {
               if (!closestEndPointIndex) {
                 continue;
               }
-              selectedStepData.STEP_AT_MIN = this.getMinPointInRange(
+              selectedStepData[header.name] = this.getMinPointInRange(
                 datum.points,
                 closestStartPointIndex,
                 closestEndPointIndex
@@ -231,7 +231,7 @@ export class ScalarCardDataTable {
               if (!closestEndPointIndex) {
                 continue;
               }
-              selectedStepData.MEAN = this.getMean(
+              selectedStepData[header.name] = this.getMean(
                 datum.points,
                 closestStartPointIndex,
                 closestEndPointIndex
@@ -241,7 +241,7 @@ export class ScalarCardDataTable {
               if (!closestEndPoint) {
                 continue;
               }
-              selectedStepData.RAW_CHANGE =
+              selectedStepData[header.name] =
                 closestEndPoint.value - closestStartPoint.value;
               continue;
             default:
@@ -250,35 +250,39 @@ export class ScalarCardDataTable {
         }
         return selectedStepData;
       });
-    dataTableData.sort(
-      (point1: SelectedStepRunData, point2: SelectedStepRunData) => {
-        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;
-        }
-        if (p1 > p2) {
-          return this.sortingInfo.order === SortingOrder.ASCENDING ? 1 : -1;
-        }
-
-        return 0;
-      }
+    const sortingHeader = this.columnHeaders.find(
+      (header) => header.name === this.sortingInfo.name
     );
+    if (sortingHeader !== undefined) {
+      dataTableData.sort(
+        (point1: SelectedStepRunData, point2: SelectedStepRunData) => {
+          if (!sortingHeader) {
+            return 0;
+          }
+          const p1 = this.getSortableValue(point1, sortingHeader);
+          const p2 = this.getSortableValue(point2, sortingHeader);
+          if (p1 < p2) {
+            return this.sortingInfo.order === SortingOrder.ASCENDING ? -1 : 1;
+          }
+          if (p1 > p2) {
+            return this.sortingInfo.order === SortingOrder.ASCENDING ? 1 : -1;
+          }
+
+          return 0;
+        }
+      );
+    }
     return dataTableData;
   }
 
-  private getSortableValue(
-    point: SelectedStepRunData,
-    header: ColumnHeaderType
-  ) {
-    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 ColumnHeaderType.RUN:
-        return makeValueSortable(this.chartMetadataMap[point.id].displayName);
-      default:
-        return makeValueSortable(point[header]);
+  private getSortableValue(point: SelectedStepRunData, header: ColumnHeader) {
+    // 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.
+    if (header.type === ColumnHeaderType.RUN) {
+      return makeValueSortable(this.chartMetadataMap[point.id].displayName);
     }
+
+    return makeValueSortable(point[header.name]);
   }
 
   orderColumns(headers: ColumnHeader[]) {