Card Interactions: Add redux logic store and retrieve card suggestions

WORKSPACE

@@ -37,6 +37,18 @@ load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories"
 
 web_test_repositories(omit_bazel_skylib = True)
 
+# rules_python has to be placed before load("@io_bazel_rules_closure//closure:repositories.bzl")
+# in the dependencies list, otherwise we get "cannot load '@rules_python//python:py_xxx.bzl': no such file"
+http_archive(
+    name = "rules_python",
+    sha256 = "0a8003b044294d7840ac7d9d73eef05d6ceb682d7516781a4ec62eeb34702578",
+    strip_prefix = "rules_python-0.24.0",
+    urls = [
+        "http://mirror.tensorflow.org/github.com/bazelbuild/rules_python/releases/download/0.24.0/rules_python-0.24.0.tar.gz",
+        "https://github.com/bazelbuild/rules_python/releases/download/0.24.0/rules_python-0.24.0.tar.gz",  # 2023-07-11
+    ],
+)
+
 load("@io_bazel_rules_webtesting//web:py_repositories.bzl", "py_repositories")
 
 py_repositories()

tensorboard/webapp/BUILD

@@ -269,6 +269,7 @@ tf_ng_web_test_suite(
         "//tensorboard/webapp/metrics:integration_test",
         "//tensorboard/webapp/metrics:test_lib",
         "//tensorboard/webapp/metrics:utils_test",
+        "//tensorboard/webapp/metrics/data_source:card_interactions_data_source_test",
         "//tensorboard/webapp/metrics/data_source:metrics_data_source_test",
         "//tensorboard/webapp/metrics/effects:effects_test",
         "//tensorboard/webapp/metrics/store:store_test",

tensorboard/webapp/metrics/BUILD

@@ -15,6 +15,7 @@ tf_ng_module(
         "//tensorboard/webapp/core",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/data_source",
+        "//tensorboard/webapp/metrics/data_source:card_interactions_data_source",
         "//tensorboard/webapp/metrics/effects",
         "//tensorboard/webapp/metrics/store",
         "//tensorboard/webapp/metrics/store:metrics_initial_state_provider",

tensorboard/webapp/metrics/actions/index.ts

@@ -23,13 +23,12 @@ import {
   TimeSeriesRequest,
   TimeSeriesResponse,
 } from '../data_source';
-import {CardState} from '../store/metrics_types';
+import {CardInteractions, CardState} from '../store/metrics_types';
 import {
   CardId,
   HeaderEditInfo,
   HeaderToggleInfo,
   HistogramMode,
-  MinMaxStep,
   PluginType,
   TooltipSort,
   XAxisType,
@@ -272,5 +271,15 @@ export const metricsHideEmptyCardsToggled = createAction(
   '[Metrics] Hide Empty Cards Changed'
 );
 
+export const metricsPreviousCardInteractionsChanged = createAction(
+  '[Metrics] Card Interactions Changed',
+  props<{cardInteractions: CardInteractions}>()
+);
+
+export const metricsCardClicked = createAction(
+  '[Metrics] Card Clicked',
+  props<{cardId: string}>()
+);
+
 // TODO(jieweiwu): Delete after internal code is updated.
 export const stepSelectorTimeSelectionChanged = timeSelectionChanged;

tensorboard/webapp/metrics/data_source/BUILD

@@ -25,6 +25,18 @@ tf_ng_module(
     ],
 )
 
+tf_ng_module(
+    name = "card_interactions_data_source",
+    srcs = [
+        "card_interactions_data_source.ts",
+        "card_interactions_data_source_module.ts",
+    ],
+    deps = [
+        "//tensorboard/webapp/metrics/store:types",
+        "@npm//@angular/core",
+    ],
+)
+
 tf_ts_library(
     name = "types",
     srcs = [
@@ -70,3 +82,17 @@ tf_ts_library(
         "@npm//rxjs",
     ],
 )
+
+tf_ts_library(
+    name = "card_interactions_data_source_test",
+    testonly = True,
+    srcs = [
+        "card_interactions_data_source_test.ts",
+    ],
+    deps = [
+        ":card_interactions_data_source",
+        "//tensorboard/webapp/angular:expect_angular_core_testing",
+        "//tensorboard/webapp/metrics:internal_types",
+        "@npm//@types/jasmine",
+    ],
+)

tensorboard/webapp/metrics/data_source/card_interactions_data_source.ts

@@ -0,0 +1,57 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {Injectable} from '@angular/core';
+import {CardInteractions} from '../store/metrics_types';
+
+const CARD_INTERACTIONS_KEY = 'tb-card-interactions';
+
+const MAX_RECORDS: Record<keyof CardInteractions, number> = {
+  pins: 10,
+  clicks: 10,
+  tagFilters: 10,
+};
+
+@Injectable()
+export class CardInteractionsDataSource {
+  saveCardInteractions(cardInteractions: CardInteractions) {
+    const trimmedInteractions: CardInteractions = {
+      pins: cardInteractions.pins.slice(
+        cardInteractions.pins.length - MAX_RECORDS.pins
+      ),
+      clicks: cardInteractions.clicks.slice(
+        cardInteractions.clicks.length - MAX_RECORDS.clicks
+      ),
+      tagFilters: cardInteractions.tagFilters.slice(
+        cardInteractions.tagFilters.length - MAX_RECORDS.tagFilters
+      ),
+    };
+    localStorage.setItem(
+      CARD_INTERACTIONS_KEY,
+      JSON.stringify(trimmedInteractions)
+    );
+  }
+
+  getCardInteractions(): CardInteractions {
+    const existingInteractions = localStorage.getItem(CARD_INTERACTIONS_KEY);
+    if (existingInteractions) {
+      return JSON.parse(existingInteractions) as CardInteractions;
+    }
+    return {
+      tagFilters: [],
+      pins: [],
+      clicks: [],
+    };
+  }
+}

tensorboard/webapp/metrics/data_source/card_interactions_data_source_module.ts

@@ -0,0 +1,22 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {NgModule} from '@angular/core';
+import {CardInteractionsDataSource} from './card_interactions_data_source';
+
+@NgModule({
+  imports: [],
+  providers: [CardInteractionsDataSource],
+})
+export class MetricsCardInteractionsDataSourceModule {}

tensorboard/webapp/metrics/data_source/card_interactions_data_source_test.ts

@@ -0,0 +1,125 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {TestBed} from '@angular/core/testing';
+import {CardInteractionsDataSource} from './card_interactions_data_source';
+import {PluginType} from '../internal_types';
+
+describe('CardInteractionsDataSource Test', () => {
+  let mockStorage: Record<string, string>;
+  let dataSource: CardInteractionsDataSource;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [CardInteractionsDataSource],
+    });
+
+    dataSource = TestBed.inject(CardInteractionsDataSource);
+
+    mockStorage = {};
+    spyOn(window.localStorage, 'setItem').and.callFake(
+      (key: string, value: string) => {
+        if (key !== 'tb-card-interactions') {
+          throw new Error('incorrect key used');
+        }
+
+        mockStorage[key] = value;
+      }
+    );
+
+    spyOn(window.localStorage, 'getItem').and.callFake((key: string) => {
+      if (key !== 'tb-card-interactions') {
+        throw new Error('incorrect key used');
+      }
+
+      return mockStorage[key];
+    });
+  });
+
+  describe('saveCardInteractions', () => {
+    it('only saves 10 pins', () => {
+      dataSource.saveCardInteractions({
+        clicks: [],
+        tagFilters: [],
+        pins: Array.from({length: 12}).map((_, index) => ({
+          cardId: `card-${index}`,
+          runId: null,
+          tag: 'foo',
+          plugin: PluginType.SCALARS,
+        })),
+      });
+
+      expect(dataSource.getCardInteractions().pins.length).toEqual(10);
+    });
+
+    it('only saves 10 clicks', () => {
+      dataSource.saveCardInteractions({
+        pins: [],
+        tagFilters: [],
+        clicks: Array.from({length: 12}).map((_, index) => ({
+          cardId: `card-${index}`,
+          runId: null,
+          tag: 'foo',
+          plugin: PluginType.SCALARS,
+        })),
+      });
+
+      expect(dataSource.getCardInteractions().clicks.length).toEqual(10);
+    });
+
+    it('only saves 10 tagFilgers', () => {
+      dataSource.saveCardInteractions({
+        clicks: [],
+        tagFilters: Array.from({length: 12}).map((_, index) =>
+          index.toString()
+        ),
+        pins: [],
+      });
+
+      expect(dataSource.getCardInteractions().tagFilters.length).toEqual(10);
+    });
+  });
+
+  describe('getCardInteractions', () => {
+    it('returns all default state when key is not set', () => {
+      expect(dataSource.getCardInteractions()).toEqual({
+        tagFilters: [],
+        pins: [],
+        clicks: [],
+      });
+    });
+
+    it('returns previously written value', () => {
+      dataSource.saveCardInteractions({
+        tagFilters: ['foo'],
+        clicks: [
+          {cardId: '1', runId: null, tag: 'foo', plugin: PluginType.SCALARS},
+        ],
+        pins: [
+          {cardId: '2', runId: null, tag: 'bar', plugin: PluginType.SCALARS},
+        ],
+      });
+
+      expect(dataSource.getCardInteractions()).toEqual({
+        tagFilters: ['foo'],
+        clicks: [
+          {cardId: '1', runId: null, tag: 'foo', plugin: PluginType.SCALARS},
+        ],
+        pins: [
+          {cardId: '2', runId: null, tag: 'bar', plugin: PluginType.SCALARS},
+        ],
+      });
+    });
+  });
+});

