HParams: Add button to header cells which triggers the context menu (#…

…6467)

## Motivation for features / changes
As part of adding hparams columns into the data table we have added a
context menu with a lot of additional options. Because we were worried
about users finding the context menu we decided to add it a button to
trigger it to the header as well.

## Screenshots of UI changes (or N/A)
We've got a lot of icons in the header now...

![header_context_menu](https://github.com/tensorflow/tensorboard/assets/78179109/3cd375e7-c195-4380-a790-c1cc43a6769e)

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

@@ -56,4 +56,13 @@
       svgIcon="arrow_downward_24px"
     ></mat-icon>
   </div>
+  <div *ngIf="controlsEnabled" class="context-menu-container">
+    <button
+      mat-icon-button
+      class="context-menu-trigger"
+      (click)="onContextMenuOpened($event)"
+    >
+      <mat-icon svgIcon="more_vert_24px"></mat-icon>
+    </button>
+  </div>
 </div>

tensorboard/webapp/widgets/data_table/header_cell_component.scss

@@ -22,6 +22,12 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
   display: table-cell;
   padding: 4px;
   vertical-align: bottom;
+
+  &:hover {
+    .context-menu-container {
+      opacity: 0.8;
+    }
+  }
 }
 .sorting-icon-container {
   width: 12px;
@@ -103,3 +109,15 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
 .highlight-border-left {
   border-left: 2px solid mat.get-color-from-palette($_accent);
 }
+
+.context-menu-container {
+  opacity: 0;
+
+  .context-menu-trigger {
+    width: 12px;
+
+    mat-icon {
+      height: unset;
+    }
+  }
+}