Time Series: tooltip sort by alphabetical order (tensorflow#5442)

In the list of tooltip sorting method, we replace "default" with "alphabetical". The alphabetical order is based on the display name.
yatbear · Mar 27, 2023 · f037d72 · f037d72
1 parent e2ea043
commit f037d72
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 17 deletions.
diff --git a/tensorboard/webapp/metrics/effects/metrics_effects_test.ts b/tensorboard/webapp/metrics/effects/metrics_effects_test.ts
@@ -88,7 +88,7 @@ describe('metrics effects', () => {
     store.overrideSelector(selectors.getMetricsScalarSmoothing, 0.3);
     store.overrideSelector(
       selectors.getMetricsTooltipSort,
-      TooltipSort.DEFAULT
+      TooltipSort.ALPHABETICAL
     );
   });
 

diff --git a/tensorboard/webapp/metrics/internal_types.ts b/tensorboard/webapp/metrics/internal_types.ts
@@ -28,6 +28,7 @@ export enum PluginType {
 // deserializer in data_source/metrics_data_source.ts.
 export enum TooltipSort {
   DEFAULT = 'default',
+  ALPHABETICAL = 'alphabetical',
   ASCENDING = 'ascending',
   DESCENDING = 'descending',
   NEAREST = 'nearest',

diff --git a/tensorboard/webapp/metrics/store/metrics_reducers.ts b/tensorboard/webapp/metrics/store/metrics_reducers.ts
@@ -374,15 +374,16 @@ const reducer = createReducer(
     const metricsSettings: Partial<MetricsSettings> = {};
     if (partialSettings.tooltipSortString) {
       switch (partialSettings.tooltipSortString) {
+        case TooltipSort.DEFAULT:
+        case TooltipSort.ALPHABETICAL:
+          metricsSettings.tooltipSort = TooltipSort.ALPHABETICAL;
+          break;
         case TooltipSort.ASCENDING:
           metricsSettings.tooltipSort = TooltipSort.ASCENDING;
           break;
         case TooltipSort.DESCENDING:
           metricsSettings.tooltipSort = TooltipSort.DESCENDING;
           break;
-        case TooltipSort.DEFAULT:
-          metricsSettings.tooltipSort = TooltipSort.DEFAULT;
-          break;
         case TooltipSort.NEAREST:
           metricsSettings.tooltipSort = TooltipSort.NEAREST;
           break;

diff --git a/tensorboard/webapp/metrics/store/metrics_reducers_test.ts b/tensorboard/webapp/metrics/store/metrics_reducers_test.ts
@@ -602,7 +602,7 @@ describe('metrics reducers', () => {
     it('changes tooltipSort on metricsChangeTooltipSort', () => {
       const prevState = buildMetricsState({
         settings: buildMetricsSettingsState({
-          tooltipSort: TooltipSort.DEFAULT,
+          tooltipSort: TooltipSort.ALPHABETICAL,
         }),
         settingOverrides: buildMetricsSettingsState({
           tooltipSort: TooltipSort.ASCENDING,
@@ -612,7 +612,7 @@ describe('metrics reducers', () => {
         prevState,
         actions.metricsChangeTooltipSort({sort: TooltipSort.NEAREST})
       );
-      expect(nextState.settings.tooltipSort).toBe(TooltipSort.DEFAULT);
+      expect(nextState.settings.tooltipSort).toBe(TooltipSort.ALPHABETICAL);
       expect(nextState.settingOverrides.tooltipSort).toBe(TooltipSort.NEAREST);
     });
 
@@ -1910,7 +1910,7 @@ describe('metrics reducers', () => {
   });
 
   describe('#globalSettingsLoaded', () => {
-    it('adds partial state from loading the settings to the (default) settings', () => {
+    it('adds partial state from loading the settings to the (alphabetical) settings', () => {
       const beforeState = buildMetricsState({
         settings: buildMetricsSettingsState({
           scalarSmoothing: 0.3,
@@ -1919,7 +1919,7 @@ describe('metrics reducers', () => {
         }),
         settingOverrides: {
           scalarSmoothing: 0.5,
-          tooltipSort: TooltipSort.DEFAULT,
+          tooltipSort: TooltipSort.ALPHABETICAL,
         },
       });
 
@@ -1937,7 +1937,9 @@ describe('metrics reducers', () => {
       expect(nextState.settings.ignoreOutliers).toBe(true);
       expect(nextState.settings.tooltipSort).toBe(TooltipSort.DESCENDING);
       expect(nextState.settingOverrides.scalarSmoothing).toBe(0.5);
-      expect(nextState.settingOverrides.tooltipSort).toBe(TooltipSort.DEFAULT);
+      expect(nextState.settingOverrides.tooltipSort).toBe(
+        TooltipSort.ALPHABETICAL
+      );
     });
 
     it(

diff --git a/tensorboard/webapp/metrics/store/metrics_types.ts b/tensorboard/webapp/metrics/store/metrics_types.ts
@@ -223,7 +223,7 @@ export interface State {
 
 export const METRICS_SETTINGS_DEFAULT: MetricsSettings = {
   cardMinWidth: null,
-  tooltipSort: TooltipSort.DEFAULT,
+  tooltipSort: TooltipSort.ALPHABETICAL,
   ignoreOutliers: true,
   xAxisType: XAxisType.STEP,
   scalarSmoothing: 0.6,

diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts
@@ -157,8 +157,6 @@ export class ScalarCardComponent<Downloader> {
     }
 
     switch (this.tooltipSort) {
-      case TooltipSort.DEFAULT:
-        return scalarTooltipData;
       case TooltipSort.ASCENDING:
         return scalarTooltipData.sort((a, b) => a.point.y - b.point.y);
       case TooltipSort.DESCENDING:
@@ -167,6 +165,17 @@ export class ScalarCardComponent<Downloader> {
         return scalarTooltipData.sort((a, b) => {
           return a.metadata.distSqToCursor - b.metadata.distSqToCursor;
         });
+      case TooltipSort.DEFAULT:
+      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;
+        });
     }
   }
 

diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts
@@ -291,7 +291,7 @@ describe('scalar card', () => {
     store.overrideSelector(selectors.getMetricsIgnoreOutliers, false);
     store.overrideSelector(
       selectors.getMetricsTooltipSort,
-      TooltipSort.DEFAULT
+      TooltipSort.ALPHABETICAL
     );
     store.overrideSelector(selectors.getRunColorMap, {});
     store.overrideSelector(selectors.getDarkModeEnabled, false);
@@ -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', () => {

diff --git a/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts b/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts
@@ -71,7 +71,7 @@ describe('metrics right_pane', () => {
     beforeEach(() => {
       store.overrideSelector(
         selectors.getMetricsTooltipSort,
-        TooltipSort.DEFAULT
+        TooltipSort.ALPHABETICAL
       );
       store.overrideSelector(selectors.getMetricsIgnoreOutliers, false);
       store.overrideSelector(selectors.getMetricsXAxisType, XAxisType.STEP);
@@ -119,7 +119,7 @@ describe('metrics right_pane', () => {
     it('renders', () => {
       store.overrideSelector(
         selectors.getMetricsTooltipSort,
-        TooltipSort.DEFAULT
+        TooltipSort.ALPHABETICAL
       );
       store.overrideSelector(selectors.getMetricsIgnoreOutliers, false);
       store.overrideSelector(selectors.getMetricsXAxisType, XAxisType.STEP);
@@ -139,7 +139,7 @@ describe('metrics right_pane', () => {
       // In the test setting, material component's DOM does not reflect the
       // value.
       expect(tooltipSortSelect.componentInstance.value).toBe(
-        TooltipSort.DEFAULT
+        TooltipSort.ALPHABETICAL
       );
 
       expect(

diff --git a/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts b/tensorboard/webapp/metrics/views/right_pane/settings_view_component.ts
@@ -80,7 +80,7 @@ export class SettingsViewComponent {
   @Input() isImageSupportEnabled!: boolean;
 
   readonly TooltipSortDropdownOptions: DropdownOption[] = [
-    {value: TooltipSort.DEFAULT, displayText: 'Default'},
+    {value: TooltipSort.ALPHABETICAL, displayText: 'Alphabetical'},
     {value: TooltipSort.ASCENDING, displayText: 'Ascending'},
     {value: TooltipSort.DESCENDING, displayText: 'Descending'},
     {value: TooltipSort.NEAREST, displayText: 'Nearest'},