feat: persist pinned cards in URL with DeepLinkProvider

tensorboard/webapp/BUILD

@@ -259,6 +259,7 @@ tf_ng_web_test_suite(
         "//tensorboard/webapp/plugins/text_v2/effects:effects_test_lib",
         "//tensorboard/webapp/plugins/text_v2/store:store_test_lib",
         "//tensorboard/webapp/reloader:test_lib",
+        "//tensorboard/webapp/routes:routes_test_lib",
         "//tensorboard/webapp/runs/data_source:runs_data_source_test",
         "//tensorboard/webapp/runs/effects:effects_test",
         "//tensorboard/webapp/runs/store:store_test",

tensorboard/webapp/metrics/store/metrics_selectors.ts

@@ -20,6 +20,7 @@ import {DeepReadonly} from '../../util/types';
 import {
   CardId,
   CardIdWithMetadata,
+  CardUniqueInfo,
   CardMetadata,
   HistogramMode,
   NonPinnedCardId,
@@ -238,6 +239,13 @@ export const getCardPinnedState = createSelector(
   }
 );
 
+export const getUnresolvedImportedPinnedCards = createSelector(
+  selectMetricsState,
+  (state: MetricsState): CardUniqueInfo[] => {
+    return state.unresolvedImportedPinnedCards;
+  }
+);
+
 /**
  * Settings.
  */

tensorboard/webapp/metrics/store/metrics_selectors_test.ts

@@ -512,6 +512,35 @@ describe('metrics selectors', () => {
     });
   });
 
