Group colours by regex of the experiment name (UI). (#6847)

**NOTE**: This PR is a continuation of #6846.

## Motivation for features / changes

Users want to color runs by the regex string of the corresponding to
runs experiment names.

## Technical description of changes

- Added new GroupBy type, REGEX_BY_EXP.
- Added a dropdown in dialog window, so users could select between regex
for run name or experiment name.

## Screenshots of UI changes (or N/A)

N/A since internal change. 

## Detailed steps to verify changes work correctly (as executed by you)

- Run tensorboard.corp server.
- Click on color grouping icon and select `Regex`.
- Select `Experiment Name` in dropdown.

## Alternate designs / implementations considered (or N/A)
N/A

Author: AnuarTB

tensorboard/webapp/angular/BUILD

@@ -132,6 +132,15 @@ tf_ts_library(
     ],
 )
 
+# This is a dummy rule used as a @angular/material/core dependency.
+tf_ts_library(
+    name = "expect_angular_material_core",
+    srcs = [],
+    deps = [
+        "@npm//@angular/material",
+    ],
+)
+
 # This is a dummy rule used as a @angular/material/dialog dependency.
 tf_ts_library(
     name = "expect_angular_material_dialog",

tensorboard/webapp/feature_flag/store/feature_flag_metadata.ts

@@ -125,6 +125,11 @@ export const FeatureFlagMetadataMap: FeatureFlagMetadataMapType<FeatureFlags> =
       queryParamOverride: 'enableGlobalPins',
       parseValue: parseBoolean,
     },
