From 2faa4a934a5415b6f352387877f148f6b1564a5b Mon Sep 17 00:00:00 2001
From: William Chargin <wchargin@gmail.com>
Date: Thu, 14 Jan 2021 00:43:56 -0800
Subject: [PATCH] metrics: fix wall time rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
The TensorBoard backend sends wall times in floating-point seconds since
epoch, and the scalars dashboard interprets them accordingly. But the
time series dashboard was interpreting them as milliseconds since epoch,
causing recent dates to be rendered around January 1970. This patch
fixes the frontend to multiply by 1000, as the scalars dashboard does.

This bug also affected relative times, which were shown compressed by a
factor of 1000 on the horizontal axis (but not in the tooltips). This
bug did not affect GPU line charts.

Fixes #4541.

Test Plan:

![Comparison screenshot of two chart views in the time series dashboard.
Before: the wall time spans a single second, labeled “06:16:46 PM
January 18, 1970”. After: the wall time starts on “04:31 PM July 17,
2019” and ends at “04:35 PM July 17, 2019”.][ss]

[ss]: https://user-images.githubusercontent.com/4317806/104562449-3a695300-55fd-11eb-81e9-15377175dfa4.png

wchargin-branch: metrics-date-milliseconds
wchargin-source: 4035248298114f38528aa16e54a1a459c39d4dc9
---
 .../line_chart/line_chart_component.ts        |  2 +-
 .../widgets/line_chart/line_chart_test.ts     | 28 +++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/tensorboard/webapp/widgets/line_chart/line_chart_component.ts b/tensorboard/webapp/widgets/line_chart/line_chart_component.ts
index 789edceb8a..72a9ec154d 100644
--- a/tensorboard/webapp/widgets/line_chart/line_chart_component.ts
+++ b/tensorboard/webapp/widgets/line_chart/line_chart_component.ts
@@ -205,7 +205,7 @@ export class LineChartComponent<
   private formatByXAxisType(seriesData: Point<ExtraPointData>[]) {
     return seriesData.map((datum) => {
       if (this.isWallTimeBased(this.xAxisType)) {
-        return {...datum, wall_time: new Date(datum.x)};
+        return {...datum, wall_time: new Date(datum.x * 1000)};
       }
       return {...datum, step: datum.x};
     });
diff --git a/tensorboard/webapp/widgets/line_chart/line_chart_test.ts b/tensorboard/webapp/widgets/line_chart/line_chart_test.ts
index 9f4dcc03dd..b6c7495686 100644
--- a/tensorboard/webapp/widgets/line_chart/line_chart_test.ts
+++ b/tensorboard/webapp/widgets/line_chart/line_chart_test.ts
@@ -115,7 +115,7 @@ describe('LineChart', () => {
       {
         seriesId: 'series1',
         metadata: {},
-        points: [{x: 10, y: 20, flavor: 'spicy'}],
+        points: [{x: 1610612159, y: 20, flavor: 'spicy'}],
         visible: true,
       },
     ];
@@ -174,8 +174,10 @@ describe('LineChart', () => {
         'series1',
         [
           {
-            ...fakeSeriesDataList[0].points[0],
-            wall_time: new Date(fakeSeriesDataList[0].points[0].x),
+            x: 1610612159,
+            wall_time: new Date(1610612159 * 1000),
+            y: 20,
+            flavor: 'spicy',
           },
         ],
       ],
@@ -207,8 +209,8 @@ describe('LineChart', () => {
       setSeriesDataCallArgs.push(args);
     });
 
-    const fakePoints1 = [{x: 10, y: 20, flavor: 'spicy'}];
-    const fakePoints2 = [{x: 30, y: 40, flavor: 'bitter'}];
+    const fakePoints1 = [{x: 1610613017, y: 20, flavor: 'spicy'}];
+    const fakePoints2 = [{x: 1610613025, y: 40, flavor: 'bitter'}];
     const fakeSeriesDataList1 = [
       {
         seriesId: 'series1',
@@ -235,7 +237,17 @@ describe('LineChart', () => {
     fixture.detectChanges();
 
     expect(setSeriesDataCallArgs).toEqual([
-      ['series1', [{...fakePoints1[0], wall_time: new Date(fakePoints1[0].x)}]],
+      [
+        'series1',
+        [
+          {
+            x: 1610613017,
+            wall_time: new Date(1610613017 * 1000),
+            y: 20,
+            flavor: 'spicy',
+          },
+        ],
+      ],
     ]);
 
     fixture.componentInstance.xAxisType = XAxisType.STEP;
@@ -243,7 +255,7 @@ describe('LineChart', () => {
 
     expect(setSeriesDataCallArgs).toEqual([
       setSeriesDataCallArgs[0],
-      ['series1', [{...fakePoints1[0], step: fakePoints1[0].x}]],
+      ['series1', [{x: 1610613017, step: 1610613017, y: 20, flavor: 'spicy'}]],
     ]);
 
     fixture.componentInstance.seriesDataList = fakeSeriesDataList2;
@@ -252,7 +264,7 @@ describe('LineChart', () => {
     expect(setSeriesDataCallArgs).toEqual([
       setSeriesDataCallArgs[0],
       setSeriesDataCallArgs[1],
-      ['series2', [{...fakePoints2[0], step: fakePoints2[0].x}]],
+      ['series2', [{x: 1610613025, step: 1610613025, y: 40, flavor: 'bitter'}]],
     ]);
   });