Suggested Cards: Create data source for persisting card interactions …

…to localStorage (#6439)

## Motivation for features / changes
We are working on a feature to suggest cards to users at the top of the
timeseries dashboard. Suggestions are generated based on previous
interactions with TensorBoard. In order to determine what those previous
interactions were we are storing them to localStorage.
See #6437 for more information.
Googlers see [go/tb-suggested-cards](go/tb-suggested-cards)

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,21 @@
+/* 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({
+  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/store/metrics_reducers.ts

@@ -453,6 +453,16 @@ const {initialState, reducers: namespaceContextedReducer} =
       settings: METRICS_SETTINGS_DEFAULT,
       settingOverrides: {},
       visibleCardMap: new Map<ElementId, CardId>(),
+      previousCardInteractions: {
+        tagFilters: [],
+        pins: [],
+        clicks: [],
+      },
+      newCardInteractions: {
+        tagFilters: [],
+        pins: [],
+        clicks: [],
+      },
     },
 
     /** onNavigated */

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,
+    previousCardInteractions: {
+      tagFilters: [],
+      pins: [],
+      clicks: [],
+    },
+    newCardInteractions: {
+      tagFilters: [],
+      pins: [],
+      clicks: [],
+    },
   };
 }