+    enableColorByExperiment: {
+      defaultValue: false,
+      queryParamOverride: 'enableColorByExperiment',
+      parseValue: parseBoolean,
+    },
   };
 
 /**

tensorboard/webapp/feature_flag/store/feature_flag_selectors.ts

@@ -160,3 +160,10 @@ export const getEnableGlobalPins = createSelector(
     return flags.enableGlobalPins;
   }
 );
+
+export const getEnableColorByExperiment = createSelector(
+  getFeatureFlags,
+  (flags: FeatureFlags): boolean => {
+    return flags.enableColorByExperiment;
+  }
+);

tensorboard/webapp/feature_flag/types.ts

@@ -52,4 +52,6 @@ export interface FeatureFlags {
   enableSuggestedCards: boolean;
   // Persists pinned scalar cards across multiple experiments.
   enableGlobalPins: boolean;
+  // Adds a new mode of coloring, by matching the regexp of experiment name.
+  enableColorByExperiment: boolean;
 }

tensorboard/webapp/runs/views/runs_table/BUILD

@@ -86,12 +86,14 @@ tf_ng_module(
         "//tensorboard/webapp/angular:expect_angular_material_menu",
         "//tensorboard/webapp/angular:expect_angular_material_paginator",
         "//tensorboard/webapp/angular:expect_angular_material_progress_spinner",
+        "//tensorboard/webapp/angular:expect_angular_material_select",
         "//tensorboard/webapp/angular:expect_angular_material_sort",
         "//tensorboard/webapp/angular:expect_angular_material_table",
         "//tensorboard/webapp/app_routing",
         "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/core/actions",
         "//tensorboard/webapp/experiments:types",
+        "//tensorboard/webapp/experiments/store:selectors",
         "//tensorboard/webapp/feature_flag/store",
         "//tensorboard/webapp/hparams",
         "//tensorboard/webapp/hparams:types",
@@ -118,6 +120,7 @@ tf_ng_module(
         "//tensorboard/webapp/widgets/range_input:types",
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//@angular/forms",
         "@npm//@ngrx/store",
         "@npm//ngx-color-picker",
         "@npm//rxjs",

tensorboard/webapp/runs/views/runs_table/regex_edit_dialog.ng.html

@@ -19,12 +19,26 @@ <h1 mat-dialog-title>Color runs by regex</h1>
 
   <mat-dialog-content>
     <p>Enter a regex with capturing groups to match against run names:</p>
+    <mat-form-field>
+      <mat-label>Regex type</mat-label>
+      <mat-select
+        [value]="regexTypeFn(selectedGroupBy)"
+        (selectionChange)="regexTypeChange($event)"
+      >
+        <mat-option value="{{ REGEX_BY_RUN_STR }}">Run Name</mat-option>
+        <mat-option
+          *ngIf="enableColorByExperiment"
+          value="{{ REGEX_BY_EXP_STR }}"
+          >Experiment Name</mat-option
+        >
+      </mat-select>
+    </mat-form-field>
     <mat-form-field>
       <input
         matInput
         #regexStringInput
         value="{{ regexString }}"
-        (keydown.enter)="onEnter($event.target.value)"
+        (keydown.enter)="onEnter()"
         (input)="regexInputChange($event.target.value)"
         i18n-aria-label="Color Runs by Regex Query"
         aria-label="Color Runs by Regex Query"
@@ -95,7 +109,7 @@ <h4>Color group preview</h4>
       mat-raised-button
       color="primary"
       mat-dialog-close
-      (click)="onSaveClick(regexStringInput.value)"
+      (click)="onSaveClick()"
     >
       Save
     </button>

tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts

@@ -22,7 +22,9 @@ import {
   ViewChild,
 } from '@angular/core';
 import {MatDialogRef} from '@angular/material/dialog';
-import {Run} from '../../types';
+import {GroupByKey, Run} from '../../types';
+import {MatSelectChange} from '@angular/material/select';
+import {memoize} from '../../../util/memoize';
 
 export interface ColorGroup {
   groupId: string;
@@ -39,9 +41,16 @@ export interface ColorGroup {
 export class RegexEditDialogComponent {
   @Input() regexString!: string;
   @Input() colorRunPairList!: ColorGroup[];
+  @Input() selectedGroupBy!: GroupByKey;
+  @Input() enableColorByExperiment!: boolean;
 
-  @Output() onSave = new EventEmitter<string>();
+  @Output() onSave = new EventEmitter();
   @Output() regexInputOnChange = new EventEmitter<string>();
+  @Output() regexTypeOnChange = new EventEmitter<GroupByKey>();
+
+  // Constants
+  REGEX_BY_RUN_STR = 'regex_by_run';
+  REGEX_BY_EXP_STR = 'regex_by_exp';
 
   timeOutId = 0;
   @ViewChild('regexStringInput', {static: true})
@@ -52,20 +61,27 @@ export class RegexEditDialogComponent {
     private readonly hostElRef: ElementRef
   ) {}
 
+  regexTypeFn = memoize(this.internalRegexTypeFn.bind(this));
+  private internalRegexTypeFn(key: GroupByKey) {
+    return key === GroupByKey.REGEX_BY_EXP
+      ? this.REGEX_BY_EXP_STR
+      : this.REGEX_BY_RUN_STR;
+  }
+
   private resetFocus() {
     if (!this.hostElRef.nativeElement.contains(document.activeElement)) {
       const input = this.regexStringInput.nativeElement;
       input.focus();
     }
   }
 
-  onEnter(regexString: string) {
-    this.onSaveClick(regexString);
+  onEnter() {
+    this.onSaveClick();
     this.dialogRef.close();
   }
 
-  onSaveClick(regexString: string) {
-    this.onSave.emit(regexString);
+  onSaveClick() {
+    this.onSave.emit();
   }
 
   fillExample(regexExample: string): void {
@@ -81,4 +97,12 @@ export class RegexEditDialogComponent {
     clearTimeout(this.timeOutId);
     this.timeOutId = setTimeout(this.resetFocus.bind(this), 0);
   }
+
+  regexTypeChange(event: MatSelectChange) {
+    this.regexTypeOnChange.emit(
+      event.value === this.REGEX_BY_RUN_STR
+        ? GroupByKey.REGEX
+        : GroupByKey.REGEX_BY_EXP
+    );
+  }
 }

tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts

@@ -21,18 +21,24 @@ import {
   debounceTime,
   filter,
   map,
+  shareReplay,
   startWith,
   take,
 } from 'rxjs/operators';
 import {State} from '../../../app_state';
-import {getDarkModeEnabled} from '../../../selectors';
+import {
+  getDarkModeEnabled,
+  getEnableColorByExperiment,
+} from '../../../selectors';
 import {selectors as settingsSelectors} from '../../../settings/';
 import {runGroupByChanged} from '../../actions';
 import {
   getColorGroupRegexString,
   getRunIdsForExperiment,
+  getRunGroupBy,
   getRuns,
 } from '../../store/runs_selectors';
+import {getDashboardExperimentNames} from '../../../selectors';
 import {groupRuns} from '../../store/utils';
 import {GroupByKey, Run} from '../../types';
 import {ColorGroup} from './regex_edit_dialog_component';
@@ -44,8 +50,11 @@ const INPUT_CHANGE_DEBOUNCE_INTERVAL_MS = 500;
   template: `<regex-edit-dialog-component
     [regexString]="groupByRegexString$ | async"
     [colorRunPairList]="colorRunPairList$ | async"
-    (onSave)="onSave($event)"
+    [selectedGroupBy]="groupByRegexType$ | async"
+    [enableColorByExperiment]="enableColorByExperiment$ | async"
+    (onSave)="onSave()"
     (regexInputOnChange)="onRegexInputOnChange($event)"
+    (regexTypeOnChange)="onRegexTypeOnChange($event)"
   ></regex-edit-dialog-component>`,
   styles: [
     `
@@ -62,15 +71,39 @@ export class RegexEditDialogContainer {
   private readonly experimentIds: string[];
   private readonly runIdToEid$: Observable<Record<string, string>>;
   private readonly allRuns$: Observable<Run[]>;
+  private readonly expNameByExpId$: Observable<Record<string, string>> =
+    this.store.select(getDashboardExperimentNames);
+  readonly enableColorByExperiment$: Observable<boolean> = this.store.select(
+    getEnableColorByExperiment
+  );
+
+  // Tentative regex string and type are used because we don't want to change the state
+  // every time we type in or select the dropdown option.
   private readonly tentativeRegexString$: Subject<string> =
     new Subject<string>();
+  private readonly tentativeRegexType$: Subject<GroupByKey> =
+    new Subject<GroupByKey>();
 
   readonly groupByRegexString$: Observable<string> = defer(() => {
     return merge(
       this.store.select(getColorGroupRegexString).pipe(take(1)),
       this.tentativeRegexString$
     );
-  }).pipe(startWith(''));
+  }).pipe(startWith(''), shareReplay(1));
+
+  readonly groupByRegexType$: Observable<GroupByKey> = merge(
+    this.store.select(getRunGroupBy).pipe(
+      take(1),
+      map((group) => group.key)
+    ),
+    this.tentativeRegexType$
+  ).pipe(
+    startWith(GroupByKey.REGEX),
+    filter(
+      (key) => key === GroupByKey.REGEX || key === GroupByKey.REGEX_BY_EXP
+    ),
+    shareReplay(1)
+  );
 
   readonly colorRunPairList$: Observable<ColorGroup[]> = defer(() => {
     return this.groupByRegexString$.pipe(
@@ -84,18 +117,33 @@ export class RegexEditDialogContainer {
         }
       }),
       combineLatestWith(
+        this.groupByRegexType$,
         this.allRuns$,
         this.runIdToEid$,
+        this.expNameByExpId$,
         this.store.select(settingsSelectors.getColorPalette),
         this.store.select(getDarkModeEnabled)
       ),
       map(
-        ([regexString, allRuns, runIdToEid, colorPalette, darkModeEnabled]) => {
+        ([
+          regexString,
+          regexType,
+          allRuns,
+          runIdToEid,
+          expNameByExpId,
+          colorPalette,
+          darkModeEnabled,
+        ]) => {
           const groupBy = {
-            key: GroupByKey.REGEX,
+            key: regexType,
             regexString,
           };
-          const groups = groupRuns(groupBy, allRuns, runIdToEid);
+          const groups = groupRuns(
+            groupBy,
+            allRuns,
+            runIdToEid,
+            expNameByExpId
+          );
           const groupKeyToColorString = new Map<string, string>();
           const colorRunPairList: ColorGroup[] = [];
 
@@ -121,7 +169,10 @@ export class RegexEditDialogContainer {
   constructor(
     private readonly store: Store<State>,
     public dialogRef: MatDialogRef<RegexEditDialogContainer>,
-    @Inject(MAT_DIALOG_DATA) data: {experimentIds: string[]}
+    @Inject(MAT_DIALOG_DATA)
+    data: {
+      experimentIds: string[];
+    }
   ) {
     this.experimentIds = data.experimentIds;
 
@@ -158,13 +209,26 @@ export class RegexEditDialogContainer {
     this.tentativeRegexString$.next(regexString);
   }
 
-  onSave(regexString: string): void {
-    this.store.dispatch(
-      runGroupByChanged({
-        experimentIds: this.experimentIds,
-        groupBy: {key: GroupByKey.REGEX, regexString: regexString},
-      })
-    );
+  onRegexTypeOnChange(regexType: GroupByKey) {
+    this.tentativeRegexType$.next(regexType);
+  }
+
+  onSave(): void {
+    combineLatest([
+      this.groupByRegexString$,
+      this.groupByRegexType$,
+      this.expNameByExpId$,
+    ]).subscribe(([regexString, key, expNameByExpId]) => {
+      if (regexString) {
+        this.store.dispatch(
+          runGroupByChanged({
+            experimentIds: this.experimentIds,
+            groupBy: {key, regexString},
+            expNameByExpId,
+          })
+        );
+      }
+    });
   }
 }