bug: fix AppRouting interference with URL queryParam-reading components

tensorboard/components/tf_backend/router.ts

@@ -29,6 +29,12 @@ export interface Router {
   runs: () => string;
   runsForExperiment: (id: ExperimentId) => string;
 }
+
+/**
+ * Save the initial URL query params, before the AppRoutingEffects initialize,
+ * and before creating the router.
+ */
+const initialURLSearchParams = new URLSearchParams(window.location.search);
 let _router: Router = createRouter();
 
 /**
@@ -39,7 +45,7 @@ let _router: Router = createRouter();
  */
 export function createRouter(
   dataDir = 'data',
-  urlSearchParams = new URLSearchParams(window.location.search)
+  urlSearchParams = initialURLSearchParams
 ): Router {
   if (dataDir[dataDir.length - 1] === '/') {
     dataDir = dataDir.slice(0, dataDir.length - 1);

tensorboard/plugins/projector/vz_projector/vz-projector.ts

@@ -70,6 +70,11 @@ const THRESHOLD_DIM_NORMALIZE = 50;
 const POINT_COLOR_MISSING = 'black';
 const INDEX_METADATA_FIELD = '__index__';
 
+/**
+ * Save the initial URL query params, before the AppRoutingEffects initialize.
+ */
+const initialURLQueryString = window.location.search;
+
 @customElement('vz-projector')
 class Projector
   extends LegacyElementMixin(PolymerElement)
@@ -440,7 +445,7 @@ class Projector
     if (this.servingMode === 'demo') {
       let projectorConfigUrl: string;
       // Only in demo mode do we allow the config being passed via URL.
-      let urlParams = util.getURLParams(window.location.search);
+      let urlParams = util.getURLParams(initialURLQueryString);
       if ('config' in urlParams) {
         projectorConfigUrl = urlParams['config'];
       } else {

tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.ts

@@ -30,6 +30,11 @@ import {DEFAULT_TOOLTIP_COLUMNS} from '../../../components/vz_line_chart2/vz-lin
 
 type RunTagItem = {run: string; tag: string};
 
+/**
+ * Save the initial URL query params, before the AppRoutingEffects initialize.
+ */
+const initialURLSearchParams = new URLSearchParams(window.location.search);
+
 /**
  * A card that handles loading data (at the right times), rendering a scalar
  * chart, and providing UI affordances (such as buttons) for scalar data.
@@ -265,9 +270,7 @@ export class TfScalarCard extends PolymerElement {
     onLoad,
     onFinish
   ) => {
-    const inColab =
-      new URLSearchParams(window.location.search).get('tensorboardColab') ===
-      'true';
+    const inColab = initialURLSearchParams.get('tensorboardColab') === 'true';
     if (inColab) {
       // Google-internal Colab doesn't support HTTP POST requests, so we fall
       // back to HTTP GET (even though public Colab supports POST).

tensorboard/webapp/webapp_data_source/tb_feature_flag_data_source.ts

@@ -16,9 +16,14 @@ import {Injectable} from '@angular/core';
 
 import {TBFeatureFlagDataSource} from './tb_feature_flag_data_source_types';
 
+/**
+ * Save the initial URL query params, before the AppRoutingEffects initialize.
+ */
+const initialURLSearchParams = new URLSearchParams(window.location.search);
+
 const util = {
   getParams() {
-    return new URLSearchParams(window.location.search);
+    return initialURLSearchParams;
   },
 };