sort by alphabetical order

Author: japie1235813

tensorboard/webapp/metrics/internal_types.ts

@@ -31,6 +31,7 @@ export enum TooltipSort {
   ASCENDING = 'ascending',
   DESCENDING = 'descending',
   NEAREST = 'nearest',
+  ALPHABETICAL = 'Alphabetical',
 }
 
 export enum XAxisType {

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

@@ -167,6 +167,16 @@ export class ScalarCardComponent<Downloader> {
         return scalarTooltipData.sort((a, b) => {
           return a.metadata.distSqToCursor - b.metadata.distSqToCursor;
         });
+      case TooltipSort.ALPHABETICAL:
+        return scalarTooltipData.sort((a, b) => {
+          if (a.metadata.displayName < b.metadata.displayName) {
+            return -1;
+          }
+          if (a.metadata.displayName > b.metadata.displayName) {
+            return 1;
+          }
+          return 0;
+        });
     }
   }
 

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

@@ -1614,6 +1614,77 @@ describe('scalar card', () => {
         ['', 'Row 3', '3', '10,000', anyString, anyString],
       ]);
     }));
+
+    it('sorts by displayname alphabetical order', fakeAsync(() => {
+      store.overrideSelector(
+        selectors.getMetricsTooltipSort,
+        TooltipSort.ALPHABETICAL
+      );
+      store.overrideSelector(selectors.getMetricsScalarSmoothing, 0);
+      const fixture = createComponent('card1');
+      setTooltipData(fixture, [
+        buildTooltipDatum(
+          {
+            id: 'row1',
+            type: SeriesType.ORIGINAL,
+            displayName: 'hello',
+            alias: null,
+            visible: true,
+            color: '#f00',
+            aux: false,
+          },
+          {
+            x: 0,
+            step: 0,
+            y: 1000,
+            value: 1000,
+            wallTime: new Date('2020-01-01').getTime(),
+          }
+        ),
+        buildTooltipDatum(
+          {
+            id: 'row2',
+            type: SeriesType.ORIGINAL,
+            displayName: 'world',
+            alias: null,
+            visible: true,
+            color: '#0f0',
+            aux: false,
+          },
+          {
+            x: 1000,
+            step: 1000,
+            y: -500,
+            value: -500,
+            wallTime: new Date('2020-12-31').getTime(),
+          }
+        ),
+        buildTooltipDatum(
+          {
+            id: 'row3',
+            type: SeriesType.ORIGINAL,
+            displayName: 'cat',
+            alias: null,
+            visible: true,
+            color: '#00f',
+            aux: false,
+          },
+          {
+            x: 10000,
+            step: 10000,
+            y: 3,
+            value: 3,
+            wallTime: new Date('2021-01-01').getTime(),
+          }
+        ),
+      ]);
+      fixture.detectChanges();
+      assertTooltipRows(fixture, [
+        ['', 'cat', '3', '10,000', anyString, anyString],
+        ['', 'hello', '1000', '0', anyString, anyString],
+        ['', 'world', '-500', '1,000', anyString, anyString],
+      ]);
+    }));
   });
 
   describe('non-monotonic increase in x-axis', () => {

tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts

@@ -84,6 +84,7 @@ export class SettingsViewComponent {
     {value: TooltipSort.ASCENDING, displayText: 'Ascending'},
     {value: TooltipSort.DESCENDING, displayText: 'Descending'},
     {value: TooltipSort.NEAREST, displayText: 'Nearest'},
+    {value: TooltipSort.ALPHABETICAL, displayText: 'Alphabetical'},
   ];
   @Input() tooltipSort!: TooltipSort;
   @Output() tooltipSortChanged = new EventEmitter<TooltipSort>();