+  describe('getUnresolvedImportedPinnedCards', () => {
+    it('returns unresolved imported pinned cards', () => {
+      selectors.getUnresolvedImportedPinnedCards.release();
+
+      const state = appStateFromMetricsState(
+        buildMetricsState({
+          unresolvedImportedPinnedCards: [
+            {plugin: PluginType.SCALARS, tag: 'accuracy'},
+            {
+              plugin: PluginType.IMAGES,
+              tag: 'output',
+              runId: 'exp1/run1',
+              sample: 5,
+            },
+          ],
+        })
+      );
+      expect(selectors.getUnresolvedImportedPinnedCards(state)).toEqual([
+        {plugin: PluginType.SCALARS, tag: 'accuracy'},
+        {
+          plugin: PluginType.IMAGES,
+          tag: 'output',
+          runId: 'exp1/run1',
+          sample: 5,
+        },
+      ]);
+    });
+  });
+
   describe('settings', () => {
     it('returns tooltipSort when called getMetricsTooltipSort', () => {
       selectors.getMetricsTooltipSort.release();

tensorboard/webapp/routes/BUILD

@@ -10,9 +10,53 @@ tf_ts_library(
         "index.ts",
     ],
     deps = [
+        ":core_deeplink_provider",
         "//tensorboard/webapp/app_routing:route_config",
         "//tensorboard/webapp/app_routing:types",
         "//tensorboard/webapp/tb_wrapper",
         "@npm//@angular/core",
     ],
 )
+
+tf_ts_library(
+    name = "core_deeplink_provider",
+    srcs = [
+        "core_deeplink_provider.ts",
+    ],
+    deps = [
+        "//tensorboard/webapp:app_state",
+        "//tensorboard/webapp:selectors",
+        "//tensorboard/webapp/app_routing:deep_link_provider",
+        "//tensorboard/webapp/app_routing:route_config",
+        "//tensorboard/webapp/app_routing:types",
+        "//tensorboard/webapp/metrics:types",
+        "//tensorboard/webapp/metrics/data_source:types",
+        "//tensorboard/webapp/tb_wrapper",
+        "@npm//@angular/core",
+        "@npm//@ngrx/store",
+        "@npm//rxjs",
+    ],
+)
+
+tf_ts_library(
+    name = "routes_test_lib",
+    testonly = True,
+    srcs = [
+        "core_deeplink_provider_test.ts",
+    ],
+    deps = [
+        ":core_deeplink_provider",
+        "//tensorboard/webapp:app_state",
+        "//tensorboard/webapp:selectors",
+        "//tensorboard/webapp/angular:expect_angular_core_testing",
+        "//tensorboard/webapp/angular:expect_ngrx_store_testing",
+        "//tensorboard/webapp/app_routing:deep_link_provider",
+        "//tensorboard/webapp/app_routing:types",
+        "//tensorboard/webapp/metrics:test_lib",
+        "//tensorboard/webapp/metrics/data_source:types",
+        "@npm//@angular/core",
+        "@npm//@ngrx/store",
+        "@npm//@types/jasmine",
+        "@npm//rxjs",
+    ],
+)

tensorboard/webapp/routes/core_deeplink_provider.ts

@@ -0,0 +1,171 @@
+/* Copyright 2020 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 {Store} from '@ngrx/store';
+import {DeepLinkProvider} from '../app_routing/deep_link_provider';
+import {SerializableQueryParams} from '../app_routing/types';
+import {
+  CardUniqueInfo,
+  URLDeserializedState as MetricsURLDeserializedState,
+} from '../metrics/types';
+import {
+  isSampledPlugin,
+  isSingleRunPlugin,
+  isPluginType,
+} from '../metrics/data_source/types';
+import {combineLatest, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+import {State} from '../app_state';
+import * as selectors from '../selectors';
+
+export type DeserializedState = MetricsURLDeserializedState;
+
+/**
+ * Provides deeplinking for the core dashboards page.
+ */
+@Injectable()
+export class CoreDeepLinkProvider extends DeepLinkProvider {
+  private getMetricsPinnedCards(
+    store: Store<State>
+  ): Observable<SerializableQueryParams> {
+    return combineLatest([
+      store.select(selectors.getPinnedCardsWithMetadata),
+      store.select(selectors.getUnresolvedImportedPinnedCards),
+    ]).pipe(
+      map(([pinnedCards, unresolvedImportedPinnedCards]) => {
+        if (!pinnedCards.length && !unresolvedImportedPinnedCards.length) {
+          return [];
+        }
+
+        const pinnedCardsToStore = pinnedCards.map(
+          ({plugin, tag, sample, runId}) => {
+            const info = {plugin, tag} as CardUniqueInfo;
+            if (isSingleRunPlugin(plugin)) {
+              info.runId = runId!;
+            }
+            if (isSampledPlugin(plugin)) {
+              info.sample = sample!;
+            }
+            return info;
+          }
+        );
+        // Intentionally order unresolved cards last, so that cards pinned by
+        // the user in this session have priority.
+        const cardsToStore = [
+          ...pinnedCardsToStore,
+          ...unresolvedImportedPinnedCards,
+        ];
+        return [{key: 'pinnedCards', value: JSON.stringify(cardsToStore)}];
+      })
+    );
+  }
+
+  serializeStateToQueryParams(
+    store: Store<State>
+  ): Observable<SerializableQueryParams> {
+    return this.getMetricsPinnedCards(store);
+  }
+
+  deserializeQueryParams(
+    queryParams: SerializableQueryParams
+  ): DeserializedState {
+    let pinnedCards = null;
+    for (const {key, value} of queryParams) {
+      if (key === 'pinnedCards') {
+        pinnedCards = extractPinnedCardsFromURLText(value);
+        break;
+      }
+    }
+    return {
+      metrics: {
+        pinnedCards: pinnedCards || [],
+      },
+    };
+  }
+}
+
+function extractPinnedCardsFromURLText(
+  urlText: string
+): CardUniqueInfo[] | null {
+  // Check that the URL text parses.
+  let object;
+  try {
+    object = JSON.parse(urlText) as unknown;
+  } catch {
+    return null;
+  }
+  if (!Array.isArray(object)) {
+    return null;
+  }
+
+  const result = [];
+  for (const item of object) {
+    // Validate types.
+    const isPluginString = typeof item.plugin === 'string';
+    const isRunString = typeof item.runId === 'string';
+    const isSampleNumber = typeof item.sample === 'number';
+    const isTagString = typeof item.tag === 'string';
+    const isRunTypeValid = isRunString || typeof item.runId === 'undefined';
+    const isSampleTypeValid =
+      isSampleNumber || typeof item.sample === 'undefined';
+    if (
+      !isPluginString ||
+      !isTagString ||
+      !isRunTypeValid ||
+      !isSampleTypeValid
+    ) {
+      continue;
+    }
+
+    // Required fields and range errors.
+    if (!isPluginType(item.plugin)) {
+      continue;
+    }
+    if (!item.tag) {
+      continue;
+    }
+    if (isSingleRunPlugin(item.plugin)) {
+      // A single run plugin must specify a non-empty run.
+      if (!item.runId) {
+        continue;
+      }
+    } else {
+      // A multi run plugin must not specify a run.
+      if (item.runId) {
+        continue;
+      }
+    }
+    if (isSampleNumber) {
+      if (!isSampledPlugin(item.plugin)) {
+        continue;
+      }
+      if (!Number.isInteger(item.sample) || item.sample < 0) {
+        continue;
+      }
+    }
+
+    // Assemble result.
+    const resultItem = {plugin: item.plugin, tag: item.tag} as CardUniqueInfo;
+    if (isRunString) {
+      resultItem.runId = item.runId;
+    }
+    if (isSampleNumber) {
+      resultItem.sample = item.sample;
+    }
+    result.push(resultItem);
+  }
+  return result;
+}