Add reducer and effects tests.

Author: Anuar Talipov

tensorboard/webapp/runs/actions/runs_actions.ts

@@ -40,6 +40,7 @@ export const fetchRunsSucceeded = createAction(
     experimentIds: string[];
     runsForAllExperiments: Run[];
     newRuns: ExperimentIdToRuns;
+    expNameByExpId?: Record<string, string>; // Should we make this optional?
   }>()
 );
 

tensorboard/webapp/runs/effects/runs_effects.ts

@@ -36,6 +36,7 @@ import {
   getExperimentIdsFromRoute,
   getRuns,
   getRunsLoadState,
+  getDashboardExperimentNames
 } from '../../selectors';
 import {DataLoadState, LoadState} from '../../types/data';
 import * as actions from '../actions';
@@ -217,12 +218,20 @@ export class RunsEffects {
         }
         return {newRuns, runsForAllExperiments};
       }),
-      tap(({newRuns, runsForAllExperiments}) => {
+      withLatestFrom(
+        this.store.select(getDashboardExperimentNames)
+      ),
+      map(([runsData, expNameByExpId]) => {
+        const {newRuns, runsForAllExperiments} = runsData;
+        return {newRuns, runsForAllExperiments, expNameByExpId};
+      }),
+      tap(({newRuns, runsForAllExperiments, expNameByExpId}) => {
         this.store.dispatch(
           actions.fetchRunsSucceeded({
             experimentIds,
             newRuns,
             runsForAllExperiments,
+            expNameByExpId
           })
         );
       }),

tensorboard/webapp/runs/effects/runs_effects_test.ts

@@ -29,6 +29,7 @@ import * as coreActions from '../../core/actions';
 import * as hparamsActions from '../../hparams/_redux/hparams_actions';
 import {
   getActiveRoute,
+  getDashboardExperimentNames,
   getExperimentIdsFromRoute,
   getRuns,
   getRunsLoadState,
@@ -131,6 +132,10 @@ describe('runs_effects', () => {
             buildCompareRoute(['exp1:123', 'exp2:456'])
           );
           store.overrideSelector(getExperimentIdsFromRoute, ['123', '456']);
+          store.overrideSelector(getDashboardExperimentNames, {
+            456: 'exp2',
+            123: 'exp1'
+          });
           const createFooRuns = () => [
             createRun({
               id: 'foo/runA',
@@ -166,6 +171,10 @@ describe('runs_effects', () => {
                   runs: createFooRuns(),
                 },
               },
+              expNameByExpId: {
+                456: 'exp2',
+                123: 'exp1'
+              }
             }),
           ]);
         });
@@ -211,6 +220,10 @@ describe('runs_effects', () => {
             buildCompareRoute(['exp1:123', ' exp2:456'])
           );
           store.overrideSelector(getExperimentIdsFromRoute, ['123', '456']);
+          store.overrideSelector(getDashboardExperimentNames, {
+            456: 'exp2',
+            123: 'exp1'
+          });
           store.refreshState();
 
           action.next(specAction());
@@ -244,6 +257,10 @@ describe('runs_effects', () => {
                   runs: createBarRuns(),
                 },
               },
+              expNameByExpId: {
+                456: 'exp2',
+                123: 'exp1'
+              }
             }),
           ]);
         });
