Update the views for color by regex feature.

Author: AnuarTB

tensorboard/webapp/runs/views/runs_table/BUILD

@@ -79,19 +79,22 @@ tf_ng_module(
         "//tensorboard/webapp/angular:expect_angular_material_button",
         "//tensorboard/webapp/angular:expect_angular_material_checkbox",
         "//tensorboard/webapp/angular:expect_angular_material_chips",
+        "//tensorboard/webapp/angular:expect_angular_material_core",
         "//tensorboard/webapp/angular:expect_angular_material_dialog",
         "//tensorboard/webapp/angular:expect_angular_material_form_field",
         "//tensorboard/webapp/angular:expect_angular_material_icon",
         "//tensorboard/webapp/angular:expect_angular_material_input",
         "//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 +121,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",
@@ -146,6 +150,7 @@ tf_ts_library(
         "//tensorboard/webapp/angular:expect_angular_material_checkbox",
         "//tensorboard/webapp/angular:expect_angular_material_chips",
         "//tensorboard/webapp/angular:expect_angular_material_chips_testing",
+        "//tensorboard/webapp/angular:expect_angular_material_core",
         "//tensorboard/webapp/angular:expect_angular_material_dialog",
         "//tensorboard/webapp/angular:expect_angular_material_input",
         "//tensorboard/webapp/angular:expect_angular_material_menu",

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

@@ -19,12 +19,22 @@ <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)]="regexMatchType"
+        (selectionChange)="regexTypeChange($event)"
+      >
+        <mat-option value="regex_by_run">Run Name</mat-option>
+        <mat-option value="regex_by_exp">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 +105,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 {ChangeDetectorRef} from '@angular/core';
 
 export interface ColorGroup {
   groupId: string;
@@ -39,33 +41,44 @@ export interface ColorGroup {
 export class RegexEditDialogComponent {
   @Input() regexString!: string;
   @Input() colorRunPairList!: ColorGroup[];
+  @Input() selectedGroupBy!: GroupByKey;
 
-  @Output() onSave = new EventEmitter<string>();
+  @Output() onSave = new EventEmitter();
   @Output() regexInputOnChange = new EventEmitter<string>();
+  @Output() regexTypeOnChange = new EventEmitter<GroupByKey>();
 
   timeOutId = 0;
   @ViewChild('regexStringInput', {static: true})
   regexStringInput!: ElementRef<HTMLInputElement>;
+  regexMatchType = '';
 
   constructor(
     public readonly dialogRef: MatDialogRef<RegexEditDialogComponent>,
-    private readonly hostElRef: ElementRef
+    private readonly hostElRef: ElementRef,
+    private cdRef: ChangeDetectorRef
   ) {}
 
+  ngOnInit() {
+    this.regexMatchType =
+      this.selectedGroupBy === GroupByKey.REGEX_BY_EXP
+        ? 'regex_by_exp'
+        : 'regex_by_run';
+  }
+
   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 +94,15 @@ export class RegexEditDialogComponent {
     clearTimeout(this.timeOutId);
     this.timeOutId = setTimeout(this.resetFocus.bind(this), 0);
   }
+
+  regexTypeChange(event: MatSelectChange) {
+    this.regexMatchType = event.value;
+    // This line is needed to update the value on the HTML element.
+    this.cdRef.detectChanges();
+    this.regexTypeOnChange.emit(
+      event.value === 'regex_by_run'
+        ? GroupByKey.REGEX
+        : GroupByKey.REGEX_BY_EXP
+    );
+  }
 }

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

@@ -21,6 +21,7 @@ import {
   debounceTime,
   filter,
   map,
+  shareReplay,
   startWith,
   take,
 } from 'rxjs/operators';
@@ -31,6 +32,7 @@ import {runGroupByChanged} from '../../actions';
 import {
   getColorGroupRegexString,
   getRunIdsForExperiment,
+  getRunGroupBy,
   getRuns,
 } from '../../store/runs_selectors';
 import {groupRuns} from '../../store/utils';
@@ -44,8 +46,10 @@ const INPUT_CHANGE_DEBOUNCE_INTERVAL_MS = 500;
   template: `<regex-edit-dialog-component
     [regexString]="groupByRegexString$ | async"
     [colorRunPairList]="colorRunPairList$ | async"
-    (onSave)="onSave($event)"
+    [selectedGroupBy]="groupByRegexType$ | async"
+    (onSave)="onSave()"
     (regexInputOnChange)="onRegexInputOnChange($event)"
+    (regexTypeOnChange)="onRegexTypeOnChange($event)"
   ></regex-edit-dialog-component>`,
   styles: [
     `
@@ -60,17 +64,34 @@ const INPUT_CHANGE_DEBOUNCE_INTERVAL_MS = 500;
 })
 export class RegexEditDialogContainer {
   private readonly experimentIds: string[];
+  private readonly expNameByExpId: Record<string, string>;
   private readonly runIdToEid$: Observable<Record<string, string>>;
   private readonly allRuns$: Observable<Run[]>;
   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(
+    filter(
+      (key) => key === GroupByKey.REGEX || key === GroupByKey.REGEX_BY_EXP
+    ),
+    startWith(GroupByKey.REGEX),
+    shareReplay(1)
+  );
 
   readonly colorRunPairList$: Observable<ColorGroup[]> = defer(() => {
     return this.groupByRegexString$.pipe(
@@ -84,18 +105,31 @@ export class RegexEditDialogContainer {
         }
       }),
       combineLatestWith(
+        this.groupByRegexType$,
         this.allRuns$,
         this.runIdToEid$,
         this.store.select(settingsSelectors.getColorPalette),
         this.store.select(getDarkModeEnabled)
       ),
       map(
-        ([regexString, allRuns, runIdToEid, colorPalette, darkModeEnabled]) => {
+        ([
+          regexString,
+          regexType,
+          allRuns,
+          runIdToEid,
+          colorPalette,
+          darkModeEnabled,
+        ]) => {
           const groupBy = {
-            key: GroupByKey.REGEX,
+            key: regexType,
             regexString,
           };
-          const groups = groupRuns(groupBy, allRuns, runIdToEid);
+          const groups = groupRuns(
+            groupBy,
+            allRuns,
+            runIdToEid,
+            this.expNameByExpId
+          );
           const groupKeyToColorString = new Map<string, string>();
           const colorRunPairList: ColorGroup[] = [];
 
@@ -121,9 +155,14 @@ 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[];
+      expNameByExpId: Record<string, string>;
+    }
   ) {
     this.experimentIds = data.experimentIds;
+    this.expNameByExpId = data.expNameByExpId;
 
     this.runIdToEid$ = combineLatest(
       this.experimentIds.map((experimentId) => {
@@ -155,16 +194,29 @@ export class RegexEditDialogContainer {
   }
 
   onRegexInputOnChange(regexString: string) {
+    // Whenever regex input changes the subject emits new object.
     this.tentativeRegexString$.next(regexString);
   }
 
-  onSave(regexString: string): void {
-    this.store.dispatch(
-      runGroupByChanged({
-        experimentIds: this.experimentIds,
-        groupBy: {key: GroupByKey.REGEX, regexString: regexString},
-      })
-    );
+  onRegexTypeOnChange(regexType: GroupByKey) {
+    // Whenever regex type changes the subject emits new object.
+    this.tentativeRegexType$.next(regexType);
+  }
+
+  onSave(): void {
+    this.groupByRegexString$
+      .pipe(combineLatestWith(this.groupByRegexType$))
+      .subscribe(([regexString, key]) => {
+        if (regexString) {
+          this.store.dispatch(
+            runGroupByChanged({
+              experimentIds: this.experimentIds,
+              groupBy: {key, regexString},
+              expNameByExpId: this.expNameByExpId,
+            })
+          );
+        }
+      });
   }
 }