Splits context menu into separate component

tensorboard/webapp/widgets/data_table/BUILD

@@ -48,6 +48,15 @@ tf_sass_binary(
     ],
 )
 
+tf_sass_binary(
+    name = "context_menu_component_styles",
+    src = "context_menu_component.scss",
+    deps = [
+        "//tensorboard/webapp:angular_material_sass_deps",
+        "//tensorboard/webapp/theme",
+    ],
+)
+
 tf_sass_binary(
     name = "filter_dialog_styles",
     src = "filter_dialog_component.scss",
@@ -76,6 +85,7 @@ tf_ng_module(
     ],
     deps = [
         ":column_selector",
+        ":context_menu",
         ":data_table_header",
         ":filter_dialog",
         ":types",
@@ -133,6 +143,27 @@ tf_ng_module(
     ],
 )
 
+tf_ng_module(
+    name = "context_menu",
+    srcs = [
+        "context_menu_component.ts",
+        "context_menu_module.ts",
+    ],
+    assets = [
+        "context_menu_component.ng.html",
+        ":context_menu_component_styles",
+    ],
+    deps = [
+        ":types",
+        "//tensorboard/webapp/angular:expect_angular_material_button",
+        "//tensorboard/webapp/angular:expect_angular_material_icon",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//rxjs",
+    ],
+)
+
 tf_ng_module(
     name = "filter_dialog",
     srcs = [
@@ -190,12 +221,14 @@ tf_ts_library(
     srcs = [
         "column_selector_test.ts",
         "content_cell_component_test.ts",
+        "context_menu_test.ts",
         "data_table_test.ts",
         "filter_dialog_test.ts",
         "header_cell_component_test.ts",
     ],
     deps = [
         ":column_selector",
+        ":context_menu",
         ":data_table",
         ":filter_dialog",
         ":types",

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

@@ -0,0 +1,71 @@
+<!--
+@license
+Copyright 2024 The TensorFlow Authors. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div class="context-menu">
+  <div *ngIf="isContextMenuEmpty()" class="no-actions-message">
+    No Actions Available
+  </div>
+  <button
+    *ngIf="contextMenuHeader?.removable"
+    class="context-menu-button"
+    mat-button
+    (click)="contextMenuRemoveColumn()"
+  >
+    <mat-icon svgIcon="close_24px"></mat-icon>Remove
+  </button>
+  <button
+    *ngIf="contextMenuHeader?.sortable &&
+    sortingInfo.order === SortingOrder.ASCENDING &&
+    sortingInfo.name === contextMenuHeader?.name"
+    class="context-menu-button sort-button"
+    mat-button
+    (click)="sortByHeader.emit(contextMenuHeader?.name)"
+  >
+    <mat-icon svgIcon="arrow_downward_24px"></mat-icon>Sort Descending
+  </button>
+  <button
+    *ngIf="contextMenuHeader?.sortable &&
+    (sortingInfo.order !== SortingOrder.ASCENDING ||
+    sortingInfo.name !== contextMenuHeader?.name)"
+    class="context-menu-button sort-button"
+    mat-button
+    (click)="sortByHeader.emit(contextMenuHeader?.name)"
+  >
+    <mat-icon svgIcon="arrow_upward_24px"></mat-icon>Sort Ascending
+  </button>
+  <button
+    *ngIf="contextMenuHeader?.filterable"
+    class="context-menu-button"
+    mat-button
+    (click)="openFilterMenu.emit($event)"
+  >
+    <mat-icon svgIcon="filter_alt_24px"></mat-icon> Filter
+  </button>
+  <button
+    mat-button
+    *ngIf="canContextMenuInsert()"
+    class="context-menu-button"
+    (click)="openColumnSelector.emit({event: $event, insertTo: Side.LEFT, isSubMenu: true})"
+  >
+    <mat-icon svgIcon="add_24px"></mat-icon>Insert Column Left
+  </button>
+  <button
+    mat-button
+    *ngIf="canContextMenuInsert()"
+    class="context-menu-button"
+    (click)="openColumnSelector.emit({event: $event, insertTo: Side.RIGHT, isSubMenu: true})"
+  >
+    <mat-icon svgIcon="add_24px"></mat-icon>Insert Column Right
+  </button>
+</div>

tensorboard/webapp/widgets/data_table/context_menu_component.scss

@@ -0,0 +1,52 @@
+/* Copyright 2024 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+@use '@angular/material' as mat;
+@import 'tensorboard/webapp/theme/tb_theme';
+
+.context-menu {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  border: 1px solid;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-color: mat.get-color-from-palette($tb-foreground, border);
+  background-color: mat.get-color-from-palette($tb-background, background);
+
+  @include tb-dark-theme {
+    border-color: mat.get-color-from-palette($tb-dark-foreground, border);
+    background-color: mat.get-color-from-palette(
+      $tb-dark-background,
+      'background'
+    );
+  }
+
+  .context-menu-button {
+    justify-content: left;
+    width: 100%;
+    text-wrap: nowrap;
+  }
+
+  .no-actions-message {
+    padding: 8px;
+    text-wrap: nowrap;
+  }
+
+  .sort-button {
+    ::ng-deep path {
+      fill: unset;
+    }
+  }
+}

tensorboard/webapp/widgets/data_table/context_menu_component.ts

@@ -0,0 +1,71 @@
+/* Copyright 2024 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import {ColumnHeader, Side, SortingInfo, SortingOrder} from './types';
+
+@Component({
+  selector: 'tb-data-table-context-menu',
+  templateUrl: 'context_menu_component.ng.html',
+  styleUrls: ['context_menu_component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContextMenuComponent {
+  @Input() contextMenuHeader: ColumnHeader | undefined = undefined;
+  @Input() selectableColumns?: ColumnHeader[];
+  @Input() sortingInfo!: SortingInfo;
+
+  @Output() removeColumn = new EventEmitter<ColumnHeader>();
+  @Output() sortByHeader = new EventEmitter<string>();
+  @Output() openFilterMenu = new EventEmitter<MouseEvent>();
+  @Output() openColumnSelector = new EventEmitter<{
+    event: MouseEvent;
+    insertTo: Side;
+    isSubmenu: boolean;
+  }>();
+
+  readonly Side = Side;
+  readonly SortingOrder = SortingOrder;
+
+  isContextMenuEmpty() {
+    return (
+      !this.contextMenuHeader?.removable &&
+      !this.contextMenuHeader?.sortable &&
+      !this.canContextMenuInsert() &&
+      !this.contextMenuHeader?.filterable
+    );
+  }
+
+  canContextMenuInsert() {
+    return (
+      this.selectableColumns?.length &&
+      this.contextMenuHeader?.movable &&
+      this.contextMenuHeader?.type === 'HPARAM'
+    );
+  }
+
+  contextMenuRemoveColumn() {
+    if (this.contextMenuHeader === undefined) {
+      return;
+    }
+    this.removeColumn.emit(this.contextMenuHeader);
+  }
+}

tensorboard/webapp/widgets/data_table/context_menu_module.ts

@@ -0,0 +1,28 @@
+/* Copyright 2024 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+
+import {ContextMenuComponent} from './context_menu_component';
+
+@NgModule({
+  declarations: [ContextMenuComponent],
+  imports: [CommonModule, MatIconModule, MatButtonModule],
+  exports: [ContextMenuComponent],
+})
+export class ContextMenuModule {}