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",