HParams: project table content components (#6427)

## Motivation for features / changes
This is part of the effort to use the data table widget in the Runs
table which will allow for lots of code reuse as we add HParam
functionality to both tables. To allow more customization in each table
this PR pulls all the table content out of the data_table_component and
allows users to project it using the new content_row_component and
content_cell_component.

## Technical description of changes
Created new content_row_component and content_cell_component. The row is
extremely basic and basically just wraps the content inside a table-row.
The content_cell_component take all the logic for formatting each cell.
To customize the content users of this component can simply pass in no
datum or a ColumnHeaderType that does not have a specified way to format
in the getFormattedDataForColumn function and then put the custom
content inside the cell as a child it will be projected in. This is
currently shown in the way the ScalarCardDataTable handles the Color
column.

## Screenshots of UI changes (or N/A)
This should result in no changes to the Scalar Data Table. However, the
Runs Data Table is now empty as it has not implemented this new
DataTable structure. It is behind a flag though and will be implemented
in an upcoming PR.

<img width="398" alt="Screenshot 2023-06-09 at 2 24 42 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/28002f09-bc93-45a1-99d5-752e4f71b2ed">

## Detailed steps to verify changes work correctly (as executed by you)
Ran it and clicked around a lot to try breaking.

## Alternate designs / implementations considered (or N/A)
We considered some way to allow the data table to be highly configured
instead of projecting the content.
I also considered not creating the content_row_component class and
requiring parents to add their own div with class=table-row.

Author: JamesHollyer

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', () => {