diff --git a/tensorboard/components/tf_backend/environmentStore.ts b/tensorboard/components/tf_backend/environmentStore.ts
index caf219241a..6798df5772 100644
--- a/tensorboard/components/tf_backend/environmentStore.ts
+++ b/tensorboard/components/tf_backend/environmentStore.ts
@@ -44,15 +44,15 @@ export class EnvironmentStore extends BaseStore {
   }
 
   public getDataLocation(): string {
-    return this.environment.dataLocation;
+    return this.environment ? this.environment.dataLocation : '';
   }
 
   public getMode(): Mode {
-    return this.environment.mode;
+    return this.environment ? this.environment.mode : null;
   }
 
   public getWindowTitle(): string {
-    return this.environment.windowTitle;
+    return this.environment ? this.environment.windowTitle : '';
   }
 }
 
diff --git a/tensorboard/components/tf_backend/router.ts b/tensorboard/components/tf_backend/router.ts
index a1a620b339..2f14631852 100644
--- a/tensorboard/components/tf_backend/router.ts
+++ b/tensorboard/components/tf_backend/router.ts
@@ -35,23 +35,30 @@ export function createRouter(dataDir = 'data', demoMode = false): Router {
   if (dataDir[dataDir.length - 1] === '/') {
     dataDir = dataDir.slice(0, dataDir.length - 1);
   }
-  function standardRoute(route: string, demoExtension = '.json'):
-      ((tag: string, run: string) => string) {
-    return function(tag: string, run: string): string {
-      return dataDir + '/' + addParams(route, {tag, run});
-    };
-  }
-  function pluginRoute(pluginName: string, route: string): string {
-    return `${dataDir}/plugin/${pluginName}${route}`;
-  }
+  const createPath = demoMode ? createDemoPath : createProdPath;
+  const ext = demoMode ? '.json' : '';
   return {
-    environment: () => dataDir + '/environment',
-    experiments: () => dataDir + '/experiments',
+    environment: () => createPath(dataDir, '/environment', ext),
+    experiments: () => createPath(dataDir, '/experiments', ext),
     isDemoMode: () => demoMode,
-    pluginRoute,
-    pluginsListing: () => dataDir + '/plugins_listing',
-    runs: () => dataDir + '/runs' + (demoMode ? '.json' : ''),
-    runsForExperiment: id => `${dataDir}/experiment_runs?experiment=${id}`,
+    pluginRoute: (pluginName: string, route: string,
+        params?: URLSearchParams, demoCustomExt = ext): string => {
+
+      return createPath(
+          demoMode ? dataDir : dataDir + '/plugin',
+          `/${pluginName}${route}`,
+          demoCustomExt,
+          params);
+    },
+    pluginsListing: () => createPath(dataDir, '/plugins_listing', ext),
+    runs: () => createPath(dataDir, '/runs', ext),
+    runsForExperiment: id => {
+      return createPath(
+          dataDir,
+          '/experiment_runs',
+          ext,
+          createSearchParam({experiment: String(id)}));
+    },
   };
 };
 
@@ -79,4 +86,52 @@ export function setRouter(router: Router): void {
   _router = router;
 }
 
+function createProdPath(pathPrefix: string, path: string,
+    ext: string, params?: URLSearchParams): string {
+
+  const url = new URL(`${window.location.origin}/${pathPrefix}${path}`);
+  if (params) url.search = params.toString();
+  return url.pathname + url.search;
+}
+
+/**
+ * Creates a URL for demo.
+ * e.g.,
+ * > createDemoPath('a', '/b', '.json', {a: 1})
+ * < '/a/b_a_1.json'
+ */
+function createDemoPath(pathPrefix: string, path: string,
+    ext: string, params?: URLSearchParams): string {
+
+  // First, parse the path in a safe manner by constructing a URL. We don't
+  // trust the path supplied by consumer.
+  const prefixLessUrl = new URL(`${window.location.origin}/${path}`);
+  let {pathname: normalizedPath} = prefixLessUrl;
+  const encodedQueryParam = params ?
+      params.toString().replace(/[&=%]/g, '_') : '';
+
+  // Strip leading slashes.
+  normalizedPath = normalizedPath.replace(/^\/+/g, '');
+  // Convert slashes to underscores.
+  normalizedPath = normalizedPath.replace(/\//g, '_');
+  // Add query parameter as path if it is present.
+  if (encodedQueryParam) normalizedPath += `_${encodedQueryParam}`;
+  const url = new URL(`${window.location.origin}`);
+
+  // All demo data are serialized in JSON format.
+  url.pathname = `${pathPrefix}/${normalizedPath}${ext}`;
+  return url.pathname + url.search;
+}
+
+export function createSearchParam(params: QueryParams = {}): URLSearchParams {
+  const keys = Object.keys(params).sort().filter(k => params[k]);
+  const searchParams = new URLSearchParams();
+  keys.forEach(key => {
+    const values = params[key];
+    const array = Array.isArray(values) ? values : [values];
+    array.forEach(val => searchParams.append(key, val));
+  });
+  return searchParams;
+}
+
 }  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/test/backendTests.ts b/tensorboard/components/tf_backend/test/backendTests.ts
