Time Series: preserve run regex filter string in URL

tensorboard/webapp/routes/dashboard_deeplink_provider.ts

@@ -37,6 +37,7 @@ import {
   RUN_COLOR_GROUP_KEY,
   DeserializedState,
   PINNED_CARDS_KEY,
+  RUN_REGEX_FILTER_KEY,
   SMOOTHING_KEY,
   TAG_FILTER_KEY,
 } from './dashboard_deeplink_provider_types';
@@ -162,6 +163,12 @@ export class DashboardDeepLinkProvider extends DeepLinkProvider {
           return [{key: RUN_COLOR_GROUP_KEY, value}];
         })
       ),
+      store.select(selectors.getRunSelectorRegexFilter).pipe(
+        map((value) => {
+          if (!value) return [];
+          return [{key: RUN_REGEX_FILTER_KEY, value}];
+        })
+      ),
     ]).pipe(
       map((queryParamList) => {
         return queryParamList.flat();
@@ -176,6 +183,7 @@ export class DashboardDeepLinkProvider extends DeepLinkProvider {
     let smoothing = null;
     let tagFilter = null;
     let groupBy: GroupBy | null = null;
+    let runRegexFilter = null;
 
     for (const {key, value} of queryParams) {
       switch (key) {
@@ -206,6 +214,9 @@ export class DashboardDeepLinkProvider extends DeepLinkProvider {
         case TAG_FILTER_KEY:
           tagFilter = value;
           break;
+        case RUN_REGEX_FILTER_KEY:
+          runRegexFilter = value;
+          break;
       }
     }
 
@@ -217,6 +228,7 @@ export class DashboardDeepLinkProvider extends DeepLinkProvider {
       },
       runs: {
         groupBy,
+        regexFilter: runRegexFilter,
       },
     };
   }

tensorboard/webapp/routes/dashboard_deeplink_provider_test.ts

@@ -49,6 +49,7 @@ describe('core deeplink provider', () => {
     store.overrideSelector(selectors.getOverriddenFeatureFlags, {});
     store.overrideSelector(selectors.getMetricsSettingOverrides, {});
     store.overrideSelector(selectors.getRunUserSetGroupBy, null);
+    store.overrideSelector(selectors.getRunSelectorRegexFilter, '');
 
     queryParamsSerialized = [];
 
@@ -419,67 +420,101 @@ describe('core deeplink provider', () => {
   });
 
   describe('runs', () => {
-    it('does not put state in the URL when user set color group is null', () => {
-      // Setting from `null` to `null` does not actually trigger the provider so
-      // we have to set it: `null` -> something else -> `null` to test this
-      // case.
-      store.overrideSelector(selectors.getRunUserSetGroupBy, {
-        key: GroupByKey.EXPERIMENT,
+    describe('color group', () => {
+      it('does not put state in the URL when user set color group is null', () => {
+        // Setting from `null` to `null` does not actually trigger the provider so
+        // we have to set it: `null` -> something else -> `null` to test this
+        // case.
+        store.overrideSelector(selectors.getRunUserSetGroupBy, {
+          key: GroupByKey.EXPERIMENT,
+        });
+        store.refreshState();
+
+        store.overrideSelector(selectors.getRunUserSetGroupBy, null);
+        store.refreshState();
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          []
+        );
       });
-      store.refreshState();
 
-      store.overrideSelector(selectors.getRunUserSetGroupBy, null);
-      store.refreshState();
-      expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
-        []
-      );
-    });
+      it('serializes user set color group settings', () => {
+        store.overrideSelector(selectors.getRunUserSetGroupBy, {
+          key: GroupByKey.EXPERIMENT,
+        });
+        store.refreshState();
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          [{key: 'runColorGroup', value: 'experiment'}]
+        );
 
-    it('serializes user set color group settings', () => {
-      store.overrideSelector(selectors.getRunUserSetGroupBy, {
-        key: GroupByKey.EXPERIMENT,
-      });
-      store.refreshState();
-      expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual([
-        {key: 'runColorGroup', value: 'experiment'},
-      ]);
+        store.overrideSelector(selectors.getRunUserSetGroupBy, {
+          key: GroupByKey.RUN,
+        });
+        store.refreshState();
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          [{key: 'runColorGroup', value: 'run'}]
+        );
 
-      store.overrideSelector(selectors.getRunUserSetGroupBy, {
-        key: GroupByKey.RUN,
+        store.overrideSelector(selectors.getRunUserSetGroupBy, {
+          key: GroupByKey.REGEX,
+          regexString: 'hello:world',
+        });
+        store.refreshState();
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          [{key: 'runColorGroup', value: 'regex:hello:world'}]
+        );
       });
-      store.refreshState();
-      expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual([
-        {key: 'runColorGroup', value: 'run'},
-      ]);
 
-      store.overrideSelector(selectors.getRunUserSetGroupBy, {
-        key: GroupByKey.REGEX,
-        regexString: 'hello:world',
+      it('serializes interesting regex strings', () => {
+        store.overrideSelector(selectors.getRunUserSetGroupBy, {
+          key: GroupByKey.REGEX,
+          regexString: '',
+        });
+        store.refreshState();
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          [{key: 'runColorGroup', value: 'regex:'}]
+        );
+
+        store.overrideSelector(selectors.getRunUserSetGroupBy, {
+          key: GroupByKey.REGEX,
+          regexString: 'hello/(world):goodbye',
+        });
+        store.refreshState();
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          [{key: 'runColorGroup', value: 'regex:hello/(world):goodbye'}]
+        );
       });
-      store.refreshState();
-      expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual([
-        {key: 'runColorGroup', value: 'regex:hello:world'},
-      ]);
     });
 
-    it('serializes interesting regex strings', () => {
-      store.overrideSelector(selectors.getRunUserSetGroupBy, {
-        key: GroupByKey.REGEX,
-        regexString: '',
+    describe('regex filter', () => {
+      it('does not serialize an empty string', () => {
+        store.overrideSelector(selectors.getRunSelectorRegexFilter, '');
+        store.refreshState();
+
+        expect(queryParamsSerialized).toEqual([]);
       });
-      store.refreshState();
-      expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual([
-        {key: 'runColorGroup', value: 'regex:'},
-      ]);
 
-      store.overrideSelector(selectors.getRunUserSetGroupBy, {
-        key: GroupByKey.REGEX,
-        regexString: 'hello/(world):goodbye',
+      it('serializes runRegexFilter state', () => {
+        store.overrideSelector(selectors.getRunSelectorRegexFilter, 'hello');
+        store.refreshState();
+
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          [{key: 'runRegexFilter', value: 'hello'}]
+        );
+
+        store.overrideSelector(selectors.getRunSelectorRegexFilter, 'hello:');
+        store.refreshState();
+
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          [{key: 'runRegexFilter', value: 'hello:'}]
+        );
+
+        store.overrideSelector(selectors.getRunSelectorRegexFilter, 'hello:.*');
+        store.refreshState();
+
+        expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual(
+          [{key: 'runRegexFilter', value: 'hello:.*'}]
+        );
       });
-      store.refreshState();
-      expect(queryParamsSerialized[queryParamsSerialized.length - 1]).toEqual([
-        {key: 'runColorGroup', value: 'regex:hello/(world):goodbye'},
-      ]);
     });
   });
 });

tensorboard/webapp/routes/dashboard_deeplink_provider_types.ts

@@ -27,3 +27,5 @@ export const PINNED_CARDS_KEY = 'pinnedCards';
 export const RUN_COLOR_GROUP_KEY = 'runColorGroup';
 
 export const TAG_FILTER_KEY = 'tagFilter';
+
+export const RUN_REGEX_FILTER_KEY = 'runRegexFilter';

tensorboard/webapp/routes/testing.ts

@@ -20,6 +20,7 @@ export function buildDeserializedState(
   return {
     runs: {
       groupBy: null,
+      regexFilter: null,
     },
     metrics: {
       pinnedCards: [],

tensorboard/webapp/runs/store/runs_reducers.ts

@@ -97,19 +97,24 @@ const dataReducer: ActionReducer<RunsDataState, Action> = createReducer(
 
     const dehydratedState = partialState as URLDeserializedState;
     const groupBy = dehydratedState.runs.groupBy;
-    if (!groupBy) {
+    const regexFilter = dehydratedState.runs.regexFilter ?? '';
+
+    if (!groupBy && !regexFilter) {
       return state;
     }
 
-    const regexString =
-      groupBy.key === GroupByKey.REGEX
-        ? groupBy.regexString
-        : state.colorGroupRegexString;
+    if (groupBy) {
+      const regexString =
+        groupBy.key === GroupByKey.REGEX
+          ? groupBy.regexString
+          : state.colorGroupRegexString;
+      state.colorGroupRegexString = regexString;
+      state.userSetGroupByKey = groupBy.key ?? null;
+    }
 
     return {
       ...state,
-      colorGroupRegexString: regexString,
-      userSetGroupByKey: groupBy.key ?? null,
+      regexFilter,
     };
   }),
   on(runsActions.fetchRunsRequested, (state, action) => {

tensorboard/webapp/runs/store/runs_reducers_test.ts

@@ -1009,6 +1009,7 @@ describe('runs_reducers', () => {
       const partialState: URLDeserializedState = {
         runs: {
           groupBy: {key: GroupByKey.EXPERIMENT},
+          regexFilter: null,
         },
       };
       const nextState = runsReducers.reducers(
@@ -1031,6 +1032,7 @@ describe('runs_reducers', () => {
       const partialState: URLDeserializedState = {
         runs: {
           groupBy: null,
+          regexFilter: null,
         },
       };
       const nextState = runsReducers.reducers(
@@ -1082,6 +1084,7 @@ describe('runs_reducers', () => {
       const partialState: URLDeserializedState = {
         runs: {
           groupBy: {key: GroupByKey.EXPERIMENT},
+          regexFilter: null,
         },
       };
       const nextState = runsReducers.reducers(
@@ -1118,6 +1121,7 @@ describe('runs_reducers', () => {
       const partialState: URLDeserializedState = {
         runs: {
           groupBy: {key: GroupByKey.REGEX, regexString: 'regex string'},
+          regexFilter: null,
         },
       };
       const nextState = runsReducers.reducers(
@@ -1130,6 +1134,77 @@ describe('runs_reducers', () => {
 
       expect(nextState.data.colorGroupRegexString).toBe('regex string');
     });
+
+    it('does not set regexFilter when null value provided', () => {
+      const state = buildRunsState({
+        regexFilter: 'hello',
+      });
+
+      const partialState: URLDeserializedState = {
+        runs: {
+          groupBy: null,
+          regexFilter: null,
+        },
+      };
+      const nextState = runsReducers.reducers(
+        state,
+        stateRehydratedFromUrl({
+          routeKind: RouteKind.EXPERIMENT,
+          partialState,
+        })
+      );
+
+      expect(nextState.data.regexFilter).toEqual('hello');
+    });
+
+    it('sets regexFilter to the valid value provided', () => {
+      const state = buildRunsState({
+        regexFilter: 'hello',
+      });
+
+      const partialState: URLDeserializedState = {
+        runs: {
+          groupBy: null,
+          regexFilter: 'world',
+        },
+      };
+      const nextState = runsReducers.reducers(
+        state,
+        stateRehydratedFromUrl({
+          routeKind: RouteKind.EXPERIMENT,
+          partialState,
+        })
+      );
+
+      expect(nextState.data.regexFilter).toEqual('world');
+    });
+
+    it('set regexFilter and userSetGroupBy to the value provided', () => {
+      const state = buildRunsState({
+        colorGroupRegexString: '',
+        initialGroupBy: {key: GroupByKey.REGEX, regexString: ''},
+        userSetGroupByKey: GroupByKey.RUN,
+        regexFilter: 'hello',
+      });
+
+      const partialState: URLDeserializedState = {
+        runs: {
+          groupBy: {key: GroupByKey.EXPERIMENT},
+          regexFilter: 'world',
+        },
+      };
+
+      const nextState = runsReducers.reducers(
+        state,
+        stateRehydratedFromUrl({
+          routeKind: RouteKind.EXPERIMENT,
+          partialState,
+        })
+      );
+
+      expect(nextState.data.regexFilter).toEqual('world');
+      expect(nextState.data.userSetGroupByKey).toEqual(GroupByKey.EXPERIMENT);
+    });
   });
 
   describe('when freshly navigating', () => {

tensorboard/webapp/runs/types.ts

@@ -78,5 +78,6 @@ export type GroupBy = BaseGroupBy | RegexGroupBy;
 export interface URLDeserializedState {
   runs: {
     groupBy: GroupBy | null;
+    regexFilter: string | null;
   };
 }

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

@@ -17,6 +17,7 @@
 <div class="filter-row">
   <tb-filter-input
     class="run-filter"
+    value="{{ regexFilter }}"
     (keyup)="onFilterKeyUp($event)"
     placeholder="Filter runs (regex)"
   ></tb-filter-input>