diff --git a/tensorboard/webapp/metrics/views/main_view/card_groups_container.ts b/tensorboard/webapp/metrics/views/main_view/card_groups_container.ts
index 29dc1a39e8..bcc321d53d 100644
--- a/tensorboard/webapp/metrics/views/main_view/card_groups_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/card_groups_container.ts
@@ -36,18 +36,20 @@ import {getSortedRenderableCardIdsWithMetadata} from './common_selectors';
 export class CardGroupsContainer {
   @Input() cardObserver!: CardObserver;
 
-  constructor(private readonly store: Store<State>) {}
+  constructor(private readonly store: Store<State>) {
+      this.cardGroups$ = this.store
+          .select(getSortedRenderableCardIdsWithMetadata)
+          .pipe(
+              combineLatestWith(this.store.select(getMetricsFilteredPluginTypes)),
+              map(([cardList, filteredPlugins]) => {
+                  if (!filteredPlugins.size) return cardList;
+                  return cardList.filter((card) => {
+                      return filteredPlugins.has(card.plugin);
+                  });
+              }),
+              map((cardList) => groupCardIdWithMetdata(cardList))
+          );
+  }
 
-  readonly cardGroups$: Observable<CardGroup[]> = this.store
-    .select(getSortedRenderableCardIdsWithMetadata)
-    .pipe(
-      combineLatestWith(this.store.select(getMetricsFilteredPluginTypes)),
-      map(([cardList, filteredPlugins]) => {
-        if (!filteredPlugins.size) return cardList;
-        return cardList.filter((card) => {
-          return filteredPlugins.has(card.plugin);
-        });
-      }),
-      map((cardList) => groupCardIdWithMetdata(cardList))
-    );
+  readonly cardGroups$: Observable<CardGroup[]>;
 }
diff --git a/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_container.ts b/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_container.ts
index ce43fec325..2f651c6a8d 100644
--- a/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/empty_tag_match_message_container.ts
@@ -36,18 +36,19 @@ import {getSortedRenderableCardIdsWithMetadata} from './common_selectors';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EmptyTagMatchMessageContainer {
-  constructor(private readonly store: Store<State>) {}
+  constructor(private readonly store: Store<State>) {
+    this.pluginTypes$ = this.store.select(getMetricsFilteredPluginTypes);
+    this.tagFilterRegex$ = this.store.select(getMetricsTagFilter);
+    this.tagCounts$ = this.store
+      .select(getSortedRenderableCardIdsWithMetadata)
+      .pipe(
+        map((cardList) => {
+          return new Set(cardList.map(({tag}) => tag)).size;
+        }),
+      );
+  }
 
-  readonly pluginTypes$: Observable<Set<PluginType>> = this.store.select(
-    getMetricsFilteredPluginTypes
-  );
-  readonly tagFilterRegex$: Observable<string> =
-    this.store.select(getMetricsTagFilter);
-  readonly tagCounts$: Observable<number> = this.store
-    .select(getSortedRenderableCardIdsWithMetadata)
-    .pipe(
-      map((cardList) => {
-        return new Set(cardList.map(({tag}) => tag)).size;
-      })
-    );
+  readonly pluginTypes$: Observable<Set<PluginType>>;
+  readonly tagFilterRegex$: Observable<string>;
+  readonly tagCounts$: Observable<number>;
 }
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_component.ts b/tensorboard/webapp/metrics/views/main_view/main_view_component.ts
index cf9941a9e4..0ce38ba82f 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_component.ts
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_component.ts
@@ -62,7 +62,12 @@ export class MainViewComponent {
     @Optional()
     @Inject(SHARE_BUTTON_COMPONENT)
     readonly customShareButton: Type<Component>
-  ) {}
+  ) {
+    this.cardObserver = new CardObserver(
+      this.host.nativeElement,
+      '600px 0px 600px 0px'
+    );
+  }
 
   readonly PluginType = PluginType;
 
@@ -70,8 +75,5 @@ export class MainViewComponent {
    * Load cards that are not yet visible, if they are roughly 1 card row away in
    * scroll distance.
    */
-  readonly cardObserver = new CardObserver(
-    this.host.nativeElement,
-    '600px 0px 600px 0px'
-  );
+  readonly cardObserver;
 }
diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_container.ts b/tensorboard/webapp/metrics/views/main_view/main_view_container.ts
index 9eb0e12e99..578efdb3a6 100644
--- a/tensorboard/webapp/metrics/views/main_view/main_view_container.ts
+++ b/tensorboard/webapp/metrics/views/main_view/main_view_container.ts
@@ -51,42 +51,42 @@ import {PluginType} from '../../types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MainViewContainer {
-  constructor(private readonly store: Store<State>) {}
-
-  readonly isSidepaneOpen$: Observable<boolean> = this.store.select(
-    isMetricsSettingsPaneOpen
-  );
-
-  readonly initialTagsLoading$: Observable<boolean> = this.store
-    .select(getMetricsTagMetadataLoadState)
-    .pipe(
-      // disconnect and don't listen to store if tags are loaded at least once.
-      takeWhile((loadState) => {
-        return loadState.lastLoadedTimeInMs === null;
-      }, true /** inclusive */),
-      map((loadState) => {
-        return (
-          loadState.state === DataLoadState.LOADING &&
-          loadState.lastLoadedTimeInMs === null
-        );
-      })
-    );
-
-  readonly showFilteredView$: Observable<boolean> = this.store
-    .select(getMetricsTagFilter)
-    .pipe(
+  constructor(private readonly store: Store<State>) {
+    this.isSidepaneOpen$ = this.store.select(isMetricsSettingsPaneOpen);
+    this.initialTagsLoading$ = this.store
+      .select(getMetricsTagMetadataLoadState)
+      .pipe(
+        // disconnect and don't listen to store if tags are loaded at least once.
+        takeWhile((loadState) => {
+          return loadState.lastLoadedTimeInMs === null;
+        }, true /** inclusive */),
+        map((loadState) => {
+          return (
+            loadState.state === DataLoadState.LOADING &&
+            loadState.lastLoadedTimeInMs === null
+          );
+        }),
+      );
+    this.showFilteredView$ = this.store.select(getMetricsTagFilter).pipe(
       map((filter) => {
         return filter.length > 0;
-      })
+      }),
+    );
+    this.filteredPluginTypes$ = this.store.select(
+      getMetricsFilteredPluginTypes,
     );
+    this.isSlideoutMenuOpen$ = this.store.select(isMetricsSlideoutMenuOpen);
+  }
+
+  readonly isSidepaneOpen$: Observable<boolean>;
+
+  readonly initialTagsLoading$: Observable<boolean>;
+
+  readonly showFilteredView$: Observable<boolean>;
 
-  readonly filteredPluginTypes$ = this.store.select(
-    getMetricsFilteredPluginTypes
-  );
+  readonly filteredPluginTypes$;
 
-  readonly isSlideoutMenuOpen$: Observable<boolean> = this.store.select(
-    isMetricsSlideoutMenuOpen
-  );
+  readonly isSlideoutMenuOpen$: Observable<boolean>;
 
   onSettingsButtonClicked() {
     this.store.dispatch(metricsSettingsPaneToggled());