HParams: project header cell components (#6422)

## Motivation for features / changes
This refactoring allows more customization of the data table which will
be used by both the runs table and scalar card. This allows the
parents(like the runs table) to add functionality to the header
component such as the color pallet and select all checkbox.

## Technical description of changes
This change pulls out the header cells from the DataTable and allows the
parent component to project them back down. We add a HeaderCellComponent
which is used keep consistency and allow the DataTable to still keep the
logic which should be on all tables such as dragging and sorting. This
is done by using event emitters in the HeaderCellComponent which the
DataTable subscribes to.

## Screenshots of UI changes (or N/A)
The Scalar table has no changes.
<img width="358" alt="Screenshot 2023-06-07 at 9 38 21 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/7afd8a70-bfec-4707-a15c-f6abc28ec533">

This does break the runs data table which is still behind a flag. This
will be fixed in a follow up.
<img width="420" alt="Screenshot 2023-06-07 at 9 39 40 PM"
src="https://github.com/tensorflow/tensorboard/assets/8672809/22f856aa-1921-442d-9342-f423f4db5b6e">

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

## Alternate designs / implementations considered (or N/A)
We considered a more config based solution where we add lots of options
for functionality in the header objects being passed down to the table.

Author: JamesHollyer

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

@@ -48,7 +48,16 @@ import {isDatumVisible} from './utils';
       [smoothingEnabled]="smoothingEnabled"
       (sortDataBy)="sortDataBy.emit($event)"
       (orderColumns)="orderColumns($event)"
-    ></tb-data-table>
+    >
+      <ng-container header>
+        <ng-container *ngFor="let header of columnHeaders">
+          <tb-data-table-header-cell
+            *ngIf="header.enabled"
+            [header]="header"
+            [sortingInfo]="sortingInfo"
+          ></tb-data-table-header-cell> </ng-container
+      ></ng-container>
+    </tb-data-table>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

tensorboard/webapp/widgets/data_table/BUILD

@@ -12,6 +12,16 @@ tf_sass_binary(
     ],
 )
 