index a4ed736afb..52652f2567 100644
--- a/tensorboard/components/tf_backend/test/backendTests.ts
+++ b/tensorboard/components/tf_backend/test/backendTests.ts
@@ -14,6 +14,8 @@ limitations under the License.
 ==============================================================================*/
 namespace tf_backend {
 
+const {assert} = chai;
+
 describe('urlPathHelpers', () => {
   it('addParams leaves input untouched when there are no parameters', () => {
     const actual = addParams('http://foo', {a: undefined, b: undefined});
@@ -45,16 +47,12 @@ describe('backend tests', () => {
   let rm: RequestManager;
   const base = 'data';
   const demoRouter = createRouter(base, /*demoMode=*/true);
+
   beforeEach(() => {
     setRouter(demoRouter);
     rm = new RequestManager();
   });
 
-  it('trailing slash removed from base route', () => {
-    const r = createRouter('foo/');
-    chai.assert.equal(r.runs(), 'foo/runs');
-  });
-
   it('runToTag helpers work', () => {
     const r2t: RunToTag = {
       run1: ['foo', 'bar', 'zod'],
@@ -76,6 +74,176 @@ describe('backend tests', () => {
     chai.assert.deepEqual(getRunsNamed(empty2), ['run1', 'run2']);
     chai.assert.deepEqual(getTags(empty2), []);
   });
+
+  describe('router', () => {
+    it('removes trailing slash from base route', () => {
+      const r = createRouter('foo/');
+      assert.equal(r.runs(), '/foo/runs');
+    });
+
+    describe('prod mode', () => {
+      beforeEach(function() {
+        this.router = createRouter(base, /*demoMode=*/false);
+      });
+
+      it('returns correct value for #environment', function() {
+        assert.equal(this.router.environment(), '/data/environment');
+      });
+
+      it('returns correct value for #experiments', function() {
+        assert.equal(this.router.experiments(), '/data/experiments');
+      });
+
+      it('returns correct value for #isDemoMode', function() {
+        assert.equal(this.router.isDemoMode(), false);
+      });
+
+      describe('#pluginRoute', () => {
+        it('encodes slash correctly', function() {
+          assert.equal(
+              this.router.pluginRoute('scalars', '/scalar'),
+              '/data/plugin/scalars/scalar');
+        });
+
+        it('encodes query param correctly', function() {
+          assert.equal(
+              this.router.pluginRoute(
+                  'scalars',
+                  '/a',
+                  createSearchParam({b: 'c', d: ['1', '2']})),
+              '/data/plugin/scalars/a?b=c&d=1&d=2');
+        });
+
+        it('encodes parenthesis correctly', function() {
+          assert.equal(
+              this.router.pluginRoute('scalars', '/a',
+              createSearchParam({foo: '()'})),
+              '/data/plugin/scalars/a?foo=%28%29');
+        });
+
+        it('encodes query param the same as #addParams', function() {
+          assert.equal(
+              this.router.pluginRoute(
+                  'scalars',
+                  '/a',
+                  createSearchParam({b: 'c', d: ['1']})),
+              addParams('/data/plugin/scalars/a', {b: 'c', d: ['1']}));
+          assert.equal(
+              this.router.pluginRoute(
+                  'scalars',
+                  '/a',
+                  createSearchParam({foo: '()'})),
+              addParams('/data/plugin/scalars/a', {foo: '()'}));
+        });
+
+        it('ignores custom extension', function() {
+          assert.equal(
+              this.router.pluginRoute('scalars', '/a', undefined, 'meow'),
+              '/data/plugin/scalars/a');
+        });
+      });
+
+      it('returns correct value for #pluginsListing', function() {
+        assert.equal(this.router.pluginsListing(), '/data/plugins_listing');
+      });
+
+      it('returns correct value for #runs', function() {
+        assert.equal(this.router.runs(), '/data/runs');
+      });
+
+      it('returns correct value for #runsForExperiment', function() {
+        // No experiment id is passed.
+        assert.equal(
+            this.router.runsForExperiment(''),
+            '/data/experiment_runs');
+        assert.equal(
+            this.router.runsForExperiment('1'),
+            '/data/experiment_runs?experiment=1');
+        assert.equal(
+            this.router.runsForExperiment('1&foo=false'),
+            '/data/experiment_runs?experiment=1%26foo%3Dfalse');
+      });
+    });
+
+    describe('demoMode', () => {
+      beforeEach( function() {
+        this.router = createRouter(base, /*demoMode=*/true);
+      });
+
+      it('returns correct value for #environment', function() {
+        assert.equal(this.router.environment(), '/data/environment.json');
+      });
+
+      it('returns correct value for #experiments', function() {
+        assert.equal(this.router.experiments(), '/data/experiments.json');
+      });
+
+      it('returns correct value for #isDemoMode', function() {
+        assert.equal(this.router.isDemoMode(), true);
+      });
+
+      describe('#pluginRoute', () => {
+        it('encodes slash correctly', function() {
+          assert.equal(
+              this.router.pluginRoute('scalars', '/scalar'),
+              '/data/scalars_scalar.json');
+        });
+
+        it('encodes query param correctly', function() {
+          assert.equal(
+              this.router.pluginRoute(
+                  'scalars',
+                  '/a',
+                  createSearchParam({b: 'c', d: ['1', '2']})),
+              '/data/scalars_a_b_c_d_1_d_2.json');
+        });
+
+        it('encodes parenthesis correctly', function() {
+          assert.equal(
+              this.router.pluginRoute(
+                  'scalars',
+                  '/a',
+                  createSearchParam({foo: '()'})),
+              '/data/scalars_a_foo__28_29.json');
+        });
+
+        it('uses custom extension if provided', function() {
+          assert.equal(
+              this.router.pluginRoute('scalars', '/a', undefined, ''),
+              '/data/scalars_a');
+          assert.equal(
+              this.router.pluginRoute('scalars', '/a', undefined, '.meow'),
+              '/data/scalars_a.meow');
+          assert.equal(
+              this.router.pluginRoute('scalars', '/a'),
+              '/data/scalars_a.json');
+        });
+      });
+
+      it('returns correct value for #pluginsListing', function() {
+        assert.equal(
+            this.router.pluginsListing(),
+            '/data/plugins_listing.json');
+      });
+
+      it('returns correct value for #runs', function() {
+        assert.equal(this.router.runs(), '/data/runs.json');
+      });
+
+      it('returns correct value for #runsForExperiment', function() {
+        // No experiment id is passed.
+        assert.equal(
+            this.router.runsForExperiment(''),
+            '/data/experiment_runs.json');
+        assert.equal(
+            this.router.runsForExperiment('1'),
+            '/data/experiment_runs_experiment_1.json');
+        assert.equal(
+            this.router.runsForExperiment('1&foo=false'),
+            '/data/experiment_runs_experiment_1_26foo_3Dfalse.json');
+      });
+    });
+  });
 });
 
 }  // namespace tf_backend
diff --git a/tensorboard/components/tf_backend/urlPathHelpers.ts b/tensorboard/components/tf_backend/urlPathHelpers.ts
index 3a1a11a7fa..e98ca4d672 100644
--- a/tensorboard/components/tf_backend/urlPathHelpers.ts
+++ b/tensorboard/components/tf_backend/urlPathHelpers.ts
@@ -21,6 +21,8 @@ namespace tf_backend {
  */
 export type QueryValue = string | string[];
 
+export type QueryParams = {[key: string]: QueryValue};
+
 /**
  * Add query parameters to a URL. Values will be URL-encoded. The URL
  * may or may not already have query parameters. For convenience,
@@ -31,10 +33,11 @@ export type QueryValue = string | string[];
  *     addParams("http://foo", {a: "1", b: ["2", "3+4"], c: "5"})
  *     addParams("http://foo?a=1", {b: ["2", "3+4"], c: "5", d: undefined})
  *     "http://foo?a=1&b=2&b=3%2B4&c=5"
+ *
+ * @deprecated If used with `router.pluginRoute`, please use the queryParams
+ * argument.
  */
-export function addParams(
-    baseURL: string,
-    params: {[param: string]: QueryValue}): string {
+export function addParams(baseURL: string, params: QueryParams): string {
   const keys = Object.keys(params).sort().filter(k => params[k] !== undefined);
   if (!keys.length) {
     return baseURL;  // no need to change '/foo' to '/foo?'
diff --git a/tensorboard/demo/data/audio_run_run1_tag_au1_2Faudio_2F0.json b/tensorboard/demo/data/audio_run_run1_tag_au1_2Faudio_2F0.json
deleted file mode 100644
index 7dfe32c711..0000000000
--- a/tensorboard/demo/data/audio_run_run1_tag_au1_2Faudio_2F0.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"query": "index=0&tag=au1%2Faudio%2F0&run=run1", "step": 0, "wall_time": 1461795049.203407, "content_type": "audio/wav"}]
\ No newline at end of file
diff --git a/tensorboard/demo/data/audio_run_run2_tag_au2_2Faudio_2F0.json b/tensorboard/demo/data/audio_run_run2_tag_au2_2Faudio_2F0.json
deleted file mode 100644
index 13f9c2de42..0000000000
--- a/tensorboard/demo/data/audio_run_run2_tag_au2_2Faudio_2F0.json
+++ /dev/null
@@ -1 +0,0 @@
-[{"query": "index=0&tag=au2%2Faudio%2F0&run=run2", "step": 0, "wall_time": 1461795049.212815, "content_type": "audio/wav"}]
\ No newline at end of file
diff --git a/tensorboard/demo/data/environment.json b/tensorboard/demo/data/environment.json
new file mode 100644
index 0000000000..2db30348c5
--- /dev/null
+++ b/tensorboard/demo/data/environment.json
@@ -0,0 +1,5 @@
+{
+  "data_location": "demo_dir",
+  "mode": "logdir",
+  "window_title": "TensorBoard demo"
+}
diff --git a/tensorboard/demo/data/experiments.json b/tensorboard/demo/data/experiments.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/tensorboard/demo/data/experiments.json
@@ -0,0 +1 @@
+[]
diff --git a/tensorboard/demo/data/graph_run_run1.pbtxt b/tensorboard/demo/data/graph_run_run1.pbtxt
deleted file mode 100644
index 2a6af32840..0000000000
--- a/tensorboard/demo/data/graph_run_run1.pbtxt
+++ /dev/null
@@ -1,9 +0,0 @@
-node {
-  name: "a"
-  op: "matmul"
-}
-node {
-  name: "b"
-  op: "matmul"
-  input: "a:0"
-}
diff --git a/tensorboard/demo/data/logdir b/tensorboard/demo/data/logdir
deleted file mode 100644
index b6362b45d7..0000000000
--- a/tensorboard/demo/data/logdir
+++ /dev/null
@@ -1 +0,0 @@
-{"logdir": "/foo/some/fake/logdir"}
\ No newline at end of file
diff --git a/tensorboard/demo/data/runs.json b/tensorboard/demo/data/runs.json
index e090390542..a85f62e6d1 100644
--- a/tensorboard/demo/data/runs.json
+++ b/tensorboard/demo/data/runs.json
@@ -1 +1 @@
-{"run1": {"scalars": ["foo/sin", "foo/cos", "foo/square", "bar/square"], "run_metadata": [], "compressedHistograms": ["histo1"], "images": ["im1/image/0", "im2/image/0"], "histograms": ["histo1"], "graph": true, "audio": ["au1/audio/0"]}, "run2": {"scalars": ["foo/cos", "foo/square", "bar/square"], "run_metadata": [], "compressedHistograms": ["histo2", "histo1"], "images": ["im1/image/0"], "histograms": ["histo2", "histo1"], "graph": true, "audio": ["au2/audio/0"]}}
\ No newline at end of file
+["run1", "run2"]
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/BUILD b/tensorboard/plugins/audio/tf_audio_dashboard/BUILD
index ac5a78f045..ab52d8ed33 100644
--- a/tensorboard/plugins/audio/tf_audio_dashboard/BUILD
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/BUILD
@@ -8,7 +8,6 @@ tf_web_library(
     name = "tf_audio_dashboard",
     srcs = [
         "tf-audio-dashboard.html",
-        "tf-audio-grid.html",
         "tf-audio-loader.html",
     ],
     path = "/tf-audio-dashboard",
@@ -31,22 +30,3 @@ tf_web_library(
         "@org_polymer_paper_styles",
     ],
 )
-
-tf_web_library(
-    name = "index",
-    srcs = [
-        "demo/index.html",
-        "index.html",
-    ],
-    path = "/tf-audio-dashboard",
-    deps = [
-        ":tf_audio_dashboard",
-        "//tensorboard/components/tf_backend",
-        "//tensorboard/components/tf_imports:d3",
-        "//tensorboard/components/tf_imports:webcomponentsjs",
-        "//tensorboard/demo:demo_data",
-        "@org_polymer_iron_component_page",
-        "@org_polymer_iron_demo_helpers",
-        "@org_polymer_paper_styles",
-    ],
-)
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/demo/BUILD b/tensorboard/plugins/audio/tf_audio_dashboard/demo/BUILD
new file mode 100644
index 0000000000..37a73df0b7
--- /dev/null
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/demo/BUILD
@@ -0,0 +1,21 @@
+package(default_visibility = ["//tensorboard:internal"])
+
+load("//tensorboard/defs:web.bzl", "tf_web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+tf_web_library(
+    name = "demo",
+    srcs = ["index.html"],
+    path = "/tf-audio-dashboard/demo",
+    deps = [
+        "//tensorboard/components/tf_backend",
+        "//tensorboard/components/tf_imports:polymer",
+        "//tensorboard/components/tf_imports:webcomponentsjs",
+        "//tensorboard/demo:demo_data",
+        "//tensorboard/plugins/audio/tf_audio_dashboard",
+        "//tensorboard/plugins/audio/tf_audio_dashboard/demo/data",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+    ],
+)
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/BUILD b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/BUILD
new file mode 100644
index 0000000000..b1749fda4c
--- /dev/null
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/BUILD
@@ -0,0 +1,11 @@
+package(default_visibility = ["//tensorboard:internal"])
+
+load("//tensorboard/defs:web.bzl", "tf_web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+tf_web_library(
+    name = "data",
+    srcs = glob(["*"]),
+    path = "/data",
+)
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_audio_run_run1_tag_foo_2Fsine.json b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_audio_run_run1_tag_foo_2Fsine.json
new file mode 100644
index 0000000000..98883d364f
--- /dev/null
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_audio_run_run1_tag_foo_2Fsine.json
@@ -0,0 +1 @@
+[{"query": "index=0&tag=foo%2Fsine&run=run1", "step": 0, "wall_time": 123, "content_type": "audio/wav"}]
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_audio_run_run2_tag_bar_2Fsquare.json b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_audio_run_run2_tag_bar_2Fsquare.json
new file mode 100644
index 0000000000..964da6dddb
--- /dev/null
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_audio_run_run2_tag_bar_2Fsquare.json
@@ -0,0 +1 @@
+[{"query": "index=0&tag=bar%2Fsquare&run=run2", "step": 0, "wall_time": 123, "content_type": "audio/wav"}]
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_individualAudio_index_0_run_run1_tag_foo_2Fsine_ts_123.wav b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_individualAudio_index_0_run_run1_tag_foo_2Fsine_ts_123.wav
new file mode 100644
index 0000000000..fa63ff75d5
Binary files /dev/null and b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_individualAudio_index_0_run_run1_tag_foo_2Fsine_ts_123.wav differ
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_tags.json b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_tags.json
new file mode 100644
index 0000000000..011900e218
--- /dev/null
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/demo/data/audio_tags.json
@@ -0,0 +1,16 @@
+{
+  "run1": {
+    "foo/sine": {
+      "description": "",
+      "displayName": "foo_sine",
+      "samples": 1
+    }
+  },
+  "run2": {
+    "bar/square": {
+      "description": "",
+      "displayName": "bar_square",
+      "samples": 1
+    }
+  }
+}
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/demo/index.html b/tensorboard/plugins/audio/tf_audio_dashboard/demo/index.html
index 7682bab970..15311bfd3f 100644
--- a/tensorboard/plugins/audio/tf_audio_dashboard/demo/index.html
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/demo/index.html
@@ -17,15 +17,18 @@
 -->
 
 <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+
 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
 <link rel="import" href="../../paper-styles/typography.html">
+<link rel="import" href="../../polymer/polymer.html">
 <link rel="import" href="../../tf-backend/tf-backend.html">
 <link rel="import" href="../tf-audio-dashboard.html">
 
 <title>Audio Dashboard Demo</title>
 <style>
   #container {
-    height: 300px;
+    display: block;
+    height: 85vh;
     width: 100%;
   }
 
@@ -43,12 +46,14 @@
         <tf-audio-dashboard id="demo"></tf-audio-dashboard>
       </template>
       <script>
-
         Polymer({
-          is: "audio-dash-demo",
+          is: 'audio-dash-demo',
           created: function() {
-            var router = tf_backend.createRouter("/data", true);
+            var router = tf_backend.createRouter('/data', true);
             tf_backend.setRouter(router);
+            tf_backend.environmentStore.refresh();
+            tf_backend.runsStore.refresh();
+            tf_backend.experimentsStore.refresh();
           },
         });
       </script>
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/index.html b/tensorboard/plugins/audio/tf_audio_dashboard/index.html
deleted file mode 100644
index 157f169265..0000000000
--- a/tensorboard/plugins/audio/tf_audio_dashboard/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!doctype html>
-<!--
-@license
-Copyright 2016 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.
--->
-
-<meta charset="utf-8">
-<title>tf-audio-dashboard</title>
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<script src="../webcomponentsjs/webcomponents-lite.js"></script>
-<link rel="import" href="../iron-component-page/iron-component-page.html">
-<body>
-<iron-component-page src="tf-audio-dashboard.html"></iron-component-page>
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html
index 55f87f01f4..d0b38baeb8 100644
--- a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-dashboard.html
@@ -81,6 +81,7 @@ <h3>No audio data was found.</h3>
                           tag-metadata="[[_tagMetadata(_runToTagInfo, item.run, item.tag)]]"
                           request-manager="[[_requestManager]]"
                         ></tf-audio-loader>
+                      </template>
                     </div>
                   </template>
                 </template>
@@ -99,8 +100,6 @@ <h3>No audio data was found.</h3>
     </style>
   </template>
   <script>
-    "use strict";
-
 
     Polymer({
       is: 'tf-audio-dashboard',
diff --git a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html
index b139464536..ed0263b849 100644
--- a/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html
+++ b/tensorboard/plugins/audio/tf_audio_dashboard/tf-audio-loader.html
@@ -205,11 +205,11 @@
         }
         this._metadataCanceller.cancelAll();
         const router = tf_backend.getRouter();
-        const url = tf_backend.addParams(router.pluginRoute('audio', '/audio'), {
+        const url = router.pluginRoute('audio', '/audio', new URLSearchParams({
             tag: this.tag,
             run: this.run,
             sample: this.sample,
-        });
+        }));
         const updateSteps = this._metadataCanceller.cancellable(result => {
           if (result.cancelled) {
             return;
@@ -222,12 +222,17 @@
         this.requestManager.request(url).then(updateSteps);
       },
       _createStepDatum(audioMetadata) {
-        let url = tf_backend.getRouter().pluginRoute('audio', '/individualAudio');
+        const isDemoMode = tf_backend.getRouter().isDemoMode();
+        const searchParam = new URLSearchParams(audioMetadata.query);
         // Include wall_time just to disambiguate the URL and force
         // the browser to reload the audio when the URL changes. The
         // backend doesn't care about the value.
-        url = tf_backend.addParams(url, {ts: audioMetadata.wall_time});
-        url += '&' + audioMetadata.query;
+        searchParam.append('ts', audioMetadata.wall_time);
+        const url = tf_backend.getRouter().pluginRoute(
+            'audio',
+            '/individualAudio',
+            searchParam,
+            /* demoCustomExt */ '.wav');
 
         return {
           wall_time: tf_card_heading.formatDate(new Date(audioMetadata.wall_time * 1000)),
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/demo/BUILD b/tensorboard/plugins/graph/tf_graph_dashboard/demo/BUILD
index d0d69c47f0..1b489d5b7b 100644
--- a/tensorboard/plugins/graph/tf_graph_dashboard/demo/BUILD
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/demo/BUILD
@@ -7,14 +7,15 @@ licenses(["notice"])  # Apache 2.0
 # bazel run //tensorboard/plugins/graph/tf_graph_dashboard/demo
 tf_web_library(
     name = "demo",
-    srcs = ["index.html"] + glob(["data/**"]),
+    srcs = ["index.html"],
     path = "/tf-graph-dashboard/demo",
     deps = [
         "//tensorboard/components/tf_backend",
         "//tensorboard/components/tf_imports:webcomponentsjs",
+        "//tensorboard/demo:demo_data",
         "//tensorboard/plugins/graph/tf_graph_dashboard",
+        "//tensorboard/plugins/graph/tf_graph_dashboard/demo/data",
         "@org_polymer_iron_demo_helpers",
         "@org_polymer_paper_styles",
     ],
 )
-
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/BUILD b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/BUILD
new file mode 100644
index 0000000000..b1749fda4c
--- /dev/null
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/BUILD
@@ -0,0 +1,11 @@
+package(default_visibility = ["//tensorboard:internal"])
+
+load("//tensorboard/defs:web.bzl", "tf_web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+tf_web_library(
+    name = "data",
+    srcs = glob(["*"]),
+    path = "/data",
+)
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graph_run_run1.pbtxt b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_graph_run_run1.pbtxt
similarity index 100%
rename from tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graph_run_run1.pbtxt
rename to tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_graph_run_run1.pbtxt
diff --git a/tensorboard/demo/data/graph_run_run2.pbtxt b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_graph_run_run2.pbtxt
similarity index 100%
rename from tensorboard/demo/data/graph_run_run2.pbtxt
rename to tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_graph_run_run2.pbtxt
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_run_metadata_tags.json b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_run_metadata_tags.json
new file mode 100644
index 0000000000..ae23275c09
--- /dev/null
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_run_metadata_tags.json
@@ -0,0 +1 @@
+{"run1":["step_0004","step_0005","step_0006","step_0007","step_0000","step_0001","step_0002"],"run2":["a", "b"]}
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_runs.json b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_runs.json
new file mode 100644
index 0000000000..a85f62e6d1
--- /dev/null
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/graphs_runs.json
@@ -0,0 +1 @@
+["run1", "run2"]
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/runs.json b/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/runs.json
deleted file mode 100644
index 0429aa71f8..0000000000
--- a/tensorboard/plugins/graph/tf_graph_dashboard/demo/data/runs.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "run1": {
-    "graph": true,
-    "scalars": ["foo/sin"]
-  }
-}
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.html b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.html
index 5dbffb10b3..66b01d515d 100644
--- a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.html
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.html
@@ -21,6 +21,7 @@
 <link rel="import" href="../tf-graph-board/tf-graph-board.html">
 <link rel="import" href="../tf-graph-controls/tf-graph-controls.html">
 <link rel="import" href="../tf-graph-loader/tf-graph-loader.html">
+<link rel="import" href="../tf-storage/tf-storage.html">
 <link rel="import" href="../tf-tensorboard/registry.html">
 <link rel="import" href="../vz-sorting/vz-sorting.html">
 
@@ -292,15 +293,16 @@ <h3>No graph definition files were found.</h3>
   },
   _graphUrl(run, limitAttrSize, largeAttrsKey) {
     const demoMode = tf_backend.getRouter().isDemoMode();
-    const base = tf_backend.getRouter().pluginRoute('graphs', '/graph');
     const optional = (p) => (p != null && !demoMode || undefined) && p;
-    const parameters = {
-      'run': run,
-      'limit_attr_size': optional(limitAttrSize),
-      'large_attrs_key': optional(largeAttrsKey),
-    };
-    const extension = demoMode ? '.pbtxt' : '';
-    return tf_backend.addParams(base, parameters) + extension;
+    return tf_backend.getRouter().pluginRoute(
+        'graphs',
+        '/graph',
+        new URLSearchParams({
+          'run': run,
+          'limit_attr_size': optional(limitAttrSize),
+          'large_attrs_key': optional(largeAttrsKey),
+        }),
+        /* demoCustomExt */ '.pbtxt');
   },
   _shouldRequestHealthPills: function() {
     // Do not load debugger data if the feature is disabled, if the user toggled off the feature,
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/BUILD b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/BUILD
index 9a6b62367c..b4f000408c 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/BUILD
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/BUILD
@@ -14,9 +14,9 @@ tf_web_library(
         "//tensorboard/components/tf_imports:polymer",
         "//tensorboard/components/tf_imports:webcomponentsjs",
         "//tensorboard/plugins/scalar/tf_scalar_dashboard",
+        "//tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data",
         "//tensorboard/demo:demo_data",
         "@org_polymer_iron_demo_helpers",
         "@org_polymer_paper_styles",
     ],
 )
-
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/BUILD b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/BUILD
new file mode 100644
index 0000000000..b1749fda4c
--- /dev/null
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/BUILD
@@ -0,0 +1,11 @@
+package(default_visibility = ["//tensorboard:internal"])
+
+load("//tensorboard/defs:web.bzl", "tf_web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+tf_web_library(
+    name = "data",
+    srcs = glob(["*"]),
+    path = "/data",
+)
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/logdir b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/logdir
deleted file mode 100644
index b6362b45d7..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/logdir
+++ /dev/null
@@ -1 +0,0 @@
-{"logdir": "/foo/some/fake/logdir"}
\ No newline at end of file
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/runs.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/runs.json
deleted file mode 100644
index d45f530763..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/runs.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "run1": {"scalars": ["foo/sin", "foo/cos", "foo/square", "bar/square"]},
-  "run2": {"scalars": ["foo/cos", "foo/square", "bar/square"]}
-}
\ No newline at end of file
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_bar_2Fsquare.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_bar_2Fsquare.json
deleted file mode 100644
index 6d584fb4a9..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_bar_2Fsquare.json
+++ /dev/null
@@ -1 +0,0 @@
-[[0.0, 0, 0.0], [10.0, 1, 1.0], [20.0, 2, 4.0], [30.0, 3, 9.0], [40.0, 4, 16.0]]
\ No newline at end of file
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fcos.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fcos.json
deleted file mode 100644
index 025eaa16e9..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fcos.json
+++ /dev/null
@@ -1 +0,0 @@
-[[0.0, 0, 1.0], [10.0, 1, 0.5403022766113281], [20.0, 2, -0.416146844625473], [30.0, 3, -0.9899924993515015], [40.0, 4, -0.6536436080932617]]
\ No newline at end of file
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fsin.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fsin.json
deleted file mode 100644
index eae69dd78f..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fsin.json
+++ /dev/null
@@ -1 +0,0 @@
-[[0.0, 0, 0.0], [10.0, 1, 0.8414709568023682], [20.0, 2, 0.9092974066734314], [30.0, 3, 0.14112000167369843], [40.0, 4, -0.756802499294281]]
\ No newline at end of file
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fsquare.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fsquare.json
deleted file mode 100644
index 6d584fb4a9..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run1_tag_foo_2Fsquare.json
+++ /dev/null
@@ -1 +0,0 @@
-[[0.0, 0, 0.0], [10.0, 1, 1.0], [20.0, 2, 4.0], [30.0, 3, 9.0], [40.0, 4, 16.0]]
\ No newline at end of file
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_bar_2Fsquare.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_bar_2Fsquare.json
deleted file mode 100644
index 6d584fb4a9..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_bar_2Fsquare.json
+++ /dev/null
@@ -1 +0,0 @@
-[[0.0, 0, 0.0], [10.0, 1, 1.0], [20.0, 2, 4.0], [30.0, 3, 9.0], [40.0, 4, 16.0]]
\ No newline at end of file
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_foo_2Fcos.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_foo_2Fcos.json
deleted file mode 100644
index dd3593f9d1..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_foo_2Fcos.json
+++ /dev/null
@@ -1 +0,0 @@
-[[0.0, 0, 2.0], [10.0, 1, 1.0806045532226562], [20.0, 2, -0.832293689250946], [30.0, 3, -1.979984998703003], [40.0, 4, -1.3072872161865234]]
\ No newline at end of file
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_foo_2Fsquare.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_foo_2Fsquare.json
deleted file mode 100644
index 0ff9ef0551..0000000000
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_run_run2_tag_foo_2Fsquare.json
+++ /dev/null
@@ -1 +0,0 @@
-[[0.0, 0, 0.0], [10.0, 1, 2.0], [20.0, 2, 8.0], [30.0, 3, 18.0], [40.0, 4, 32.0]]
\ No newline at end of file
diff --git a/tensorboard/demo/data/scalars_run_run1_tag_bar_2Fsquare.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run1_tag_bar_2Fsquare.json
similarity index 100%
rename from tensorboard/demo/data/scalars_run_run1_tag_bar_2Fsquare.json
rename to tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run1_tag_bar_2Fsquare.json
diff --git a/tensorboard/demo/data/scalars_run_run1_tag_foo_2Fcos.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run1_tag_foo_2Fcos.json
similarity index 100%
rename from tensorboard/demo/data/scalars_run_run1_tag_foo_2Fcos.json
rename to tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run1_tag_foo_2Fcos.json
diff --git a/tensorboard/demo/data/scalars_run_run1_tag_foo_2Fsin.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run1_tag_foo_2Fsin.json
similarity index 100%
rename from tensorboard/demo/data/scalars_run_run1_tag_foo_2Fsin.json
rename to tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run1_tag_foo_2Fsin.json
diff --git a/tensorboard/demo/data/scalars_run_run1_tag_foo_2Fsquare.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run1_tag_foo_2Fsquare.json
similarity index 100%
rename from tensorboard/demo/data/scalars_run_run1_tag_foo_2Fsquare.json
rename to tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run1_tag_foo_2Fsquare.json
diff --git a/tensorboard/demo/data/scalars_run_run2_tag_bar_2Fsquare.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run2_tag_bar_2Fsquare.json
similarity index 100%
rename from tensorboard/demo/data/scalars_run_run2_tag_bar_2Fsquare.json
rename to tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run2_tag_bar_2Fsquare.json
diff --git a/tensorboard/demo/data/scalars_run_run2_tag_foo_2Fcos.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run2_tag_foo_2Fcos.json
similarity index 100%
rename from tensorboard/demo/data/scalars_run_run2_tag_foo_2Fcos.json
rename to tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run2_tag_foo_2Fcos.json
diff --git a/tensorboard/demo/data/scalars_run_run2_tag_foo_2Fsquare.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run2_tag_foo_2Fsquare.json
similarity index 100%
rename from tensorboard/demo/data/scalars_run_run2_tag_foo_2Fsquare.json
rename to tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_scalars_run_run2_tag_foo_2Fsquare.json
diff --git a/tensorboard/demo/data/scalars.json b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_tags.json
similarity index 100%
rename from tensorboard/demo/data/scalars.json
rename to tensorboard/plugins/scalar/tf_scalar_dashboard/demo/data/scalars_tags.json
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/index.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/index.html
index 83d3f5badf..7e6f905d4c 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/index.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/demo/index.html
@@ -43,15 +43,19 @@
   <template>
     <dom-module id="scalar-dash-demo">
       <template>
-        <tf-scalar-dashboard id="demo" backend="[[backend]]"></tf-scalar-dashboard>
+        <tf-scalar-dashboard id="demo"></tf-scalar-dashboard>
       </template>
       <script>
-
         Polymer({
-          is: "scalar-dash-demo",
+          is: 'scalar-dash-demo',
           created: function() {
-            var router = tf_backend.createRouter("/data", true);
+            const router = tf_backend.createRouter(
+                '/data',
+                true /* demoMode */);
             tf_backend.setRouter(router);
+            tf_backend.environmentStore.refresh();
+            tf_backend.runsStore.refresh();
+            tf_backend.experimentsStore.refresh();
           },
         });
       </script>
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
index 6fb3f2a47d..24557535c7 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
@@ -240,13 +240,14 @@
           type: Function,
           value: function() {
             return ({tag, run, experiment}) => {
-              return tf_backend.addParams(
-                  tf_backend.getRouter().pluginRoute('scalars', '/scalars'),
-                  {
+              return tf_backend.getRouter().pluginRoute(
+                  'scalars',
+                  '/scalars',
+                  new URLSearchParams({
                     tag,
                     run,
                     experiment: experiment ? experiment.id : '',
-                  });
+                  }));
             }
           },
         },