frontend: use experiment ID from path, not query (#2736)

Summary:
This commit changes the frontend experiment ID plumbing from using the
query string to using a path component: experiment URLs are now of the
form `http://localhost:6006/experiment/123/`. This supersedes the
short-term changes from #2580, #2613, and #2627.

Test Plan:
Apply the below patch to the multiplexer data provider, then launch
TensorBoard with `--generic_data=true` and verify that the correct
experiment ID is printed for each call, at `/` and at `/experiment/123`.
Verify also that no request has an `experiment` query parameter. Patch:

```diff
diff --git a/tensorboard/backend/event_processing/data_provider.py b/tensorboard/backend/event_processing/data_provider.py
index 0b354aa..1c00b930 100644
--- a/tensorboard/backend/event_processing/data_provider.py
+++ b/tensorboard/backend/event_processing/data_provider.py
@@ -59,2 +59,3 @@ class MultiplexerDataProvider(provider.DataProvider):
   def data_location(self, experiment_id):
+    logger.warn("data_location(%r)", experiment_id)
     del experiment_id   # ignored
@@ -63,2 +64,3 @@ class MultiplexerDataProvider(provider.DataProvider):
   def list_runs(self, experiment_id):
+    logger.warn("list_runs(%r)", experiment_id)
     del experiment_id  # ignored for now
@@ -74,2 +76,3 @@ class MultiplexerDataProvider(provider.DataProvider):
   def list_scalars(self, experiment_id, plugin_name, run_tag_filter=None):
+    logger.warn("list_scalars(%r, ...)", experiment_id)
     del experiment_id  # ignored for now
@@ -105,2 +108,3 @@ class MultiplexerDataProvider(provider.DataProvider):
   ):
+    logger.warn("read_scalars(%r, ...)", experiment_id)
     # TODO(@wchargin): Downsampling not implemented, as the multiplexer
```

wchargin-branch: eid-frontend

Author: wchargin

tensorboard/components/tf_backend/environmentStore.ts

@@ -22,9 +22,7 @@ namespace tf_backend {
     private environment: Environment;
 
     load() {
-      const url = tf_backend
-        .getRouter()
-        .environment(tf_backend.getExperimentId());
+      const url = tf_backend.getRouter().environment();
       return this.requestManager.request(url).then((result) => {
         const environment = {
           dataLocation: result.data_location,

tensorboard/components/tf_backend/router.ts

@@ -14,15 +14,15 @@ limitations under the License.
 ==============================================================================*/
 namespace tf_backend {
   export interface Router {
-    environment: (experiment?: string) => string;
+    environment: () => string;
     experiments: () => string;
     pluginRoute: (
       pluginName: string,
       route: string,
       params?: URLSearchParams
     ) => string;
     pluginsListing: () => string;
-    runs: (experiment?: string) => string;
+    runs: () => string;
     runsForExperiment: (id: tf_backend.ExperimentId) => string;
   }
 
@@ -39,11 +39,7 @@ namespace tf_backend {
       dataDir = dataDir.slice(0, dataDir.length - 1);
     }
     return {
-      environment: (experiment?: string) => {
-        const searchParams = new URLSearchParams();
-        searchParams.set('experiment', experiment || '');
-        return createDataPath(dataDir, '/environment', searchParams);
-      },
+      environment: () => createDataPath(dataDir, '/environment'),
       experiments: () => createDataPath(dataDir, '/experiments'),
       pluginRoute: (
         pluginName: string,
@@ -57,11 +53,7 @@ namespace tf_backend {
         );
       },
       pluginsListing: () => createDataPath(dataDir, '/plugins_listing'),
-      runs: (experiment?: string) => {
-        const searchParams = new URLSearchParams();
-        searchParams.set('experiment', experiment || '');
-        return createDataPath(dataDir, '/runs', searchParams);
-      },
+      runs: () => createDataPath(dataDir, '/runs'),
       runsForExperiment: (id) => {
         return createDataPath(
           dataDir,
@@ -79,13 +71,6 @@ namespace tf_backend {
     return _router;
   }
 
-  /**
-   * @return {string} the experiment ID for the currently loaded page
-   */
-  export function getExperimentId() {
-    return new URLSearchParams(window.location.search).get('experiment') || '';
-  }
-
   /**
    * Set the global router, to be returned by future calls to `getRouter`.
    * You may wish to invoke this if you are running a demo server with a

tensorboard/components/tf_backend/runsStore.ts

@@ -17,7 +17,7 @@ namespace tf_backend {
     private _runs: string[] = [];
 
     load() {
-      const url = tf_backend.getRouter().runs(tf_backend.getExperimentId());
+      const url = tf_backend.getRouter().runs();
       return this.requestManager.request(url).then((newRuns) => {
         if (!_.isEqual(this._runs, newRuns)) {
           this._runs = newRuns;

tensorboard/components/tf_backend/test/backendTests.ts

@@ -82,22 +82,22 @@ namespace tf_backend {
 
         it('leading slash in pathPrefix is an absolute path', () => {
           const router = createRouter('/data/');
-          assert.equal(router.runs(), '/data/runs?experiment=');
+          assert.equal(router.runs(), '/data/runs');
         });
 
         it('returns complete pathname when pathPrefix omits slash', () => {
           const router = createRouter('data/');
-          assert.equal(router.runs(), 'data/runs?experiment=');
+          assert.equal(router.runs(), 'data/runs');
         });
 
         it('does not prune many leading slashes that forms full url', () => {
           const router = createRouter('///data/hello');
-          // This becomes 'http://data/hello/runs?experiment='
-          assert.equal(router.runs(), '///data/hello/runs?experiment=');
+          // This becomes 'http://data/hello/runs'
+          assert.equal(router.runs(), '///data/hello/runs');
         });
 
         it('returns correct value for #environment', () => {
-          assert.equal(router.environment(), 'data/environment?experiment=');
+          assert.equal(router.environment(), 'data/environment');
         });
 
         it('returns correct value for #experiments', () => {
@@ -177,7 +177,7 @@ namespace tf_backend {
         });
 
         it('returns correct value for #runs', () => {
-          assert.equal(router.runs(), 'data/runs?experiment=');
+          assert.equal(router.runs(), 'data/runs');
         });
 
         it('returns correct value for #runsForExperiment', () => {

tensorboard/plugins/core/BUILD

@@ -16,6 +16,7 @@ py_library(
     srcs_version = "PY2AND3",
     visibility = ["//visibility:public"],
     deps = [
+        "//tensorboard:plugin_util",
         "//tensorboard/backend:http_util",
         "//tensorboard/plugins:base_plugin",
         "//tensorboard/util:tb_logging",

tensorboard/plugins/core/core_plugin.py

@@ -30,6 +30,7 @@
 from werkzeug import utils
 from werkzeug import wrappers
 
+from tensorboard import plugin_util
 from tensorboard.backend import http_util
 from tensorboard.plugins import base_plugin
 from tensorboard.util import tb_logging
@@ -122,7 +123,7 @@ def _serve_environment(self, request):
     * window_title is the title of the TensorBoard web page.
     """
     if self._data_provider:
-      experiment = request.args.get('experiment', '')
+      experiment = plugin_util.experiment_id(request.environ)
       data_location = self._data_provider.data_location(experiment)
     else:
       data_location = self._logdir or self._db_uri
@@ -159,7 +160,7 @@ def _serve_runs(self, request):
     last, and then ties are broken by sorting on the run name.
     """
     if self._data_provider:
-      experiment = request.args.get('experiment', '')
+      experiment = plugin_util.experiment_id(request.environ)
       runs = sorted(
           self._data_provider.list_runs(experiment_id=experiment),
           key=lambda run: (
@@ -235,7 +236,7 @@ def _serve_experiment_runs(self, request):
     """
     results = []
     if self._db_connection_provider:
-      exp_id = request.args.get('experiment')
+      exp_id = plugin_util.experiment_id(request.environ)
       runs_dict = collections.OrderedDict()
 
       db = self._db_connection_provider()

tensorboard/plugins/core/core_plugin_test.py

@@ -189,7 +189,7 @@ def testExperimentRuns(self):
     [exp1, exp2] = self._get_json(self.db_based_server, '/data/experiments')
 
     exp1_runs = self._get_json(self.db_based_server,
-        '/data/experiment_runs?experiment=%s' % exp1.get('id'))
+        '/experiment/%s/data/experiment_runs' % exp1.get('id'))
     self.assertEqual(len(exp1_runs), 2);
     self.assertEqual(exp1_runs[0].get('name'), 'run1');
     self.assertEqual(exp1_runs[1].get('name'), 'run2');
@@ -199,7 +199,7 @@ def testExperimentRuns(self):
     self.assertEqual(exp1_runs[1].get('tags')[0].get('name'), 'mytag');
 
     exp2_runs = self._get_json(self.db_based_server,
-        '/data/experiment_runs?experiment=%s' % exp2.get('id'))
+        '/experiment/%s/data/experiment_runs' % exp2.get('id'))
     self.assertEqual(len(exp2_runs), 1);
     self.assertEqual(exp2_runs[0].get('name'), 'run3');
 

tensorboard/plugins/scalar/scalars_plugin.py

@@ -235,7 +235,7 @@ def _get_value(self, scalar_data_blob, dtype_enum):
 
   @wrappers.Request.application
   def tags_route(self, request):
-    experiment = request.args.get('experiment', '')
+    experiment = plugin_util.experiment_id(request.environ)
     index = self.index_impl(experiment=experiment)
     return http_util.Respond(request, index, 'application/json')
 
@@ -244,7 +244,7 @@ def scalars_route(self, request):
     """Given a tag and single run, return array of ScalarEvents."""
     tag = request.args.get('tag')
     run = request.args.get('run')
-    experiment = request.args.get('experiment', '')
+    experiment = plugin_util.experiment_id(request.environ)
     output_format = request.args.get('format')
     (body, mime_type) = self.scalars_impl(tag, run, experiment, output_format)
     return http_util.Respond(request, body, mime_type)

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

@@ -234,16 +234,14 @@
         getDataLoadUrl: {
           type: Function,
           value: function() {
-            return ({tag, run, experiment}) => {
-              return tf_backend.getRouter().pluginRoute(
-                'scalars',
-                '/scalars',
-                new URLSearchParams({
-                  tag,
-                  run,
-                  experiment: experiment || '',
-                })
-              );
+            return ({tag, run}) => {
+              return tf_backend
+                .getRouter()
+                .pluginRoute(
+                  'scalars',
+                  '/scalars',
+                  new URLSearchParams({tag, run})
+                );
             };
           },
         },
@@ -252,12 +250,7 @@
         _downloadUrlFn: {
           type: Function,
           value: function() {
-            return (tag, run) =>
-              this.getDataLoadUrl({
-                tag,
-                run,
-                experiment: tf_backend.getExperimentId(),
-              });
+            return (tag, run) => this.getDataLoadUrl({tag, run});
           },
         },
 

tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html

@@ -309,13 +309,7 @@ <h3>No scalar data was found.</h3>
         });
       },
       _fetchTags() {
-        const url = tf_backend
-          .getRouter()
-          .pluginRoute(
-            'scalars',
-            '/tags',
-            new URLSearchParams({experiment: tf_backend.getExperimentId()})
-          );
+        const url = tf_backend.getRouter().pluginRoute('scalars', '/tags');
         return this._requestManager.request(url).then((runToTagInfo) => {
           if (_.isEqual(runToTagInfo, this._runToTagInfo)) {
             // No need to update anything if there are no changes.
@@ -351,11 +345,10 @@ <h3>No scalar data was found.</h3>
           selectedRuns,
           query
         );
-        const experiment = tf_backend.getExperimentId();
         categories.forEach((category) => {
           category.items = category.items.map((item) => ({
             tag: item.tag,
-            series: item.runs.map((run) => ({run, tag: item.tag, experiment})),
+            series: item.runs.map((run) => ({run, tag: item.tag})),
           }));
         });
         this.updateArrayProp('_categories', categories, this._getCategoryKey);