tensorboard/webapp/metrics/effects/BUILD

@@ -4,17 +4,22 @@ package(default_visibility = ["//tensorboard:internal"])
 
 tf_ng_module(
     name = "effects",
-    srcs = ["index.ts"],
+    srcs = [
+        "card_interaction_effects.ts",
+        "index.ts",
+    ],
     deps = [
         "//tensorboard/webapp:app_state",
         "//tensorboard/webapp:selectors",
         "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/app_routing/actions",
+        "//tensorboard/webapp/app_routing/store",
         "//tensorboard/webapp/core/actions",
         "//tensorboard/webapp/core/store",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/data_source",
+        "//tensorboard/webapp/metrics/data_source:card_interactions_data_source",
         "//tensorboard/webapp/metrics/store",
         "//tensorboard/webapp/types",
         "@npm//@angular/core",
@@ -27,7 +32,10 @@ tf_ng_module(
 tf_ts_library(
     name = "effects_test",
     testonly = True,
-    srcs = ["metrics_effects_test.ts"],
+    srcs = [
+        "card_interactions_effects_test.ts",
+        "metrics_effects_test.ts",
+    ],
     deps = [
         ":effects",
         "//tensorboard/webapp:app_state",
@@ -37,14 +45,18 @@ tf_ts_library(
         "//tensorboard/webapp/app_routing:testing",
         "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/app_routing/actions",
+        "//tensorboard/webapp/app_routing/store",
         "//tensorboard/webapp/core/actions",
         "//tensorboard/webapp/core/store",
         "//tensorboard/webapp/core/testing",
+        "//tensorboard/webapp/metrics:internal_types",
         "//tensorboard/webapp/metrics:test_lib",
         "//tensorboard/webapp/metrics:types",
         "//tensorboard/webapp/metrics/actions",
         "//tensorboard/webapp/metrics/data_source",
+        "//tensorboard/webapp/metrics/data_source:card_interactions_data_source",
         "//tensorboard/webapp/metrics/store",
+        "//tensorboard/webapp/testing:utils",
         "//tensorboard/webapp/types",
         "//tensorboard/webapp/util:dom",
         "//tensorboard/webapp/webapp_data_source:http_client_testing",

tensorboard/webapp/metrics/effects/card_interaction_effects.ts

@@ -0,0 +1,134 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {Injectable} from '@angular/core';
+import {Action, Store, createAction} from '@ngrx/store';
+import {
+  State,
+  getNewCardInteractions,
+  getCardMetadataMap,
+  getPreviousCardInteractions,
+} from '../store';
+import {Actions, OnInitEffects, createEffect, ofType} from '@ngrx/effects';
+import {CardInteractionsDataSource} from '../data_source/card_interactions_data_source';
+import {withLatestFrom, skip, tap} from 'rxjs';
+import {metricsPreviousCardInteractionsChanged} from '../actions';
+import {getActiveNamespaceId} from '../../app_routing/store/app_routing_selectors';
+import {CardIdWithMetadata} from '../types';
+
+const initAction = createAction('[Card Interaction Effects] Init');
+
+@Injectable()
+export class CardInteractionEffects implements OnInitEffects {
+  constructor(
+    private readonly actions$: Actions,
+    private readonly store: Store<State>,
+    private readonly dataSource: CardInteractionsDataSource
+  ) {}
+
+  /** @export */
+  ngrxOnInitEffects(): Action {
+    return initAction();
+  }
+
+  private getCardInteractions$ = this.store.select(getNewCardInteractions).pipe(
+    // Don't get the initial state
+    skip(1)
+  );
+
+  private getPreviousCardInteractions$ = this.store
+    .select(getPreviousCardInteractions)
+    .pipe(
+      // Don't get the initial state
+      skip(1)
+    );
+
+  readonly onInitEffect$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(initAction),
+        tap(() => {
+          this.store.dispatch(
+            metricsPreviousCardInteractionsChanged({
+              cardInteractions: this.dataSource.getCardInteractions(),
+            })
+          );
+        })
+      );
+    },
+    {dispatch: false}
+  );
+
+  /** @export */
+  readonly cardInteractionsEffect$ = createEffect(
+    () => {
+      return this.getCardInteractions$.pipe(
+        tap((cardInteractions) => {
+          this.dataSource.saveCardInteractions(cardInteractions);
+        })
+      );
+    },
+    {dispatch: false}
+  );
+
+  /** @export */
+  readonly updateInteractionsOnNavigationEffect$ = createEffect(
+    () => {
+      return this.store.select(getActiveNamespaceId).pipe(
+        withLatestFrom(
+          this.getCardInteractions$,
+          this.getPreviousCardInteractions$,
+          this.store.select(getCardMetadataMap)
+        ),
+        tap(
+          ([, newCardInteractions, previousCardInteractions, metadataMap]) => {
+            const nextCardInteractions = {
+              pins: makeUnique([
+                ...previousCardInteractions.pins,
+                ...newCardInteractions.pins,
+              ]),
+              clicks: makeUnique([
+                ...previousCardInteractions.clicks,
+                ...newCardInteractions.clicks,
+              ]),
+              tagFilters: Array.from(
+                new Set([
+                  ...previousCardInteractions.tagFilters,
+                  ...newCardInteractions.tagFilters,
+                ])
+              ),
+            };
+
+            this.store.dispatch(
+              metricsPreviousCardInteractionsChanged({
+                cardInteractions: nextCardInteractions,
+              })
+            );
+
+            function makeUnique(cardMetadata: CardIdWithMetadata[]) {
+              return Array.from(
+                new Set(cardMetadata.map(({cardId}) => cardId))
+              ).map((cardId) => ({...metadataMap[cardId], cardId}));
+            }
+          }
+        )
+      );
+    },
+    {dispatch: false}
+  );
+}
+
+export const TEST_ONLY = {
+  initAction,
+};

tensorboard/webapp/metrics/effects/card_interactions_effects_test.ts

@@ -0,0 +1,237 @@
+/* Copyright 2023 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+import {Action, Store} from '@ngrx/store';
+import {Subject} from 'rxjs';
+import {CardInteractionsDataSource} from '../data_source/card_interactions_data_source';
+import {MockStore} from '@ngrx/store/testing';
+import {State} from '../../app_state';
+import {CardInteractionEffects, TEST_ONLY} from './card_interaction_effects';
+import {TestBed, fakeAsync} from '@angular/core/testing';
+import {provideMockTbStore} from '../../testing/utils';
+import {provideMockActions} from '@ngrx/effects/testing';
+import * as actions from '../actions';
+import {CardIdWithMetadata, PluginType} from '../internal_types';
+import {
+  getNewCardInteractions,
+  getCardMetadataMap,
+  getPreviousCardInteractions,
+} from '../store';
+import {getActiveNamespaceId} from '../../app_routing/store/app_routing_selectors';
+
+describe('CardInteractions Effects', () => {
+  let dataSource: CardInteractionsDataSource;
+  let effects: CardInteractionEffects;
+  let store: MockStore<State>;
+  let actions$: Subject<Action>;
+  let mockStorage: Record<string, string>;
+  let dispatchedActions: Action[];
+
+  beforeEach(async () => {
+    actions$ = new Subject<Action>();
+    mockStorage = {};
+    spyOn(window.localStorage, 'setItem').and.callFake(
+      (key: string, value: string) => {
+        mockStorage[key] = value;
+      }
+    );
+
+    spyOn(window.localStorage, 'getItem').and.callFake((key: string) => {
+      return mockStorage[key];
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [],
+      providers: [
+        provideMockActions(actions$),
+        CardInteractionsDataSource,
+        CardInteractionEffects,
+        provideMockTbStore(),
+      ],
+    }).compileComponents();
+
+    store = TestBed.inject<Store<State>>(Store) as MockStore<State>;
+    dataSource = TestBed.inject(CardInteractionsDataSource);
+    effects = TestBed.inject(CardInteractionEffects);
+
+    dispatchedActions = [];
+    spyOn(store, 'dispatch').and.callFake((action: Action) => {
+      dispatchedActions.push(action);
+    });
+  });
+
+  afterEach(() => {
+    store.resetSelectors();
+  });
+
+  describe('onInitEffect$', () => {
+    it('rehydrates previousCardInteractions from data source', () => {
+      const previousCardInteractions = {
+        tagFilters: ['foo', 'bar'],
+        pins: [
+          {
+            cardId: 'card1',
+            runId: null,
+            plugin: PluginType.SCALARS,
+            tag: 'tagA',
+          },
+        ],
+        clicks: [
+          {
+            cardId: 'card2',
+            runId: null,
+            plugin: PluginType.SCALARS,
+            tag: 'tagB',
+          },
+        ],
+      };
+      dataSource.saveCardInteractions(previousCardInteractions);
+
+      effects.onInitEffect$.subscribe();
+      actions$.next(TEST_ONLY.initAction());
+      expect(dispatchedActions).toEqual([
+        actions.metricsPreviousCardInteractionsChanged({
+          cardInteractions: previousCardInteractions,
+        }),
+      ]);
+    });
+  });
+
+  describe('cardInteractionsEffect$', () => {
+    it('skips the initial state', fakeAsync(() => {
+      const saveSpy = spyOn(
+        dataSource,
+        'saveCardInteractions'
+      ).and.callThrough();
+      effects.cardInteractionsEffect$.subscribe();
+      expect(saveSpy).not.toHaveBeenCalled();
+
+      store.overrideSelector(getNewCardInteractions, {
+        tagFilters: ['foo', 'bar'],
+        pins: [
+          {
+            cardId: 'card1',
+            runId: null,
+            plugin: PluginType.SCALARS,
+            tag: 'tagA',
+          },
+        ],
+        clicks: [
+          {
+            cardId: 'card2',
+            runId: null,
+            plugin: PluginType.SCALARS,
+            tag: 'tagB',
+          },
+        ],
+      });
+      store.refreshState();
+
+      expect(saveSpy).toHaveBeenCalled();
+    }));
+  });
+
+  describe('updateInteractionsOnNavigationEffect$', () => {
+    let card1a: CardIdWithMetadata;
+    let card1b: CardIdWithMetadata;
+    let card2a: CardIdWithMetadata;
+    let card2b: CardIdWithMetadata;
+
+    beforeEach(() => {
+      card1a = {
+        cardId: 'card1a',
+        runId: null,
+        tag: '1a',
+        plugin: PluginType.SCALARS,
+      };
+      card1b = {
+        cardId: 'card1b',
+        runId: null,
+        tag: '1b',
+        plugin: PluginType.SCALARS,
+      };
+      card2a = {
+        cardId: 'card2a',
+        runId: null,
+        tag: '2a',
+        plugin: PluginType.SCALARS,
+      };
+      card2b = {
+        cardId: 'card2b',
+        runId: null,
+        tag: '2b',
+        plugin: PluginType.SCALARS,
+      };
+
+      store.overrideSelector(getCardMetadataMap, {
+        card1a,
+        card1b,
+        card2a,
+        card2b,
+      });
+
+      effects.updateInteractionsOnNavigationEffect$.subscribe();
+    });
+
+    it('merges current and previous card interactions', () => {
+      store.overrideSelector(getNewCardInteractions, {
+        pins: [card1a],
+        clicks: [card1b],
+        tagFilters: ['foo'],
+      });
+      store.overrideSelector(getPreviousCardInteractions, {
+        pins: [card2a],
+        clicks: [card2b],
+        tagFilters: ['bar'],
+      });
+      store.overrideSelector(getActiveNamespaceId, 'namespace1');
+      store.refreshState();
+
+      expect(dispatchedActions).toEqual([
+        actions.metricsPreviousCardInteractionsChanged({
+          cardInteractions: {
+            pins: [card2a, card1a],
+            clicks: [card2b, card1b],
+            tagFilters: ['bar', 'foo'],
+          },
+        }),
+      ]);
+    });
+
+    it('does not emit duplicate cardIds', () => {
+      store.overrideSelector(getNewCardInteractions, {
+        pins: [card1a],
+        clicks: [card1b],
+        tagFilters: ['foo'],
+      });
+      store.overrideSelector(getPreviousCardInteractions, {
+        pins: [card1a],
+        clicks: [card1b],
+        tagFilters: ['foo'],
+      });
+      store.overrideSelector(getActiveNamespaceId, 'namespace1');
+      store.refreshState();
+
+      expect(dispatchedActions).toEqual([
+        actions.metricsPreviousCardInteractionsChanged({
+          cardInteractions: {
+            pins: [card1a],
+            clicks: [card1b],
+            tagFilters: ['foo'],
+          },
+        }),
+      ]);
+    });
+  });
+});

tensorboard/webapp/metrics/store/metrics_reducers.ts

@@ -399,6 +399,16 @@ const {initialState, reducers: namespaceContextedReducer} =
       settings: METRICS_SETTINGS_DEFAULT,
       settingOverrides: {},
       visibleCardMap: new Map<ElementId, CardId>(),
+      previousCardInteractions: {
+        tagFilters: [],
+        pins: [],
+        clicks: [],
+      },
+      newCardInteractions: {
+        tagFilters: [],
+        pins: [],
+        clicks: [],
+      },
     },
 
     /** onNavigated */
@@ -731,9 +741,41 @@ const reducer = createReducer(
     };
   }),
   on(actions.metricsTagFilterChanged, (state, {tagFilter}) => {
+    const nextNewCardInteractions = {
+      ...state.newCardInteractions,
+    };
+    const previousTagFilter = state.tagFilter;
+    // Ensuring we do not create redundant tag filter as the user types
+    if (tagFilter === '') {
+      nextNewCardInteractions.tagFilters =
+        nextNewCardInteractions.tagFilters.slice(
+          0,
+          nextNewCardInteractions.tagFilters.length - 1
+        );
+    } else if (
+      previousTagFilter === '' ||
+      !nextNewCardInteractions.tagFilters.length
+    ) {
+      nextNewCardInteractions.tagFilters = [
+        ...nextNewCardInteractions.tagFilters,
+        tagFilter,
+      ];
+    } else if (
+      tagFilter.includes(previousTagFilter) ||
+      previousTagFilter.includes(tagFilter)
+    ) {
+      nextNewCardInteractions.tagFilters =
+        nextNewCardInteractions.tagFilters.slice(
+          0,
+          nextNewCardInteractions.tagFilters.length - 1
+        );
+      nextNewCardInteractions.tagFilters.push(tagFilter);
+    }
+
     return {
       ...state,
       tagFilter,
+      newCardInteractions: nextNewCardInteractions,
     };
   }),
   on(actions.metricsChangeTooltipSort, (state, {sort}) => {
@@ -1087,6 +1129,8 @@ const reducer = createReducer(
     let nextCardMetadataMap = {...state.cardMetadataMap};
     let nextCardStepIndexMap = {...state.cardStepIndex};
     let nextCardStateMap = {...state.cardStateMap};
+    const nextNewCardInteractions = {...state.newCardInteractions};
+    const nextPreviousCardInteractions = {...state.previousCardInteractions};
 
     if (isPinnedCopy) {
       const originalCardId = state.pinnedCardToOriginal.get(cardId);
@@ -1096,6 +1140,13 @@ const reducer = createReducer(
       delete nextCardMetadataMap[cardId];
       delete nextCardStepIndexMap[cardId];
       delete nextCardStateMap[cardId];
+      nextNewCardInteractions.pins = nextNewCardInteractions.pins.filter(
+        (cardMetadata) => originalCardId !== cardMetadata.cardId
+      );
+      nextPreviousCardInteractions.pins =
+        nextPreviousCardInteractions.pins.filter(
+          (cardMetadata) => originalCardId !== cardMetadata.cardId
+        );
     } else {
       if (shouldPin) {
         const resolvedResult = buildOrReturnStateWithPinnedCopy(
@@ -1113,6 +1164,16 @@ const reducer = createReducer(
         nextCardMetadataMap = resolvedResult.cardMetadataMap;
         nextCardStepIndexMap = resolvedResult.cardStepIndex;
         nextCardStateMap = resolvedResult.cardStateMap;
+        if (
+          !nextNewCardInteractions.pins.find(
+            (metadata) => cardId === metadata.cardId
+          )
+        ) {
+          nextNewCardInteractions.pins = [
+            ...nextNewCardInteractions.pins,
+            {...nextCardMetadataMap[cardId], cardId},
+          ];
+        }
       } else {
         const pinnedCardId = state.cardToPinnedCopy.get(cardId)!;
         nextCardToPinnedCopy.delete(cardId);
@@ -1131,6 +1192,8 @@ const reducer = createReducer(
       cardToPinnedCopy: nextCardToPinnedCopy,
       cardToPinnedCopyCache: nextCardToPinnedCopyCache,
       pinnedCardToOriginal: nextPinnedCardToOriginal,
+      newCardInteractions: nextNewCardInteractions,
+      previousCardInteractions: nextPreviousCardInteractions,
     };
   }),
   on(actions.linkedTimeToggled, (state) => {
@@ -1468,6 +1531,31 @@ const reducer = createReducer(
   }),
   on(actions.metricsSlideoutMenuClosed, (state) => {
     return {...state, isSlideoutMenuOpen: false};
+  }),
+  on(
+    actions.metricsPreviousCardInteractionsChanged,
+    (state, {cardInteractions}) => {
+      return {...state, previousCardInteractions: cardInteractions};
+    }
+  ),
+  on(actions.metricsCardClicked, (state, {cardId}) => {
+    const nextClicksIds = state.newCardInteractions.clicks
+      .map(({cardId}) => cardId)
+      .filter((id) => id !== cardId)
+      .concat(cardId);
+
+    const nextNewCardInteractions = {
+      ...state.newCardInteractions,
+      clicks: Array.from(nextClicksIds).map((cardId) => ({
+        ...state.cardMetadataMap[cardId],
+        cardId,
+      })),
+    };
+
+    return {
+      ...state,
+      newCardInteractions: nextNewCardInteractions,
+    };
   })
 );
 

tensorboard/webapp/metrics/store/metrics_reducers_test.ts

@@ -28,6 +28,7 @@ import {
   TagMetadata as DataSourceTagMetadata,
 } from '../data_source';
 import {
+  appStateFromMetricsState,
   buildDataSourceTagMetadata,
   buildMetricsSettingsState,
   buildMetricsState,
@@ -44,8 +45,6 @@ import {
   CardId,
   CardMetadata,
   HistogramMode,
-  MinMaxStep,
-  NonPinnedCardId,
   TooltipSort,
   XAxisType,
 } from '../types';
@@ -2884,6 +2883,23 @@ describe('metrics reducers', () => {
         cardToPinnedCopyCache: new Map([['card1', expectedPinnedCopyId]]),
         pinnedCardToOriginal: new Map([[expectedPinnedCopyId, 'card1']]),
         timeSeriesData,
+        newCardInteractions: {
+          pins: [
+            {
+              cardId: 'card1',
+              plugin: PluginType.SCALARS,
+              runId: null,
+              tag: 'tagA',
+            },
+          ],
+          clicks: [],
+          tagFilters: [],
+        },
+        previousCardInteractions: {
+          pins: [],
+          clicks: [],
+          tagFilters: [],
+        },
       });
       expect(nextState).toEqual(expectedState);
     });
@@ -2923,6 +2939,53 @@ describe('metrics reducers', () => {
         return reducers(beforeState, action);
       }).toThrow();
     });
+
+    it('adds an entry to newCardInteractions', () => {
+      const state = buildMetricsState({
+        cardMetadataMap: {
+          card1: {
+            tag: 'foo',
+            runId: null,
+            plugin: PluginType.SCALARS,
+          },
+        },
+      });
+      const state2 = reducers(
+        state,
+        actions.cardPinStateToggled({
+          cardId: 'card1',
+          wasPinned: false,
+          canCreateNewPins: true,
+        })
+      );
+
+      expect(state2.newCardInteractions.pins).toEqual([
+        {
+          cardId: 'card1',
+          plugin: PluginType.SCALARS,
+          runId: null,
+          tag: 'foo',
+        },
+      ]);
+
+      const state3 = reducers(
+        state2,
+        actions.cardPinStateToggled({
+          cardId: 'card1',
+          wasPinned: false,
+          canCreateNewPins: true,
+        })
+      );
+
+      expect(state3.newCardInteractions.pins).toEqual([
+        {
+          cardId: 'card1',
+          plugin: PluginType.SCALARS,
+          runId: null,
+          tag: 'foo',
+        },
+      ]);
+    });
   });
 
   describe('metricsCardStateUpdated', () => {
@@ -3027,6 +3090,20 @@ describe('metrics reducers', () => {
       const nextState = reducers(state, action);
       expect(nextState.tagFilter).toBe('foobar');
     });
+
+    it('adds entry to newCardInteractions', () => {
+      const state = buildMetricsState({});
+      const state2 = reducers(
+        state,
+        actions.metricsTagFilterChanged({tagFilter: 'foo'})
+      );
+      expect(state2.newCardInteractions.tagFilters).toEqual(['foo']);
+      const state3 = reducers(
+        state2,
+        actions.metricsTagFilterChanged({tagFilter: 'foo'})
+      );
+      expect(state3.newCardInteractions.tagFilters).toEqual(['foo']);
+    });
   });
 
   describe('metricsTagGroupExpansionChanged', () => {
@@ -4702,4 +4779,129 @@ describe('metrics reducers', () => {
       });
     });
   });