@@ -310,6 +327,10 @@ describe('runs_effects', () => {
           buildCompareRoute(['exp1:123', ' exp2:456'])
         );
         store.overrideSelector(getExperimentIdsFromRoute, ['123', '456']);
+        store.overrideSelector(getDashboardExperimentNames, {
+          456: 'exp1',
+          123: 'exp2'
+        });
         store.refreshState();
 
         action.next(buildNavigatedAction());
@@ -328,13 +349,18 @@ describe('runs_effects', () => {
                 runs: createBarRuns(),
               },
             },
+            expNameByExpId: {
+              456: 'exp1',
+              123: 'exp2'
+            }
           }),
         ]);
       });
 
       it('ignores a navigation to same route and experiments (hash changes)', () => {
         store.overrideSelector(getActiveRoute, buildRoute());
         store.overrideSelector(getExperimentIdsFromRoute, ['123']);
+        store.overrideSelector(getDashboardExperimentNames, {123: 'exp1'});
         const createFooRuns = () => [
           createRun({
             id: 'foo/runA',
@@ -363,6 +389,7 @@ describe('runs_effects', () => {
             experimentIds: ['123'],
             runsForAllExperiments: [...createFooRuns()],
             newRuns: {},
+            expNameByExpId: {123: 'exp1'}
           }),
         ]);
 
@@ -391,6 +418,7 @@ describe('runs_effects', () => {
             })
           );
         store.overrideSelector(getExperimentIdsFromRoute, ['foo']);
+        store.overrideSelector(getDashboardExperimentNames, {foo: 'exp1'});
         store.refreshState();
 
         action.next(buildNavigatedAction());
@@ -404,6 +432,7 @@ describe('runs_effects', () => {
             experimentIds: ['foo'],
             runsForAllExperiments: [...createFooRuns()],
             newRuns: {},
+            expNameByExpId: {foo: 'exp1'}
           }),
         ]);
       });
@@ -457,6 +486,7 @@ describe('runs_effects', () => {
       // Emulate navigation to a new experiment route.
       store.overrideSelector(getActiveRoute, buildExperimentRouteFromId('456'));
       store.overrideSelector(getExperimentIdsFromRoute, ['456']);
+      store.overrideSelector(getDashboardExperimentNames, {456: 'exp1', 123: 'exp2'});
       // Force selectors to re-evaluate with a change in store.
       store.refreshState();
 
@@ -480,13 +510,15 @@ describe('runs_effects', () => {
           newRuns: {
             456: {runs: createBarRuns()},
           },
+          expNameByExpId: {456: 'exp1', 123: 'exp2'}
         }),
         actions.fetchRunsSucceeded({
           experimentIds: ['123'],
           runsForAllExperiments: createFooRuns(),
           newRuns: {
             123: {runs: createFooRuns()},
           },
+          expNameByExpId: {456: 'exp1', 123: 'exp2'}
         }),
       ]);
     });
@@ -552,6 +584,7 @@ describe('runs_effects', () => {
         });
 
         store.overrideSelector(getExperimentIdsFromRoute, ['foo']);
+        store.overrideSelector(getDashboardExperimentNames, {foo: 'exp1', bar: 'exp2'});
         selectSpy
           .withArgs(getRuns, {experimentId: 'foo'})
           .and.returnValue(runsSubject);
@@ -611,6 +644,7 @@ describe('runs_effects', () => {
                 runs: createFooAfterRuns(),
               },
             },
+            expNameByExpId: {foo: 'exp1', bar: 'exp2'}
           }),
           actions.fetchRunsSucceeded({
             experimentIds: ['foo', 'bar'],
@@ -623,6 +657,7 @@ describe('runs_effects', () => {
                 runs: createBarRuns(),
               },
             },
+            expNameByExpId: {foo: 'exp1', bar: 'exp2'}
           }),
         ]);
       });

tensorboard/webapp/runs/store/runs_reducers.ts

@@ -204,7 +204,7 @@ const dataReducer: ActionReducer<RunsDataState, Action> = createReducer(
     }
     return {...state, runsLoadState: nextRunsLoadState};
   }),
-  on(runsActions.fetchRunsSucceeded, (state, {runsForAllExperiments}) => {
+  on(runsActions.fetchRunsSucceeded, (state, {runsForAllExperiments, expNameByExpId}) => {
     const groupKeyToColorId = new Map(state.groupKeyToColorId);
     const defaultRunColorIdForGroupBy = new Map(
       state.defaultRunColorIdForGroupBy
@@ -220,7 +220,8 @@ const dataReducer: ActionReducer<RunsDataState, Action> = createReducer(
     const groups = groupRuns(
       groupBy,
       runsForAllExperiments,
-      state.runIdToExpId
+      state.runIdToExpId,
+      expNameByExpId
     );
 
     Object.entries(groups.matches).forEach(([groupId, runs]) => {