HParams: project header cell components

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 {}