+
+  describe('#metricsPreviousCardInteractionsChanged', () => {
+    it('sets previousCardInteractions', () => {
+      const cardInteractions = {
+        pins: [
+          {
+            cardId: 'card1',
+            runId: null,
+            plugin: PluginType.SCALARS,
+            tag: 'bar',
+          },
+        ],
+        clicks: [
+          {
+            cardId: 'card2',
+            runId: null,
+            plugin: PluginType.SCALARS,
+            tag: 'baz',
+          },
+        ],
+        tagFilters: ['foo'],
+      };
+      const state = buildMetricsState({});
+      const state2 = reducers(
+        state,
+        actions.metricsPreviousCardInteractionsChanged({
+          cardInteractions,
+        })
+      );
+
+      expect(state2.previousCardInteractions).toEqual(cardInteractions);
+    });
+  });
+
+  describe('#metricsCardClicked', () => {
+    it('adds entry to newCardInteractions', () => {
+      const state = buildMetricsState({
+        cardMetadataMap: {
+          card1: {
+            plugin: PluginType.SCALARS,
+            tag: 'foo',
+            runId: null,
+          },
+          card2: {
+            plugin: PluginType.SCALARS,
+            tag: 'foo',
+            runId: null,
+          },
+        },
+      });
+      const state2 = reducers(
+        state,
+        actions.metricsCardClicked({cardId: 'card1'})
+      );
+      expect(state2.newCardInteractions.clicks).toEqual([
+        {
+          cardId: 'card1',
+          plugin: PluginType.SCALARS,
+          tag: 'foo',
+          runId: null,
+        },
+      ]);
+      const state3 = reducers(
+        state2,
+        actions.metricsCardClicked({cardId: 'card2'})
+      );
+      expect(state3.newCardInteractions.clicks).toEqual([
+        {
+          cardId: 'card1',
+          plugin: PluginType.SCALARS,
+          tag: 'foo',
+          runId: null,
+        },
+        {
+          cardId: 'card2',
+          plugin: PluginType.SCALARS,
+          tag: 'foo',
+          runId: null,
+        },
+      ]);
+    });
+
+    it('cannot add duplicate entries to newCardInteractions', () => {
+      const state = buildMetricsState({
+        cardMetadataMap: {
+          card1: {
+            plugin: PluginType.SCALARS,
+            tag: 'foo',
+            runId: null,
+          },
+          card2: {
+            plugin: PluginType.SCALARS,
+            tag: 'foo',
+            runId: null,
+          },
+        },
+      });
+      const state2 = reducers(
+        state,
+        actions.metricsCardClicked({cardId: 'card1'})
+      );
+      const state3 = reducers(
+        state2,
+        actions.metricsCardClicked({cardId: 'card2'})
+      );
+      const state4 = reducers(
+        state3,
+        actions.metricsCardClicked({cardId: 'card1'})
+      );
+      expect(state4.newCardInteractions.clicks).toEqual([
+        {
+          cardId: 'card2',
+          plugin: PluginType.SCALARS,
+          tag: 'foo',
+          runId: null,
+        },
+        {
+          cardId: 'card1',
+          plugin: PluginType.SCALARS,
+          tag: 'foo',
+          runId: null,
+        },
+      ]);
+    });
+  });
 });

