Increase precision for values in data table (#6255)

Currently in data table, large integers are shown in an abbreviated format e.g. 3.14e+6, which is not meaningful for numeric metrics such as `weight`.

Googlers, see b/274255386 and POC cl/518330666 for more information.

Author: yatbear

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -87,7 +87,9 @@ export class DataTableComponent implements OnDestroy {
         if (selectedStepRunData.VALUE === undefined) {
           return '';
         }
-        return numberFormatter.formatShort(selectedStepRunData.VALUE as number);
+        return intlNumberFormatter.formatShort(
+          selectedStepRunData.VALUE as number
+        );
       case ColumnHeaderType.STEP:
         if (selectedStepRunData.STEP === undefined) {
           return '';
@@ -112,14 +114,14 @@ export class DataTableComponent implements OnDestroy {
         if (selectedStepRunData.SMOOTHED === undefined) {
           return '';
         }
-        return numberFormatter.formatShort(
+        return intlNumberFormatter.formatShort(
           selectedStepRunData.SMOOTHED as number
         );
       case ColumnHeaderType.VALUE_CHANGE:
         if (selectedStepRunData.VALUE_CHANGE === undefined) {
           return '';
         }
-        return numberFormatter.formatShort(
+        return intlNumberFormatter.formatShort(
           Math.abs(selectedStepRunData.VALUE_CHANGE as number)
         );
       case ColumnHeaderType.START_STEP:

tensorboard/webapp/widgets/data_table/data_table_test.ts

@@ -167,18 +167,18 @@ describe('data table', () => {
         {
           id: 'someid',
           RUN: 'run name',
-          VALUE: 3,
+          VALUE: 31415926535,
           STEP: 1,
           RELATIVE_TIME: 123,
           VALUE_CHANGE: -20,
           START_STEP: 5,
           END_STEP: 30,
           START_VALUE: 13,
           END_VALUE: 23,
-          MIN_VALUE: 1,
-          MAX_VALUE: 500,
+          MIN_VALUE: 0.12345,
+          MAX_VALUE: 89793238462,
           PERCENTAGE_CHANGE: 0.3,
-          SMOOTHED: 2,
+          SMOOTHED: 3.14e10,
         },
       ],
     });
@@ -187,7 +187,7 @@ describe('data table', () => {
 
     // The first header should always be blank as it is the run color column.
     expect(dataElements[0].nativeElement.innerText).toBe('');
-    expect(dataElements[1].nativeElement.innerText).toBe('3');
+    expect(dataElements[1].nativeElement.innerText).toBe('31,415,926,535');
     expect(dataElements[2].nativeElement.innerText).toBe('run name');
     expect(dataElements[3].nativeElement.innerText).toBe('1');
     expect(dataElements[4].nativeElement.innerText).toBe('123 ms');
@@ -202,16 +202,16 @@ describe('data table', () => {
     expect(dataElements[7].nativeElement.innerText).toBe('30');
     expect(dataElements[8].nativeElement.innerText).toBe('13');
     expect(dataElements[9].nativeElement.innerText).toBe('23');
-    expect(dataElements[10].nativeElement.innerText).toBe('1');
-    expect(dataElements[11].nativeElement.innerText).toBe('500');
+    expect(dataElements[10].nativeElement.innerText).toBe('0.1235');
+    expect(dataElements[11].nativeElement.innerText).toBe('89,793,238,462');
     expect(dataElements[12].nativeElement.innerText).toBe('30%');
     expect(dataElements[12].queryAll(By.css('mat-icon')).length).toBe(1);
     expect(
       dataElements[12]
         .queryAll(By.css('mat-icon'))[0]
         .nativeElement.getAttribute('svgIcon')
     ).toBe('arrow_upward_24px');
-    expect(dataElements[13].nativeElement.innerText).toBe('2');
+    expect(dataElements[13].nativeElement.innerText).toBe('31,400,000,000');
   });
 
   it('does not displays headers or data when header is disabled', () => {

tensorboard/webapp/widgets/line_chart_v2/lib/formatter.ts

@@ -93,7 +93,7 @@ export const numberFormatter: Formatter = {
  */
 
 const IntlNumberFormatter = new Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 3,
+  maximumFractionDigits: 4,
 });
 
 function formatIntlNumber(x: number): string {

tensorboard/webapp/widgets/line_chart_v2/lib/formatter_test.ts

@@ -176,16 +176,16 @@ describe('line_chart_v2/lib/formatter test', () => {
       {name: 'formatLong', fn: intlNumberFormatter.formatLong},
     ]) {
       describe(`#${name}`, () => {
-        it('formats numbers and keeps three decimal places', () => {
+        it('formats numbers and keeps four decimal places', () => {
           expect(fn(1)).toBe('1');
           expect(fn(5)).toBe('5');
           expect(fn(-100.4)).toBe('-100.4');
           expect(fn(3.01)).toBe('3.01');
           expect(fn(9999)).toBe('9,999');
-          expect(fn(9999.9123)).toBe('9,999.912');
+          expect(fn(9999.91234)).toBe('9,999.9123');
           expect(fn(0.09)).toBe('0.09');
-          expect(fn(0.0005)).toBe('0.001');
-          expect(fn(0.00005)).toBe('0');
+          expect(fn(0.00005)).toBe('0.0001');
+          expect(fn(0.000005)).toBe('0');
           expect(fn(10001)).toBe('10,001');
           expect(fn(-10000)).toBe('-10,000');
           expect(fn(-1.004e6)).toBe('-1,004,000');