Embedded Single Card: don't fetch runs on card route (#6522)

Don't fetch runs for the internal card component.

Author: bhuang1323

tensorboard/webapp/runs/effects/BUILD

@@ -14,6 +14,7 @@ tf_ng_module(
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/app_routing",
+        "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/app_routing/actions",
         "//tensorboard/webapp/core/actions",
         "//tensorboard/webapp/runs:types",
@@ -40,6 +41,7 @@ tf_ts_library(
         "//tensorboard/webapp/angular:expect_angular_core_testing",
         "//tensorboard/webapp/angular:expect_ngrx_store_testing",
         "//tensorboard/webapp/app_routing:testing",
+        "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/core/actions",
         "//tensorboard/webapp/runs/actions",
         "//tensorboard/webapp/runs/data_source",

tensorboard/webapp/runs/effects/runs_effects.ts

@@ -28,6 +28,7 @@ import {
 } from 'rxjs/operators';
 import {areSameRouteKindAndExperiments} from '../../app_routing';
 import {navigated} from '../../app_routing/actions';
+import {RouteKind} from '../../app_routing/types';
 import {State} from '../../app_state';
 import * as coreActions from '../../core/actions';
 import {
@@ -159,7 +160,11 @@ export class RunsEffects {
         this.experimentsWithStaleRunsOnRouteChange$,
         this.experimentsWithStaleRunsOnReload$
       ).pipe(
-        mergeMap(({experimentIds, experimentIdsToBeFetched}) => {
+        withLatestFrom(this.store.select(getActiveRoute)),
+        filter(
+          ([, route]) => route !== null && route.routeKind !== RouteKind.CARD
+        ),
+        mergeMap(([{experimentIds, experimentIdsToBeFetched}]) => {
           return this.fetchAllRunsList(experimentIds, experimentIdsToBeFetched);
         })
       );

tensorboard/webapp/runs/effects/runs_effects_test.ts

@@ -23,6 +23,7 @@ import {
   buildNavigatedAction,
   buildRoute,
 } from '../../app_routing/testing';
+import {RouteKind} from '../../app_routing/types';
 import {State} from '../../app_state';
 import * as coreActions from '../../core/actions';
 import {
@@ -472,6 +473,24 @@ describe('runs_effects', () => {
       });
     });
 
+    [
+      {specAction: buildNavigatedAction, specName: 'navigation'},
+      {specAction: coreActions.manualReload, specName: 'manual reload'},
+      {specAction: coreActions.reload, specName: 'auto reload'},
+    ].forEach(({specAction, specName}) => {
+      it(`does not fetch runs on card route when action is ${specName}`, () => {
+        store.overrideSelector(getActiveRoute, {
+          routeKind: RouteKind.CARD,
+          params: {},
+        });
+        store.refreshState();
+
+        action.next(specAction());
+
+        expect(actualActions).toEqual([]);
+      });
+    });
+
     describe('on navigation', () => {
       it('fetches for runs if not loaded before', () => {
         const createFooRuns = () => [