+tf_sass_binary(
+    name = "header_cell_styles",
+    src = "header_cell_component.scss",
+    strict_deps = False,
+    deps = [
+        "//tensorboard/webapp:angular_material_sass_deps",
+        "//tensorboard/webapp/theme",
+    ],
+)
+
 tf_sass_binary(
     name = "data_table_header_styles",
     src = "data_table_header_component.scss",
@@ -37,10 +47,13 @@ tf_ng_module(
     srcs = [
         "data_table_component.ts",
         "data_table_module.ts",
+        "header_cell_component.ts",
     ],
     assets = [
         "data_table_component.ng.html",
+        "header_cell_component.ng.html",
         ":data_table_styles",
+        ":header_cell_styles",
     ],
     deps = [
         ":data_table_header",
@@ -50,6 +63,7 @@ tf_ng_module(
         "//tensorboard/webapp/widgets/line_chart_v2/lib:formatter",
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//rxjs",
     ],
 )
 
@@ -107,6 +121,7 @@ tf_ts_library(
     srcs = [
         "column_selector_test.ts",
         "data_table_test.ts",
+        "header_cell_component_test.ts",
     ],
     deps = [
         ":column_selector",

tensorboard/webapp/widgets/data_table/data_table_component.ng.html

@@ -15,37 +15,7 @@
 <div class="data-table">
   <div class="header">
     <div class="col"></div>
-    <ng-container *ngFor="let header of headers;">
-      <div
-        class="col"
-        *ngIf="showColumn(header)"
-        (click)="headerClicked(header.name)"
-      >
-        <div
-          [draggable]="columnCustomizationEnabled"
-          (dragstart)="dragStart(header)"
-          (dragend)="dragEnd()"
-          (dragenter)="dragEnter(header)"
-          class="cell"
-          [ngClass]="getHeaderHighlightStyle(header.name)"
-        >
-          <tb-data-table-header [header]="header"></tb-data-table-header>
-
-          <div class="sorting-icon-container">
-            <mat-icon
-              *ngIf="sortingInfo.order === SortingOrder.ASCENDING || header.name !== sortingInfo.name"
-              [ngClass]="header.name === sortingInfo.name ? 'show' : 'show-on-hover'"
-              svgIcon="arrow_upward_24px"
-            ></mat-icon>
-            <mat-icon
-              *ngIf="sortingInfo.order === SortingOrder.DESCENDING && header.name === sortingInfo.name"
-              [ngClass]="header.name === sortingInfo.name ? 'show' : 'show-on-hover'"
-              svgIcon="arrow_downward_24px"
-            ></mat-icon>
-          </div>
-        </div>
-      </div>
-    </ng-container>
+    <ng-content select="[header]"></ng-content>
   </div>
   <ng-container *ngFor="let runData of data;">
     <div class="row">

tensorboard/webapp/widgets/data_table/data_table_component.scss

@@ -47,13 +47,6 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
     @include tb-dark-theme {
       background-color: map-get($tb-dark-background, background);
     }
-    .col:hover .show-on-hover {
-      opacity: 0.3;
-    }
-
-    .col {
-      vertical-align: bottom;
-    }
   }
 
   .col {
@@ -90,30 +83,4 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
       fill: unset;
     }
   }
-
-  .sorting-icon-container {
-    width: 12px;
-    height: 12px;
-    border-radius: 5px;
-  }
-
-  .show {
-    opacity: 1;
-  }
-
-  .show-on-hover {
-    opacity: 0;
-  }
-
-  .highlight {
-    background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
-  }
-
-  .highlight-border-right {
-    border-right: 2px solid mat.get-color-from-palette($_accent);
-  }
-
-  .highlight-border-left {
-    border-left: 2px solid mat.get-color-from-palette($_accent);
-  }
 }

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -14,12 +14,15 @@ limitations under the License.
 ==============================================================================*/
 
 import {
+  AfterContentInit,
   ChangeDetectionStrategy,
   Component,
+  ContentChildren,
   EventEmitter,
   Input,
   OnDestroy,
   Output,
+  QueryList,
 } from '@angular/core';
 import {
   ColumnHeader,
@@ -33,6 +36,8 @@ import {
   numberFormatter,
   relativeTimeFormatter,
 } from '../line_chart_v2/lib/formatter';
+import {HeaderCellComponent} from './header_cell_component';
+import {Subscription} from 'rxjs';
 
 enum Side {
   RIGHT,
@@ -49,7 +54,7 @@ const preventDefault = function (e: MouseEvent) {
   styleUrls: ['data_table_component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DataTableComponent implements OnDestroy {
+export class DataTableComponent implements OnDestroy, AfterContentInit {
   // The order of this array of headers determines the order which they are
   // displayed in the table.
   @Input() headers!: ColumnHeader[];
@@ -58,6 +63,10 @@ export class DataTableComponent implements OnDestroy {
   @Input() columnCustomizationEnabled!: boolean;
   @Input() smoothingEnabled!: boolean;
 
+  @ContentChildren(HeaderCellComponent)
+  headerCells!: QueryList<HeaderCellComponent>;
+  headerCellSubscriptions: Subscription[] = [];
+
   @Output() sortDataBy = new EventEmitter<SortingInfo>();
   @Output() orderColumns = new EventEmitter<ColumnHeader[]>();
 
@@ -71,6 +80,29 @@ export class DataTableComponent implements OnDestroy {
 
   ngOnDestroy() {
     document.removeEventListener('dragover', preventDefault);
+    this.headerCellSubscriptions.forEach((subscription) => {
+      subscription.unsubscribe();
+    });
+  }
+
+  ngAfterContentInit() {
+    this.syncHeaders();
+    this.headerCells.changes.subscribe(this.syncHeaders.bind(this));
+  }
+
+  syncHeaders() {
+    this.headerCellSubscriptions.forEach((subscription) => {
+      subscription.unsubscribe();
+    });
+    this.headerCellSubscriptions = [];
+    this.headerCells.forEach((headerCell) => {
+      this.headerCellSubscriptions.push(
+        headerCell.dragStart.subscribe(this.dragStart.bind(this)),
+        headerCell.dragEnter.subscribe(this.dragEnter.bind(this)),
+        headerCell.dragEnd.subscribe(this.dragEnd.bind(this)),
+        headerCell.headerClicked.subscribe(this.headerClicked.bind(this))
+      );
+    });
   }
 
   getFormattedDataForColumn(
@@ -154,6 +186,9 @@ export class DataTableComponent implements OnDestroy {
     this.draggingHeaderName = undefined;
     this.highlightedColumnName = undefined;
     document.removeEventListener('dragover', preventDefault);
+    this.headerCells.forEach((headerCell) => {
+      headerCell.highlightStyle$.next({});
+    });
   }
 
   dragEnter(header: ColumnHeader) {
@@ -169,6 +204,12 @@ export class DataTableComponent implements OnDestroy {
       this.highlightSide = Side.RIGHT;
     }
     this.highlightedColumnName = header.name;
+
+    this.headerCells.forEach((headerCell) => {
+      headerCell.highlightStyle$.next(
+        this.getHeaderHighlightStyle(headerCell.header.name)
+      );
+    });
   }
 
   // Move the item at sourceIndex to destinationIndex

tensorboard/webapp/widgets/data_table/data_table_module.ts

@@ -17,11 +17,12 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {DataTableComponent} from './data_table_component';
+import {HeaderCellComponent} from './header_cell_component';
 import {DataTableHeaderModule} from './data_table_header_module';
 
 @NgModule({
-  declarations: [DataTableComponent],
-  exports: [DataTableComponent],
+  declarations: [DataTableComponent, HeaderCellComponent],
+  exports: [DataTableComponent, HeaderCellComponent],
   imports: [CommonModule, MatIconModule, DataTableHeaderModule],
 })
 export class DataTableModule {}