Add a color by regex feature that matches the experiment name.

Author: Anuar Talipov

tensorboard/webapp/angular/BUILD

@@ -132,6 +132,15 @@ tf_ts_library(
     ],
 )
 
+# This is a dummy rule used as a @angular/material/chips 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/runs/actions/runs_actions.ts

@@ -77,10 +77,11 @@ export const runColorChanged = createAction(
   props<{runId: string; newColor: string}>()
 );
 
-export const runGroupByChanged = createAction(
-  '[Runs] Run Group By Changed',
-  props<{experimentIds: string[]; groupBy: GroupBy}>()
-);
+export const runGroupByChanged =
+    createAction('[Runs] Run Group By Changed', props<{
+                   experimentIds: string[]; groupBy: GroupBy;
+                   expNameByExpId?: Record<string, string>
+                 }>());
 
 /**
  * Inserts the provided column header at the specified index.

tensorboard/webapp/runs/store/BUILD

@@ -64,6 +64,7 @@ tf_ts_library(
     ],
     deps = [
         "//tensorboard/webapp/app_routing:namespaced_state_reducer_helper",
+        "//tensorboard/webapp/experiments:types",
         "//tensorboard/webapp/runs:types",
         "//tensorboard/webapp/runs/data_source",
         "//tensorboard/webapp/types",

tensorboard/webapp/runs/store/runs_reducers.ts

@@ -118,7 +118,7 @@ const dataReducer: ActionReducer<RunsDataState, Action> = createReducer(
     let {colorGroupRegexString, userSetGroupByKey} = state;
     if (groupBy) {
       const regexString =
-        groupBy.key === GroupByKey.REGEX
+        groupBy.key === GroupByKey.REGEX || groupBy.key === GroupByKey.REGEX_BY_EXP
           ? groupBy.regexString
           : state.colorGroupRegexString;
       colorGroupRegexString = regexString;
@@ -244,7 +244,7 @@ const dataReducer: ActionReducer<RunsDataState, Action> = createReducer(
   }),
   on(
     runsActions.runGroupByChanged,
-    (state: RunsDataState, {experimentIds, groupBy}): RunsDataState => {
+    (state: RunsDataState, {experimentIds, groupBy, expNameByExpId}): RunsDataState => {
       // Reset the groupKeyToColorId
       const groupKeyToColorId = new Map<string, number>();
       const defaultRunColorIdForGroupBy = new Map(
@@ -255,7 +255,8 @@ const dataReducer: ActionReducer<RunsDataState, Action> = createReducer(
         .flatMap((experimentId) => state.runIds[experimentId])
         .map((runId) => state.runMetadata[runId]);
 
-      const groups = groupRuns(groupBy, allRuns, state.runIdToExpId);
+      const groups =
+          groupRuns(groupBy, allRuns, state.runIdToExpId, expNameByExpId);
 
       Object.entries(groups.matches).forEach(([groupId, runs]) => {
         const colorId =
@@ -272,10 +273,10 @@ const dataReducer: ActionReducer<RunsDataState, Action> = createReducer(
         defaultRunColorIdForGroupBy.set(run.id, -1);
       }
 
-      const updatedRegexString =
-        groupBy.key === GroupByKey.REGEX
-          ? groupBy.regexString
-          : state.colorGroupRegexString;
+      const updatedRegexString = (groupBy.key === GroupByKey.REGEX ||
+                                  groupBy.key === GroupByKey.REGEX_BY_EXP) ?
+          groupBy.regexString :
+          state.colorGroupRegexString;
 
       return {
         ...state,

tensorboard/webapp/runs/store/runs_reducers_test.ts

@@ -358,6 +358,10 @@ describe('runs_reducers', () => {
           ])
         );
       });
+
+      it('assigns non-matched colors to regex non-matched runs', () => {
+        // TODO(anuartb@): Make test for reducer.
+      });
     });
 
     it('auto-selects new runs if total num <= N', () => {
@@ -916,6 +920,8 @@ describe('runs_reducers', () => {
       expect(nextState.data.colorGroupRegexString).toBe('foo(\\d+)');
     });
 
+    it('reassigns color to REGEX from RUN', () => {});
+
     it('preserves regexString when reassigning color to RUN from REGEX', () => {
       const state = buildRunsState({
         initialGroupBy: {key: GroupByKey.RUN},
@@ -976,6 +982,8 @@ describe('runs_reducers', () => {
       );
       expect(state4.data.colorGroupRegexString).toBe('updated regexString');
     });
+
+    it('preserves experiment regexString when reassigning color to RUN from REGEX', () => {});
   });
 
   describe('#stateRehydratedFromUrl', () => {

tensorboard/webapp/runs/store/utils.ts

@@ -13,16 +13,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {GroupBy, GroupByKey, Run, RunGroup} from '../types';
+
 import {ExperimentId, RunId} from './runs_types';
 
 export function groupRuns(
-  groupBy: GroupBy,
-  runs: Run[],
-  runIdToExpId: Readonly<Record<RunId, ExperimentId>>
-): RunGroup {
+    groupBy: GroupBy, runs: Run[],
+    runIdToExpId: Readonly<Record<RunId, ExperimentId>>,
+    expNameByExpId?: Record<string, string>): RunGroup {
   const matches: {[id: string]: Run[]} = {};
   const nonMatches: Run[] = [];
   const runGroup: RunGroup = {matches, nonMatches};
+  let regExp: RegExp;
 
   switch (groupBy.key) {
     case GroupByKey.RUN:
@@ -44,7 +45,6 @@ export function groupRuns(
         //TODO(japie1235813): propagate invalidity of regex string to user more gracefully
         break;
       }
-      let regExp: RegExp;
 
       // TODO(japie1235813): add additonal `\` to convert string to regex, which
       // makes `new RegExp()` construct properly
@@ -73,7 +73,38 @@ export function groupRuns(
         }
       }
       break;
+
+    case GroupByKey.REGEX_BY_EXP:
+      if (!groupBy.regexString || !expNameByExpId) {
+        break;
+      }
+
+      try {
+        regExp = new RegExp(groupBy.regexString);
+      } catch (e) {
+        break;
+      }
+
+      for (const run of runs) {
+        // Tries to match against experiment alias of the run.
+        const experimentName = expNameByExpId[runIdToExpId[run.id]];
+        const matchesList = experimentName.match(regExp);
+        if (matchesList) {
+          const hasCapturingGroup = matchesList.length > 1;
+          // In case regex string does not have a capturing group, we use pseudo
+          // group id of `pseudo_group`.
+          const id = hasCapturingGroup ? JSON.stringify(matchesList.slice(1)) :
+                                         'pseudo_group';
+          const runs = matches[id] || [];
+          runs.push(run);
+          matches[id] = runs;
+        } else {
+          nonMatches.push(run);
+        }
+      }
+      break;
     default:
+      break;
   }
   return runGroup;
 }
@@ -82,11 +113,12 @@ export function groupRuns(
  * Util function for composing `GroupBy` key and regex string.
  */
 export function createGroupBy(
-  groupByKey: GroupByKey,
+    groupByKey: GroupByKey,
   regexString?: string
 ): GroupBy {
   switch (groupByKey) {
     case GroupByKey.REGEX:
+    case GroupByKey.REGEX_BY_EXP:
       return {key: groupByKey, regexString: regexString ?? ''};
     case GroupByKey.RUN:
     case GroupByKey.EXPERIMENT: