diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils.ts index 75ddd0d587..8b74268570 100644 --- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils.ts +++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils.ts @@ -102,6 +102,17 @@ function getTicksForLinearScale( const minorTickVals = scale.ticks([low, high], maxMinorTickCount); const majorTickVals = scale.ticks([low, high], 2); + + // If the numbers are small enough that javascript starts using scientific + // notation the logic here does not work. Also, those numbers normally show up + // well using the standard ticks. + if ( + containsScientificNotation(minorTickVals) || + containsScientificNotation(majorTickVals) + ) { + return getStandardTicks(scale, formatter, maxMinorTickCount, lowAndHigh); + } + const minor: MinorTick[] = []; let numFractionalToKeep = getNumLeadingZerosInFractional(diff); @@ -224,9 +235,20 @@ function filterTicksByVisibility( }); } +function containsScientificNotation(values: number[]): boolean { + for (const value of values) { + if (String(value).includes('e')) { + return true; + } + } + return false; +} + export const AxisUtils = { getStandardTicks, getTicksForTemporalScale, getTicksForLinearScale, filterTicksByVisibility, }; + +export const TEST_ONLY = {containsScientificNotation}; diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils_test.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils_test.ts index 2f64f7fc30..b025410645 100644 --- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils_test.ts +++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils_test.ts @@ -14,7 +14,7 @@ limitations under the License. ==============================================================================*/ import {createScale, LinearScale, ScaleType, TemporalScale} from '../lib/scale'; -import {AxisUtils} from './line_chart_axis_utils'; +import {AxisUtils, TEST_ONLY} from './line_chart_axis_utils'; describe('line_chart_v2/sub_view/axis_utils test', () => { describe('#getStandardTicks', () => { @@ -363,6 +363,32 @@ describe('line_chart_v2/sub_view/axis_utils test', () => { {value: -0.00001, tickFormattedString: '…0'}, ]); }); + it('returns no major ticks for numbers which are transated to scientific notation', () => { + const {major, minor} = AxisUtils.getTicksForLinearScale( + scale, + scale.defaultFormatter, + 5, + [0.0000000004, 0.000000009] + ); + + expect(major).toEqual([]); + expect(minor).toEqual([ + {value: 2e-9, tickFormattedString: '2e-9'}, + {value: 4e-9, tickFormattedString: '4e-9'}, + {value: 6e-9, tickFormattedString: '6e-9'}, + {value: 8e-9, tickFormattedString: '8e-9'}, + ]); + }); + }); + }); + + describe('#containsScientificNotation', () => { + it('returns true if the array contains scientific notation', () => { + expect(TEST_ONLY.containsScientificNotation([1, 2e-9, 2])).toBe(true); + }); + + it('returns false if the array does not contain scientific notation', () => { + expect(TEST_ONLY.containsScientificNotation([1, 4, 2])).toBe(false); }); });