Data Table: Use smoothed values in table (#6042)

* Motivation for features / changes
When users have smoothing enabled the raw values on the scalar chart are
faded and hidden in the background while the smoothed lines are
highlighted and in the foreground. However, while in range selection
mode the data table only showed values based on the real values. This
was confusing for users. This changes the data table to use the smoothed
and highlighted values on the chart in the data table.

* Technical description of changes
We simply changed the calculations to use the "y" property on the
ScalarCardPoint object instead of the "value" property.

Author: JamesHollyer

tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ts

@@ -55,12 +55,13 @@ export class ScalarCardDataTable {
   getMinValueInRange(
     points: ScalarCardPoint[],
     startPointIndex: number,
-    endPointIndex: number
+    endPointIndex: number,
+    smoothed: boolean = false
   ): number {
-    let minValue = points[startPointIndex].value;
+    let minValue = this.maybeSmoothedValue(points[startPointIndex], smoothed);
     for (let i = startPointIndex; i <= endPointIndex; i++) {
-      if (minValue > points[i].value) {
-        minValue = points[i].value;
+      if (minValue > this.maybeSmoothedValue(points[i], smoothed)) {
+        minValue = this.maybeSmoothedValue(points[i], smoothed);
       }
     }
     return minValue;
@@ -69,17 +70,22 @@ export class ScalarCardDataTable {
   getMaxValueInRange(
     points: ScalarCardPoint[],
     startPointIndex: number,
-    endPointIndex: number
+    endPointIndex: number,
+    smoothed: boolean = false
   ): number {
-    let maxValue = points[startPointIndex].value;
+    let maxValue = this.maybeSmoothedValue(points[startPointIndex], smoothed);
     for (let i = startPointIndex; i <= endPointIndex; i++) {
-      if (maxValue < points[i].value) {
-        maxValue = points[i].value;
+      if (maxValue < this.maybeSmoothedValue(points[i], smoothed)) {
+        maxValue = this.maybeSmoothedValue(points[i], smoothed);
       }
     }
     return maxValue;
   }
 
+  maybeSmoothedValue(point: ScalarCardPoint, smoothed: boolean) {
+    return smoothed ? point.y : point.value;
+  }
+
   getTimeSelectionTableData(): SelectedStepRunData[] {
     if (this.stepOrLinkedTimeSelection === null) {
       return [];
@@ -135,7 +141,7 @@ export class ScalarCardDataTable {
                 continue;
               }
               selectedStepData.VALUE_CHANGE =
-                closestEndPoint.value - closestStartPoint.value;
+                closestEndPoint.y - closestStartPoint.y;
               continue;
             case ColumnHeaders.START_STEP:
               selectedStepData.START_STEP = closestStartPoint.step;
@@ -147,13 +153,13 @@ export class ScalarCardDataTable {
               selectedStepData.END_STEP = closestEndPoint.step;
               continue;
             case ColumnHeaders.START_VALUE:
-              selectedStepData.START_VALUE = closestStartPoint.value;
+              selectedStepData.START_VALUE = closestStartPoint.y;
               continue;
             case ColumnHeaders.END_VALUE:
               if (!closestEndPoint) {
                 continue;
               }
-              selectedStepData.END_VALUE = closestEndPoint.value;
+              selectedStepData.END_VALUE = closestEndPoint.y;
               continue;
             case ColumnHeaders.MIN_VALUE:
               if (!closestEndPointIndex) {
@@ -162,7 +168,8 @@ export class ScalarCardDataTable {
               selectedStepData.MIN_VALUE = this.getMinValueInRange(
                 datum.points,
                 closestStartPointIndex,
-                closestEndPointIndex
+                closestEndPointIndex,
+                true
               );
               continue;
             case ColumnHeaders.MAX_VALUE:
@@ -172,16 +179,16 @@ export class ScalarCardDataTable {
               selectedStepData.MAX_VALUE = this.getMaxValueInRange(
                 datum.points,
                 closestStartPointIndex,
-                closestEndPointIndex
+                closestEndPointIndex,
+                true
               );
               continue;
             case ColumnHeaders.PERCENTAGE_CHANGE:
               if (!closestEndPoint) {
                 continue;
               }
               selectedStepData.PERCENTAGE_CHANGE =
-                (closestEndPoint.value - closestStartPoint.value) /
-                closestStartPoint.value;
+                (closestEndPoint.y - closestStartPoint.y) / closestStartPoint.y;
               continue;
             default:
               continue;

tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts

@@ -2688,6 +2688,60 @@ describe('scalar card', () => {
       ]);
     }));
 
+    it('builds range selected step data object with smoothed values', fakeAsync(() => {
+      const runToSeries = {
+        run1: [
+          {wallTime: 1, value: 10, step: 1},
+          {wallTime: 2, value: 8, step: 2},
+          {wallTime: 3, value: 3, step: 3},
+          {wallTime: 4, value: 25, step: 4},
+        ],
+      };
+      provideMockCardRunToSeriesData(
+        selectSpy,
+        PluginType.SCALARS,
+        'card1',
+        null /* metadataOverride */,
+        runToSeries
+      );
+      store.overrideSelector(
+        selectors.getCurrentRouteRunSelection,
+        new Map([['run1', true]])
+      );
+
+      store.overrideSelector(selectors.getMetricsScalarSmoothing, 0.3);
+
+      store.overrideSelector(getMetricsLinkedTimeSelection, {
+        start: {step: 2},
+        end: {step: 4},
+      });
+
+      const fixture = createComponent('card1');
+      const scalarCardDataTable = fixture.debugElement.query(
+        By.directive(ScalarCardDataTable)
+      );
+      fixture.detectChanges();
+
+      const data =
+        scalarCardDataTable.componentInstance.getTimeSelectionTableData();
+
+      expect(data).toEqual([
+        {
+          id: '["smoothed","run1"]',
+          COLOR: '#fff',
+          RUN: 'run1',
+          VALUE_CHANGE: 10.515172900494004,
+          START_STEP: 2,
+          END_STEP: 4,
+          START_VALUE: 8.46153846153846,
+          END_VALUE: 18.976711362032464,
+          MIN_VALUE: 4.532374100719424,
+          MAX_VALUE: 18.976711362032464,
+          PERCENTAGE_CHANGE: 1.2427022518765645,
+        },
+      ]);
+    }));
+
     it('selects closest points to time selection', fakeAsync(() => {
       const runToSeries = {
         run1: [