Adds feature flag to control whether or not to show scalar table context menus (#6742)

## Motivation for features / changes
As per discussion in #6737, adding a feature flag in front of scalar
table context menus before we implement them.

Author: hoonji

tensorboard/webapp/feature_flag/store/feature_flag_metadata.ts

@@ -110,6 +110,11 @@ export const FeatureFlagMetadataMap: FeatureFlagMetadataMapType<FeatureFlags> =
       queryParamOverride: 'enableScalarColumnCustomization',
       parseValue: parseBoolean,
     },
+    enableScalarColumnContextMenus: {
+      defaultValue: false,
+      queryParamOverride: 'enableScalarColumnContextMenus',
+      parseValue: parseBoolean,
+    },
     enableHparamsInTimeSeries: {
       defaultValue: true,
       queryParamOverride: 'enableHparamsInTimeSeries',

tensorboard/webapp/feature_flag/store/feature_flag_selectors.ts

@@ -147,6 +147,13 @@ export const getIsScalarColumnCustomizationEnabled = createSelector(
   }
 );
 
+export const getIsScalarColumnContextMenusEnabled = createSelector(
+  getFeatureFlags,
+  (flags: FeatureFlags): boolean => {
+    return flags.enableScalarColumnContextMenus;
+  }
+);
+
 export const getEnableHparamsInTimeSeries = createSelector(
   getFeatureFlags,
   (flags: FeatureFlags): boolean => {

tensorboard/webapp/feature_flag/types.ts

@@ -45,6 +45,8 @@ export interface FeatureFlags {
   // Adds affordance for users to select and reorder the columns in the Scalar
   // Card Data Table
   enableScalarColumnCustomization: boolean;
+  // Allows users to manipulate Scalar Card Table columns using context menus.
+  enableScalarColumnContextMenus: boolean;
   // Adds hparam columns to the runs table and the scalar card data table.
   enableHparamsInTimeSeries: boolean;
   // Adds a new section at the top of the time series metrics view

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html

@@ -198,6 +198,7 @@
       [columnHeaders]="columnHeaders"
       [sortingInfo]="sortingInfo"
       [columnCustomizationEnabled]="columnCustomizationEnabled"
+      [columnContextMenusEnabled]="columnContextMenusEnabled"
       [smoothingEnabled]="smoothingEnabled"
       [hparamsEnabled]="hparamsEnabled"
       (sortDataBy)="sortDataBy($event)"

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

@@ -95,6 +95,7 @@ export class ScalarCardComponent<Downloader> {
   @Input() useDarkMode!: boolean;
   @Input() forceSvg!: boolean;
   @Input() columnCustomizationEnabled!: boolean;
+  @Input() columnContextMenusEnabled!: boolean;
   @Input() linkedTimeSelection: TimeSelectionView | undefined;
   @Input() stepOrLinkedTimeSelection: TimeSelection | undefined;
   @Input() minMaxStep!: MinMaxStep;

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

@@ -40,6 +40,7 @@ import {ExperimentAlias} from '../../../experiments/types';
 import {
   getEnableHparamsInTimeSeries,
   getForceSvgFeatureFlag,
+  getIsScalarColumnContextMenusEnabled,
   getIsScalarColumnCustomizationEnabled,
 } from '../../../feature_flag/store/feature_flag_selectors';
 import {
@@ -169,6 +170,7 @@ function areSeriesEqual(
       [stepOrLinkedTimeSelection]="stepOrLinkedTimeSelection$ | async"
       [forceSvg]="forceSvg$ | async"
       [columnCustomizationEnabled]="columnCustomizationEnabled$ | async"
+      [columnContextMenusEnabled]="columnContextMenusEnabled$ | async"
       [minMaxStep]="minMaxSteps$ | async"
       [userViewBox]="userViewBox$ | async"
       [columnHeaders]="columnHeaders$ | async"
@@ -237,6 +239,9 @@ export class ScalarCardContainer implements CardRenderer, OnInit, OnDestroy {
   readonly columnCustomizationEnabled$ = this.store.select(
     getIsScalarColumnCustomizationEnabled
   );
+  readonly columnContextMenusEnabled$ = this.store.select(
+    getIsScalarColumnContextMenusEnabled
+  );
   readonly xScaleType$ = this.store.select(getMetricsXAxisType).pipe(
     map((xAxisType) => {
       switch (xAxisType) {

tensorboard/webapp/metrics/views/card_renderer/scalar_card_data_table.ng.html

@@ -28,7 +28,7 @@
         [header]="header"
         [sortingInfo]="sortingInfo"
         [hparamsEnabled]="hparamsEnabled"
-        disableContextMenu="true"
+        [disableContextMenu]="!columnContextMenusEnabled"
       ></tb-data-table-header-cell> </ng-container
   ></ng-container>
 

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

@@ -51,6 +51,7 @@ export class ScalarCardDataTable {
   @Input() columnHeaders!: ColumnHeader[];
   @Input() sortingInfo!: SortingInfo;
   @Input() columnCustomizationEnabled!: boolean;
+  @Input() columnContextMenusEnabled!: boolean;
   @Input() smoothingEnabled!: boolean;
   @Input() hparamsEnabled?: boolean;
 

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

@@ -128,6 +128,7 @@ import * as commonSelectors from '../main_view/common_selectors';
 import {ContentCellComponent} from '../../../widgets/data_table/content_cell_component';
 import {ContentRowComponent} from '../../../widgets/data_table/content_row_component';
 import {HeaderCellComponent} from '../../../widgets/data_table/header_cell_component';
+import {getIsScalarColumnContextMenusEnabled} from '../../../selectors';
 
 @Component({
   selector: 'line-chart',
@@ -385,6 +386,10 @@ describe('scalar card', () => {
       selectors.getIsScalarColumnCustomizationEnabled,
       false
     );
+    store.overrideSelector(
+      selectors.getIsScalarColumnContextMenusEnabled,
+      false
+    );
     store.overrideSelector(selectors.getMetricsStepSelectorEnabled, false);
     store.overrideSelector(
       selectors.getMetricsCardRangeSelectionEnabled('card1'),
@@ -4412,6 +4417,56 @@ describe('scalar card', () => {
         expect(dataTableComponent).toBeFalsy();
       }));
 
+      it('disables context menus if columnContextMenusEnabled is not set', fakeAsync(() => {
+        store.overrideSelector(getIsScalarColumnContextMenusEnabled, false);
+        store.overrideSelector(getCardStateMap, {
+          card1: {
+            dataMinMax: {
+              minStep: 0,
+              maxStep: 100,
+            },
+          },
+        });
+        store.overrideSelector(getMetricsCardTimeSelection, {
+          start: {step: 0},
+          end: {step: 100},
+        });
+        store.overrideSelector(selectors.getMetricsStepSelectorEnabled, true);
+        const fixture = createComponent('card1');
+        fixture.detectChanges();
+
+        const headerCellComponentInstance = fixture.debugElement.query(
+          By.directive(HeaderCellComponent)
+        ).componentInstance;
+
+        expect(headerCellComponentInstance.disableContextMenu).toBeTrue();
+      }));
+
+      it('enables context menus if columnContextMenusEnabled is set', fakeAsync(() => {
+        store.overrideSelector(getIsScalarColumnContextMenusEnabled, true);
+        store.overrideSelector(getCardStateMap, {
+          card1: {
+            dataMinMax: {
+              minStep: 0,
+              maxStep: 100,
+            },
+          },
+        });
+        store.overrideSelector(getMetricsCardTimeSelection, {
+          start: {step: 0},
+          end: {step: 100},
+        });
+        store.overrideSelector(selectors.getMetricsStepSelectorEnabled, true);
+        const fixture = createComponent('card1');
+        fixture.detectChanges();
+
+        const headerCellComponentInstance = fixture.debugElement.query(
+          By.directive(HeaderCellComponent)
+        ).componentInstance;
+
+        expect(headerCellComponentInstance.disableContextMenu).toBeFalse();
+      }));
+
       it('emits dataTableColumnOrderChanged with DataTableMode.SINGLE when orderColumns is called while in Single Selection', fakeAsync(() => {
         store.overrideSelector(getCardStateMap, {
           card1: {