From f6f6c44d0509f5f4e8695154565e48d24e0476a0 Mon Sep 17 00:00:00 2001
From: Riley Jones <78179109+rileyajones@users.noreply.github.com>
Date: Tue, 27 Jun 2023 20:39:09 -0700
Subject: [PATCH] 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)
---
 .../data_table/header_cell_component.ng.html   |  9 +++++++++
 .../data_table/header_cell_component.scss      | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.ng.html b/tensorboard/webapp/widgets/data_table/header_cell_component.ng.html
index 0d75fcffd94..bccc6d2e318 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.ng.html
+++ b/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>
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index 5fe2d55f306..c529716bc1b 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/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;
+    }
+  }
+}