diff --git a/tensorboard/webapp/metrics/effects/metrics_effects_test.ts b/tensorboard/webapp/metrics/effects/metrics_effects_test.ts index 4329567e74..31a41a28ef 100644 --- 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 index 142c7f9267..69d3651a6d 100644 --- 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 index 2bf6b34368..289d2821f2 100644 --- 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 = {}; 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 index 8f230222a7..4a411328fe 100644 --- 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 index fe81c2b457..83e66b1f52 100644 --- 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 index ca6ca63b9a..3465322885 100644 --- 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 { } 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 { 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 index 2aa05cf056..c57e23a072 100644 --- 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 index 66bd0d78a8..a6764676b4 100644 --- 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 index 74ff278c4a..2069389d00 100644 --- 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'},