Add delete column button on data table

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

@@ -46,11 +46,20 @@ import {isDatumVisible} from './utils';
       [sortingInfo]="sortingInfo"
       [columnCustomizationEnabled]="columnCustomizationEnabled"
       [smoothingEnabled]="smoothingEnabled"
-      [hparamsEnabled]="hparamsEnabled"
       (sortDataBy)="sortDataBy.emit($event)"
       (orderColumns)="orderColumns($event)"
       (removeColumn)="removeColumn.emit($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"
+            [hparamsEnabled]="hparamsEnabled"
+          ></tb-data-table-header-cell> </ng-container
+      ></ng-container>
+    </tb-data-table>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -15,44 +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)"
-        >
-          <div *ngIf="hparamsEnabled" class="delete-icon-container">
-            <mat-icon
-              class="delete-icon"
-              svgIcon="close_24px"
-              (click)="clickRemoveColumn(header)"
-            >
-            </mat-icon>
-          </div>
-          <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

@@ -79,52 +79,8 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
     height: 12px;
     width: 12px;
 
-  .col:hover .delete-icon-container {
-    opacity: 1;
-  }
-
-  .delete-icon-container {
-    border-radius: 5px;
-    color: mat.get-color-from-palette(mat.$gray-palette, 500);
-    height: 12px;
-    margin-left: -12px;
-    opacity: 0;
-    position: absolute;
-    width: 12px;
-  }
-
-  .delete-icon:hover {
-    color: #fff;
-  }
-
-  .delete-icon-container:hover {
-    background-color: mat.get-color-from-palette(mat.$gray-palette, 300);
-    cursor: pointer;
-  }
-
-  .sorting-icon-container {
-    border-radius: 5px;
-    height: 12px;
-    width: 12px;
-  }
-
-  .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);
+    ::ng-deep path {
+      fill: unset;
+    }
   }
 }

tensorboard/webapp/widgets/data_table/data_table_component.ts

@@ -62,7 +62,6 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
   @Input() sortingInfo!: SortingInfo;
   @Input() columnCustomizationEnabled!: boolean;
   @Input() smoothingEnabled!: boolean;
-  @Input() hparamsEnabled?: boolean = false;
 
   @ContentChildren(HeaderCellComponent)
   headerCells!: QueryList<HeaderCellComponent>;
@@ -104,7 +103,10 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
         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))
+        headerCell.headerClicked.subscribe(this.headerClicked.bind(this)),
+        headerCell.deleteButtonClicked.subscribe(
+          this.deleteButtonClicked.bind(this)
+        )
       );
     });
   }
@@ -251,7 +253,7 @@ export class DataTableComponent implements OnDestroy, AfterContentInit {
     });
   }
 
-  clickRemoveColumn(header: ColumnHeader) {
+  deleteButtonClicked(header: ColumnHeader) {
     this.removeColumn.emit({
       headerType: header.type,
     });