HParams: project table content components

tensorboard/webapp/metrics/views/card_renderer/BUILD

@@ -278,6 +278,16 @@ tf_sass_binary(
     ],
 )
 
+tf_sass_binary(
+    name = "scalar_card_data_table_styles",
+    src = "scalar_card_data_table.scss",
+    strict_deps = False,
+    deps = [
+        "//tensorboard/webapp/metrics/views:metrics_common_styles",
+        "//tensorboard/webapp/theme",
+    ],
+)
+
 tf_ng_module(
     name = "scalar_card",
     srcs = [
@@ -288,9 +298,11 @@ tf_ng_module(
         "scalar_card_module.ts",
     ],
     assets = [
+        ":scalar_card_data_table_styles",
         ":scalar_card_styles",
         ":scalar_card_fob_controller_styles",
         "scalar_card_component.ng.html",
+        "scalar_card_data_table.ng.html",
     ],
     deps = [
         ":data_download_dialog",

tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ng.html

@@ -0,0 +1,56 @@
+<!--
+@license
+Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<tb-data-table
+  [headers]="columnHeaders"
+  [sortingInfo]="sortingInfo"
+  [columnCustomizationEnabled]="columnCustomizationEnabled"
+  (sortDataBy)="sortDataBy.emit($event)"
+  (orderColumns)="orderColumns($event)"
+  (removeColumn)="removeColumn.emit($event)"
+>
+  <ng-container header>
+    <ng-container *ngFor="let header of columnHeaders">
+      <tb-data-table-header-cell
+        *ngIf="header.enabled && (header.type !== ColumnHeaderType.SMOOTHED || smoothingEnabled)"
+        [header]="header"
+        [sortingInfo]="sortingInfo"
+        [hparamsEnabled]="hparamsEnabled"
+      ></tb-data-table-header-cell> </ng-container
+  ></ng-container>
+
+  <ng-container content>
+    <ng-container *ngFor="let dataRow of getTimeSelectionTableData()">
+      <tb-data-table-content-row>
+        <ng-container *ngFor="let header of getHeaders()">
+          <tb-data-table-content-cell
+            *ngIf="header.enabled && (header.type !== ColumnHeaderType.SMOOTHED || smoothingEnabled)"
+            [header]="header"
+            [datum]="dataRow[header.name]"
+          >
+            <div
+              *ngIf="header.type === ColumnHeaderType.COLOR"
+              class="row-circle"
+            >
+              <span [style.backgroundColor]="dataRow['color']"></span>
+            </div>
+          </tb-data-table-content-cell>
+        </ng-container>
+      </tb-data-table-content-row>
+    </ng-container>
+  </ng-container>
+</tb-data-table>

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

@@ -0,0 +1,28 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+$_circle-size: 12px;
+
+.row-circle {
+  height: $_circle-size;
+  width: $_circle-size;
+}
+.row-circle > span {
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  display: inline-block;
+  height: $_circle-size - 2px; // size minus border
+  width: $_circle-size - 2px; // size minus border
+  vertical-align: middle;
+}

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

@@ -39,28 +39,8 @@ import {isDatumVisible} from './utils';
 
 @Component({
   selector: 'scalar-card-data-table',
-  template: `
-    <tb-data-table
-      [headers]="columnHeaders"
-      [data]="getTimeSelectionTableData()"
-      [sortingInfo]="sortingInfo"
-      [columnCustomizationEnabled]="columnCustomizationEnabled"
-      [smoothingEnabled]="smoothingEnabled"
-      (sortDataBy)="sortDataBy.emit($event)"
-      (orderColumns)="orderColumns($event)"
-      (removeColumn)="removeColumn.emit($event)"
-    >
-      <ng-container header>
-        <ng-container *ngFor="let header of columnHeaders">
-          <tb-data-table-header-cell
-            *ngIf="header.enabled"
-            [header]="header"
-            [sortingInfo]="sortingInfo"
-            [hparamsEnabled]="hparamsEnabled"
-          ></tb-data-table-header-cell> </ng-container
-      ></ng-container>
-    </tb-data-table>
-  `,
+  templateUrl: 'scalar_card_data_table.ng.html',
+  styleUrls: ['scalar_card_data_table.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ScalarCardDataTable {
@@ -79,6 +59,18 @@ export class ScalarCardDataTable {
     headerType: ColumnHeaderType;
   }>();
 
+  ColumnHeaderType = ColumnHeaderType;
+
+  getHeaders(): ColumnHeader[] {
+    return [
+      {
+        name: 'color',
+        displayName: '',
+        type: ColumnHeaderType.COLOR,
+        enabled: true,
+      },
+    ].concat(this.columnHeaders);
+  }
   getMinPointInRange(
     points: ScalarCardPoint[],
     startPointIndex: number,

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

@@ -124,6 +124,9 @@ import {Extent} from '../../../widgets/line_chart_v2/lib/public_types';
 import {provideMockTbStore} from '../../../testing/utils';
 import * as commonSelectors from '../main_view/common_selectors';
 import {CardFeatureOverride} from '../../store/metrics_types';
+import {ContentCellComponent} from '../../../widgets/data_table/content_cell_component';
+import {ContentRowComponent} from '../../../widgets/data_table/content_row_component';
+import {HeaderCellComponent} from '../../../widgets/data_table/header_cell_component';
 
 @Component({
   selector: 'line-chart',
@@ -2517,10 +2520,41 @@ describe('scalar card', () => {
 
     describe('scalar card data table', () => {
       beforeEach(() => {
+        store.overrideSelector(getMetricsLinkedTimeSelection, {
+          start: {step: 20},
+          end: null,
+        });
+        store.overrideSelector(getSingleSelectionHeaders, [
+          {
+            type: ColumnHeaderType.RUN,
+            name: 'run',
+            displayName: 'Run',
+            enabled: true,
+          },
+          {
+            type: ColumnHeaderType.VALUE,
+            name: 'value',
+            displayName: 'Value',
+            enabled: false,
+          },
+          {
+            type: ColumnHeaderType.STEP,
+            name: 'step',
+            displayName: 'Step',
+            enabled: true,
+          },
+        ]);
         const runToSeries = {
-          run1: [buildScalarStepData({step: 10})],
-          run2: [buildScalarStepData({step: 20})],
-          run3: [buildScalarStepData({step: 30})],
+          run1: [
+            {wallTime: 1, value: 1, step: 1},
+            {wallTime: 2, value: 10, step: 2},
+            {wallTime: 3, value: 20, step: 3},
+          ],
+          run2: [
+            {wallTime: 1, value: 1, step: 1},
+            {wallTime: 2, value: 10, step: 2},
+            {wallTime: 3, value: 20, step: 3},
+          ],
         };
         provideMockCardRunToSeriesData(
           selectSpy,
@@ -2529,6 +2563,17 @@ describe('scalar card', () => {
           null /* metadataOverride */,
           runToSeries
         );
+        store.overrideSelector(
+          selectors.getCurrentRouteRunSelection,
+          new Map([
+            ['run1', true],
+            ['run2', true],
+          ])
+        );
+        store.overrideSelector(
+          commonSelectors.getFilteredRenderableRunsIdsFromRoute,
+          new Set(['run1', 'run2'])
+        );
         store.overrideSelector(getCardStateMap, {
           card1: {
             dataMinMax: {
@@ -2603,6 +2648,128 @@ describe('scalar card', () => {
 
         expect(dataTableComponent).toBeFalsy();
       }));
+
+      it('projects tb-data-table-header-cell for enabled headers', fakeAsync(() => {
+        store.overrideSelector(getMetricsLinkedTimeSelection, {
+          start: {step: 20},
+          end: null,
+        });
+        store.overrideSelector(getSingleSelectionHeaders, [
+          {
+            type: ColumnHeaderType.RUN,
+            name: 'run',
+            displayName: 'Run',
+            enabled: true,
+          },
+          {
+            type: ColumnHeaderType.VALUE,
+            name: 'value',
+            displayName: 'Value',
+            enabled: false,
+          },
+          {
+            type: ColumnHeaderType.STEP,
+            name: 'step',
+            displayName: 'Step',
+            enabled: true,
+          },
+        ]);
+        const fixture = createComponent('card1');
+        fixture.detectChanges();
+
+        const dataTableComponentInstance = fixture.debugElement.query(
+          By.directive(DataTableComponent)
+        ).componentInstance;
+
+        expect(dataTableComponentInstance.headerCells.length).toEqual(2);
+
+        expect(
+          dataTableComponentInstance.headerCells.get(0).header.name
+        ).toEqual('run');
+        expect(
+          dataTableComponentInstance.headerCells.get(1).header.name
+        ).toEqual('step');
+      }));
+
+      it('projects tb-data-table-content-cell with data for enabled headers', fakeAsync(() => {
+        const fixture = createComponent('card1');
+        const scalarCardDataTable = fixture.debugElement.query(
+          By.directive(ScalarCardDataTable)
+        );
+        fixture.detectChanges();
+
+        const data =
+          scalarCardDataTable.componentInstance.getTimeSelectionTableData();
+
+        const contentRowComponents = fixture.debugElement.queryAll(
+          By.directive(ContentRowComponent)
+        );
+
+        expect(contentRowComponents.length).toEqual(2);
+
+        const firstRowContentCells = contentRowComponents[0].queryAll(
+          By.directive(ContentCellComponent)
+        );
+
+        expect(firstRowContentCells.length).toEqual(3);
+
+        expect(
+          firstRowContentCells.map((cell) => cell.componentInstance.datum)
+        ).toEqual([data[0].color, data[0].run, data[0].step]);
+
+        const secondRowContentCells = contentRowComponents[1].queryAll(
+          By.directive(ContentCellComponent)
+        );
+
+        expect(secondRowContentCells.length).toEqual(3);
+
+        expect(
+          secondRowContentCells.map((cell) => cell.componentInstance.datum)
+        ).toEqual([data[1].color, data[1].run, data[1].step]);
+      }));
+
+      it('does not project smoothed column when smoothing is disabled', fakeAsync(() => {
+        store.overrideSelector(getSingleSelectionHeaders, [
+          {
+            type: ColumnHeaderType.RUN,
+            name: 'run',
+            displayName: 'Run',
+            enabled: true,
+          },
+          {
+            type: ColumnHeaderType.SMOOTHED,
+            name: 'smoothed',
+            displayName: 'Smoothed',
+            enabled: true,
+          },
+        ]);
+
+        store.overrideSelector(selectors.getMetricsScalarSmoothing, 0);
+
+        const fixture = createComponent('card1');
+        const scalarCardDataTable = fixture.debugElement.query(
+          By.directive(ScalarCardDataTable)
+        );
+        fixture.detectChanges();
+
+        let dataTableComponentInstance = fixture.debugElement.query(
+          By.directive(DataTableComponent)
+        ).componentInstance;
+
+        let contentCellTypes = scalarCardDataTable
+          .queryAll(By.directive(ContentCellComponent))
+          .map((cell) => cell.componentInstance.header.type);
+
+        expect(
+          dataTableComponentInstance.headerCells.find(
+            (cell: HeaderCellComponent) =>
+              cell.header.type === ColumnHeaderType.SMOOTHED
+          )
+        ).toBeFalsy();
+        expect(
+          contentCellTypes.find((type) => type === ColumnHeaderType.SMOOTHED)
+        ).toBeFalsy();
+      }));
     });
 
     describe('line chart integration', () => {