Step Selector: Add smoothed column in data table when enabled

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

@@ -92,6 +92,7 @@ export class ScalarCardComponent<Downloader> {
   @Input() linkedTimeSelection!: TimeSelectionView | null;
   @Input() stepSelectorTimeSelection!: TimeSelection;
   @Input() minMaxStep!: MinMaxStep;
+  @Input() dataHeaders!: ColumnHeaders[];
 
   @Output() onFullSizeToggle = new EventEmitter<void>();
   @Output() onPinClicked = new EventEmitter<boolean>();
@@ -116,12 +117,6 @@ export class ScalarCardComponent<Downloader> {
 
   yScaleType = ScaleType.LINEAR;
   isViewBoxOverridden: boolean = false;
-  dataHeaders: ColumnHeaders[] = [
-    ColumnHeaders.RUN,
-    ColumnHeaders.VALUE,
-    ColumnHeaders.STEP,
-    ColumnHeaders.RELATIVE_TIME,
-  ];
 
   toggleYScaleType() {
     this.yScaleType =
@@ -269,6 +264,9 @@ export class ScalarCardComponent<Downloader> {
               selectedStepData.RELATIVE_TIME =
                 closestStartPoint.relativeTimeInMs;
               continue;
+            case ColumnHeaders.SMOOTHED:
+              selectedStepData.SMOOTHED = closestStartPoint.y;
+              continue;
             default:
               continue;
           }

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

@@ -81,6 +81,7 @@ import {CardRenderer} from '../metrics_view_types';
 import {getTagDisplayName} from '../utils';
 import {DataDownloadDialogContainer} from './data_download_dialog_container';
 import {
+  ColumnHeaders,
   MinMaxStep,
   PartialSeries,
   PartitionedSeries,
@@ -145,6 +146,7 @@ function areSeriesEqual(
       [stepSelectorTimeSelection]="stepSelectorTimeSelection$ | async"
       [forceSvg]="forceSvg$ | async"
       [minMaxStep]="minMaxSteps$ | async"
+      [dataHeaders]="columnHeaders$ | async"
       (onFullSizeToggle)="onFullSizeToggle()"
       (onPinClicked)="pinStateChanged.emit($event)"
       observeIntersection
@@ -191,6 +193,7 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
   linkedTimeSelection$?: Observable<TimeSelectionView | null>;
   stepSelectorTimeSelection$?: Observable<TimeSelection | null>;
   minMaxSteps$?: Observable<MinMaxStep>;
+  columnHeaders$?: Observable<ColumnHeaders[]>;
 
   onVisibilityChange({visible}: {visible: boolean}) {
     this.isVisible = visible;
@@ -353,6 +356,21 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
       })
     );
 
+    this.columnHeaders$ = this.smoothingEnabled$.pipe(
+      map((smoothingEnabled) => {
+        const headers = [
+          ColumnHeaders.RUN,
+          ColumnHeaders.VALUE,
+          ColumnHeaders.STEP,
+          ColumnHeaders.RELATIVE_TIME,
+        ];
+        if (smoothingEnabled) {
+          headers.splice(1, 0, ColumnHeaders.SMOOTHED);
+        }
+        return headers;
+      })
+    );
+
     this.dataSeries$ = partitionedSeries$.pipe(
       // Smooth
       combineLatestWith(this.store.select(getMetricsScalarSmoothing)),

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

@@ -96,6 +96,7 @@ import {ScalarCardComponent} from './scalar_card_component';
 import {ScalarCardContainer} from './scalar_card_container';
 import {ScalarCardFobController} from './scalar_card_fob_controller';
 import {
+  ColumnHeaders,
   ScalarCardPoint,
   ScalarCardSeriesMetadata,
   SeriesType,
@@ -2651,6 +2652,62 @@ describe('scalar card', () => {
       expect(data[0].RUN).toEqual('100 test alias 1/Run1 name');
       expect(data[1].RUN).toEqual('200 test alias 2/Run2 name');
     }));
+
+    it('adds smoothed column header when smoothed is enabled', fakeAsync(() => {
+      store.overrideSelector(selectors.getMetricsScalarSmoothing, 0.8);
+
+      const runToSeries = {
+        run1: [
+          {wallTime: 1, value: 1, step: 10},
+          {wallTime: 2, value: 10, step: 20},
+          {wallTime: 3, value: 20, step: 35},
+        ],
+      };
+      provideMockCardRunToSeriesData(
+        selectSpy,
+        PluginType.SCALARS,
+        'card1',
+        null /* metadataOverride */,
+        runToSeries
+      );
+      store.overrideSelector(
+        selectors.getCurrentRouteRunSelection,
+        new Map([['run1', true]])
+      );
+      store.overrideSelector(getMetricsLinkedTimeSelection, {
+        start: {step: 20},
+        end: null,
+      });
+
+      const fixture = createComponent('card1');
+      fixture.detectChanges();
+      const scalarCardComponent = fixture.debugElement.query(
+        By.directive(ScalarCardComponent)
+      );
+
+      expect(scalarCardComponent.componentInstance.dataHeaders).toContain(
+        ColumnHeaders.SMOOTHED
+      );
+
+      expect(
+        scalarCardComponent.componentInstance.getTimeSelectionTableData()[0]
+          .SMOOTHED
+      ).toBe(6.000000000000001);
+    }));
+
+    it('does not add smoothed column header when smoothed is disabled', fakeAsync(() => {
+      store.overrideSelector(selectors.getMetricsScalarSmoothing, 0);
+
+      const fixture = createComponent('card1');
+      fixture.detectChanges();
+      const scalarCardComponent = fixture.debugElement.query(
+        By.directive(ScalarCardComponent)
+      );
+
+      expect(scalarCardComponent.componentInstance.dataHeaders).not.toContain(
+        ColumnHeaders.SMOOTHED
+      );
+    }));
   });
 
   describe('step selector feature integration', () => {

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

@@ -83,6 +83,7 @@ export enum ColumnHeaders {
   STEP = 'STEP',
   TIME = 'TIME',
   VALUE = 'VALUE',
+  SMOOTHED = 'SMOOTHED',
 }
 
 /**

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -48,6 +48,8 @@ export class DataTableComponent {
         return 'Time';
       case ColumnHeaders.RELATIVE_TIME:
         return 'Relative';
+      case ColumnHeaders.SMOOTHED:
+        return 'Smoothed';
       default:
         return '';
     }
@@ -88,6 +90,13 @@ export class DataTableComponent {
         return relativeTimeFormatter.formatReadable(
           selectedStepRunData.RELATIVE_TIME as number
         );
+      case ColumnHeaders.SMOOTHED:
+        if (selectedStepRunData.SMOOTHED === undefined) {
+          return '';
+        }
+        return numberFormatter.formatShort(
+          selectedStepRunData.SMOOTHED as number
+        );
       default:
         return '';
     }