tensorboard/webapp/metrics/store/metrics_selectors.ts

@@ -46,6 +46,7 @@ import {
   METRICS_FEATURE_KEY,
   RunToSeries,
   TagMetadata,
+  CardInteractions,
 } from './metrics_types';
 import {ColumnHeader, DataTableMode} from '../../widgets/data_table/types';
 import {Extent} from '../../widgets/line_chart_v2/lib/public_types';
@@ -130,7 +131,7 @@ export const getCardTimeSeries = createSelector(
   }
 );
 
-const getCardMetadataMap = createSelector(
+export const getCardMetadataMap = createSelector(
   selectMetricsState,
   (state: MetricsState): CardMetadataMap => {
     return state.cardMetadataMap;
@@ -254,6 +255,76 @@ export const getPinnedCardsWithMetadata = createSelector(
   }
 );
 
+export const getNewCardInteractions = createSelector(
+  selectMetricsState,
+  (state): CardInteractions => {
+    return state.newCardInteractions;
+  }
+);
+
+export const getPreviousCardInteractions = createSelector(
+  selectMetricsState,
+  (state): CardInteractions => {
+    return state.previousCardInteractions;
+  }
+);
+
+const getSuggestedCardIds = createSelector(
+  getPreviousCardInteractions,
+  getCardToPinnedCopy,
+  getCardMetadataMap,
+  (cardInteractions, cardToPinnedCopy, cardMetadataMap): NonPinnedCardId[] => {
+    const previousPins = cardInteractions.pins
+      .map(({cardId}) => cardId)
+      .filter((cardId) => cardMetadataMap[cardId])
+      .reverse();
+
+    const previousTagSearches = cardInteractions.tagFilters
+      .map((tagFilter) => {
+        return Object.entries(cardMetadataMap)
+          .filter(([, metadata]) => {
+            return metadata.tag.match(tagFilter);
+          })
+          .map(([cardId]) => cardId);
+      })
+      .flat()
+      .filter(Boolean)
+      .slice(-3)
+      .reverse();
+
+    const previouslyClickedCards = cardInteractions.clicks
+      .map(({cardId}) => cardId)
+      .filter((cardId) => cardMetadataMap[cardId])
+      .slice(-3)
+      .reverse();
+
+    return Array.from(
+      new Set([
+        ...previousPins,
+        ...previousTagSearches,
+        ...previouslyClickedCards,
+      ])
+    )
+      .filter((cardId) => !cardToPinnedCopy.get(cardId))
+      .slice(0, 10);
+  }
+);
+
+/**
+ * Returns an ordered list of cards that a user may be interested in.
+ */
+export const getSuggestedCardsWithMetadata = createSelector(
+  getSuggestedCardIds,
+  getCardMetadataMap,
+  (getSuggestedCardIds, metadataMap): DeepReadonly<CardIdWithMetadata[]> => {
+    return getSuggestedCardIds
+      .filter((cardId) => metadataMap.hasOwnProperty(cardId))
+      .map((cardId) => {
+        return {cardId, ...metadataMap[cardId]};
+      });
+  }
+);
+
 /**
  * Returns true if a card is pinned or a separate card exists that is a pinned
  * copy of this card. Defaults to false if the card is unknown.

tensorboard/webapp/metrics/store/metrics_selectors_test.ts

@@ -25,7 +25,12 @@ import {
   createScalarStepData,
   createTimeSeriesData,
 } from '../testing';
-import {HistogramMode, TooltipSort, XAxisType} from '../types';
+import {
+  CardIdWithMetadata,
+  HistogramMode,
+  TooltipSort,
+  XAxisType,
+} from '../types';
 import {
   ColumnHeader,
   ColumnHeaderType,
@@ -1004,6 +1009,87 @@ describe('metrics selectors', () => {
     });
   });
 
+  describe('getSuggestedCardsWithMetadata', () => {
+    let mockCards: CardIdWithMetadata[];
+    let cardMetadataMap: Record<string, CardIdWithMetadata>;
+
+    beforeEach(() => {
+      mockCards = Array.from({length: 15}).map((_, index) => ({
+        cardId: `card${index}`,
+        tag: 'a',
+        runId: null,
+        plugin: PluginType.SCALARS,
+      }));
+
+      cardMetadataMap = mockCards.reduce((map, card) => {
+        map[card.cardId] = card;
+        return map;
+      }, {} as Record<string, CardIdWithMetadata>);
+    });
+
+    it('does not return more than 3 cards based on previous tag searches', () => {
+      const state = appStateFromMetricsState(
+        buildMetricsState({
+          cardMetadataMap,
+          previousCardInteractions: {
+            pins: [],
+            clicks: [],
+            tagFilters: ['a'],
+          },
+        })
+      );
+      expect(selectors.getSuggestedCardsWithMetadata(state)).toEqual([
+        mockCards[14],
+        mockCards[13],
+        mockCards[12],
+      ]);
+    });
+
+    it('does not return more than 3 previously clicked cards', () => {
+      const state = appStateFromMetricsState(
+        buildMetricsState({
+          cardMetadataMap,
+          previousCardInteractions: {
+            pins: [],
+            clicks: mockCards,
+            tagFilters: [],
+          },
+        })
+      );
+      expect(selectors.getSuggestedCardsWithMetadata(state)).toEqual([
+        mockCards[14],
+        mockCards[13],
+        mockCards[12],
+      ]);
+    });
+
+    it('never returns more than 10 cards', () => {
+      const state = appStateFromMetricsState(
+        buildMetricsState({
+          cardMetadataMap,
+          previousCardInteractions: {
+            pins: mockCards.slice(0, 5),
+            clicks: mockCards.slice(5, 10),
+            tagFilters: ['a'],
+          },
+        })
+      );
+
+      expect(selectors.getSuggestedCardsWithMetadata(state)).toEqual([
+        mockCards[4],
+        mockCards[3],
+        mockCards[2],
+        mockCards[1],
+        mockCards[0],
+        mockCards[14],
+        mockCards[13],
+        mockCards[12],
+        mockCards[9],
+        mockCards[8],
+      ]);
+    });
+  });
+
   describe('getCardPinnedState', () => {
     it('returns false if no card exists', () => {
       selectors.getCardPinnedState.release();

tensorboard/webapp/metrics/store/metrics_types.ts

@@ -27,6 +27,7 @@ import {
 } from '../data_source';
 import {
   CardId,
+  CardIdWithMetadata,
   CardMetadata,
   CardUniqueInfo,
   HistogramMode,
@@ -166,6 +167,12 @@ export type CardStepIndexMap = Record<
   CardStepIndexMetaData | null
 >;
 
+export type CardInteractions = {
+  tagFilters: string[];
+  pins: CardIdWithMetadata[];
+  clicks: CardIdWithMetadata[];
+};
+
 export type CardToPinnedCard = Map<NonPinnedCardId, PinnedCardId>;
 
 export type PinnedCardToCard = Map<PinnedCardId, NonPinnedCardId>;
@@ -254,6 +261,8 @@ export interface MetricsNonNamespacedState {
    * Map from ElementId to CardId. Only contains all visible cards.
    */
   visibleCardMap: Map<ElementId, CardId>;
+  previousCardInteractions: CardInteractions;
+  newCardInteractions: CardInteractions;
 }
 
 export type MetricsState = NamespaceContextedState<

tensorboard/webapp/metrics/testing.ts

@@ -112,6 +112,16 @@ function buildBlankState(): MetricsState {
     isSettingsPaneOpen: false,
     isSlideoutMenuOpen: false,
     tableEditorSelectedTab: DataTableMode.SINGLE,
+    newCardInteractions: {
+      pins: [],
+      clicks: [],
+      tagFilters: [],
+    },
+    previousCardInteractions: {
+      pins: [],
+      clicks: [],
+      tagFilters: [],
+    },
   };
 }