Migrate forked TensorBoard build to webfiles

bazel run tensorflow/tensorboard/components/tf_tensorboard_d3v4:index

This will bring up a local web server and display a vulcanized
TensorBoard that is 95% working, with the exception of tf-graph, which
isn't included.

PiperOrigin-RevId: 155708877

173 files changed, 5883 insertions, 651 deletions

diff --git a/tensorflow/BUILD b/tensorflow/BUILD
index dd1d521e68..97a9c36877 100644
--- a/tensorflow/BUILD
+++ b/tensorflow/BUILD
@@ -321,37 +321,62 @@ filegroup(
         "//tensorflow/tensorboard/components:all_files",
         "//tensorflow/tensorboard/components/tf_audio_dashboard:all_files",
         "//tensorflow/tensorboard/components/tf_audio_dashboard/demo:all_files",
+        "//tensorflow/tensorboard/components/tf_audio_dashboard/demo/data:all_files",
+        "//tensorflow/tensorboard/components/tf_audio_dashboard_d3v4:all_files",
         "//tensorflow/tensorboard/components/tf_backend:all_files",
         "//tensorflow/tensorboard/components/tf_backend_d3v4:all_files",
+        "//tensorflow/tensorboard/components/tf_backend_d3v4/test:all_files",
         "//tensorflow/tensorboard/components/tf_color_scale:all_files",
         "//tensorflow/tensorboard/components/tf_color_scale/demo:all_files",
         "//tensorflow/tensorboard/components/tf_color_scale_d3v4:all_files",
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4/test:all_files",
         "//tensorflow/tensorboard/components/tf_dashboard_common:all_files",
         "//tensorflow/tensorboard/components/tf_dashboard_common/demo:all_files",
         "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4:all_files",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test:all_files",
         "//tensorflow/tensorboard/components/tf_distribution_dashboard:all_files",
         "//tensorflow/tensorboard/components/tf_distribution_dashboard/demo:all_files",
+        "//tensorflow/tensorboard/components/tf_distribution_dashboard/demo/data:all_files",
+        "//tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4:all_files",
         "//tensorflow/tensorboard/components/tf_globals:all_files",
         "//tensorflow/tensorboard/components/tf_globals_d3v4:all_files",
         "//tensorflow/tensorboard/components/tf_graph:all_files",
+        "//tensorflow/tensorboard/components/tf_graph/demo:all_files",
         "//tensorflow/tensorboard/components/tf_graph_board:all_files",
+        "//tensorflow/tensorboard/components/tf_graph_board/demo:all_files",
         "//tensorflow/tensorboard/components/tf_graph_common:all_files",
         "//tensorflow/tensorboard/components/tf_graph_controls:all_files",
+        "//tensorflow/tensorboard/components/tf_graph_controls/demo:all_files",
         "//tensorflow/tensorboard/components/tf_graph_dashboard:all_files",
+        "//tensorflow/tensorboard/components/tf_graph_dashboard/demo:all_files",
         "//tensorflow/tensorboard/components/tf_graph_info:all_files",
+        "//tensorflow/tensorboard/components/tf_graph_info/demo:all_files",
         "//tensorflow/tensorboard/components/tf_graph_loader:all_files",
+        "//tensorflow/tensorboard/components/tf_graph_loader/demo:all_files",
         "//tensorflow/tensorboard/components/tf_histogram_dashboard:all_files",
         "//tensorflow/tensorboard/components/tf_histogram_dashboard/demo:all_files",
+        "//tensorflow/tensorboard/components/tf_histogram_dashboard/demo/data:all_files",
+        "//tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4:all_files",
         "//tensorflow/tensorboard/components/tf_image_dashboard:all_files",
         "//tensorflow/tensorboard/components/tf_image_dashboard/demo:all_files",
+        "//tensorflow/tensorboard/components/tf_image_dashboard/demo/data:all_files",
+        "//tensorflow/tensorboard/components/tf_image_dashboard_d3v4:all_files",
         "//tensorflow/tensorboard/components/tf_imports:all_files",
         "//tensorflow/tensorboard/components/tf_imports_d3v4:all_files",
+        "//tensorflow/tensorboard/components/tf_option_selector_d3v4:all_files",
         "//tensorflow/tensorboard/components/tf_scalar_dashboard:all_files",
         "//tensorflow/tensorboard/components/tf_scalar_dashboard/demo:all_files",
+        "//tensorflow/tensorboard/components/tf_scalar_dashboard/demo/data:all_files",
+        "//tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4:all_files",
+        "//tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo:all_files",
         "//tensorflow/tensorboard/components/tf_storage:all_files",
         "//tensorflow/tensorboard/components/tf_storage_d3v4:all_files",
+        "//tensorflow/tensorboard/components/tf_storage_d3v4/test:all_files",
+        "//tensorflow/tensorboard/components/tf_tensorboard_d3v4:all_files",
         "//tensorflow/tensorboard/components/tf_text_dashboard:all_files",
         "//tensorflow/tensorboard/components/tf_text_dashboard/demo:all_files",
+        "//tensorflow/tensorboard/components/tf_text_dashboard/demo/data:all_files",
+        "//tensorflow/tensorboard/components/tf_text_dashboard_d3v4:all_files",
         "//tensorflow/tensorboard/components/vz_data_summary:all_files",
         "//tensorflow/tensorboard/components/vz_distribution_chart:all_files",
         "//tensorflow/tensorboard/components/vz_distribution_chart/demo:all_files",
@@ -364,9 +389,12 @@ filegroup(
         "//tensorflow/tensorboard/components/vz_line_chart_d3v4:all_files",
         "//tensorflow/tensorboard/components/vz_projector:all_files",
         "//tensorflow/tensorboard/components/vz_projector_d3v4:all_files",
+        "//tensorflow/tensorboard/components/vz_projector_d3v4/test:all_files",
         "//tensorflow/tensorboard/components/vz_sorting:all_files",
         "//tensorflow/tensorboard/components/vz_sorting/test:all_files",
         "//tensorflow/tensorboard/components/vz_sorting_d3v4:all_files",
+        "//tensorflow/tensorboard/components/vz_sorting_d3v4/test:all_files",
+        "//tensorflow/tensorboard/demo:all_files",
         "//tensorflow/tensorboard/java/org/tensorflow/tensorboard/vulcanize:all_files",
         "//tensorflow/tensorboard/lib:all_files",
         "//tensorflow/tensorboard/plugins:all_files",
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/BUILD b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/BUILD
new file mode 100644
index 0000000000..c732074754
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/BUILD
@@ -0,0 +1,79 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "tf_audio_dashboard_d3v4",
+    srcs = [
+        "tf-audio-dashboard.html",
+        "tf-audio-grid.html",
+        "tf-audio-loader.html",
+    ],
+    path = "/tf-audio-dashboard",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "@org_polymer",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_slider",
+        "@org_polymer_paper_spinner",
+        "@org_polymer_paper_styles",
+    ],
+)
+
+web_library(
+    name = "demo",
+    srcs = ["index.html"] + glob(["data/**"]),
+    path = "/tf-audio-dashboard/demo",
+    deps = [
+        ":tf_audio_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+web_library(
+    name = "test",
+    testonly = 1,
+    srcs = [
+        "audioDashboardTests.js",
+        "tests.html",
+    ] + glob(["data/**"]),
+    path = "/tf-audio-dashboard/test",
+    deps = [
+        ":tf_audio_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "@org_npmjs_registry_web_component_tester",
+        "@org_polymer",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+tensorboard_typescript_genrule(
+    name = "ts",
+    testonly = 1,
+    srcs = ["audioDashboardTests.ts"],
+    typings = [
+        "@org_definitelytyped//:chai.d.ts",
+        "@org_definitelytyped//:mocha.d.ts",
+        "@org_definitelytyped//:sinon.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_backend_d3v4:bundle.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
+    ],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/audioDashboardTests.ts b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/audioDashboardTests.ts
new file mode 100644
index 0000000000..f2bf68eb8d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/audioDashboardTests.ts
@@ -0,0 +1,47 @@
+/* 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.
+==============================================================================*/
+
+// TODO(dandelion): Fix me.
+declare function fixture(id: string): any;
+declare function stub(x, y: any): void;
+
+describe(
+    'audio dashboard tests', function() {
+      var audioDash;
+      var reloadCount = 0;
+      beforeEach(function() {
+        audioDash = fixture('testElementFixture');
+        var router = TF.Backend.router('data', true);
+        var backend = new TF.Backend.Backend(router);
+        audioDash.backend = backend;
+        stub('tf-audio-loader', {
+          reload: function() { reloadCount++; },
+        });
+      });
+
+      it('calling reload on dashboard reloads the audio-loaders',
+         function(done) {
+           audioDash.backendReload().then(() => {
+             reloadCount = 0;
+             var loaders = [].slice.call(
+                 audioDash.getElementsByTagName('tf-audio-loader'));
+             audioDash.frontendReload();
+             setTimeout(function() {
+               chai.assert.isAbove(reloadCount, 3);
+               done();
+             });
+           });
+         });
+    });
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/audio_run_run1_tag_au1_2Faudio_2F0.json b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/audio_run_run1_tag_au1_2Faudio_2F0.json
new file mode 100644
index 0000000000..7dfe32c711
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/audio_run_run1_tag_au1_2Faudio_2F0.json
@@ -0,0 +1 @@
+[{"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/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/audio_run_run2_tag_au2_2Faudio_2F0.json b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/audio_run_run2_tag_au2_2Faudio_2F0.json
new file mode 100644
index 0000000000..d29f7931a9
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/audio_run_run2_tag_au2_2Faudio_2F0.json
@@ -0,0 +1,20 @@
+[
+  {
+    "query":"index=0&tag=au2%2Faudio%2F0&run=run2",
+    "step":0,
+    "wall_time":1461795049.212815,
+    "content_type":"audio/wav"
+  },
+  {
+    "query":"index=1&tag=au2%2Faudio%2F0&run=run2",
+    "step":42,
+    "wall_time":1461895689.243345,
+    "content_type":"audio/wav"
+  },
+  {
+    "query":"index=2&tag=au2%2Faudio%2F0&run=run2",
+    "step":4242,
+    "wall_time":1461954231.123456,
+    "content_type":"audio/wav"
+  }
+]
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_0_tag_au1_2Faudio_2F0_run_run1.wav b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_0_tag_au1_2Faudio_2F0_run_run1.wav
new file mode 100644
index 0000000000..f1d24adc0c
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_0_tag_au1_2Faudio_2F0_run_run1.wav
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_0_tag_au2_2Faudio_2F0_run_run2.wav b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_0_tag_au2_2Faudio_2F0_run_run2.wav
new file mode 100644
index 0000000000..006c84338f
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_0_tag_au2_2Faudio_2F0_run_run2.wav
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_1_tag_au2_2Faudio_2F0_run_run2.wav b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_1_tag_au2_2Faudio_2F0_run_run2.wav
new file mode 100644
index 0000000000..f27904691f
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_1_tag_au2_2Faudio_2F0_run_run2.wav
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_2_tag_au2_2Faudio_2F0_run_run2.wav b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_2_tag_au2_2Faudio_2F0_run_run2.wav
new file mode 100644
index 0000000000..bbd3ff8bcb
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/individualAudio_index_2_tag_au2_2Faudio_2F0_run_run2.wav
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/runs.json b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/runs.json
new file mode 100644
index 0000000000..811a873684
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/data/runs.json
@@ -0,0 +1,10 @@
+{
+  "run1":
+    {
+     "audio": ["au1/audio/0"]
+    },
+  "run2":
+    {
+      "audio": ["au2/audio/0"]
+    }
+}
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/index.html b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/index.html
new file mode 100644
index 0000000000..8e0587084d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/index.html
@@ -0,0 +1,61 @@
+<!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.
+-->
+
+<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="../tf-audio-dashboard.html">
+
+<title>Audio Dashboard Demo</title>
+<style>
+  #container {
+    height: 300px;
+    width: 100%;
+  }
+
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-family: "RobotoDraft","Roboto",sans-serif;
+  }
+
+</style>
+<demo-snippet>
+  <template>
+    <dom-module id="audio-dash-demo">
+      <template>
+        <tf-audio-dashboard id="demo" backend="[[backend]]"></tf-audio-dashboard>
+      </template>
+      <script>
+        Polymer({
+          is: "audio-dash-demo",
+          properties: {
+            backend: {
+              type: Object,
+              value: function() {
+                var router = new TF.Backend.router("data", true);
+                return new TF.Backend.Backend(router);
+              },
+            },
+          },
+        });
+      </script>
+    </dom-module>
+    <audio-dash-demo id="container"></audio-dash-demo>
+  </template>
+</demo-snippet>
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tests.html b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tests.html
new file mode 100644
index 0000000000..891e8bf0c2
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tests.html
@@ -0,0 +1,38 @@
+<!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.
+-->
+
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../web-component-tester/browser.js"></script>
+<link rel="import" href="../../tf-imports/d3.html">
+<link rel="import" href="../tf-audio-dashboard.html">
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: "RobotoDraft","Roboto",sans-serif;
+  }
+</style>
+
+<test-fixture id="testElementFixture">
+  <template>
+    <tf-audio-dashboard></tf-audio-dashboard>
+  </template>
+</test-fixture>
+
+<script src="audioDashboardTests.js"></script>
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-dashboard.html b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-dashboard.html
new file mode 100644
index 0000000000..0353c51628
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-dashboard.html
@@ -0,0 +1,87 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="tf-audio-grid.html">
+<link rel="import" href="../tf-dashboard-common/tf-dashboard.html">
+<link rel="import" href="../tf-backend/tf-backend.html">
+
+<!--
+tf-audio-dashboard displays a dashboard that loads audio from a TensorFlow run.
+
+@element tf-audio-dashboard
+@demo demo/index.html
+-->
+<dom-module id="tf-audio-dashboard">
+  <template>
+    <div class="center">
+      <tf-no-data-warning
+        data-type="audio"
+        show-warning="[[dataNotFound]]"
+      ></tf-no-data-warning>
+      <tf-audio-grid
+        id="audioGrid"
+        run-to-audio="[[run2tag]]"
+        audio-generator="[[dataProvider]]"
+        tags="[[tags]]"
+        runs="[[runs]]"
+      ></tf-audio-grid>
+    </div>
+
+    <style>
+      .center {
+        height: 100%;
+        width: 100%;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+      :host {
+        height: 100%;
+        display: block;
+      }
+
+    </style>
+  </template>
+  <script>
+    TF.Dashboard.TfAudioDashboard = Polymer({
+      is: "tf-audio-dashboard",
+      factoryImpl: function(backend) {
+        this.backend = backend;
+      },
+      properties: {
+        dataType: {value: "audio"},
+      },
+      behaviors: [
+        TF.Dashboard.DashboardBehavior("audio"),
+        TF.Dashboard.ReloadBehavior("tf-audio-loader"),
+        TF.Backend.BackendBehavior
+      ],
+      attached: function() {
+        this.async(function() {
+          this.fire("rendered");
+        });
+      },
+      _hasAudio: function(runToAudioChange) {
+        return _.values(runToAudioChange.base).some(function(arr) {
+          return arr.length > 0;
+        });
+      },
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-grid.html b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-grid.html
new file mode 100644
index 0000000000..c71d8bdd4b
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-grid.html
@@ -0,0 +1,183 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
+<link rel="import" href="tf-audio-loader.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../tf-dashboard-common/scrollbar-style.html">
+
+<!--
+tf-audio-grid creates a grid for examining audio data. The columns correspond
+to runs and the rows correspond to tags. Each cell is an audio clip.
+
+Structurally, it makes extensive use of flexbox for layout: it has a top-level
+columnar flexbox that contains the topRow (run names) and then a
+bottomContainer. The bottomContainer is another columnar flexbox which contains
+repeated audio-rows. Each audio-row is a row flexbox which contains a tag name
+cell, and then audio cells.
+
+In the future, we should improve on the layout by making the tag names and run names have fixed positions
+within the audio-grid, so that when you scroll you always have context (e.g. row and column names in a spreadsheet).
+For now, it just scrolls.
+
+The audio grid provides internal scroll bars (with styling) so that it can be dropped into
+a dashboard in a predictable fashion, even though the internal audio grid may be enormous.
+
+Room for future improvement:
+
+- Make it obvious when an audio didn't load due to the audio not existing.
+- Find some way to collapse sparse audio grids into denser ones (when sparsity
+is high)
+- Fix column/row names
+- Include hook for loading past audio (by step/timestamp? or index?)
+
+@element tf-audio-grid
+-->
+<dom-module id="tf-audio-grid">
+  <template>
+    <style include="scrollbar-style"></style>
+    <div id="fullContainer" class="container scrollbar">
+      <div id="topRow" class="container">
+        <div class="noshrink" id="paddingCell"></div>
+        <template is="dom-if" if="[[_tagsExist(tags)]]">
+          <template
+            is="dom-repeat"
+            items="[[runs]]"
+            as="run"
+          >
+            <div class="run-name-cell noshrink">
+              <span>[[run]]</span>
+            </div>
+          </template>
+        </template>
+      </div>
+      <div id="bottomContainer" class="container">
+        <template
+          is="dom-repeat"
+          items="[[tags]]"
+          as="tag"
+        >
+          <div class="audio-row container noshrink">
+            <div class="tag-name-cell noshrink">
+              <span class="tag-name">[[tag]]</span>
+            </div>
+            <template
+              is="dom-repeat"
+              items="[[runs]]"
+              as="run"
+            >
+              <div class="audio-cell noshrink">
+                <template is="dom-if" if="[[_exists(run, tag, runToAudio.*)]]">
+                  <tf-audio-loader
+                    id="loader"
+                    run="[[run]]"
+                    tag="[[tag]]"
+                    audio-generator="[[audioGenerator]]"
+                  >
+                  </tf-audio-loader>
+                </template>
+              </div>
+            </template>
+          </div>
+        </template>
+      </div>
+    </div>
+    <style>
+      :host {
+        display: block;
+        height: 100%;
+        --audio-cell-min-height: 105px;
+      }
+      .container {
+        display: flex;
+        flex-wrap: nowrap;
+      }
+      #fullContainer {
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        padding-top: 20px;
+        overflow: auto;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+      #topRow {
+        flex-direction: row;
+      }
+      #bottomContainer {
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+      }
+      .audio-row {
+        flex-direction: row;
+        padding-top: 5px;
+      }
+      .audio-cell {
+        background: #FAFAFA;
+        width: 300px;
+        min-height: var(--audio-cell-min-height);
+        border: 1px solid black;
+        margin-right: 3px;
+        padding: 10px;
+        box-sizing: border-box;
+      }
+      .tag-name-cell {
+        width: 300px;
+        height: var(--audio-cell-min-height);
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .tag-name {
+        word-wrap: break-word;
+        text-align: center;
+        white-space: nowrap;
+      }
+      .run-name-cell {
+        width: 300px;
+        text-align: center;
+        margin-right: 5px;
+      }
+      .noshrink {
+        flex-shrink: 0;
+      }
+      #paddingCell {
+        width: 300px;
+      }
+    </style>
+  </template>
+  <script>
+    Polymer({
+      is: "tf-audio-grid",
+      properties: {
+        runToAudio: Object,
+        tags: Array,
+        runs: Array,
+        audioGenerator: Function,
+      },
+      _tagsExist: function(tags) {
+        return tags && tags.length > 0;
+      },
+      _exists: function (run, tag) {
+        return this.runToAudio[run].indexOf(tag) !== -1;
+      },
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-loader.html b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-loader.html
new file mode 100644
index 0000000000..71539537d0
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_audio_dashboard_d3v4/tf-audio-loader.html
@@ -0,0 +1,237 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-slider/paper-slider.html">
+<link rel="import" href="../paper-spinner/paper-spinner-lite.html">
+<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
+<link rel="import" href="../tf-imports/lodash.html">
+
+<!--
+tf-audio-loader loads an individual audio clip from the TensorBoard backend.
+
+Right now it always loads the most recent audio clip. We should add support in the
+future for loading older clips.
+
+@element tf-audio-loader
+-->
+<dom-module id="tf-audio-loader">
+  <style>
+    :host {
+      display: block;
+      --step-slider-knob-color: #424242;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      image-rendering: pixelated;
+    }
+
+    .step-description {
+      font-size: 12px;
+    }
+
+    .step-value {
+      font-weight: bold;
+    }
+
+    #audio-loading-spinner {
+      width: 14px;
+      height: 14px;
+      vertical-align: text-bottom;
+      --paper-spinner-color: var(--tb-orange-strong)
+    }
+
+    #steps {
+      height: 15px;
+      margin: 0 0 0 -15px;
+      /* 31 comes from adding a padding of 15px from both sides of the paper-slider, subtracting
+       * 1px so that the slider width aligns with the image (the last slider marker takes up 1px),
+       * and adding 2px to account for a border of 1px on both sides of the image. 30 - 1 + 2. */
+      width: calc(100% + 31px);
+      --paper-slider-active-color: var(--step-slider-knob-color);
+      --paper-slider-knob-color: var(--step-slider-knob-color);
+      --paper-slider-pin-color: var(--step-slider-knob-color);
+      --paper-slider-knob-start-color: var(--step-slider-knob-color);
+      --paper-slider-knob-start-border-color: var(--step-slider-knob-color);
+      --paper-slider-pin-start-color: var(--step-slider-knob-color);
+    }
+
+    #individual-audio-container audio {
+      margin: 5px 0 0 -10px;
+      width: calc(100% + 20px);
+    }
+  </style>
+  <template>
+    <template is="dom-if" if="[[_metadatas]]">
+      <template is="dom-if" if="[[_hasAtLeastOneStep(_metadatas)]]">
+        <div class="step-description">
+          step
+          <span class="step-value">
+            [[_stepValue]]
+          </span><br>
+          <template is="dom-if" if="[[_stepWallTime]]">
+            [[_stepWallTime]]
+          </template>
+          <paper-spinner-lite active
+                              id="audio-loading-spinner"
+                              hidden$=[[!_isAudioLoading]]></paper-spinner-lite>
+        </div>
+      </template>
+      <template is="dom-if" if="[[_maxStepIndex]]">
+        <paper-slider
+            id="steps"
+            immediate-value="{{_stepIndex}}"
+            max="[[_maxStepIndex]]"
+            max-markers="[[_maxStepIndex]]"
+            snaps
+            step="1"
+            value="{{_stepIndex}}"></paper-slider>
+      </template>
+      <div id="individual-audio-container"></div>
+    </template>
+  </template>
+  <script>
+    "use strict";
+
+    Polymer({
+      is: "tf-audio-loader",
+      properties: {
+        run: String,
+        tag: String,
+        audioGenerator: Function,
+        // todo: document.
+        _metadatas: Array,
+        _stepIndex: Number,
+        _stepValue: {
+          type: Number,
+          computed: "_computeStepValue(_metadatas, _stepIndex)",
+          value: 0,
+        },
+        _stepWallTime: {
+          type: Number,
+          computed: "_computeStepWallTime(_metadatas, _stepIndex)",
+          value: 0,
+        },
+        _maxStepIndex: {
+          type: Number,
+          computed: "_computeMaxStepIndex(_metadatas)",
+          value: 0,
+        },
+        _isAudioLoading: Boolean,
+        // Used to identify stale requests for audio.
+        _audioRequestId: {
+          type: Number,
+          value: 1
+        },
+      },
+      observers: [
+        "_updateAudio(_metadatas, _stepIndex)",
+      ],
+      reload: function() {
+        this.audioGenerator(this.tag, this.run).then(function(metadatas) {
+          // Set the list of available metadata.
+          this.set("_metadatas", metadatas);
+
+          // Set the index to be the last one.
+          this.set("_stepIndex", this._maxStepIndex);
+        }.bind(this));
+      },
+      ready: function() {
+        // Need to test so that it will not error if it is constructed w/o
+        // all properties (so that it's possible to use stub to mock it out)
+        if (this.run != null && this.tag != null && this.audioGenerator != null) {
+          this.reload();
+        }
+      },
+      _updateAudio: function(metadatas, stepIndex) {
+        if (!metadatas || stepIndex >= metadatas.length) {
+          // No audio to show. The audio section should be hidden.
+          return;
+        }
+
+        // Load new audio.
+        const requestId = ++this._audioRequestId;
+        this.set("_isAudioLoading", true);
+
+        // Create a new audio element. Only replace the previous one once the new audio loads.
+        let audioElement = document.createElement("audio");
+        audioElement.setAttribute("controls", true);
+        audioElement.setAttribute("loop", "loop");
+        let canPlayHandler = function() {
+          if (requestId !== this._audioRequestId) {
+            // This request is no longer relevant.
+            return;
+          }
+
+          // Remove this event listener: "canplay" apparently fires in Chrome every time playing
+          // begins again on loop. So, if we create a new audio element every time that happens, we
+          // don't actually loop.
+          audioElement.removeEventListener("canplay", canPlayHandler);
+
+          let individualAudioContainer = this.$$("#individual-audio-container");
+          individualAudioContainer.innerHTML = "";
+          Polymer.dom(individualAudioContainer).appendChild(audioElement);
+          this.set("_isAudioLoading", false);
+        }.bind(this);
+        audioElement.addEventListener("canplay", canPlayHandler);
+        audioElement.addEventListener("error", function() {
+          if (requestId !== this._audioRequestId) {
+            // This request is no longer relevant.
+            return;
+          }
+
+          // The audio could not be loaded.
+          this.$$("#individual-audio-container").innerHTML = "";
+          this.set("_isAudioLoading", false);
+        }.bind(this));
+
+        // Initiate the request for new audio.
+        var sourceElement = document.createElement("source");
+        let metadata = metadatas[stepIndex];
+        sourceElement.setAttribute("src", metadata.url);
+        sourceElement.setAttribute("type", metadata.content_type);
+        audioElement.appendChild(sourceElement);
+      },
+      _computeStepValue: function(metadatas, stepIndex) {
+        if (!metadatas || stepIndex >= metadatas.length) {
+          // No audio to show. The audio section should be hidden.
+          return 0;
+        }
+        return metadatas[stepIndex].step;
+      },
+      _computeStepWallTime: function(metadatas, stepIndex) {
+        if (!metadatas || stepIndex >= metadatas.length) {
+          // No audio to show. The audio section should be hidden.
+          return 0;
+        }
+        return metadatas[stepIndex].wall_time.toString();
+      },
+      _computeMaxStepIndex: function(metadatas) {
+        if (!metadatas || metadatas.length === 0) {
+          // No audio to show. The audio section should be hidden.
+          return 0;
+        }
+        return metadatas.length - 1;
+      },
+      _hasAtLeastOneStep: function(metadatas) {
+        return metadatas && metadatas.length > 0;
+      },
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/BUILD b/tensorflow/tensorboard/components/tf_backend_d3v4/BUILD
index e54d0e222c..019283816f 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/BUILD
@@ -1,43 +1,55 @@
 package(default_visibility = ["//tensorflow:internal"])
 
-load("//tensorflow/tensorboard:defs.bzl", "tensorboard_ts_library")
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-tensorboard_ts_library(
-    name = "ts",
+web_library(
+    name = "tf_backend_d3v4",
     srcs = [
-        "backend.ts",
-        "behavior.ts",
-        "requestManager.ts",
-        "router.ts",
-        "urlPathHelpers.ts",
+        "bundle.js",
+        "tf-backend.html",
     ],
+    path = "/tf-backend",
     deps = [
-        "//tensorflow/tensorboard/components/vz_sorting_d3v4:ts",
-        "//third_party/javascript/node_modules/typescript:es2015.promise",
-        "//third_party/javascript/typings/chai",
-        "//third_party/javascript/typings/d3_v4:bundle",
-        "//third_party/javascript/typings/lodash",
-        "//third_party/javascript/typings/mocha",
-        "//third_party/javascript/typings/polymer:polymer_without_externs",
-        "//third_party/javascript/typings/sinon",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable",
+        "//tensorflow/tensorboard/components/vz_sorting_d3v4",
+        "@org_polymer",
     ],
 )
 
-# TODO(dandelion): Add runners for these tests
-tensorboard_ts_library(
-    name = "tests",
-    srcs = [
-        "backendTests.ts",
-        "behaviorTests.ts",
-        "requestManagerTests.ts",
-    ],
-    deps = [
-        ":ts",
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:lodash.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable.d.ts",
+        "//tensorflow/tensorboard/components/vz_sorting_d3v4:bundle.d.ts",
     ],
 )
 
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF.Backend": [
+        "requestManager.ts",
+        "backend.ts",
+        "behavior.ts",
+        "urlPathHelpers.ts",
+        "router.ts",
+    ]},
+    namespace_symbol_aliases = {"TF.Backend": {
+        "compareTagNames": "VZ.Sorting.compareTagNames",
+    }},
+)
+
 filegroup(
     name = "all_files",
     srcs = glob(["**"]),
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/test/BUILD b/tensorflow/tensorboard/components/tf_backend_d3v4/test/BUILD
new file mode 100644
index 0000000000..00b2be45eb
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/BUILD
@@ -0,0 +1,56 @@
+package(
+    default_testonly = True,
+    default_visibility = ["//tensorflow:internal"],
+)
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "test",
+    srcs = [
+        "bundle.js",
+        "tests.html",
+    ] + glob(["data/**"]),
+    path = "/tf-backend/test",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "@org_npmjs_registry_web_component_tester",
+        "@org_polymer",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:chai.d.ts",
+        "@org_definitelytyped//:mocha.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_backend_d3v4:bundle.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable.d.ts",
+    ],
+)
+
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF.Backend": [
+        "backendTests.ts",
+        "behaviorTests.ts",
+        "requestManagerTests.ts",
+    ]},
+)
+
+filegroup(
+    name = "all_files",
+    testonly = 0,
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/backendTests.ts b/tensorflow/tensorboard/components/tf_backend_d3v4/test/backendTests.ts
index 180c1f5298..648d175621 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/backendTests.ts
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/backendTests.ts
@@ -12,10 +12,10 @@ 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 {Backend, convertBins, filterTags, getRuns, getTags, RunToTag, TYPES} from './backend';
-import {RequestManager} from './requestManager';
-import {Router, router} from './router';
-import {BAD_CHARACTERS, demoify, queryEncoder} from './urlPathHelpers';
+import {Backend, convertBins, filterTags, getRuns, getTags, RunToTag, TYPES} from '../backend';
+import {RequestManager} from '../requestManager';
+import {Router, router} from '../router';
+import {BAD_CHARACTERS, demoify, queryEncoder} from '../urlPathHelpers';
 
 describe('urlPathHelpers', () => {
   it('demoify works as expected', () => {
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/behaviorTests.ts b/tensorflow/tensorboard/components/tf_backend_d3v4/test/behaviorTests.ts
index 6d55aca5f8..4a74fe01c1 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/behaviorTests.ts
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/behaviorTests.ts
@@ -13,8 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {Backend, getRuns, getTags, RunToTag} from './backend'
-import {BackendBehavior} from './behavior'
+import {Backend, getRuns, getTags, RunToTag} from '../backend'
+import {BackendBehavior} from '../behavior'
 
 declare function fixture(id: string): void;
 
@@ -154,6 +154,7 @@ describe('data-behavior', function() {
     });
   });
 
+  // TODO(dandelion): Fix this test.
   it('reload calls frontendReload', function(done) {
     testElement.frontendReload = function() {
       done();
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/audio_run_run1_tag_audio1.json b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/audio_run_run1_tag_audio1.json
index 21a00f198d..21a00f198d 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/audio_run_run1_tag_audio1.json
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/audio_run_run1_tag_audio1.json
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/compressedHistograms_run_run1_tag_histo1.json b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/compressedHistograms_run_run1_tag_histo1.json
index 8b4c088392..8b4c088392 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/compressedHistograms_run_run1_tag_histo1.json
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/compressedHistograms_run_run1_tag_histo1.json
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/example.json b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/example.json
index 8adc6fb896..8adc6fb896 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/example.json
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/example.json
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/histograms_run_run1_tag_histo1.json b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/histograms_run_run1_tag_histo1.json
index a5600a356e..a5600a356e 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/histograms_run_run1_tag_histo1.json
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/histograms_run_run1_tag_histo1.json
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/images_run_run1_tag_im1.json b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/images_run_run1_tag_im1.json
index fd2a96b62f..fd2a96b62f 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/images_run_run1_tag_im1.json
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/images_run_run1_tag_im1.json
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/individualImage_index_0_tag_im1_run_run1.png b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/individualImage_index_0_tag_im1_run_run1.png
index f191b280ce..f191b280ce 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/individualImage_index_0_tag_im1_run_run1.png
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/individualImage_index_0_tag_im1_run_run1.png
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/run_metadata_run_step99_tag_train.pbtxt b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/run_metadata_run_step99_tag_train.pbtxt
index 07ce4fad53..07ce4fad53 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/run_metadata_run_step99_tag_train.pbtxt
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/run_metadata_run_step99_tag_train.pbtxt
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/runs.json b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/runs.json
index 413ddb9ab3..413ddb9ab3 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/runs.json
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/runs.json
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/scalars.json b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/scalars.json
index bc9d3353d5..bc9d3353d5 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/scalars.json
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/scalars.json
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/data/scalars_run_run1_tag_cross_entropy__281_29.json b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/scalars_run_run1_tag_cross_entropy__281_29.json
index 97b0062f0f..97b0062f0f 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/data/scalars_run_run1_tag_cross_entropy__281_29.json
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/data/scalars_run_run1_tag_cross_entropy__281_29.json
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/requestManagerTests.ts b/tensorflow/tensorboard/components/tf_backend_d3v4/test/requestManagerTests.ts
index 8bd46744f5..23a4e8f611 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/requestManagerTests.ts
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/requestManagerTests.ts
@@ -13,13 +13,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {RequestManager, RequestNetworkError} from './requestManager';
+import {RequestManager, RequestNetworkError} from '../requestManager';
+
 interface MockRequest {
   resolve: Function;
   reject: Function;
   id: number;
   url: string;
 }
+
 class MockedRequestManager extends RequestManager {
   private resolvers: Function[];
   private rejectors: Function[];
@@ -112,7 +114,6 @@ describe('backend', () => {
             done(new Error('the promise should have rejected'));
           },
           (reject: RequestNetworkError) => {
-            chai.assert.instanceOf(reject, RequestNetworkError);
             chai.assert.include(reject.message, '404');
             chai.assert.include(reject.message, badUrl);
             chai.assert.equal(reject.req.status, 404);
diff --git a/tensorflow/tensorboard/components/tf_storage_d3v4/tests.html b/tensorflow/tensorboard/components/tf_backend_d3v4/test/tests.html
index 6d395b0702..cdc17c2607 100644
--- a/tensorflow/tensorboard/components/tf_storage_d3v4/tests.html
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/test/tests.html
@@ -22,9 +22,14 @@ limitations under the License.
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
   <link rel="import" href="../../polymer/polymer.html">
-  <link rel="import" href="../tf-storage.html">
+  <link rel="import" href="../tf-backend.html">
 </head>
 <body>
-  <script src="storageTests.js"></script>
+  <test-fixture id="testElementFixture">
+    <template>
+      <test-element id="test"></test-element>
+    </template>
+  </test-fixture>
+  <script src="bundle.js"></script>
 </body>
 </html>
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/tf-backend.html b/tensorflow/tensorboard/components/tf_backend_d3v4/tf-backend.html
new file mode 100644
index 0000000000..5bf2663362
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_backend_d3v4/tf-backend.html
@@ -0,0 +1,23 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../tf-imports/d3.html">
+<link rel="import" href="../vz-sorting/vz-sorting.html">
+
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/tf_color_scale_d3v4/BUILD b/tensorflow/tensorboard/components/tf_color_scale_d3v4/BUILD
index fd7d394a36..5feea12fb4 100644
--- a/tensorflow/tensorboard/components/tf_color_scale_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/tf_color_scale_d3v4/BUILD
@@ -1,42 +1,55 @@
 package(default_visibility = ["//tensorflow:internal"])
 
-load(
-    "//tensorflow/tensorboard:defs.bzl",
-    "tensorboard_ts_development_sources",
-    "tensorboard_ts_devserver",
-    "tensorboard_ts_library",
-    "tensorboard_webcomponent_library",
-)
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-# TODO(dandelion): Add runner for the test code.
+web_library(
+    name = "tf_color_scale_d3v4",
+    srcs = [
+        "bundle.js",
+        "tf-color-scale.html",
+    ],
+    path = "/tf-color-scale",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "@org_polymer",
+    ],
+)
 
-tensorboard_webcomponent_library(
-    name = "tf_color_scale",
-    srcs = ["tf-color-scale.html"],
-    ts_lib_deps = [":ts"],
+web_library(
+    name = "demo",
+    srcs = ["index.html"],
+    path = "/tf-color-scale",
     deps = [
-        "//third_party/javascript/polymer/v1/polymer:lib",
+        ":tf_color_scale_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_button",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
     ],
 )
 
-tensorboard_ts_library(
+tensorboard_typescript_genrule(
     name = "ts",
-    srcs = [
-        "colorScale.ts",
-        "palettes.ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:polymer.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
     ],
-    deps = ["//tensorflow/tensorboard/components:common_deps_d3v4"],
 )
 
-tensorboard_ts_library(
-    name = "tests",
-    srcs = ["colorScaleTests.ts"],
-    deps = [
-        ":ts",
-        "//tensorflow/tensorboard/components:common_deps_d3v4",
-    ],
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF": [
+        "palettes.ts",
+        "colorScale.ts",
+    ]},
 )
 
 filegroup(
@@ -44,29 +57,3 @@ filegroup(
     srcs = glob(["**"]),
     tags = ["notsan"],
 )
-
-tensorboard_webcomponent_library(
-    name = "demo",
-    srcs = ["demo.html"],
-    visibility = ["//visibility:public"],
-    deps = [
-        ":tf_color_scale",
-        "//third_party/javascript/polymer/v1/iron-demo-helpers:lib",
-        "//third_party/javascript/polymer/v1/paper-button:lib",
-        "//third_party/javascript/polymer/v1/paper-styles:lib",
-    ],
-)
-
-tensorboard_ts_devserver(
-    name = "devserver",
-    manifest = ":dev_sources",
-    serving_path = "/demo_out/bundle.js",
-    static_files = [":demo"],
-)
-
-tensorboard_ts_development_sources(
-    name = "dev_sources",
-    deps = [
-        ":ts",
-    ],
-)
diff --git a/tensorflow/tensorboard/components/tf_color_scale_d3v4/demo.html b/tensorflow/tensorboard/components/tf_color_scale_d3v4/index.html
index 341ce18452..81dfab098c 100644
--- a/tensorflow/tensorboard/components/tf_color_scale_d3v4/demo.html
+++ b/tensorflow/tensorboard/components/tf_color_scale_d3v4/index.html
@@ -19,11 +19,12 @@ limitations under the License.
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>tf-color-scale demo</title>
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<link rel="import" href="../iron-demo-helpers/demo-snippet.html">
+<link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../paper-styles/typography.html">
+<link rel="import" href="../tf-imports/d3.html">
 <link rel="import" href="tf-color-scale.html">
-<link rel="import" href="iron-demo-helpers/demo-snippet.html">
-<link rel="import" href="paper-styles/typography.html">
-<link rel="import" href="paper-button/paper-button.html">
-<script src="bundle.js"></script>
 
 <style> body {font-family: "Roboto";}</style>
 <demo-snippet>
diff --git a/tensorflow/tensorboard/components/tf_color_scale_d3v4/test/BUILD b/tensorflow/tensorboard/components/tf_color_scale_d3v4/test/BUILD
new file mode 100644
index 0000000000..ac22ab8218
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_color_scale_d3v4/test/BUILD
@@ -0,0 +1,48 @@
+package(
+    default_testonly = True,
+    default_visibility = ["//tensorflow:internal"],
+)
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "test",
+    srcs = [
+        "bundle.js",
+        "tests.html",
+    ],
+    path = "/tf-color-scale/test",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4",
+        "@org_npmjs_registry_web_component_tester",
+        "@org_polymer",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:chai.d.ts",
+        "@org_definitelytyped//:mocha.d.ts",
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4:bundle.d.ts",
+    ],
+)
+
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF": ["colorScaleTests.ts"]},
+)
+
+filegroup(
+    name = "all_files",
+    testonly = 0,
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_color_scale_d3v4/colorScaleTests.ts b/tensorflow/tensorboard/components/tf_color_scale_d3v4/test/colorScaleTests.ts
index aa9c601385..78824a772c 100644
--- a/tensorflow/tensorboard/components/tf_color_scale_d3v4/colorScaleTests.ts
+++ b/tensorflow/tensorboard/components/tf_color_scale_d3v4/test/colorScaleTests.ts
@@ -15,7 +15,7 @@ limitations under the License.
 
 let assert = chai.assert;
 
-import {ColorScale} from './colorScale'
+import {ColorScale} from '../colorScale'
 
 describe('ColorScale', function() {
   let ccs: ColorScale;
diff --git a/tensorflow/tensorboard/components/tf_color_scale_d3v4/test/tests.html b/tensorflow/tensorboard/components/tf_color_scale_d3v4/test/tests.html
new file mode 100644
index 0000000000..eccc32cdec
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_color_scale_d3v4/test/tests.html
@@ -0,0 +1,24 @@
+<!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">
+<script src="../../web-component-tester/browser.js"></script>
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<link rel="import" href="../tf-color-scale.html">
+<body>
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/tf_color_scale_d3v4/tf-color-scale.html b/tensorflow/tensorboard/components/tf_color_scale_d3v4/tf-color-scale.html
index e3ef6cf630..3dedfaf1a1 100644
--- a/tensorflow/tensorboard/components/tf_color_scale_d3v4/tf-color-scale.html
+++ b/tensorflow/tensorboard/components/tf_color_scale_d3v4/tf-color-scale.html
@@ -15,7 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/d3.html">
 
 <!--
 tf-color-scale is a plumbing component that takes in an array of runs, and produces
@@ -25,4 +26,5 @@ a set of colors.
 @element tf-color-scale
 -->
 <dom-module id="tf-color-scale">
+  <script src="bundle.js"></script>
 </dom-module>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/BUILD b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/BUILD
index 85f06dabb5..5361feaabf 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/BUILD
@@ -1,23 +1,22 @@
 package(default_visibility = ["//tensorflow:internal"])
 
-load(
-    "//tensorflow/tensorboard:defs.bzl",
-    "tensorboard_ts_development_sources",
-    "tensorboard_ts_devserver",
-    "tensorboard_ts_library",
-    "tensorboard_webcomponent_library",
-)
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-tensorboard_webcomponent_library(
-    name = "tf_dashboard_common",
+web_library(
+    name = "tf_dashboard_common_d3v4",
     srcs = [
+        "bundle.html",
+        "bundle.js",
         "dashboard-style.html",
         "run-color-style.html",
         "scrollbar-style.html",
         "tensorboard-color.html",
         "tf-categorizer.html",
+        "tf-chart-scaffold.html",
         "tf-collapsable-pane.html",
         "tf-dashboard.html",
         "tf-dashboard-layout.html",
@@ -30,54 +29,33 @@ tensorboard_webcomponent_library(
         "tf-run-selector.html",
         "tf-sidebar-helper.html",
     ],
-    ts_lib_deps = [":ts"],
-    deps = [
-        "//third_party/javascript/plottable/v3:lib",
-        "//third_party/javascript/polymer/v1/iron-ajax:lib",
-        "//third_party/javascript/polymer/v1/iron-collapse:lib",
-        "//third_party/javascript/polymer/v1/iron-icons:lib",
-        "//third_party/javascript/polymer/v1/paper-button:lib",
-        "//third_party/javascript/polymer/v1/paper-checkbox:lib",
-        "//third_party/javascript/polymer/v1/paper-dialog:lib",
-        "//third_party/javascript/polymer/v1/paper-dropdown-menu:lib",
-        "//third_party/javascript/polymer/v1/paper-icon-button:lib",
-        "//third_party/javascript/polymer/v1/paper-input:lib",
-        "//third_party/javascript/polymer/v1/paper-item:lib",
-        "//third_party/javascript/polymer/v1/paper-menu:lib",
-        "//third_party/javascript/polymer/v1/paper-slider:lib",
-        "//third_party/javascript/polymer/v1/paper-spinner:lib",
-        "//third_party/javascript/polymer/v1/paper-styles:lib",
-        "//third_party/javascript/polymer/v1/paper-toggle-button:lib",
-        "//third_party/javascript/polymer/v1/polymer:lib",
-    ],
-)
-
-tensorboard_ts_library(
-    name = "ts",
-    srcs = [
-        "dashboard-behavior.ts",
-        "reload-behavior.ts",
-        "tf-categorizer.ts",
-        "tf-multi-checkbox.ts",
-        "tf-regex-group.ts",
-    ],
+    path = "/tf-dashboard-common",
     deps = [
-        "//tensorflow/tensorboard/components:common_deps_d3v4",
-        "//tensorflow/tensorboard/components/tf_storage_d3v4:ts",
-        "//tensorflow/tensorboard/components/vz_sorting_d3v4:ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable",
+        "//tensorflow/tensorboard/components/tf_storage_d3v4",
+        "//tensorflow/tensorboard/components/vz_sorting_d3v4",
+        "@org_polymer",
+        "@org_polymer_iron_ajax",
+        "@org_polymer_iron_collapse",
+        "@org_polymer_iron_icons",
+        "@org_polymer_paper_button",
+        "@org_polymer_paper_checkbox",
+        "@org_polymer_paper_dialog",
+        "@org_polymer_paper_dropdown_menu",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_input",
+        "@org_polymer_paper_item",
+        "@org_polymer_paper_menu",
+        "@org_polymer_paper_slider",
+        "@org_polymer_paper_spinner",
+        "@org_polymer_paper_styles",
+        "@org_polymer_paper_toggle_button",
     ],
 )
 
-tensorboard_ts_library(
-    name = "tests",
-    srcs = ["tf-categorizer-tests.ts"],
-    deps = [
-        ":ts",
-        "//tensorflow/tensorboard/components:common_deps_d3v4",
-    ],
-)
-
-tensorboard_webcomponent_library(
+web_library(
     name = "demo",
     srcs = [
         "tf-categorizer-demo.html",
@@ -85,26 +63,46 @@ tensorboard_webcomponent_library(
         "tf-multi-checkbox-demo.html",
         "tf-regex-group-demo.html",
     ],
+    path = "/tf-dashboard-common",
     deps = [
-        ":tf_dashboard_common",
-        "//tensorflow/tensorboard/components/tf_color_scale_d3v4:tf_color_scale",
-        "//third_party/javascript/polymer/v1/iron-demo-helpers:lib",
-        "//third_party/javascript/polymer/v1/paper-styles:lib",
+        ":tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
     ],
 )
 
-tensorboard_ts_devserver(
-    name = "devserver",
-    manifest = ":dev_sources",
-    serving_path = "/demo_out/bundle.js",
-    static_files = [":demo"],
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:lodash.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable.d.ts",
+        "//tensorflow/tensorboard/components/tf_storage_d3v4:bundle.d.ts",
+        "//tensorflow/tensorboard/components/vz_sorting_d3v4:bundle.d.ts",
+    ],
 )
 
-tensorboard_ts_development_sources(
-    name = "dev_sources",
-    deps = [
-        ":ts",
-    ],
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF.Dashboard": [
+        "tf-categorizer.ts",
+        "dashboard-behavior.ts",
+        "reload-behavior.ts",
+        "tf-multi-checkbox.ts",
+        "tf-regex-group.ts",
+    ]},
+    namespace_symbol_aliases = {"TF.Dashboard": {
+        "compareTagNames": "VZ.Sorting.compareTagNames",
+        "getObjectInitializer": "TF.URIStorage.getObjectInitializer",
+        "getObjectObserver": "TF.URIStorage.getObjectObserver",
+        "getStringInitializer": "TF.URIStorage.getStringInitializer",
+        "getStringObserver": "TF.URIStorage.getStringObserver",
+    }},
 )
 
 filegroup(
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/bundle.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/bundle.html
new file mode 100644
index 0000000000..514b8b7d72
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/bundle.html
@@ -0,0 +1,24 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/d3.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../tf-storage/tf-storage.html">
+<link rel="import" href="../vz-sorting/vz-sorting.html">
+
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/dashboard-style.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/dashboard-style.html
index 1eccc020eb..6629e5bfc2 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/dashboard-style.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/dashboard-style.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="paper-styles/paper-styles.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
 <link rel="import" href="tensorboard-color.html">
 
 <dom-module id="dashboard-style">
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/run-color-style.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/run-color-style.html
index ff4cfacc91..b15861694f 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/run-color-style.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/run-color-style.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="paper-styles/paper-styles.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
 
 <dom-module id="run-color-style">
   <template>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/scrollbar-style.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/scrollbar-style.html
index b345781e2e..bfd61f6619 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/scrollbar-style.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/scrollbar-style.html
@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="paper-styles/paper-styles.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
 
 <dom-module id="scrollbar-style">
   <template>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tensorboard-color.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tensorboard-color.html
index 4d95351edb..7f9ca64614 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tensorboard-color.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tensorboard-color.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 
 <style is="custom-style">
 
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test/BUILD b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test/BUILD
new file mode 100644
index 0000000000..f3ce8d09e2
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test/BUILD
@@ -0,0 +1,48 @@
+package(
+    default_testonly = True,
+    default_visibility = ["//tensorflow:internal"],
+)
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "test",
+    srcs = [
+        "bundle.js",
+        "tests.html",
+    ],
+    path = "/tf-dashboard-common/test",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "@org_npmjs_registry_web_component_tester",
+        "@org_polymer",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:chai.d.ts",
+        "@org_definitelytyped//:mocha.d.ts",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4:bundle.d.ts",
+    ],
+)
+
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF.Dashboard": ["tf-categorizer-tests.ts"]},
+)
+
+filegroup(
+    name = "all_files",
+    testonly = 0,
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test/tests.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test/tests.html
new file mode 100644
index 0000000000..121b0dc1a5
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test/tests.html
@@ -0,0 +1,24 @@
+<!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">
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../web-component-tester/browser.js"></script>
+<link rel="import" href="../tf-dashboard.html">
+<body>
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer-tests.ts b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test/tf-categorizer-tests.ts
index bf70d9d4bb..f280d77f66 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer-tests.ts
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/test/tf-categorizer-tests.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {topLevelNamespaceCategorizer, Category, Categorizer, defineCategory, _categorizer} from './tf-categorizer'
+import {topLevelNamespaceCategorizer, Category, Categorizer, defineCategory, _categorizer} from '../tf-categorizer'
 
 let assert = chai.assert;
 
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer-demo.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer-demo.html
index 6692962763..758f024e88 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer-demo.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer-demo.html
@@ -19,8 +19,7 @@ limitations under the License.
 <html>
  <head>
   <link rel="import" href="tf-categorizer.html">
-  <script src="bundle.js"></script>
-
+  <link rel="import" href="bundle.html">
  </head>
  <body>
   <style>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer.html
index 0b563fa4bd..c22c56a3b9 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-categorizer.html
@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="tf-regex-group.html">
 <link rel="import" href="tensorboard-color.html">
 
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-chart-scaffold.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-chart-scaffold.html
index fd5320be39..9cacb7f5c8 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-chart-scaffold.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-chart-scaffold.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 
 <!--
 tf-chart-scaffold is responsible for providing data from TensorBoard to charts.
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-collapsable-pane-demo.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-collapsable-pane-demo.html
index 6c8bdb92ee..1c4ed1529c 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-collapsable-pane-demo.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-collapsable-pane-demo.html
@@ -19,6 +19,7 @@ limitations under the License.
 <html>
  <head>
    <link rel="import" href="tf-collapsable-pane.html">
+   <link rel="import" href="bundle.html">
    
  </head>
  <body>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-collapsable-pane.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-collapsable-pane.html
index 96b4337668..e82540127f 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-collapsable-pane.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-collapsable-pane.html
@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="iron-collapse/iron-collapse.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-collapse/iron-collapse.html">
 
 <dom-module id="tf-collapsable-pane">
   <template>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-dashboard-layout.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-dashboard-layout.html
index 058b0d5946..e0e8a2b52c 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-dashboard-layout.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-dashboard-layout.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="scrollbar-style.html">
 <link rel="import" href="tensorboard-color.html">
 
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-dashboard.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-dashboard.html
index 039da39ecb..1e136936da 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-dashboard.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-dashboard.html
@@ -15,10 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="tf-dashboard-layout.html">
 <link rel="import" href="tensorboard-color.html">
 <link rel="import" href="dashboard-style.html">
 <link rel="import" href="tf-downloader.html">
 <link rel="import" href="tf-no-data-warning.html">
-
+<link rel="import" href="bundle.html">
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-downloader.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-downloader.html
index dd87a47222..7191425959 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-downloader.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-downloader.html
@@ -15,10 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="paper-menu/paper-menu.html">
-<link rel="import" href="paper-item/paper-item.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../paper-menu/paper-menu.html">
+<link rel="import" href="../paper-item/paper-item.html">
 
 <dom-module id="tf-downloader">
   <template>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-multi-checkbox-demo.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-multi-checkbox-demo.html
index 2877a2364f..642bc86ca6 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-multi-checkbox-demo.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-multi-checkbox-demo.html
@@ -18,9 +18,9 @@ limitations under the License.
 
 <html>
 <head>
+<link rel="import" href="../tf-color-scale/tf-color-scale.html">
 <link rel="import" href="tf-multi-checkbox.html">
-<link rel="import" href="tf-color-scale.html">
-<script src="bundle.js"></script>
+<link rel="import" href="bundle.html">
 
 </head>
 <body>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-multi-checkbox.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-multi-checkbox.html
index b45657f7d8..c7db79f74b 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-multi-checkbox.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-multi-checkbox.html
@@ -15,11 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="iron-icons/iron-icons.html">
-<link rel="import" href="paper-checkbox/paper-checkbox.html">
-<link rel="import" href="paper-icon-button/paper-icon-button.html">
-<link rel="import" href="paper-input/paper-input.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="../paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="scrollbar-style.html">
 <link rel="import" href="run-color-style.html">
 
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-no-data-warning.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-no-data-warning.html
index d22d341590..c90efac1d6 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-no-data-warning.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-no-data-warning.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 
 <!--
 Display a warning when there is no data found.
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-option-selector.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-option-selector.html
index d11d43d78a..547a558ad0 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-option-selector.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-option-selector.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="tensorboard-color.html">
 
 <!--
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-panes-helper.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-panes-helper.html
index 1a850c8999..155259d329 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-panes-helper.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-panes-helper.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="tf-collapsable-pane.html">
 <link rel="import" href="tf-no-data-warning.html">
 <link rel="import" href="tf-chart-scaffold.html">
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-regex-group-demo.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-regex-group-demo.html
index bf4cc03f34..051a58e270 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-regex-group-demo.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-regex-group-demo.html
@@ -19,7 +19,7 @@ limitations under the License.
 <html>
  <head>
    <link rel="import" href="tf-regex-group.html">
-   <script src="bundle.js"></script>
+   <link rel="import" href="bundle.html">
  </head>
  <body>
   <style>
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-regex-group.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-regex-group.html
index 60ec40f29d..1434606d24 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-regex-group.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-regex-group.html
@@ -15,11 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="paper-icon-button/paper-icon-button.html">
-<link rel="import" href="iron-icons/iron-icons.html">
-<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
-<link rel="import" href="paper-input/paper-input.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
+<link rel="import" href="../paper-input/paper-input.html">
 
 <!--
 `tf-regex-group` provides an input component for a group of regular expressions.
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-run-selector.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-run-selector.html
index d2b6b1b194..e3d8a91fd0 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-run-selector.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-run-selector.html
@@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="paper-button/paper-button.html">
-<link rel="import" href="paper-dialog/paper-dialog.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../paper-dialog/paper-dialog.html">
 <link rel="import" href="tf-multi-checkbox.html">
 <link rel="import" href="scrollbar-style.html">
 
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-sidebar-helper.html b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-sidebar-helper.html
index cde812205b..5eb8537040 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-sidebar-helper.html
+++ b/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tf-sidebar-helper.html
@@ -15,7 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/lodash.html">
 <link rel="import" href="tf-categorizer.html">
 <link rel="import" href="tf-run-selector.html">
 
diff --git a/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/BUILD b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/BUILD
new file mode 100644
index 0000000000..ace02adfba
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/BUILD
@@ -0,0 +1,41 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "tf_distribution_dashboard_d3v4",
+    srcs = ["tf-distribution-dashboard.html"],
+    path = "/tf-distribution-dashboard",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "//tensorflow/tensorboard/components/vz_distribution_chart_d3v4",
+        "@org_polymer",
+        "@org_polymer_iron_collapse",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_styles",
+    ],
+)
+
+web_library(
+    name = "demo",
+    srcs = ["index.html"] + glob(["data/**"]),
+    path = "/tf-distribution-dashboard",
+    deps = [
+        ":tf_distribution_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run1_tag_histo1.json b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run1_tag_histo1.json
new file mode 100644
index 0000000000..a6765285b1
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run1_tag_histo1.json
@@ -0,0 +1,212 @@
+[
+    [
+        0.0,
+        0,
+        [
+            [
+                0,
+                -2.3150592308536755
+            ],
+            [
+                668,
+                -2.0967547155036605
+            ],
+            [
+                1587,
+                -1.4326244423655616
+            ],
+            [
+                3085,
+                -0.8871306575801902
+            ],
+            [
+                5000,
+                -0.09312398815580714
+            ],
+            [
+                6915,
+                0.2584093405812282
+            ],
+            [
+                8413,
+                0.8895470642005087
+            ],
+            [
+                9332,
+                1.3198979614453679
+            ],
+            [
+                10000,
+                1.6793308878855118
+            ]
+        ]
+    ],
+    [
+        100.0,
+        10,
+        [
+            [
+                0,
+                -1.3417572789138936
+            ],
+            [
+                668,
+                -1.183563374619141
+            ],
+            [
+                1587,
+                -0.48920418783271574
+            ],
+            [
+                3085,
+                0.29326906896076954
+            ],
+            [
+                5000,
+                0.56953784145381
+            ],
+            [
+                6915,
+                0.8684655583499333
+            ],
+            [
+                8413,
+                1.4133127368907181
+            ],
+            [
+                9332,
+                1.906140650457873
+            ],
+            [
+                10000,
+                2.135771998171255
+            ]
+        ]
+    ],
+    [
+        200.0,
+        20,
+        [
+            [
+                0,
+                -1.5066917525035333
+            ],
+            [
+                668,
+                -1.3910909571770793
+            ],
+            [
+                1587,
+                -0.902737218885874
+            ],
+            [
+                3085,
+                -0.3807791904765027
+            ],
+            [
+                5000,
+                0.38900200905253046
+            ],
+            [
+                6915,
+                0.8209734209339482
+            ],
+            [
+                8413,
+                1.302385856695965
+            ],
+            [
+                9332,
+                1.9324626053521639
+            ],
+            [
+                10000,
+                2.957505317875451
+            ]
+        ]
+    ],
+    [
+        300.0,
+        30,
+        [
+            [
+                0,
+                -0.5430457051469562
+            ],
+            [
+                668,
+                -0.4626161834245273
+            ],
+            [
+                1587,
+                0.21573949543027715
+            ],
+            [
+                3085,
+                0.37353741100174215
+            ],
+            [
+                5000,
+                0.6891407881591103
+            ],
+            [
+                6915,
+                1.0927156232630852
+            ],
+            [
+                8413,
+                1.2745337159550916
+            ],
+            [
+                9332,
+                1.4321116832891605
+            ],
+            [
+                10000,
+                2.1913774993059034
+            ]
+        ]
+    ],
+    [
+        400.0,
+        40,
+        [
+            [
+                0,
+                -0.3584790755077172
+            ],
+            [
+                668,
+                -0.33301611509753215
+            ],
+            [
+                1587,
+                -0.1089466072951948
+            ],
+            [
+                3085,
+                0.5792199847585249
+            ],
+            [
+                5000,
+                1.220854943811942
+            ],
+            [
+                6915,
+                1.759829438421432
+            ],
+            [
+                8413,
+                2.3072559906741614
+            ],
+            [
+                9332,
+                2.753036118353921
+            ],
+            [
+                10000,
+                3.0267252195784047
+            ]
+        ]
+    ]
+]
diff --git a/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run2_tag_histo1.json b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run2_tag_histo1.json
new file mode 100644
index 0000000000..9e8a55b3f2
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run2_tag_histo1.json
@@ -0,0 +1,212 @@
+[
+    [
+        0.0,
+        0,
+        [
+            [
+                0,
+                -3.6801669545044846
+            ],
+            [
+                668,
+                -3.192188140974744
+            ],
+            [
+                1587,
+                -2.3414678549368806
+            ],
+            [
+                3085,
+                -0.9632173471995873
+            ],
+            [
+                5000,
+                -0.3214892636797772
+            ],
+            [
+                6915,
+                0.11870794142185205
+            ],
+            [
+                8413,
+                0.8895470642005087
+            ],
+            [
+                9332,
+                1.183563374619141
+            ],
+            [
+                10000,
+                2.665663810418372
+            ]
+        ]
+    ],
+    [
+        100.0,
+        10,
+        [
+            [
+                0,
+                -3.564793583751807
+            ],
+            [
+                668,
+                -3.376844436865802
+            ],
+            [
+                1587,
+                -1.0366615731293798
+            ],
+            [
+                3085,
+                -0.27318696312672563
+            ],
+            [
+                5000,
+                0.9718642422053263
+            ],
+            [
+                6915,
+                2.5765662807928194
+            ],
+            [
+                8413,
+                3.1415385101545126
+            ],
+            [
+                9332,
+                4.085981768607621
+            ],
+            [
+                10000,
+                4.623079406808927
+            ]
+        ]
+    ],
+    [
+        200.0,
+        20,
+        [
+            [
+                0,
+                -2.235172510433281
+            ],
+            [
+                668,
+                -2.004569042815611
+            ],
+            [
+                1587,
+                -1.2015432383370985
+            ],
+            [
+                3085,
+                0.11835464933202625
+            ],
+            [
+                5000,
+                0.56953784145381
+            ],
+            [
+                6915,
+                1.202844810963146
+            ],
+            [
+                8413,
+                2.689066032283515
+            ],
+            [
+                9332,
+                2.8494015726499944
+            ],
+            [
+                10000,
+                3.481377676013788
+            ]
+        ]
+    ],
+    [
+        300.0,
+        30,
+        [
+            [
+                0,
+                -3.360113978269659
+            ],
+            [
+                668,
+                -2.8293185004961043
+            ],
+            [
+                1587,
+                -1.5992540502266783
+            ],
+            [
+                3085,
+                0.14393860259807117
+            ],
+            [
+                5000,
+                1.47723448201245
+            ],
+            [
+                6915,
+                1.9510057389110733
+            ],
+            [
+                8413,
+                2.833176104473626
+            ],
+            [
+                9332,
+                4.142405216576347
+            ],
+            [
+                10000,
+                4.706937777668589
+            ]
+        ]
+    ],
+    [
+        400.0,
+        40,
+        [
+            [
+                0,
+                -2.599286228987632
+            ],
+            [
+                668,
+                -2.240365897443259
+            ],
+            [
+                1587,
+                -1.5992540502266783
+            ],
+            [
+                3085,
+                -0.9101893288861387
+            ],
+            [
+                5000,
+                0.7580548669750213
+            ],
+            [
+                6915,
+                1.6009864433919474
+            ],
+            [
+                8413,
+                2.3504002974280036
+            ],
+            [
+                9332,
+                2.7907805263353733
+            ],
+            [
+                10000,
+                3.5098048900144323
+            ]
+        ]
+    ]
+]
diff --git a/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run2_tag_histo2.json b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run2_tag_histo2.json
new file mode 100644
index 0000000000..7c8836f624
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/compressedHistograms_run_run2_tag_histo2.json
@@ -0,0 +1,212 @@
+[
+    [
+        0.0,
+        0,
+        [
+            [
+                0,
+                -1.9291158122759586
+            ],
+            [
+                668,
+                -1.5970765333488954
+            ],
+            [
+                1587,
+                -1.0923120348519078
+            ],
+            [
+                3085,
+                -0.6688082872192093
+            ],
+            [
+                5000,
+                0.09312398815580714
+            ],
+            [
+                6915,
+                0.44532789251701854
+            ],
+            [
+                8413,
+                0.8238009655877649
+            ],
+            [
+                9332,
+                1.0357232383581656
+            ],
+            [
+                10000,
+                1.2741043689144438
+            ]
+        ]
+    ],
+    [
+        100.0,
+        10,
+        [
+            [
+                0,
+                -0.7780725642449806
+            ],
+            [
+                668,
+                -0.7138496178727424
+            ],
+            [
+                1587,
+                -0.5448932415735014
+            ],
+            [
+                3085,
+                -0.24370397454796228
+            ],
+            [
+                5000,
+                0.42790220995778355
+            ],
+            [
+                6915,
+                0.6191730643365096
+            ],
+            [
+                8413,
+                0.752059342118037
+            ],
+            [
+                9332,
+                1.0451472255274825
+            ],
+            [
+                10000,
+                2.5559479569222825
+            ]
+        ]
+    ],
+    [
+        200.0,
+        20,
+        [
+            [
+                0,
+                -1.3876904425996377
+            ],
+            [
+                668,
+                -1.1464188862638496
+            ],
+            [
+                1587,
+                -0.4049955219067526
+            ],
+            [
+                3085,
+                0.04721394862139682
+            ],
+            [
+                5000,
+                0.56953784145381
+            ],
+            [
+                6915,
+                1.3221859041483333
+            ],
+            [
+                8413,
+                1.6188495656305735
+            ],
+            [
+                9332,
+                1.7613953069723651
+            ],
+            [
+                10000,
+                2.3257482385477384
+            ]
+        ]
+    ],
+    [
+        300.0,
+        30,
+        [
+            [
+                0,
+                -1.600772629982185
+            ],
+            [
+                668,
+                -1.1548516185367033
+            ],
+            [
+                1587,
+                -0.260387173785447
+            ],
+            [
+                3085,
+                0.17416570914366614
+            ],
+            [
+                5000,
+                0.47069243095356195
+            ],
+            [
+                6915,
+                1.1559276581637614
+            ],
+            [
+                8413,
+                2.0474031182051404
+            ],
+            [
+                9332,
+                2.18821711651116
+            ],
+            [
+                10000,
+                2.2393193406467518
+            ]
+        ]
+    ],
+    [
+        400.0,
+        40,
+        [
+            [
+                0,
+                -0.8286852465281818
+            ],
+            [
+                668,
+                -0.7815041529866706
+            ],
+            [
+                1587,
+                -0.3334896444053469
+            ],
+            [
+                3085,
+                0.21085213041026643
+            ],
+            [
+                5000,
+                0.5177616740489182
+            ],
+            [
+                6915,
+                1.077122434649409
+            ],
+            [
+                8413,
+                1.5898009703967424
+            ],
+            [
+                9332,
+                1.8859097291499742
+            ],
+            [
+                10000,
+                2.0954239138728523
+            ]
+        ]
+    ]
+]
diff --git a/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/logdir b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/logdir
new file mode 100644
index 0000000000..b6362b45d7
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/logdir
@@ -0,0 +1 @@
+{"logdir": "/foo/some/fake/logdir"}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/runs.json b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/runs.json
new file mode 100644
index 0000000000..739262a9fb
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/data/runs.json
@@ -0,0 +1,4 @@
+{
+  "run1": {"compressedHistograms": ["histo1"]},
+  "run2": {"compressedHistograms": ["histo2", "histo1"]}
+}
diff --git a/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/index.html b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/index.html
new file mode 100644
index 0000000000..5e825f13f5
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/index.html
@@ -0,0 +1,62 @@
+<!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.
+-->
+
+<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="tf-distribution-dashboard.html">
+
+<title>Distribution Dashboard Demo</title>
+<style>
+  #container {
+    height: 800px;
+    width: 100%;
+    display: block;
+  }
+
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-family: "RobotoDraft","Roboto",sans-serif;
+  }
+
+</style>
+<demo-snippet>
+  <template>
+    <dom-module id="distribution-dash-demo">
+      <template>
+        <tf-distribution-dashboard id="demo" backend="[[backend]]"></tf-distribution-dashboard>
+      </template>
+      <script>
+        Polymer({
+          is: "distribution-dash-demo",
+          properties: {
+            backend: {
+              type: Object,
+              value: function() {
+                var router = new TF.Backend.router("data", true);
+                return new TF.Backend.Backend(router);
+              },
+            },
+          },
+        });
+      </script>
+    </dom-module>
+    <distribution-dash-demo id="container"></distribution-dash-demo>
+  </template>
+</demo-snippet>
diff --git a/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/tf-distribution-dashboard.html b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/tf-distribution-dashboard.html
new file mode 100644
index 0000000000..063bd8d099
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4/tf-distribution-dashboard.html
@@ -0,0 +1,124 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-backend/tf-backend.html">
+<link rel="import" href="../tf-color-scale/tf-color-scale.html">
+<link rel="import" href="../tf-dashboard-common/tf-dashboard.html">
+<link rel="import" href="../tf-dashboard-common/tf-option-selector.html">
+<link rel="import" href="../tf-dashboard-common/tf-panes-helper.html">
+<link rel="import" href="../tf-dashboard-common/tf-sidebar-helper.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../vz-distribution-chart/vz-distribution-chart.html">
+<link rel="import" href="../iron-collapse/iron-collapse.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+
+<!--
+tf-distribution-dashboard is a complete frontend that loads runs from a backend,
+and creates chart panes that display data for those runs.
+
+It provides a x type selector and the normal tf-sidebar-helper options, by
+which the user can customize how data is organized and displayed.
+
+Each chart has a button that can toggle whether it is "expanded"; expanded
+charts are larger.
+
+Organizationally, the #plumbing div contains components that have no concrete
+manifestation and just effect data bindings or data loading. The .sidebar div
+contains shared controls provided by tf-sidebar-helper. The .center div
+contains vz-distribution-charts embedded inside tf-panes-helper's.
+-->
+<dom-module id="tf-distribution-dashboard">
+  <template>
+    <div id="plumbing">
+      <tf-color-scale
+        id="colorScale"
+        runs="[[runs]]"
+        out-color-scale="{{_colorScale}}"
+      ></tf-color-scale>
+    </div>
+
+    <tf-dashboard-layout>
+      <div class="sidebar">
+        <tf-sidebar-helper
+          backend="[[backend]]"
+          categories="{{_categories}}"
+          color-scale="[[_colorScale]]"
+          run2tag="[[run2tag]]"
+          runs="[[runs]]"
+          selected-runs="{{_selectedRuns}}"
+          >
+        <div class="sidebar-section">
+          <tf-option-selector
+            id="xTypeSelector"
+            name="Horizontal Axis"
+            selected-id="{{_xType}}"
+            >
+            <paper-button id="step">step</paper-button>
+            <paper-button id="relative">relative</paper-button>
+            <paper-button id="wall_time">wall</paper-button>
+          </tf-option-selector>
+        </div>
+        </tf-sidebar-helper>
+      </div>
+
+      <div class="center">
+        <tf-panes-helper
+          categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
+          data-type="[[dataType]]"
+          data-provider="[[dataProvider]]"
+          data-not-found="[[dataNotFound]]"
+          run2tag="[[run2tag]]"
+          selected-runs="[[_selectedRuns]]"
+          repeat-for-runs
+          >
+          <template>
+            <vz-distribution-chart
+              x-type="[[_xType]]"
+              color-scale="[[_colorScale]]"
+              ></vz-distribution-chart>
+          </template>
+        </tf-panes-helper>
+      </div>
+    </tf-dashboard-layout>
+
+    <style include="dashboard-style"></style>
+  </template>
+
+  <script>
+    TF.Dashboard.TfDistributionDashboard = Polymer({
+      is: "tf-distribution-dashboard",
+      factoryImpl: function(backend) {
+        this.backend = backend;
+      },
+      behaviors: [
+        TF.Dashboard.DashboardBehavior("distributions"),
+        TF.Dashboard.ReloadBehavior("tf-chart-scaffold"),
+        TF.Backend.BackendBehavior,
+      ],
+      properties: {
+        backend: Object,
+        _xType: {
+          type: String,
+          value: "step"
+        },
+        dataType: {value: "compressedHistogram"},
+      },
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_globals_d3v4/BUILD b/tensorflow/tensorboard/components/tf_globals_d3v4/BUILD
index 202e72aaa6..699cd3239b 100644
--- a/tensorflow/tensorboard/components/tf_globals_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/tf_globals_d3v4/BUILD
@@ -1,12 +1,29 @@
 package(default_visibility = ["//tensorflow:internal"])
 
-load("//tensorflow/tensorboard:defs.bzl", "tensorboard_ts_library")
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-tensorboard_ts_library(
+web_library(
+    name = "tf_globals_d3v4",
+    srcs = [
+        "bundle.js",
+        "tf-globals.html",
+    ],
+    path = "/tf-globals",
+)
+
+tensorboard_typescript_genrule(
     name = "ts",
-    srcs = ["globals.ts"],
+    srcs = ["bundle.ts"],
+)
+
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF.Globals": ["globals.ts"]},
 )
 
 filegroup(
diff --git a/tensorflow/tensorboard/components/tf_globals_d3v4/tf-globals.html b/tensorflow/tensorboard/components/tf_globals_d3v4/tf-globals.html
new file mode 100644
index 0000000000..b0fd74d4f2
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_globals_d3v4/tf-globals.html
@@ -0,0 +1,19 @@
+<!--
+@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.
+-->
+
+<script src="bundle.js"></script>
+
diff --git a/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/BUILD b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/BUILD
new file mode 100644
index 0000000000..8ef115e6d5
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/BUILD
@@ -0,0 +1,41 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "tf_histogram_dashboard_d3v4",
+    srcs = ["tf-histogram-dashboard.html"],
+    path = "/tf-histogram-dashboard",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "//tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4",
+        "@org_polymer",
+        "@org_polymer_iron_collapse",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_styles",
+    ],
+)
+
+web_library(
+    name = "demo",
+    srcs = ["index.html"] + glob(["data/**"]),
+    path = "/tf-histogram-dashboard",
+    deps = [
+        ":tf_histogram_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run1_tag_histo1.json b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run1_tag_histo1.json
new file mode 100644
index 0000000000..a5600a356e
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run1_tag_histo1.json
@@ -0,0 +1 @@
+[[400.0, 40, [-0.3584790755077172, 3.0267252195784047, 20.0, 24.012225532303315, 48.29045006426564, [-0.35363819004775493, -0.29226296698161564, -0.19961953895336082, 0.3214892636797772, 0.5177616740489182, 0.56953784145381, 0.6264916255991911, 0.7580548669750213, 0.8338603536725235, 1.220854943811942, 1.3429404381931362, 1.47723448201245, 1.624957930213695, 1.7874537232350647, 1.9661990955585713, 2.379100905625872, 2.6170109961884593, 3.1665833053880363], [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 2.0, 1.0, 1.0, 2.0]]]]
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run2_tag_histo1.json b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run2_tag_histo1.json
new file mode 100644
index 0000000000..407c375d2f
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run2_tag_histo1.json
@@ -0,0 +1 @@
+[[400.0, 40, [-2.599286228987632, 3.5098048900144323, 20.0, 10.792285491200078, 66.66796979177158, [-2.379100905625872, -1.9661990955585713, -1.624957930213695, -1.47723448201245, -1.109868130738129, -1.0089710279437536, -0.42790220995778355, -0.2195814928486969, 0.47069243095356195, 0.7580548669750213, 0.917246389039776, 1.3429404381931362, 1.624957930213695, 1.7874537232350647, 2.1628190051144287, 2.6170109961884593, 2.8787120958073054, 3.8315657995195243], [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 2.0, 1.0, 1.0, 2.0, 1.0, 1.0]]]]
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run2_tag_histo2.json b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run2_tag_histo2.json
new file mode 100644
index 0000000000..752b621ab0
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/histograms_run_run2_tag_histo2.json
@@ -0,0 +1 @@
+[[400.0, 40, [-0.8286852465281818, 2.0954239138728523, 20.0, 13.546880465642861, 24.14836803774091, [-0.7580548669750213, -0.38900200905253046, -0.06996543062044111, 0.07696197368248522, 0.19961953895336082, 0.2656936063469233, 0.29226296698161564, 0.5177616740489182, 0.7580548669750213, 0.917246389039776, 1.109868130738129, 1.220854943811942, 1.624957930213695, 2.1628190051144287], [2.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 2.0, 2.0, 1.0, 1.0, 1.0, 2.0, 3.0]]]]
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/logdir b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/logdir
new file mode 100644
index 0000000000..b6362b45d7
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/logdir
@@ -0,0 +1 @@
+{"logdir": "/foo/some/fake/logdir"}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/runs.json b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/runs.json
new file mode 100644
index 0000000000..cbe657af6b
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/data/runs.json
@@ -0,0 +1,4 @@
+{
+	"run1": {"histograms": ["histo1"]}, 
+	"run2": {"histograms": ["histo2", "histo1"]}
+}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/index.html b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/index.html
new file mode 100644
index 0000000000..c8d02f990d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/index.html
@@ -0,0 +1,61 @@
+<!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.
+-->
+
+<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="tf-histogram-dashboard.html">
+
+<title>Distribution Dashboard Demo</title>
+<style>
+  #container {
+    height: 800px;
+    display: block;
+  }
+
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-family: "RobotoDraft","Roboto",sans-serif;
+  }
+
+</style>
+<demo-snippet>
+  <template>
+    <dom-module id="histogram-dash-demo">
+      <template>
+        <tf-histogram-dashboard id="demo" backend="[[backend]]"></tf-histogram-dashboard>
+      </template>
+      <script>
+        Polymer({
+          is: "histogram-dash-demo",
+          properties: {
+            backend: {
+              type: Object,
+              value: function() {
+                var router = new TF.Backend.router("data", true);
+                return new TF.Backend.Backend(router);
+              },
+            },
+          },
+        });
+      </script>
+    </dom-module>
+    <histogram-dash-demo id="container"></histogram-dash-demo>
+  </template>
+</demo-snippet>
diff --git a/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/tf-histogram-dashboard.html b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/tf-histogram-dashboard.html
new file mode 100644
index 0000000000..d9967961eb
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4/tf-histogram-dashboard.html
@@ -0,0 +1,163 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-backend/tf-backend.html">
+<link rel="import" href="../tf-color-scale/tf-color-scale.html">
+<link rel="import" href="../tf-dashboard-common/tf-categorizer.html">
+<link rel="import" href="../tf-dashboard-common/tf-dashboard.html">
+<link rel="import" href="../tf-dashboard-common/tf-panes-helper.html">
+<link rel="import" href="../tf-dashboard-common/tf-option-selector.html">
+<link rel="import" href="../tf-dashboard-common/tf-sidebar-helper.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../vz-histogram-timeseries/vz-histogram-timeseries.html">
+<link rel="import" href="../iron-collapse/iron-collapse.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+
+<!--
+tf-histogram-dashboard is a complete frontend that loads runs from a backend,
+and creates chart panes that display data for those runs.
+
+It provides a mode and time property selector, together with the selectors
+provided by tf-sidebar-helper, by which the user can customize how data is
+organized and displayed.
+
+Each chart has a button that can toggle whether it is "selected"; selectedRuns
+charts are larger.
+
+Organizationally, the #plumbing div contains components that have no concrete
+manifestation and just effect data bindings or data loading. The .sidebar div
+contains shared controls provided by tf-sidebar-helper. The .center div
+contains vz-histogram-timeseries embedded inside tf-panes-helper's.
+-->
+<dom-module id="tf-histogram-dashboard">
+  <template>
+    <div id="plumbing">
+      <tf-color-scale
+        id="colorScale"
+        runs="[[runs]]"
+        out-color-scale="{{_colorScale}}"
+      ></tf-color-scale>
+    </div>
+
+    <tf-dashboard-layout>
+      <div class="sidebar">
+        <tf-sidebar-helper
+          backend="[[backend]]"
+          categories="{{_categories}}"
+          color-scale="[[_colorScale]]"
+          run2tag="[[run2tag]]"
+          runs="[[runs]]"
+          selected-runs="{{_selectedRuns}}"
+          show-download-links="{{_showDownloadLinks}}"
+          >
+          <div class="sidebar-section">
+            <tf-option-selector
+              id="histogramModeSelector"
+              name="Histogram Mode"
+              selected-id="{{_histogramMode}}"
+              >
+              <paper-button id="overlay">overlay</paper-button>
+              <paper-button id="offset">offset</paper-button>
+            </tf-option-selector>
+          </div>
+          <div class="sidebar-section">
+            <tf-option-selector
+              id="timePropertySelector"
+              name="Offset Time Axis"
+              selected-id="{{_timeProperty}}"
+              >
+              <paper-button id="step">step</paper-button>
+              <paper-button id="relative">relative</paper-button>
+              <paper-button id="wall_time">wall</paper-button>
+            </tf-option-selector>
+          </tf-sidebar-helper>
+       </div>
+      </div>
+
+      <div class="center">
+        <tf-panes-helper
+          categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
+          data-type="[[dataType]]"
+          data-provider="[[dataProvider]]"
+          data-not-found="[[dataNotFound]]"
+          run2tag="[[run2tag]]"
+          selected-runs="[[_selectedRuns]]"
+          repeat-for-runs
+          >
+          <template>
+            <vz-histogram-timeseries
+              time-property="[[_timeProperty]]"
+              mode="[[_histogramMode]]"
+              color-scale="[[_colorScaleFunction]]"
+              ></vz-histogram-timeseries>
+          </template>
+        </tf-panes-helper>
+      </div>
+    </tf-dashboard-layout>
+
+    <style include="dashboard-style"></style>
+    <style>
+      tf-panes-helper {
+        --card-expanded-height: 500px;
+        --card-expanded-width: 700px;
+      }
+    </style>
+  </template>
+
+  <script>
+    TF.Dashboard.TfHistogramDashboard = Polymer({
+      is: "tf-histogram-dashboard",
+      factoryImpl: function(backend) {
+        this.backend = backend;
+      },
+      behaviors: [
+        TF.Dashboard.DashboardBehavior("histograms"),
+        TF.Dashboard.ReloadBehavior("tf-chart-scaffold"),
+        TF.Backend.BackendBehavior,
+      ],
+      properties: {
+        backend: Object,
+        dataType: {
+          type: String,
+          value: "histogram"
+        },
+        _histogramMode: {
+          type: String,
+          value: "offset"
+        },
+        _timeProperty: {
+          type: String,
+          value: "step"
+        },
+        _colorScaleFunction: {
+          type: Function,
+          computed: "_getColorScaleFunction(_colorScale)"
+        },
+      },
+      attached: function() {
+        this.async(function() {
+          this.fire("rendered");
+        });
+      },
+      _getColorScaleFunction: function() {
+        return this._colorScale.scale.bind(this._colorScale);
+      },
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/BUILD b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/BUILD
new file mode 100644
index 0000000000..fcb242d5da
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/BUILD
@@ -0,0 +1,44 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "tf_image_dashboard_d3v4",
+    srcs = [
+        "tf-image-dashboard.html",
+        "tf-image-loader.html",
+    ],
+    path = "/tf-image-dashboard",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "@org_polymer",
+        "@org_polymer_paper_dialog",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_slider",
+        "@org_polymer_paper_spinner",
+    ],
+)
+
+web_library(
+    name = "demo",
+    srcs = ["index.html"] + glob(["data/**"]),
+    path = "/tf-image-dashboard",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_image_dashboard_d3v4",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run1_tag_im1_2Fimage_2F0.json b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run1_tag_im1_2Fimage_2F0.json
new file mode 100644
index 0000000000..3dec432213
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run1_tag_im1_2Fimage_2F0.json
@@ -0,0 +1,9 @@
+[
+  {
+    "wall_time":1459200389.088045,
+    "width":4,
+    "height":4,
+    "step":0,
+    "query":"tag=im1%2Fimage%2F0&index=0&run=run1"
+  }
+]
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run1_tag_im2_2Fimage_2F0.json b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run1_tag_im2_2Fimage_2F0.json
new file mode 100644
index 0000000000..16152b8626
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run1_tag_im2_2Fimage_2F0.json
@@ -0,0 +1,9 @@
+[
+  {
+    "wall_time":1459200389.093653,
+    "width":4,
+    "height":4,
+    "step":0,
+    "query":"tag=im2%2Fimage%2F0&index=0&run=run1"
+  }
+]
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run2_tag_im1_2Fimage_2F0.json b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run2_tag_im1_2Fimage_2F0.json
new file mode 100644
index 0000000000..a717b79c5d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/images_run_run2_tag_im1_2Fimage_2F0.json
@@ -0,0 +1,9 @@
+[
+  {
+    "wall_time":1459200389.117463,
+    "width":4,
+    "height":4,
+    "step":0,
+    "query":"tag=im1%2Fimage%2F0&index=0&run=run2"
+  }
+]
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im1_2Fimage_2F0_index_0_run_run1.png b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im1_2Fimage_2F0_index_0_run_run1.png
new file mode 100644
index 0000000000..346fd0076b
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im1_2Fimage_2F0_index_0_run_run1.png
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im1_2Fimage_2F0_index_0_run_run2.png b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im1_2Fimage_2F0_index_0_run_run2.png
new file mode 100644
index 0000000000..26d2d10aca
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im1_2Fimage_2F0_index_0_run_run2.png
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im2_2Fimage_2F0_index_0_run_run1.png b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im2_2Fimage_2F0_index_0_run_run1.png
new file mode 100644
index 0000000000..6c41906294
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/individualImage_tag_im2_2Fimage_2F0_index_0_run_run1.png
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/logdir b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/logdir
new file mode 100644
index 0000000000..c7d82022cc
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/logdir
@@ -0,0 +1 @@
+{"logdir": "/some/fake/logdir"}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/runs.json b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/runs.json
new file mode 100644
index 0000000000..b75de5b661
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/data/runs.json
@@ -0,0 +1,13 @@
+{
+   "run1":{
+      "images":[
+         "im1/image/0",
+         "im2/image/0"
+      ]
+   },
+   "run2":{
+      "images":[
+         "im1/image/0"
+      ]
+   }
+}
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/index.html b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/index.html
new file mode 100644
index 0000000000..f9ea187952
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/index.html
@@ -0,0 +1,66 @@
+<!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.
+-->
+
+<html>
+  <head>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="tf-image-dashboard.html">
+    <title>Image Dashboard Demo</title>
+    <style>
+      #container{
+        width: 1000px;
+        height: 800px;
+        border: 2px solid grey;
+      }
+      html,body {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <demo-snippet>
+      <template>
+        <dom-module id="image-dash-demo">
+          <template>
+            <tf-image-dashboard id="demo" backend="[[backend]]">
+            </tf-image-dashboard>
+          </template>
+          <script>
+            Polymer({
+              is: "image-dash-demo",
+              properties: {
+                backend: {
+                  type: Object,
+                  value: function() {
+                    var path = "data";
+                    var router = new TF.Backend.router(path, true);
+                    return new TF.Backend.Backend(router);
+                  },
+                },
+              },
+            });
+          </script>
+        </dom-module>
+        <div id="container">
+          <image-dash-demo></image-dash-demo>
+        </div>
+      </template>
+    </demo-snippet>
+  </body>
+</html>
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/tf-image-dashboard.html b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/tf-image-dashboard.html
new file mode 100644
index 0000000000..0700a8c0e7
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/tf-image-dashboard.html
@@ -0,0 +1,156 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-dialog/paper-dialog.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../tf-backend/tf-backend.html">
+<link rel="import" href="../tf-color-scale/tf-color-scale.html">
+<link rel="import" href="../tf-dashboard-common/tf-dashboard.html">
+<link rel="import" href="../tf-dashboard-common/tf-panes-helper.html">
+<link rel="import" href="../tf-dashboard-common/tf-sidebar-helper.html">
+<link rel="import" href="tf-image-loader.html">
+
+<!--
+tf-image-dashboard displays a dashboard that loads images from a TensorFlow run.
+-->
+<dom-module id="tf-image-dashboard">
+  <template>
+    <paper-dialog with-backdrop id="actual-image-size-dialog"></paper-dialog>
+    <div id="plumbing">
+      <tf-color-scale
+        id="colorScale"
+        runs="[[runs]]"
+        out-color-scale="{{_colorScale}}"
+        ></tf-color-scale>
+    </div>
+
+    <tf-dashboard-layout>
+      <div class="sidebar">
+        <tf-sidebar-helper
+          backend="[[backend]]"
+          categories="{{_categories}}"
+          color-scale="[[_colorScale]]"
+          run2tag="[[run2tag]]"
+          runs="[[runs]]"
+          selected-runs="{{_selectedRuns}}"
+          >
+        </tf-sidebar-helper>
+      </div>
+      <div class="center">
+        <tf-panes-helper
+          categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
+          data-type="[[dataType]]"
+          data-provider="[[dataProvider]]"
+          data-not-found="[[dataNotFound]]"
+          run2tag="[[run2tag]]"
+          selected-runs="[[_selectedRuns]]"
+          repeat-for-runs
+          >
+          <template>
+            <tf-image-loader color-scale="[[_colorScale]]"></tf-image-loader>
+            <paper-icon-button
+              class="actual-size-button"
+              icon="aspect-ratio"
+              on-tap="_showActualSize"
+              title="Show the image at its true pixel size"
+              ></paper-icon-button>
+          </template>
+        </tf-panes-helper>
+      </div>
+    </tf-dashboard-layout>
+    <style include="dashboard-style"></style>
+    <style>
+      tf-panes-helper {
+        --card-width: 340px;
+        --card-height: auto;
+        --card-expanded-width: 700px;
+        --card-expanded-height: auto;
+      }
+
+      .actual-size-button {
+        background: #fff;
+        border-radius: 100%;
+        bottom: -35px;
+        color: #2196f3;
+        height: 32px;
+        left: 35px;
+        padding: 4px;
+        pointer-events: auto;
+        position: absolute;
+        width: 32px;
+      }
+
+      .actual-size-button-selected {
+        background: var(--tb-ui-light-accent);
+      }
+
+      #actual-image-size-dialog {
+        overflow: auto;
+      }
+    </style>
+  </template>
+  <script>
+    TF.Dashboard.TfImageDashboard = Polymer({
+      is: "tf-image-dashboard",
+      factoryImpl: function(backend) {
+        this.backend = backend;
+      },
+      properties: {
+        backend: Object,
+        dataType: {
+          type: String,
+          value: "image"
+        },
+      },
+      behaviors: [
+        TF.Dashboard.DashboardBehavior("images"),
+        TF.Dashboard.ReloadBehavior("tf-chart-scaffold"),
+        TF.Backend.BackendBehavior,
+      ],
+      attached: function() {
+        this.async(function() {
+          this.fire("rendered");
+        });
+      },
+      _showActualSize: function(e) {
+        var currentTarget = Polymer.dom(e.currentTarget);
+        var card = currentTarget.node.closest('.card');
+
+        // Create a full-size copy of the image.
+        var newImage = card.querySelector('#img').cloneNode();
+        newImage.style.height = 'auto';
+        newImage.style.width = 'auto';
+        newImage.style.margin = 0;
+        newImage.style.padding = 0;
+        newImage.classList.add("actual-size-image");
+
+        // When the user clicks on the image, empty and close the dialog.
+        var dialog = this.$$('#actual-image-size-dialog');
+        newImage.addEventListener('click', function() {
+          dialog.close();
+        });
+
+        // Update dialog content. Show the dialog.
+        dialog.innerHTML = '';
+        dialog.appendChild(newImage);
+        dialog.open();
+      }
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/tf-image-loader.html b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/tf-image-loader.html
new file mode 100644
index 0000000000..d9ba013dce
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_image_dashboard_d3v4/tf-image-loader.html
@@ -0,0 +1,233 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-slider/paper-slider.html">
+<link rel="import" href="../paper-spinner/paper-spinner-lite.html">
+<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../tf-imports/d3.html">
+
+<!--
+tf-image-loader loads an individual image from the TensorBoard backend.
+
+Right now it always loads the most recent image. We should add support in the
+future for loading older images.
+-->
+<dom-module id="tf-image-loader">
+  <template>
+    <div id="image-annotation">
+      <template is="dom-if" if="[[_hasAtLeastOneStep]]">
+        step
+        <span class="step-value">
+          [[_stepValue]]
+        </span>
+        <template is="dom-if" if="[[_currentWallTime]]">
+          ([[_currentWallTime]])
+        </template>
+        <paper-spinner-lite active hidden$=[[!_isImageLoading]]></paper-spinner-lite>
+      </template>
+      <template is="dom-if" if="[[_hasMultipleSteps]]">
+        <paper-slider
+          id="steps"
+          immediate-value="{{_stepIndex}}"
+          max="[[_maxStepIndex]]"
+          max-markers="[[_maxStepIndex]]"
+          snaps
+          step="1"
+          value="{{_stepIndex}}"></paper-slider>
+      </template>
+    </div>
+
+    <div id="main-image-container"></div>
+
+    <style>
+      :host {
+        display: block;
+        width: 100%;
+        height: auto;
+        position: relative;
+        --step-slider-knob-color: #424242;
+      }
+
+      #image-annotation {
+        border-left: 4px solid;
+        padding-left: 5px;
+        font-size: 12px;
+        margin: -10px 0 10px 0;
+      }
+
+      #image-annotation .step-value {
+        font-weight: bold;
+      }
+
+      #image-annotation paper-spinner-lite {
+        width: 14px;
+        height: 14px;
+        vertical-align: text-bottom;
+        --paper-spinner-color: var(--tb-orange-strong)
+      }
+
+      #steps {
+        height: 15px;
+        margin: 0 0 0 -15px;
+        /* 31 comes from adding a padding of 15px from both sides of the paper-slider, subtracting
+         * 1px so that the slider width aligns with the image (the last slider marker takes up 1px),
+         * and adding 2px to account for a border of 1px on both sides of the image. 30 - 1 + 2. */
+        width: calc(100% + 31px);
+        --paper-slider-active-color: var(--step-slider-knob-color);
+        --paper-slider-knob-color: var(--step-slider-knob-color);
+        --paper-slider-pin-color: var(--step-slider-knob-color);
+        --paper-slider-knob-start-color: var(--step-slider-knob-color);
+        --paper-slider-knob-start-border-color: var(--step-slider-knob-color);
+        --paper-slider-pin-start-color: var(--step-slider-knob-color);
+      }
+
+      #main-image-container img {
+        border: 1px solid #f5f5f5;
+        image-rendering: -moz-crisp-edges;
+        image-rendering: pixelated;
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+    </style>
+  </template>
+  <script>
+    "use strict";
+
+    Polymer({
+      is: "tf-image-loader",
+      properties: {
+        colorScale: Object,
+        run: String,
+        // This is an array of Tensorboard Image&Datum objects (See backend.ts for details). The
+        // properties of objects in this array are
+        // {
+        //   width: number,
+        //   height: number,
+        //   wall_time: Date,
+        //   step: number,
+        //   url: string,
+        // }
+        _steps: {
+          type: Array,
+          value: [],
+          notify: true,
+        },
+        _stepIndex: {
+          type: Number,
+          notify: true,
+        },
+        _hasAtLeastOneStep: {
+          type: Boolean,
+          computed: "_computeHasAtLeastOneStep(_steps)",
+        },
+        _hasMultipleSteps: {
+          type: Boolean,
+          computed: "_computeHasMultipleSteps(_steps)",
+        },
+        _stepValue: {
+          type: Number,
+          computed: "_computeStepValue(_stepIndex)",
+        },
+        _currentWallTime: {
+          type: Number,
+          computed: "_computeCurrentWallTime(_stepIndex)",
+        },
+        _maxStepIndex: {
+          type: Number,
+          computed: "_computeMaxStepIndex(_steps)",
+        },
+        // We use a strictly increasing index to make sure that we don't settle on a stale image.
+        _currentImageLoadIndex: {
+          type: Number,
+          value: 1,
+        },
+        _isImageLoading: {
+          type: Boolean,
+          value: false,
+        },
+      },
+      observers: [
+        "_updateImageUrl(_steps, _stepIndex)",
+      ],
+      redraw: function() {
+        // Other dashboards logic requires a redraw method to be defined. redraw is called at
+        // various places such as when the image is expanded.
+        this.setSeriesData(this.run, this._steps);
+      },
+      setVisibleSeries: function(runs) {
+        // Do nothing.
+      },
+      setSeriesData: function(run, steps) {
+        this.set("run", run);
+        this.set("_steps", steps);
+        this.set("_stepIndex", steps.length - 1);
+
+        // Update the border color based on the run.
+        var color = this.colorScale.scale(run);
+        this.$$("#image-annotation").style.borderColor = color;
+      },
+      _updateImageUrl: function(steps, stepIndex) {
+        // We manually change the image URL (instead of binding to the image's src attribute)
+        // because we would like to manage what happens when the image starts to / finishes loading.
+        if (!steps.length) {
+          return;
+        }
+
+        let img = new Image();
+        img.id = "img"; // '#img' used to select the image in tf-image-dashboard.
+
+        const loadIndex = ++this._currentImageLoadIndex;
+        img.onload = img.onerror = (function() {
+          if (loadIndex != this._currentImageLoadIndex) {
+            // This load is no longer relevant.
+            return;
+          }
+
+          // The new image has finished loading. Remove the old image. Add the new one.
+          let mainImageContainer = this.$$("#main-image-container");
+          mainImageContainer.innerHTML = "";
+          Polymer.dom(mainImageContainer).appendChild(img);
+
+          // The image has finished loading (or has erred and failed to load).
+          this.set("_isImageLoading", false);
+        }).bind(this);
+
+        // Load the new image.
+        this.set("_isImageLoading", true);
+        img.src = steps[stepIndex].url;
+      },
+      _computeHasAtLeastOneStep: function(steps) {
+        return !!steps && steps.length > 0;
+      },
+      _computeHasMultipleSteps: function(steps) {
+        return !!steps && steps.length > 1;
+      },
+      _computeStepValue: function(stepIndex) {
+        return this._steps[stepIndex].step;
+      },
+      _computeCurrentWallTime: function(stepIndex) {
+        return this._steps[stepIndex].wall_time.toString();
+      },
+      _computeMaxStepIndex: function(steps) {
+        return steps.length - 1;
+      },
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_imports_d3v4/BUILD b/tensorflow/tensorboard/components/tf_imports_d3v4/BUILD
index dfd8a1ceda..edf759052f 100644
--- a/tensorflow/tensorboard/components/tf_imports_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/tf_imports_d3v4/BUILD
@@ -8,7 +8,7 @@ licenses(["notice"])  # Apache 2.0
 web_library(
     name = "lodash",
     srcs = ["lodash.html"],
-    path = "/tf-imports-d3v4",
+    path = "/tf-imports",
     deps = ["@com_lodash"],
 )
 
@@ -46,7 +46,7 @@ web_library(
         "graphlib.html",
         "@io_github_cpettitt_graphlib",
     ],
-    path = "/tf-imports-d3v4",
+    path = "/tf-imports",
     deps = [":lodash"],
 )
 
@@ -56,7 +56,7 @@ web_library(
         "dagre.html",
         "@io_github_cpettitt_dagre",
     ],
-    path = "/tf-imports-d3v4",
+    path = "/tf-imports",
     deps = [
         ":graphlib",
         ":lodash",
diff --git a/tensorflow/tensorboard/components/tf_imports_d3v4/threejs.html b/tensorflow/tensorboard/components/tf_imports_d3v4/threejs.html
index 75b016f0e8..36386a5095 100644
--- a/tensorflow/tensorboard/components/tf_imports_d3v4/threejs.html
+++ b/tensorflow/tensorboard/components/tf_imports_d3v4/threejs.html
@@ -16,3 +16,4 @@ limitations under the License.
 -->
 
 <script src="three.js"></script>
+<script src="OrbitControls.js"></script>
diff --git a/tensorflow/tensorboard/components/tf_option_selector_d3v4/BUILD b/tensorflow/tensorboard/components/tf_option_selector_d3v4/BUILD
new file mode 100644
index 0000000000..db5d07b095
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_option_selector_d3v4/BUILD
@@ -0,0 +1,21 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "tf_option_selector_d3v4",
+    srcs = ["tf-option-selector.html"],
+    path = "/tf-option-selector",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "@org_polymer",
+    ],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_option_selector_d3v4/tf-option-selector.html b/tensorflow/tensorboard/components/tf_option_selector_d3v4/tf-option-selector.html
new file mode 100644
index 0000000000..d6fc9d6861
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_option_selector_d3v4/tf-option-selector.html
@@ -0,0 +1,94 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
+
+<!--
+tf-option-selector is a simple component that has buttons as content and
+provides a "selectedId" property that is one of the IDs of the buttons inside it.
+-->
+<dom-module id="tf-option-selector">
+  <template>
+    <div id="wrap">
+      <h3>[[name]]</h3>
+      <div class="content-wrapper"><content></content></div>
+    </div>
+    <style>
+      .content-wrapper ::content > * {
+        width: 30%;
+        font-size: 13px;
+        background: none;
+        margin-top: 10px;
+        color: var(--tb-ui-dark-accent);
+      }
+
+      .content-wrapper ::content :first-of-type {
+        margin-left: 0;
+      }
+
+      .content-wrapper ::content .selected {
+        background-color: var(--tb-ui-dark-accent);
+        color: white!important;
+      }
+
+      h3 {
+        color: var(--paper-grey-800);
+        margin: 0;
+        font-weight: normal;
+        font-size: 14px;
+        margin-bottom: 5px;
+        display: block;
+        pointer-events: none;
+      }
+    </style>
+  </template>
+  <script>
+    Polymer({
+      is: "tf-option-selector",
+      properties: {
+        name: String,
+        selectedId: {
+          type: String,
+          notify: true,
+          observer: '_selectedIdChanged'
+        }
+      },
+      attached: function() {
+        this.async(function() {
+          this.getEffectiveChildren().forEach(function(node) {
+            this.listen(node, 'tap', '_selectTarget');
+          }.bind(this));
+        });
+      },
+      _selectTarget: function(e) {
+        this.selectedId = e.currentTarget.id;
+      },
+      _selectedIdChanged: function() {
+        var selected = this.queryEffectiveChildren('#' + this.selectedId);
+        if (!selected) {
+          return;
+        }
+
+        this.getEffectiveChildren().forEach(function(node) {
+          node.classList.remove("selected");
+        });
+        selected.classList.add("selected");
+      }
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/BUILD b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/BUILD
new file mode 100644
index 0000000000..3b9f38feab
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/BUILD
@@ -0,0 +1,37 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "tf_scalar_dashboard_d3v4",
+    srcs = [
+        "tf-scalar-dashboard.html",
+        "tf-smoothing-input.html",
+    ],
+    path = "/tf-scalar-dashboard",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "//tensorflow/tensorboard/components/vz_line_chart_d3v4",
+        "@org_polymer",
+        "@org_polymer_iron_collapse",
+        "@org_polymer_paper_checkbox",
+        "@org_polymer_paper_dropdown_menu",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_input",
+        "@org_polymer_paper_item",
+        "@org_polymer_paper_menu",
+        "@org_polymer_paper_slider",
+        "@org_polymer_paper_styles",
+    ],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/BUILD b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/BUILD
new file mode 100644
index 0000000000..322fcfc3bc
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/BUILD
@@ -0,0 +1,24 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "demo",
+    srcs = ["index.html"] + glob(["data/**"]),
+    path = "/tf-scalar-dashboard/demo",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "//tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/logdir b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/logdir
new file mode 100644
index 0000000000..b6362b45d7
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/logdir
@@ -0,0 +1 @@
+{"logdir": "/foo/some/fake/logdir"}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/runs.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/runs.json
new file mode 100644
index 0000000000..d45f530763
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/runs.json
@@ -0,0 +1,4 @@
+{
+  "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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars.json
new file mode 100644
index 0000000000..bc269395b6
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars.json
@@ -0,0 +1 @@
+{"run2": {"foo/cos": [[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]], "bar/square": [[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]], "foo/square": [[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]]}, "run1": {"foo/sin": [[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]], "foo/cos": [[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]], "bar/square": [[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]], "foo/square": [[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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_bar_2Fsquare.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_bar_2Fsquare.json
new file mode 100644
index 0000000000..6d584fb4a9
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_bar_2Fsquare.json
@@ -0,0 +1 @@
+[[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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fcos.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fcos.json
new file mode 100644
index 0000000000..025eaa16e9
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fcos.json
@@ -0,0 +1 @@
+[[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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fsin.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fsin.json
new file mode 100644
index 0000000000..eae69dd78f
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fsin.json
@@ -0,0 +1 @@
+[[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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fsquare.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fsquare.json
new file mode 100644
index 0000000000..6d584fb4a9
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run1_tag_foo_2Fsquare.json
@@ -0,0 +1 @@
+[[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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_bar_2Fsquare.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_bar_2Fsquare.json
new file mode 100644
index 0000000000..6d584fb4a9
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_bar_2Fsquare.json
@@ -0,0 +1 @@
+[[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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_foo_2Fcos.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_foo_2Fcos.json
new file mode 100644
index 0000000000..dd3593f9d1
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_foo_2Fcos.json
@@ -0,0 +1 @@
+[[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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_foo_2Fsquare.json b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_foo_2Fsquare.json
new file mode 100644
index 0000000000..0ff9ef0551
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/data/scalars_run_run2_tag_foo_2Fsquare.json
@@ -0,0 +1 @@
+[[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/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/index.html b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/index.html
new file mode 100644
index 0000000000..586ee2a47d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/demo/index.html
@@ -0,0 +1,62 @@
+<!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.
+-->
+
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+<link rel="import" href="../tf-scalar-dashboard.html">
+<link rel="import" href="../../paper-styles/typography.html">
+
+<title>Scalar Dashboard Demo</title>
+<style>
+  #container {
+    height: 900px;
+    width: 100%;
+    display: block;
+  }
+
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-family: "RobotoDraft","Roboto",sans-serif;
+  }
+
+</style>
+<demo-snippet>
+  <template>
+    <dom-module id="scalar-dash-demo">
+      <template>
+        <tf-scalar-dashboard id="demo" backend="[[backend]]"></tf-scalar-dashboard>
+      </template>
+      <script>
+        Polymer({
+          is: "scalar-dash-demo",
+          properties: {
+            backend: {
+              type: Object,
+              value: function() {
+                var router = new TF.Backend.router("data", true);
+                return new TF.Backend.Backend(router);
+              },
+            },
+          },
+        });
+      </script>
+    </dom-module>
+    <scalar-dash-demo id="container"></scalar-dash-demo>
+  </template>
+</demo-snippet>
diff --git a/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/tf-scalar-dashboard.html b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/tf-scalar-dashboard.html
new file mode 100644
index 0000000000..b91cd90c03
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/tf-scalar-dashboard.html
@@ -0,0 +1,270 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="tf-smoothing-input.html">
+<link rel="import" href="../tf-backend/tf-backend.html">
+<link rel="import" href="../tf-color-scale/tf-color-scale.html">
+<link rel="import" href="../tf-dashboard-common/tf-dashboard.html">
+<link rel="import" href="../tf-dashboard-common/tf-option-selector.html">
+<link rel="import" href="../tf-dashboard-common/tf-panes-helper.html">
+<link rel="import" href="../tf-dashboard-common/tf-sidebar-helper.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../vz-line-chart/vz-line-chart.html">
+<link rel="import" href="../iron-collapse/iron-collapse.html">
+<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-menu/paper-menu.html">
+<link rel="import" href="../paper-item/paper-item.html">
+
+<!--
+tf-scalar-dashboard is a complete frontend that loads runs from a backend,
+and creates chart panes that display data for those runs.
+
+It provides a categorizer, run selector, and x type selector, by which the user
+can customize how data is organized and displayed.
+
+Each chart has a button that can toggle whether it is "expanded"; expanded
+charts are larger.
+
+Organizationally, the #plumbing div contains components that have no concrete
+manifestation and just effect data bindings or data loading. The .sidebar div
+contains shared controls provided by tf-sidebar-helper. The .center div
+contains vz-line-charts embedded inside tf-panes-helper's.
+-->
+<dom-module id="tf-scalar-dashboard">
+  <template>
+    <div id="plumbing">
+      <tf-color-scale
+        id="colorScale"
+        runs="[[runs]]"
+        out-color-scale="{{_colorScale}}"
+      ></tf-color-scale>
+    </div>
+
+    <tf-dashboard-layout>
+      <div class="sidebar">
+        <tf-sidebar-helper
+          backend="[[backend]]"
+          categories="{{_categories}}"
+          color-scale="[[_colorScale]]"
+          run2tag="[[run2tag]]"
+          runs="[[runs]]"
+          selected-runs="{{_selectedRuns}}"
+          >
+          <div class="extend-first-section">
+            <div class="line-item">
+              <paper-checkbox
+              id="download-option"
+              checked="{{_showDownloadLinks}}"
+              >Show data download links</paper-checkbox>
+            </div>
+              <div class="line-item">
+                <paper-checkbox
+                id="outliersCheckbox"
+                checked="{{_ignoreYOutliers}}"
+                >Ignore outliers in chart scaling</paper-checkbox>
+              </div>
+            <div id="tooltip-sorting">
+              <div id="tooltip-sorting-label">Tooltip sorting method:</div>
+              <paper-dropdown-menu
+                no-label-float
+                selected-item-label="{{_tooltipSortingMethod}}"
+                >
+                <paper-menu class="dropdown-content" selected="0">
+                  <paper-item>default</paper-item>
+                  <paper-item>descending</paper-item>
+                  <paper-item>ascending</paper-item>
+                  <paper-item>nearest</paper-item>
+                </paper-menu>
+              </paper-dropdown-menu>
+            </div>
+          </div>
+          <div class="sidebar-section">
+            <tf-smoothing-input
+              weight="{{_smoothingWeight}}"
+              step="0.001"
+              min="0"
+              max="1"
+              ></tf-smoothing-input>
+          </div>
+          <div class="sidebar-section">
+            <tf-option-selector
+              id="xTypeSelector"
+              name="Horizontal Axis"
+              selected-id="{{_xType}}"
+              >
+              <paper-button id="step">step</paper-button>
+              <paper-button id="relative">relative</paper-button>
+              <paper-button id="wall_time">wall</paper-button>
+            </tf-option-selector>
+          </div>
+        </tf-sidebar-helper>
+      </div>
+      <div class="center">
+        <tf-panes-helper
+          categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
+          data-type="[[dataType]]"
+          data-provider="[[dataProvider]]"
+          data-not-found="[[dataNotFound]]"
+          run2tag="[[run2tag]]"
+          selected-runs="[[_selectedRuns]]"
+          show-download-links="[[_showDownloadLinks]]"
+          download-link-url-function="[[scalarUrl]]"
+          >
+          <template>
+            <vz-line-chart
+              x-type="[[_xType]]"
+              color-scale="[[_colorScale]]"
+              smoothing-enabled="[[_smoothingEnabled]]"
+              smoothing-weight="[[_smoothingWeight]]"
+              tooltip-sorting-method="[[_tooltipSortingMethod]]"
+              ignore-y-outliers="[[_ignoreYOutliers]]"
+              ></vz-line-chart>
+            <paper-icon-button
+              class="log-button"
+              icon="line-weight"
+              on-tap="toggleLogScale"
+              title="Toggle y-axis log scale"
+              ></paper-icon-button>
+          </template>
+        </tf-panes-helper>
+      </div>
+    </tf-dashboard-layout>
+
+    <style include="dashboard-style"></style>
+    <style>
+      .log-button {
+        position: absolute;
+        left: 35px;
+        bottom: -35px;
+        color: #2196F3;
+        background: #fff;
+        width: 32px;
+        height: 32px;
+        padding: 4px;
+        border-radius: 100%;
+      }
+
+      .log-button-selected {
+        background: var(--tb-ui-light-accent);
+      }
+
+      #tooltip-sorting {
+        display: flex;
+        font-size: 14px;
+        margin-top: 5px;
+      }
+
+      #tooltip-sorting-label {
+        margin-top: 13px;
+        margin-left: 28px;
+      }
+
+      #tooltip-sorting paper-dropdown-menu {
+        margin-left: 10px;
+        --paper-input-container-focus-color: var(--tb-orange-strong);
+        width: 105px;
+      }
+      .line-item {
+        display: block;
+        padding-top: 5px;
+      }
+    </style>
+
+  </template>
+
+  <script>
+    TF.Dashboard.TfScalarDashboard = Polymer({
+      is: "tf-scalar-dashboard",
+      factoryImpl: function(backend, router) {
+        this.backend = backend;
+        this.router = router;
+      },
+      behaviors: [
+        TF.Dashboard.DashboardBehavior("scalars"),
+        TF.Dashboard.ReloadBehavior("tf-chart-scaffold"),
+        TF.Backend.BackendBehavior,
+      ],
+      properties: {
+        backend: Object,
+        dataType: {
+          type: String,
+          value: "scalar"
+        },
+        router: Object,
+        scalarUrl: {
+          type: Function,
+          computed: "_getScalarUrl(router)"
+        },
+        _showDownloadLinks: {
+          type: Boolean,
+          notify: true,
+          value: TF.URIStorage.getBooleanInitializer('_showDownloadLinks',
+              false, true),
+          observer: '_showDownloadLinksObserver'
+        },
+        _smoothingWeight: {
+          type: Number,
+          notify: true,
+          value: TF.URIStorage.getNumberInitializer('_smoothingWeight', 0.6),
+          observer: '_smoothingWeightObserver'
+        },
+        _smoothingEnabled: {
+          type: Boolean,
+          computed: '_computeSmoothingEnabled(_smoothingWeight)'
+        },
+        _ignoreYOutliers: {
+          type: Boolean,
+          value: TF.URIStorage.getBooleanInitializer('_ignoreYOutliers', true, true),
+          observer: '_ignoreYOutliersObserver',
+        },
+        _xType: {
+          type: String,
+          value: "step"
+        }
+      },
+      attached: function() {
+        this.async(function() {
+          this.fire("rendered");
+        });
+      },
+      _getScalarUrl: function() {
+        return this.router.scalars;
+      },
+      _showDownloadLinksObserver: TF.URIStorage.getBooleanObserver(
+          '_showDownloadLinks', /*default=*/ false, /*useLocalStorage=*/ true),
+      _smoothingWeightObserver: TF.URIStorage.getNumberObserver(
+          '_smoothingWeight', 0.6),
+      _ignoreYOutliersObserver: TF.URIStorage.getBooleanObserver(
+          '_ignoreYOutliers', /*default=*/ true, /*useLocalStorage=*/true),
+      _computeSmoothingEnabled: function(_smoothingWeight) {
+        return _smoothingWeight > 0;
+      },
+      toggleLogScale: function(e) {
+        var currentTarget = Polymer.dom(e.currentTarget);
+        var button = currentTarget.parentNode.querySelector('.log-button');
+        var chart = currentTarget.parentNode.querySelector('vz-line-chart');
+
+        button.classList.toggle("log-button-selected");
+        chart.yScaleType = chart.yScaleType === 'log' ? 'linear' : 'log';
+        chart.redraw();
+      },
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/tf-smoothing-input.html b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/tf-smoothing-input.html
new file mode 100644
index 0000000000..a076033000
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4/tf-smoothing-input.html
@@ -0,0 +1,138 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-slider/paper-slider.html">
+<link rel="import" href="../paper-input/paper-input.html">
+<link rel="import" href="../paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../tf-imports/lodash.html">
+
+<!--
+tf-smoothing-input creates an input component for exponential smoothing.
+-->
+<dom-module id="tf-smoothing-input">
+  <template>
+    <h3 class="title">Smoothing</h3>
+    <div class="smoothing-block">
+      <paper-slider
+        id="slider"
+        value="{{weight}}"
+        immediate-value="{{_immediateWeightNumberForPaperSlider}}"
+        type="number"
+        step="[[step]]"
+        min="[[min]]"
+        max="[[max]]"
+        ></paper-slider>
+      <paper-input
+        id="input"
+        label="weight"
+        no-label-float
+        value="{{_inputWeightStringForPaperInput}}"
+        type="number"
+        step="[[step]]"
+        min="[[min]]"
+        max="[[max]]"
+        ></paper-input>
+    </div>
+    <style>
+      .title {
+        color: var(--paper-grey-800);
+        margin: 0;
+        font-weight: normal;
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+
+      .smoothing-block {
+        display: flex;
+      }
+
+      paper-slider {
+        margin-left: 12px;
+        --paper-slider-knob-color: var(--tb-orange-strong);
+        --paper-slider-active-color: var(--tb-orange-strong);
+        flex-grow: 2;
+      }
+
+      paper-input {
+        --paper-input-container-focus-color: var(--tb-orange-strong);
+        --paper-input-container-input: {
+          font-size: 14px;
+        };
+        --paper-input-container-label: {
+          font-size: 14px;
+        };
+        width: 60px;
+      }
+    </style>
+  </template>
+  <script>
+    Polymer({
+      is: "tf-smoothing-input",
+
+      properties: {
+        step: Number,
+        max: Number,
+        min: Number,
+
+        weight: {
+          type: Number,
+          value: 0.6,
+          notify: true
+        },
+
+        _immediateWeightNumberForPaperSlider: {
+          type: Number,
+          notify: true,
+          observer: '_immediateWeightNumberForPaperSliderChanged'
+        },
+
+        // Paper input treats values as strings even if you specify them as
+        // numbers.
+        _inputWeightStringForPaperInput: {
+          type: String,
+          notify: true,
+          observer: '_inputWeightStringForPaperInputChanged'
+        }
+      },
+
+      _updateWeight: _.debounce(function(val) {
+        this.weight = val;
+      }, 250),
+
+      _immediateWeightNumberForPaperSliderChanged: function() {
+        this._inputWeightStringForPaperInput =
+            this._immediateWeightNumberForPaperSlider.toString();
+        this._updateWeight.call(this, this._immediateWeightNumberForPaperSlider);
+      },
+
+      _inputWeightStringForPaperInputChanged: function() {
+        if (+this._inputWeightStringForPaperInput < 0) {
+          this._inputWeightStringForPaperInput = '0';
+        }
+        else if (+this._inputWeightStringForPaperInput > 1) {
+          this._inputWeightStringForPaperInput = '1';
+        }
+
+        var d = +this._inputWeightStringForPaperInput;
+        if (!isNaN(d)) {
+          this._updateWeight.call(this, d);
+        }
+      }
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_storage_d3v4/BUILD b/tensorflow/tensorboard/components/tf_storage_d3v4/BUILD
index 877f026319..7a8cde6bde 100644
--- a/tensorflow/tensorboard/components/tf_storage_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/tf_storage_d3v4/BUILD
@@ -1,33 +1,50 @@
 package(default_visibility = ["//tensorflow:internal"])
 
-load("//tensorflow/tensorboard:defs.bzl", "tensorboard_ts_library")
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-# TODO(dandelion): Add test runner.
-
-tensorboard_ts_library(
-    name = "ts",
-    srcs = ["storage.ts"],
+web_library(
+    name = "tf_storage_d3v4",
+    srcs = [
+        "bundle.js",
+        "tf-storage.html",
+    ],
+    path = "/tf-storage",
     deps = [
-        "//tensorflow/tensorboard/components/tf_globals_d3v4:ts",
-        "//third_party/javascript/lodash:lodash-module",
-        "//third_party/javascript/typings/lodash",
+        "//tensorflow/tensorboard/components/tf_globals_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
     ],
 )
 
-tensorboard_ts_library(
-    name = "tests",
-    srcs = ["storageTests.ts"],
-    deps = [
-        ":ts",
-        "//tensorflow/tensorboard/components/tf_globals_d3v4:ts",
-        "//third_party/javascript/typings/chai",
-        "//third_party/javascript/typings/mocha",
-        "//third_party/javascript/typings/sinon",
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:lodash.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_globals_d3v4:bundle.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
     ],
 )
 
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF.URIStorage": [
+        "storage.ts",
+    ]},
+    namespace_symbol_aliases = {"TF.URIStorage": {
+        "TABS": "TF.Globals.TABS",
+        "USE_HASH": "TF.Globals.USE_HASH",
+        "getFakeHash": "TF.Globals.getFakeHash",
+        "setFakeHash": "TF.Globals.setFakeHash",
+    }},
+)
+
 filegroup(
     name = "all_files",
     srcs = glob(["**"]),
diff --git a/tensorflow/tensorboard/components/tf_storage_d3v4/test/BUILD b/tensorflow/tensorboard/components/tf_storage_d3v4/test/BUILD
new file mode 100644
index 0000000000..472976f000
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_storage_d3v4/test/BUILD
@@ -0,0 +1,50 @@
+package(
+    default_testonly = True,
+    default_visibility = ["//tensorflow:internal"],
+)
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "test",
+    srcs = [
+        "bundle.js",
+        "tests.html",
+    ],
+    path = "/tf-storage/test",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_storage_d3v4",
+        "@org_npmjs_registry_web_component_tester",
+        "@org_polymer",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:chai.d.ts",
+        "@org_definitelytyped//:mocha.d.ts",
+        "//tensorflow/tensorboard/components/tf_globals_d3v4:bundle.d.ts",
+        "//tensorflow/tensorboard/components/tf_storage_d3v4:bundle.d.ts",
+    ],
+)
+
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"TF.URIStorage": ["storageTests.ts"]},
+    namespace_symbol_aliases = {"TF.URIStorage": {"TABS": "TF.Globals.TABS"}},
+)
+
+filegroup(
+    name = "all_files",
+    testonly = 0,
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_storage_d3v4/storageTests.ts b/tensorflow/tensorboard/components/tf_storage_d3v4/test/storageTests.ts
index adc4dde716..82dc51f05d 100644
--- a/tensorflow/tensorboard/components/tf_storage_d3v4/storageTests.ts
+++ b/tensorflow/tensorboard/components/tf_storage_d3v4/test/storageTests.ts
@@ -12,8 +12,8 @@ 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 {TAB, getString, getNumber, getObject, setString, setNumber, setObject} from './storage';
-import {TABS} from '../tf_globals_d3v4/globals';
+import {TAB, getString, getNumber, getObject, setString, setNumber, setObject} from '../storage';
+import {TABS} from '../../tf-globals/globals';
 
 /* tslint:disable:no-namespace */
 describe('URIStorage', () => {
diff --git a/tensorflow/tensorboard/components/tf_storage_d3v4/test/tests.html b/tensorflow/tensorboard/components/tf_storage_d3v4/test/tests.html
new file mode 100644
index 0000000000..e0553c7d3c
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_storage_d3v4/test/tests.html
@@ -0,0 +1,25 @@
+<!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">
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../web-component-tester/browser.js"></script>
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../tf-storage.html">
+<body>
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/tf_storage_d3v4/tf-storage.html b/tensorflow/tensorboard/components/tf_storage_d3v4/tf-storage.html
new file mode 100644
index 0000000000..91b8976519
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_storage_d3v4/tf-storage.html
@@ -0,0 +1,21 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../tf-globals/tf-globals.html">
+<link rel="import" href="../tf-imports/lodash.html">
+
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/tf_tensorboard/test/data/graph_run_run1.pbtxt b/tensorflow/tensorboard/components/tf_tensorboard/test/data/graph_run_run1.pbtxt
deleted file mode 100644
index 2a6af32840..0000000000
--- a/tensorflow/tensorboard/components/tf_tensorboard/test/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/tensorflow/tensorboard/components/tf_tensorboard/test/data/graph_run_run2.pbtxt b/tensorflow/tensorboard/components/tf_tensorboard/test/data/graph_run_run2.pbtxt
deleted file mode 100644
index a5a4d65d5c..0000000000
--- a/tensorflow/tensorboard/components/tf_tensorboard/test/data/graph_run_run2.pbtxt
+++ /dev/null
@@ -1,15 +0,0 @@
-node {
-  name: "a"
-  op: "matmul"
-}
-node {
-  name: "b"
-  op: "matmul"
-  input: "a:0"
-}
-node {
-  name: "c"
-  op: "matmul"
-  input: "a:0"
-  input: "b:0"
-}
diff --git a/tensorflow/tensorboard/components/tf_tensorboard/test/data/runs.json b/tensorflow/tensorboard/components/tf_tensorboard/test/data/runs.json
deleted file mode 100644
index 10b2821b30..0000000000
--- a/tensorflow/tensorboard/components/tf_tensorboard/test/data/runs.json
+++ /dev/null
@@ -1 +0,0 @@
-{"run2": {"graph": true, "histograms": [], "scalars": [], "compressedHistograms": [], "images": []}, "run1": {"graph": true, "histograms": [], "scalars": [], "compressedHistograms": [], "images": []}}
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/BUILD b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/BUILD
new file mode 100644
index 0000000000..683302bb45
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/BUILD
@@ -0,0 +1,80 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:vulcanize.bzl", "tensorboard_html_binary")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "tf_tensorboard_d3v4",
+    srcs = [
+        "tf-tensorboard.html",
+        ":ts",
+    ],
+    path = "/tf-tensorboard",
+    deps = [
+        "@org_polymer_iron_icons",
+        "@org_polymer_paper_button",
+        "@org_polymer_paper_checkbox",
+        "@org_polymer_paper_dialog",
+        "@org_polymer_paper_header_panel",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_tabs",
+        "@org_polymer_paper_toolbar",
+        "@org_polymer",
+        "//tensorflow/tensorboard/components/tf_audio_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_distribution_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_globals_d3v4",
+        # "//tensorflow/tensorboard/components/tf_graph_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_histogram_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_image_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_scalar_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/tf_storage_d3v4",
+        "//tensorflow/tensorboard/components/tf_text_dashboard_d3v4",
+        "//tensorflow/tensorboard/components/vz_projector_d3v4",
+    ],
+)
+
+web_library(
+    name = "demo",
+    srcs = ["demo.html"],
+    path = "/tf-tensorboard",
+    deps = [
+        ":tf_tensorboard_d3v4",
+        "//tensorflow/tensorboard/demo:demo_data",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+web_library(
+    name = "dist",
+    srcs = ["dist.html"],
+    path = "/tf-tensorboard",
+    deps = [
+        ":tf_tensorboard_d3v4",
+        "//tensorflow/tensorboard/demo:demo_data",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+tensorboard_html_binary(
+    name = "index",
+    # input_path = "/tf-dashboard-common/tf-chart-scaffold.html",
+    input_path = "/tf-tensorboard/dist.html",
+    output_path = "/index.html",
+    deps = [":dist"],
+)
+
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["autoReloadBehavior.ts"],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/autoReloadBehavior.ts b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/autoReloadBehavior.ts
new file mode 100644
index 0000000000..1f6b4cf641
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/autoReloadBehavior.ts
@@ -0,0 +1,60 @@
+/* Copyright 2015 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.
+==============================================================================*/
+module TF.TensorBoard {
+  export var AUTORELOAD_LOCALSTORAGE_KEY = 'TF.TensorBoard.autoReloadEnabled';
+
+  var getAutoReloadFromLocalStorage: () => boolean = () => {
+    var val = window.localStorage.getItem(AUTORELOAD_LOCALSTORAGE_KEY);
+    return val === 'true' || val == null;  // defaults to true
+  };
+
+  export var AutoReloadBehavior = {
+    properties: {
+      autoReloadEnabled: {
+        type: Boolean,
+        observer: '_autoReloadObserver',
+        value: getAutoReloadFromLocalStorage,
+      },
+      _autoReloadId: {
+        type: Number,
+      },
+      autoReloadIntervalSecs: {
+        type: Number,
+        value: 30,
+      },
+    },
+    detached: function() {
+      window.clearTimeout(this._autoReloadId);
+    },
+    _autoReloadObserver: function(autoReload) {
+      window.localStorage.setItem(AUTORELOAD_LOCALSTORAGE_KEY, autoReload);
+      if (autoReload) {
+        var _this = this;
+        this._autoReloadId = window.setTimeout(
+            this._doAutoReload.bind(this), this.autoReloadIntervalSecs * 1000);
+      } else {
+        window.clearTimeout(this._autoReloadId);
+      }
+    },
+    _doAutoReload: function() {
+      if (this.reload == null) {
+        throw new Error('AutoReloadBehavior requires a reload method');
+      }
+      this.reload();
+      this._autoReloadId = window.setTimeout(
+          this._doAutoReload.bind(this), this.autoReloadIntervalSecs * 1000);
+    }
+  };
+}
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/demo.html b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/demo.html
new file mode 100644
index 0000000000..95f5b718a5
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/demo.html
@@ -0,0 +1,32 @@
+<!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.
+-->
+
+<title>TensorBoard</title>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: "RobotoDraft", "Roboto", sans-serif;
+  }
+</style>
+<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAMAAAD3eH5ZAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD/UExURfFlKfaELvFmKfNyK/67NvWALf68Nv69NvNxK/20NfyyNP22NfN0K/JrKvqhMv2zNf25Nf24Nf23NfeOL/yzNPyvNPJoKviWMPmeMfN1K/WBLfePL/FnKfeML/qlMvR7LPmcMfeLL/aJLvR5LPFoKfJuKvR3LP66NvywNPeNL/V/LfaILv21Nf26NfNzK/NvK/R6LPmaMfyxNPqfMvV+LfurM/iSMPmbMfJvKvmdMfumM/qiMvmZMfytNPJqKvysNPN2K/iYMPNwK/upM/JtKvJsKviVMPaHLvaGLvJpKvR8LPaKLvqkMvuqM/aFLvR4LPuoM/iTMPWDLfiRMPmYMXS0ngkAAALoSURBVHja7drnctpAFIbhFUISSKJ3MKYa0+y4xTW9937/15JkJhlTjhrSrHRmvuf/as6L0YLFCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJ6njenqspzgnPrsrGX9Zpi2tCrmnc6+dYNthVY5WpMmxQLWPdMsOuYVwzNj3ei2t3mQwaV43BJPDCS2NbJ5aEeuX/+9qcjQOtfFIkIkrvY2g4MVcmOBsFWbowKO/kNyj62gRpJcDaPBlxLr1B0zdG0C/8LzbJiJrshuvy1gzlA9+rD8mIkuyIJjFE3/dqnYwoSm7IUEPoD/wut8iIguSIDjlFxe/yfXL5vuSI21BTZLLhXoOILMO8Hxwa/L8bI0LfmUdhGowb2ZvT0e57pFNDgB06IlVyjmmIBl2T/nl9Rw6SD9GgSG/Q0uQkaW3XhmovKQ3eFQ4N2Uo9OQ1eFZsNerf7vP+rO4rhmY1Lg3vFVoP8+8BXg1sFnwbnCk4NThW8GuiKBDdkVVtTNFvNelVsNqTbyWnIOM2oeTRoyWvwmpJHg/ucXBrcJuXT4DwrpwZi2vy0VCx8YtXg/D2bU4OfiuQ3eFfE2KD4bfCqiLNB993gXsGlwa2CT4NzBacGIVQ6YsipQdh0xEdODUKjIxrSp88onZ8zbbFLg1DoiFO5BXvDGv2My9/JhUT8JUZTI0yDaNHLBzIbvqTDNYhUiVw/kdjQ1kM2CHFDPjKW+KzyRTF0g/ga9w9y+fANQpxvX8CU+Ny7FUWDeF3Y+g3lROIf4k0UDX9eCyvO531PyYhHga9zvPZJU5b73Y/eXj8Hv9D48n6HaF5LbcjRt8TZTtda5M1DfXnbkX1C0SHCFKzQB5Fe8op4GNGNHavvZESbVwT5r6W1xyuCPBY3Y9YgDqzknH/e3YfNzzuL30l0IebrZ5kKtuDIXt1n868ET6kf3/49tLvrCcZyF8Pu215dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcPIbNrBhOaBXucoAAAAASUVORK5CYII=">
+<link rel="import" href="tf-tensorboard.html">
+
+<tf-tensorboard demo-dir="/data" use-hash></tf-tensorboard>
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/dist.html b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/dist.html
new file mode 100644
index 0000000000..89bcfb733e
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/dist.html
@@ -0,0 +1,32 @@
+<!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.
+-->
+
+<title>TensorBoard</title>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: "RobotoDraft", "Roboto", sans-serif;
+  }
+</style>
+<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAMAAAD3eH5ZAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD/UExURfFlKfaELvFmKfNyK/67NvWALf68Nv69NvNxK/20NfyyNP22NfN0K/JrKvqhMv2zNf25Nf24Nf23NfeOL/yzNPyvNPJoKviWMPmeMfN1K/WBLfePL/FnKfeML/qlMvR7LPmcMfeLL/aJLvR5LPFoKfJuKvR3LP66NvywNPeNL/V/LfaILv21Nf26NfNzK/NvK/R6LPmaMfyxNPqfMvV+LfurM/iSMPmbMfJvKvmdMfumM/qiMvmZMfytNPJqKvysNPN2K/iYMPNwK/upM/JtKvJsKviVMPaHLvaGLvJpKvR8LPaKLvqkMvuqM/aFLvR4LPuoM/iTMPWDLfiRMPmYMXS0ngkAAALoSURBVHja7drnctpAFIbhFUISSKJ3MKYa0+y4xTW9937/15JkJhlTjhrSrHRmvuf/as6L0YLFCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJ6njenqspzgnPrsrGX9Zpi2tCrmnc6+dYNthVY5WpMmxQLWPdMsOuYVwzNj3ei2t3mQwaV43BJPDCS2NbJ5aEeuX/+9qcjQOtfFIkIkrvY2g4MVcmOBsFWbowKO/kNyj62gRpJcDaPBlxLr1B0zdG0C/8LzbJiJrshuvy1gzlA9+rD8mIkuyIJjFE3/dqnYwoSm7IUEPoD/wut8iIguSIDjlFxe/yfXL5vuSI21BTZLLhXoOILMO8Hxwa/L8bI0LfmUdhGowb2ZvT0e57pFNDgB06IlVyjmmIBl2T/nl9Rw6SD9GgSG/Q0uQkaW3XhmovKQ3eFQ4N2Uo9OQ1eFZsNerf7vP+rO4rhmY1Lg3vFVoP8+8BXg1sFnwbnCk4NThW8GuiKBDdkVVtTNFvNelVsNqTbyWnIOM2oeTRoyWvwmpJHg/ucXBrcJuXT4DwrpwZi2vy0VCx8YtXg/D2bU4OfiuQ3eFfE2KD4bfCqiLNB993gXsGlwa2CT4NzBacGIVQ6YsipQdh0xEdODUKjIxrSp88onZ8zbbFLg1DoiFO5BXvDGv2My9/JhUT8JUZTI0yDaNHLBzIbvqTDNYhUiVw/kdjQ1kM2CHFDPjKW+KzyRTF0g/ga9w9y+fANQpxvX8CU+Ny7FUWDeF3Y+g3lROIf4k0UDX9eCyvO531PyYhHga9zvPZJU5b73Y/eXj8Hv9D48n6HaF5LbcjRt8TZTtda5M1DfXnbkX1C0SHCFKzQB5Fe8op4GNGNHavvZESbVwT5r6W1xyuCPBY3Y9YgDqzknH/e3YfNzzuL30l0IebrZ5kKtuDIXt1n868ET6kf3/49tLvrCcZyF8Pu215dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcPIbNrBhOaBXucoAAAAASUVORK5CYII=">
+<link rel="import" href="tf-tensorboard.html">
+<body>
+<tf-tensorboard use-hash></tf-tensorboard>
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/autoReloadTests.ts b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/autoReloadTests.ts
new file mode 100644
index 0000000000..0f049d40ab
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/autoReloadTests.ts
@@ -0,0 +1,85 @@
+/* Copyright 2015 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.
+==============================================================================*/
+declare function fixture(id: string): void;
+window.HTMLImports.whenReady(() => {
+  Polymer({
+    is: 'autoreload-test-element',
+    behaviors: [TF.TensorBoard.AutoReloadBehavior],
+  });
+
+  describe('autoReload-behavior', function() {
+    var testElement;
+    var ls = window.localStorage;
+    var key = TF.TensorBoard.AUTORELOAD_LOCALSTORAGE_KEY;
+    var clock;
+    var callCount: number;
+
+    beforeEach(function() {
+      ls.setItem(key, 'false');  // start it turned off so we can mutate fns
+      testElement = fixture('autoReloadFixture');
+      callCount = 0;
+      testElement.reload = function() { callCount++; };
+    });
+
+    before(function() { clock = sinon.useFakeTimers(); });
+
+    after(function() { clock.restore(); });
+
+    it('reads and writes autoReload state from localStorage', function() {
+      ls.removeItem(key);
+      testElement = fixture('autoReloadFixture');
+      chai.assert.isTrue(
+          testElement.autoReloadEnabled, 'autoReload defaults to true');
+      chai.assert.equal(ls.getItem(key), 'true', 'autoReload setting saved');
+      testElement = fixture('autoReloadFixture');
+      chai.assert.isTrue(
+          testElement.autoReloadEnabled, 'read true from localStorage');
+      testElement.autoReloadEnabled = false;
+      chai.assert.equal(ls.getItem(key), 'false', 'autoReload setting saved');
+      testElement = fixture('autoReloadFixture');
+      chai.assert.isFalse(
+          testElement.autoReloadEnabled, 'read false setting properly');
+      testElement.autoReloadEnabled = true;
+      chai.assert.equal(ls.getItem(key), 'true', 'saved true setting');
+    });
+
+    it('reloads every interval secs when autoReloading', function() {
+      testElement.autoReloadIntervalSecs = 1;
+      testElement.autoReloadEnabled = true;
+      clock.tick(1000);
+      chai.assert.equal(callCount, 1, 'ticking clock triggered call');
+      clock.tick(20 * 1000);
+      chai.assert.equal(callCount, 21, 'ticking clock 20s triggered 20 calls');
+    });
+
+    it('can cancel pending autoReload', function() {
+      testElement.autoReloadIntervalSecs = 10;
+      testElement.autoReloadEnabled = true;
+      clock.tick(5 * 1000);
+      testElement.autoReloadEnabled = false;
+      clock.tick(20 * 1000);
+      chai.assert.equal(callCount, 0, 'callCount is 0');
+    });
+
+    it('throws an error in absence of reload method', function() {
+      testElement.reload = undefined;
+      testElement.autoReloadIntervalSecs = 1;
+      testElement.autoReloadEnabled = true;
+      chai.assert.throws(function() {
+        clock.tick(5000);
+      });
+    });
+  });
+});
diff --git a/tensorflow/tensorboard/components/tf_color_scale_d3v4/tests.html b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/e2eTests.html
index 9a2a174349..5efc02ef98 100644
--- a/tensorflow/tensorboard/components/tf_color_scale_d3v4/tests.html
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/e2eTests.html
@@ -18,14 +18,14 @@ limitations under the License.
 
 <html>
 <head>
-  <meta charset="utf-8">
-  <script src="../../web-component-tester/browser.js"></script>
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
   <link rel="import" href="../../tf-imports/d3.html">
+  <link rel="import" href="../tf-tensorboard.html">
+  <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
 </head>
 <body>
-    <script src="../colorScale.js"></script>
-    <script src="../palettes.js"></script>
-    <script src="colorScaleTests.js"></script>
+  <tf-tensorboard demo-dir="data/"></tf-tensorboard>
+  <script src="e2eTests.js"></script>
 </body>
 </html>
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/e2eTests.ts b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/e2eTests.ts
new file mode 100644
index 0000000000..2308298ced
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/e2eTests.ts
@@ -0,0 +1,42 @@
+/* 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.
+==============================================================================*/
+
+describe('end-to-end test', () => {
+  window.HTMLImports.whenReady(() => {
+    let tb = d3.select('tf-tensorboard');
+    var tabs = (<any>tb.node()).$.tabs;
+
+    function testTab(tabIndex: number) {
+      it(`selecting ${TF.Globals.TABS[tabIndex]} tab`, done => {
+        // Every dashboard emits a rendered event when it is done rendering.
+        tb.on('rendered', () => done());
+        tabs.set('selected', tabIndex);
+      });
+    }
+    // Listen for when the default tab has rendered and test other tabs after.
+    tb.on('rendered', () => {
+      // The default tab already rendered. Test everything else.
+      // If a bug happened while rendering the default tab, the test would
+      // have failed. Re-selecting the default tab and listening for
+      // "rendered" event won't work since the content is not re-stamped.
+      let selected = +tabs.get('selected');
+      for (let i = 0; i < TF.Globals.TABS.length; i++) {
+        if (i !== selected) {
+          testTab(i);
+        }
+      }
+    });
+  });
+});
diff --git a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tests.html b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/fastTabSwitch.html
index 270a2522b9..88bb6edc48 100644
--- a/tensorflow/tensorboard/components/tf_dashboard_common_d3v4/tests.html
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/fastTabSwitch.html
@@ -18,14 +18,14 @@ limitations under the License.
 
 <html>
 <head>
-  <meta charset="utf-8">
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
   <link rel="import" href="../../tf-imports/d3.html">
-  <link rel="import" href="../../vz-sorting/vz-sorting.html">
+  <link rel="import" href="../tf-tensorboard.html">
+  <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
 </head>
 <body>
-  <script src="../categorizer.js"></script>
-  <script src="categorizerTest.js"></script>
+  <tf-tensorboard demo-dir="data/"></tf-tensorboard>
+  <script src="fastTabSwitch.js"></script>
 </body>
 </html>
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/fastTabSwitch.ts b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/fastTabSwitch.ts
new file mode 100644
index 0000000000..4dd62a0c38
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/fastTabSwitch.ts
@@ -0,0 +1,44 @@
+/* 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.
+==============================================================================*/
+
+describe('fast tab switch', () => {
+  window.HTMLImports.whenReady(() => {
+    let tb = d3.select('tf-tensorboard');
+    var tabs = (<any>tb.node()).$.tabs;
+
+    // This test will select the events tab. Once the events tab
+    // renders, will select the graph tab, and immediately select
+    // the images tab wihout waiting for the graph tab to finish
+    // rendering. Finally, it finishes when the images tab
+    // has rendered and no errors were thrown.
+    let eventsTabIndex = TF.Globals.TABS.indexOf('events');
+    let imagesTabIndex = TF.Globals.TABS.indexOf('images');
+    let graphTabIndex = TF.Globals.TABS.indexOf('graphs');
+
+    // Listen for when the events tab rendered.
+    tb.on('rendered', () => {
+      it('switching to graph tab and immediately to images', done => {
+        // Select the graph tab.
+        tabs.set('selected', graphTabIndex);
+        // Interrupt graph rendering by immediately selecting the images tab
+        // and finish when the images tab has rendered.
+        tb.on('rendered', () => done());
+        tabs.set('selected', imagesTabIndex);
+      });
+    });
+    // Select the events tab.
+    tabs.set('selected', eventsTabIndex);
+  });
+});
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/index.html b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/index.html
new file mode 100644
index 0000000000..8806f36fad
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/index.html
@@ -0,0 +1,35 @@
+<!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.
+-->
+
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+<script>
+// Run the tests for each main component in tensorboard.
+WCT.loadSuites([
+  'tensorboardTests.html',
+  // TODO: re-enable or remove. b/30163860
+  // 'e2eTests.html',
+  'fastTabSwitch.html'
+]);
+</script>
+</body>
+</html>
diff --git a/tensorflow/tensorboard/components/tf_backend_d3v4/tests.html b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/tensorboardTests.html
index 7f51861d25..2122cb79b1 100644
--- a/tensorflow/tensorboard/components/tf_backend_d3v4/tests.html
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/tensorboardTests.html
@@ -18,29 +18,27 @@ limitations under the License.
 
 <html>
 <head>
-  <meta charset="utf-8">
+  <link rel="import" href="../../polymer/polymer.html">
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <link rel="import" href="../../polymer/polymer.html">
-  <link rel="import" href="../../tf-imports/d3.html">
-  <link rel="import" href="../../vz-sorting/vz-sorting.html">
+  <link rel="import" href="../tf-tensorboard.html">
+  <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
 </head>
 <body>
-  <test-fixture id="testElementFixture">
+  <test-fixture id="tensorboardFixture">
     <template>
-      <test-element
-        id="test"
-      ></test-element>
+      <tf-tensorboard>
+        <span id="inject-me">Injected content should be rendered by the element.</span>
+      </tf-tensorboard>
     </template>
   </test-fixture>
-    <script src="../requestManager.js"></script>
-    <script src="../urlPathHelpers.js"></script>
-    <script src="../router.js"></script>
-    <script src="../backend.js"></script>
-    <script src="../behavior.js"></script>
 
-    <script src="requestManagerTest.js"></script>
-    <script src="backendTests.js"></script>
-    <script src="behaviorTests.js"></script>
+  <test-fixture id="autoReloadFixture">
+    <template>
+      <autoreload-test-element></autoreload-test-element>
+    </template>
+  </test-fixture>
+  <script src="tensorboardTests.js"></script>
+  <script src="autoReloadTests.js"></script>
 </body>
 </html>
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/tensorboardTests.ts b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/tensorboardTests.ts
new file mode 100644
index 0000000000..3c7fe2c9e7
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/test/tensorboardTests.ts
@@ -0,0 +1,136 @@
+/* Copyright 2015 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.
+==============================================================================*/
+describe('tf-tensorboard tests', () => {
+  window.HTMLImports.whenReady(() => {
+    let tensorboard: any;
+    beforeEach(function() {
+      tensorboard = fixture('tensorboardFixture');
+      tensorboard.demoDir = 'data';
+      tensorboard.autoReloadEnabled = false;
+    });
+
+    it('specified tabs are correct', function(done) {
+      setTimeout(function() {
+        let tabs = tensorboard.$.tabs.getElementsByTagName('paper-tab');
+        let tabMode = Array.prototype.map.call(tabs, (x) => x.dataMode);
+        chai.assert.deepEqual(tabMode, TF.Globals.TABS, 'mode is correct');
+        let tabText =
+            Array.prototype.map.call(tabs, (x) => x.innerText.toLowerCase());
+        chai.assert.deepEqual(tabText, TF.Globals.TABS, 'text is correct');
+        done();
+      });
+    });
+
+    it('respects router manually provided', function() {
+      let router = TF.Backend.router('data', true);
+      tensorboard.router = router;
+      tensorboard.demoDir = null;
+      chai.assert.equal(tensorboard._backend.router, router);
+    });
+
+    it('renders injected content', function() {
+      let injected = tensorboard.querySelector('#inject-me');
+      chai.assert.isNotNull(injected);
+    });
+
+    describe('reloading the selected dashboard', function() {
+      TF.Globals.TABS.forEach((name, tabIndex) => {
+        // These tabs do not support reload mode.
+        if (name === 'graphs' || name === 'projections') {
+          return;
+        }
+        it(`${name}: calling reload reloads dashboard`, function(done) {
+          tensorboard.$.tabs.set('selected', tabIndex);
+          setTimeout(function() {
+            let called = false;
+            tensorboard.selectedDashboard().reload = function() {
+              called = true;
+            };
+            tensorboard.reload();
+            chai.assert.isFalse(
+                tensorboard.$$('#reload-button').disabled,
+                'reload button not disabled');
+            chai.assert.isTrue(called, `reload was called`);
+            done();
+          });
+        });
+      });
+    });
+
+    it('reload is disabled for graph dashboard', function(done) {
+      let idx = TF.Globals.TABS.indexOf('graphs');
+      chai.assert.notEqual(idx, -1, 'graphs was found');
+      tensorboard.$.tabs.set('selected', idx);
+      setTimeout(
+          function() {  // async so that the queued tab change will happen
+            let called = false;
+            tensorboard.selectedDashboard().reload = function() {
+              called = true;
+            };
+            tensorboard.reload();
+            chai.assert.isTrue(
+                tensorboard.$$('#reload-button').disabled,
+                'reload button disabled');
+            chai.assert.isFalse(called, `reload was not called`);
+            done();
+          });
+    });
+
+    describe('top right global icons', function() {
+      it('Clicking the reload button will call reload', function() {
+        let called = false;
+        tensorboard.reload = function() { called = true; };
+        tensorboard.$$('#reload-button').click();
+        chai.assert.isTrue(called);
+      });
+
+      it('settings pane is hidden', function() {
+        chai.assert.equal(tensorboard.$.settings.style['display'], 'none');
+      });
+
+      it('settings icon button opens the settings pane', function(done) {
+        tensorboard.$$('#settings-button').click();
+        // This test is a little hacky since we depend on polymer's
+        // async behavior, which is difficult to predict.
+
+        // keep checking until the panel is visible. error with a timeout if it
+        // is broken.
+        function verify() {
+          if (tensorboard.$.settings.style['display'] !== 'none') {
+            done();
+          } else {
+            setTimeout(verify, 3);  // wait and see if it becomes true
+          }
+        }
+        verify();
+      });
+
+      it('Autoreload checkbox toggle works', function() {
+        let checkbox = tensorboard.$$('#auto-reload-checkbox');
+        chai.assert.equal(checkbox.checked, tensorboard.autoReloadEnabled);
+        let oldValue = checkbox.checked;
+        checkbox.click();
+        chai.assert.notEqual(oldValue, checkbox.checked);
+        chai.assert.equal(checkbox.checked, tensorboard.autoReloadEnabled);
+      });
+
+      it('Autoreload checkbox contains correct interval info', function() {
+        let checkbox = tensorboard.$$('#auto-reload-checkbox');
+        let timeInSeconds = tensorboard.autoReloadIntervalSecs + 's';
+        chai.assert.include(checkbox.innerText, timeInSeconds);
+      });
+    });
+  });
+});
diff --git a/tensorflow/tensorboard/components/tf_tensorboard_d3v4/tf-tensorboard.html b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/tf-tensorboard.html
new file mode 100644
index 0000000000..f3f5d590f9
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_tensorboard_d3v4/tf-tensorboard.html
@@ -0,0 +1,351 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="../paper-tabs/paper-tabs.html">
+<link rel="import" href="../paper-dialog/paper-dialog.html">
+<link rel="import" href="../paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../paper-toolbar/paper-toolbar.html">
+<link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-header-panel/paper-header-panel.html">
+<link rel="import" href="../tf-globals/tf-globals.html">
+<link rel="import" href="../tf-scalar-dashboard/tf-scalar-dashboard.html">
+<link rel="import" href="../tf-distribution-dashboard/tf-distribution-dashboard.html">
+<link rel="import" href="../tf-histogram-dashboard/tf-histogram-dashboard.html">
+<link rel="import" href="../tf-image-dashboard/tf-image-dashboard.html">
+<link rel="import" href="../tf-audio-dashboard/tf-audio-dashboard.html">
+<!-- <link rel="import" href="../tf-graph-dashboard/tf-graph-dashboard.html"> -->
+<link rel="import" href="../tf-text-dashboard/tf-text-dashboard.html">
+<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">
+<link rel="import" href="../tf-backend/tf-backend.html">
+<link rel="import" href="../tf-storage/tf-storage.html">
+<link rel="import" href="../vz-projector/vz-projector-dashboard.html">
+
+<!--
+tf-tensorboard is the frontend entry point for TensorBoard.
+
+It implements a toolbar (via paper-header-panel and paper-toolbar) that
+allows the user to toggle between various dashboards.
+-->
+<script src="autoReloadBehavior.js"></script>
+<dom-module id="tf-tensorboard">
+  <template>
+    <paper-dialog with-backdrop id="settings">
+      <h2>Settings</h2>
+      <paper-checkbox id="auto-reload-checkbox" checked="{{autoReloadEnabled}}">
+        Reload data every <span>[[autoReloadIntervalSecs]]</span>s.
+      </paper-checkbox>
+    </paper-dialog>
+    <paper-header-panel>
+      <paper-toolbar id="toolbar">
+        <div id="toolbar-content">
+          <div class="toolbar-title">TensorBoard</div>
+          <paper-tabs selected="{{modeIndex}}" noink class="tabs" id="tabs">
+            <template is="dom-repeat" items="[[tabs]]">
+              <template is="dom-if" if="[[_isTabEnabled(item)]]">
+                <paper-tab data-mode="[[item]]">[[item]]</paper-tab>
+              </template>
+            </template>
+          </paper-tabs>
+          <div class="global-actions">
+            <paper-icon-button
+              icon="refresh"
+              on-tap="reload"
+              disabled$="[[_isReloadDisabled(mode)]]"
+              id="reload-button"
+            ></paper-icon-button>
+            <paper-icon-button
+              icon="settings"
+              on-tap="openSettings"
+              id="settings-button"
+            ></paper-icon-button>
+            <a href="https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/README.md" tabindex="-1">
+              <paper-icon-button icon="help-outline"></paper-icon-button>
+            </a>
+          </div>
+        </div>
+      </paper-toolbar>
+
+      <div id="content" class="fit">
+        <content id="injected-overview"></content>
+
+        <template is="dom-if" if="[[_modeIsScalars(mode)]]">
+          <tf-scalar-dashboard
+            id="scalars"
+            backend="[[_backend]]"
+            router="[[router]]"
+          ></tf-scalar-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsImages(mode)]]">
+          <tf-image-dashboard
+            id="images"
+            backend="[[_backend]]"
+          ></tf-image-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsAudio(mode)]]">
+          <tf-audio-dashboard
+            id="audio"
+            backend="[[_backend]]"
+          ></tf-audio-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsGraphs(mode)]]">
+          <tf-graph-dashboard
+            id="graphs"
+            backend="[[_backend]]"
+            debugger-data-enabled="[[_debuggerDataEnabled]]"
+          ></tf-graph-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsDistributions(mode)]]">
+          <tf-distribution-dashboard
+            id="distributions"
+            backend="[[_backend]]"
+          ></tf-distribution-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsHistograms(mode)]]">
+          <tf-histogram-dashboard
+            id="histograms"
+            backend="[[_backend]]"
+          ></tf-histogram-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsEmbeddings(mode)]]">
+          <vz-projector-dashboard
+            id="projector"
+            route-prefix="/data/plugin/projector">
+          </vz-projector-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsText(mode)]]">
+          <tf-text-dashboard
+            id="text"
+            backend="[[_backend]]">
+          </tf-text-dashboard>
+        </template>
+      </div>
+    </paper-header-panel>
+
+    <style>
+      :host {
+        height: 100%;
+        display: block;
+        background-color: var(--paper-grey-100);
+      }
+
+      #toolbar {
+        background-color: var(--tb-toolbar-background-color, --tb-orange-strong);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .toolbar-title {
+        font-size: 20px;
+        margin-left: 10px;
+        text-rendering: optimizeLegibility;
+        letter-spacing: -0.025em;
+        font-weight: 500;
+        flex-grow: 2;
+        display: var(--tb-toolbar-title-display, block);
+      }
+
+      .tabs {
+        flex-grow: 1;
+        text-transform: uppercase;
+        height: 100%;
+      }
+
+      paper-tabs {
+        --paper-tabs-selection-bar-color: white;
+      }
+
+      .global-actions {
+        flex-grow: 2;
+        display: inline-flex; /* Ensure that icons stay aligned */
+        justify-content: flex-end;
+        text-align: right;
+        color: white;
+      }
+
+      .global-actions a {
+        color: white;
+      }
+
+      #toolbar-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      #content {
+        height: 100%;
+      }
+
+      [disabled] {
+        opacity: 0.2;
+        color: white;
+      }
+
+    </style>
+  </template>
+  <script>
+    "use strict";
+
+    Polymer({
+      is: "tf-tensorboard",
+      behaviors: [TF.TensorBoard.AutoReloadBehavior],
+      properties: {
+        router: {
+          type: Object,
+          value: function() {
+            return TF.Backend.router();
+          },
+        },
+        _backend: {
+          type: Object,
+          computed: "_makeBackend(router, demoDir)",
+        },
+        _debuggerDataEnabled: {
+          type: Boolean,
+          value: function() {
+            // For now, Tensorboard only shows debugger data if the debugger_data GET param is set
+            // to enabled.
+            let match = window.location.href.match(/[&\?]debugger_data=enabled/);
+            return match && match.length == 1;
+          },
+        },
+        // Which tab is selected (scalars, graph, images etc).
+        mode: {
+          type: String,
+          computed: '_getModeFromIndex(modeIndex)',
+          notify: true,
+        },
+        tabs: {
+          type: Array,
+          readOnly: true,
+          value: TF.Globals.TABS,
+        },
+        // If this is set to a string, TensorBoard will switch to "demo mode"
+        // and attempt to load serialized json data from that directory. You can
+        // generate conformant json using
+        // tensorboard/scripts/serialize_tensorboard.py
+        demoDir: {
+          type: String,
+          value: null,
+        },
+        // Set this to true to store state in URI hash. Should be true for all non-test purposes.
+        useHash: {
+          type: Boolean,
+          value: false,
+        },
+        disabledTabs: String,
+      },
+      _isTabEnabled: function(tab) {
+        if (this.disabledTabs != null &&
+            this.disabledTabs.split(',').indexOf(tab) >= 0) {
+          return false;
+        }
+        return true;
+      },
+      _getModeFromIndex: function(modeIndex) {
+        var mode = this.tabs[modeIndex];
+        TF.URIStorage.setString(TF.URIStorage.TAB, mode);
+        return mode;
+      },
+      _makeBackend: function(router, demoDir) {
+        // use the demoDir if it is set, otherwise use the provided router
+        if (demoDir != null) {
+          router = TF.Backend.router(demoDir, true);
+        }
+        return new TF.Backend.Backend(router);
+      },
+      _isReloadDisabled: function(mode) {
+        return !this._debuggerDataEnabled && this._modeIsGraphs(mode);
+      },
+      _modeIsScalars: function(mode) {
+        return mode === "scalars";
+      },
+      _modeIsImages: function(mode) {
+        return mode === "images";
+      },
+      _modeIsAudio: function(mode) {
+        return mode === "audio";
+      },
+      _modeIsGraphs: function(mode) {
+        return mode === "graphs";
+      },
+      _modeIsEmbeddings: function(mode) {
+        return mode === "embeddings";
+      },
+      _modeIsDistributions: function(mode) {
+        return mode === "distributions";
+      },
+      _modeIsHistograms: function(mode) {
+        return mode === "histograms";
+      },
+      _modeIsText: function(mode) {
+        return mode === "text";
+      },
+      selectedDashboard: function() {
+        var dashboard = this.$$("#" + this.mode);
+        if (dashboard == null) {
+          throw new Error(`Unable to find dashboard for mode: ${this.mode}`);
+        }
+        return dashboard;
+      },
+      ready: function() {
+        TF.Globals.USE_HASH = this.useHash;
+
+        this._getModeFromHash();
+        window.addEventListener('hashchange', function() {
+          this._getModeFromHash();
+        }.bind(this));
+      },
+      _getModeFromHash: function() {
+        var tabName = TF.URIStorage.getString(TF.URIStorage.TAB);
+        var modeIndex = this.tabs.indexOf(tabName);
+        if (modeIndex == -1 && this.modeIndex == null) {
+          // Select the first tab as default.
+          this.set('modeIndex', 0);
+        }
+        if (modeIndex != -1 && modeIndex != this.modeIndex) {
+          this.set('modeIndex', modeIndex);
+        }
+      },
+      reload: function() {
+        if (this._modeIsEmbeddings(this.mode)) {
+          return;
+        }
+        if (!this._debuggerDataEnabled && this._modeIsGraphs(this.mode)) {
+          return;
+        }
+        this.selectedDashboard().reload();
+      },
+      openSettings: function() {
+        this.$.settings.open();
+      },
+    });
+  </script>
+  <script src="autoReloadBehavior.js"></script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/BUILD b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/BUILD
new file mode 100644
index 0000000000..c15cf2fdc4
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/BUILD
@@ -0,0 +1,45 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "tf_text_dashboard_d3v4",
+    srcs = [
+        "tf-text-dashboard.html",
+        "tf-text-loader.html",
+    ],
+    path = "/tf-text-dashboard",
+    deps = [
+        "//tensorflow/tensorboard/components/tf_backend_d3v4",
+        "//tensorflow/tensorboard/components/tf_color_scale_d3v4",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "@org_polymer",
+        "@org_polymer_paper_dialog",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_material",
+        "@org_polymer_paper_slider",
+        "@org_polymer_paper_spinner",
+    ],
+)
+
+web_library(
+    name = "demo",
+    srcs = ["index.html"] + glob(["data/**"]),
+    path = "/tf-text-dashboard",
+    deps = [
+        ":tf_text_dashboard_d3v4",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/logdir b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/logdir
new file mode 100644
index 0000000000..c7d82022cc
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/logdir
@@ -0,0 +1 @@
+{"logdir": "/some/fake/logdir"}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/runs.json b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/runs.json
new file mode 100644
index 0000000000..aea7de5f91
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/runs.json
@@ -0,0 +1 @@
+{"fry": ["message", "markdown"], "leela": ["message"]}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_fry_tag_markdown.json b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_fry_tag_markdown.json
new file mode 100644
index 0000000000..94183ae13d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_fry_tag_markdown.json
@@ -0,0 +1,32 @@
+[
+  {
+    "wall_time": 1489715207.593146,
+    "step": 0,
+    "text": "<p><em>Italics1</em> <em>Italics2</em> <strong>bold1</strong> <strong>bold2</strong></p>"
+  },
+  {
+    "wall_time": 1489715207.593801,
+    "step": 1,
+    "text": "<ol>\n<li>List item one.</li>\n<li>List item two.</li>\n<li>Sublist</li>\n<li>Sublist2</li>\n<li>List continues.</li>\n</ol>"
+  },
+  {
+    "wall_time": 1489715207.594842,
+    "step": 2,
+    "text": "<table>\n<thead>\n<tr>\n<th>An</th>\n<th>Example</th>\n<th>Table</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>A</td>\n<td>B</td>\n<td>C</td>\n</tr>\n<tr>\n<td>1</td>\n<td>2</td>\n<td>3</td>\n</tr>\n</tbody>\n</table>"
+  },
+  {
+    "wall_time": 1489715207.595761,
+    "step": 3,
+    "text": "<p>hello <a><em>you</em></a></p>"
+  },
+  {
+    "wall_time": 1489715207.595761,
+    "step": 4,
+    "text": "<p><a href=\"http://tensorflow.org\">TensorFlow</a></p>"
+  },
+  {
+    "wall_time": 1489715207.595761,
+    "step": 530234352,
+    "text": "&lt;script&gt;alert('xss')&lt;/script&gt;"
+  }
+]
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_fry_tag_message.json b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_fry_tag_message.json
new file mode 100644
index 0000000000..e8cc006c0d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_fry_tag_message.json
@@ -0,0 +1,22 @@
+[
+  {
+    "wall_time": 1489715207.593146,
+    "step": 0,
+    "text": "fry loves garnet"
+  },
+  {
+    "wall_time": 1489715207.593801,
+    "step": 1,
+    "text": "fry loves amethyst"
+  },
+  {
+    "wall_time": 1489715207.594842,
+    "step": 2,
+    "text": "fry loves pearl"
+  },
+  {
+    "wall_time": 1489715207.595761,
+    "step": 3,
+    "text": "fry loves steven"
+  }
+]
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_leela_tag_message.json b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_leela_tag_message.json
new file mode 100644
index 0000000000..5a6d259893
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/data/text_run_leela_tag_message.json
@@ -0,0 +1,22 @@
+[
+  {
+    "step": 0,
+    "wall_time": 1489715207.607792,
+    "text": "leela loves garnet and feels strongly about various issues of the day including the two-cent titanium tax and whether nixon's head contributes to greenhouse gas emissions"
+  },
+  {
+    "step": 1,
+    "wall_time": 1489715207.609011,
+    "text": "leela loves amethyst"
+  },
+  {
+    "step": 2,
+    "wall_time": 1489715207.610028,
+    "text": "leela loves pearl"
+  },
+  {
+    "step": 3,
+    "wall_time": 1489715207.611142,
+    "text": "leela loves someverylongwordwithoutanybreaksorspacessowecanseehowthatishandledbythefrontend"
+  }
+]
\ No newline at end of file
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/index.html b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/index.html
new file mode 100644
index 0000000000..77d19b948c
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/index.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<!--
+@license
+Copyright 2017 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.
+-->
+
+<html>
+  <head>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="tf-text-dashboard.html">
+    <title>text Dashboard Demo</title>
+    <style>
+      #container{
+        height: 800px;
+        border: 2px solid grey;
+      }
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: "RobotoDraft","Roboto",sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <demo-snippet>
+      <template>
+        <dom-module id="text-dash-demo">
+          <template>
+            <tf-text-dashboard id="demo" backend="[[backend]]">
+            </tf-text-dashboard>
+          </template>
+          <script>
+            Polymer({
+              is: "text-dash-demo",
+              properties: {
+                backend: {
+                  type: Object,
+                  value: function() {
+                    var path = "data";
+                    var router = new TF.Backend.router(path, true);
+                    return new TF.Backend.Backend(router);
+                  },
+                },
+              },
+            });
+          </script>
+        </dom-module>
+        <div id="container">
+          <text-dash-demo></text-dash-demo>
+        </div>
+      </template>
+    </demo-snippet>
+  </body>
+</html>
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/tf-text-dashboard.html b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/tf-text-dashboard.html
new file mode 100644
index 0000000000..4c0b34055d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/tf-text-dashboard.html
@@ -0,0 +1,109 @@
+<!--
+@license
+Copyright 2017 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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-dialog/paper-dialog.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../tf-backend/tf-backend.html">
+<link rel="import" href="../tf-color-scale/tf-color-scale.html">
+<link rel="import" href="../tf-dashboard-common/tf-dashboard.html">
+<link rel="import" href="../tf-dashboard-common/tf-panes-helper.html">
+<link rel="import" href="../tf-dashboard-common/tf-sidebar-helper.html">
+<link rel="import" href="tf-text-loader.html">
+
+<!--
+tf-text-dashboard displays a dashboard that loads texts from a TensorFlow run.
+-->
+<dom-module id="tf-text-dashboard">
+  <template>
+    <paper-dialog with-backdrop id="actual-text-size-dialog"></paper-dialog>
+    <div id="plumbing">
+      <tf-color-scale
+        id="colorScale"
+        runs="[[runs]]"
+        out-color-scale="{{_colorScale}}"
+        ></tf-color-scale>
+    </div>
+
+    <tf-dashboard-layout>
+      <div class="sidebar">
+        <tf-sidebar-helper
+          backend="[[backend]]"
+          categories="{{_categories}}"
+          color-scale="[[_colorScale]]"
+          run2tag="[[run2tag]]"
+          runs="[[runs]]"
+          selected-runs="{{_selectedRuns}}"
+          >
+        </tf-sidebar-helper>
+      </div>
+      <div class="center">
+        <tf-panes-helper
+          categories="[[_categories]]"
+          color-scale="[[_colorScale]]"
+          data-type="[[dataType]]"
+          data-provider="[[dataProvider]]"
+          data-not-found="[[dataNotFound]]"
+          run2tag="[[run2tag]]"
+          selected-runs="[[_selectedRuns]]"
+          repeat-for-runs
+          >
+          <template>
+            <tf-text-loader color-scale="[[_colorScale]]"></tf-text-loader>
+          </template>
+        </tf-panes-helper>
+      </div>
+    </tf-dashboard-layout>
+    <style include="dashboard-style"></style>
+    <style>
+      tf-panes-helper {
+        --card-width: 100%;
+        --card-height: auto;
+        --card-expanded-width: 100%;
+        --card-expanded-height: 1000px;
+        --card-padding: 0 5px 5px 5px;
+        --show-expand-button: none;
+      }
+
+    </style>
+  </template>
+  <script>
+    TF.Dashboard.TfTextDashboard = Polymer({
+      is: "tf-text-dashboard",
+      factoryImpl: function(backend) {
+        this.backend = backend;
+      },
+      properties: {
+        backend: Object,
+        dataType: {
+          type: String,
+          value: "text"
+        },
+      },
+      behaviors: [
+        TF.Dashboard.DashboardBehavior("text"),
+        TF.Dashboard.ReloadBehavior("tf-chart-scaffold"),
+        TF.Backend.BackendBehavior,
+      ],
+      attached: function() {
+        this.async(function() {
+          this.fire("rendered");
+        });
+      },
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/tf-text-loader.html b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/tf-text-loader.html
new file mode 100644
index 0000000000..374e0478dd
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf_text_dashboard_d3v4/tf-text-loader.html
@@ -0,0 +1,143 @@
+<!--
+@license
+Copyright 2017 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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-material/paper-material.html">
+<link rel="import" href="../tf-dashboard-common/scrollbar-style.html">
+<link rel="import" href="../tf-imports/d3.html">
+
+<!--
+tf-text-loader displays markdown text data from the Text plugin.
+-->
+
+<style>
+  tf-text-loader p {
+    margin: 0.3em 0;
+  }
+
+  tf-text-loader table {
+    border-collapse: collapse;
+  }
+
+  tf-text-loader table th {
+    font-weight: 600;
+  }
+
+  tf-text-loader table th,
+  tf-text-loader table td {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+  }
+
+  tf-text-loader table tr {
+    background-color: #fff;
+    border-top: 1px solid #c6cbd1;
+  }
+
+</style>
+<dom-module id="tf-text-loader">
+
+  <!-- Set the innerHTML with the textual content, so we can render the
+   html generated by our markdown parser. Note this content is always
+   sanitized by the backend, so xss attacks are not possible.
+  -->
+  <template>
+    <style include="scrollbar-style"></style>
+    <paper-material elevation="1" id="outer" class="container scrollbar">
+      <template id="repeater" is="dom-repeat" items="[[_texts]]">
+      <paper-material elevation="1" class="step-container">
+        step <span class="step-value">[[_numfmt(item.step)]]</span>
+      </paper-material>
+      <paper-material elevation="1" inner-h-t-m-l="[[item.text]]" class="text">
+        </paper-material>
+      </template>
+    </paper-material>
+
+
+    <style>
+      #outer {
+        display: block;
+        overflow: auto;
+        max-height: 500px;
+        position: relative;
+        border-radius: 3px;
+        border: 2px solid black;
+      }
+      .text {
+        margin: 0 10px 10px 10px;
+        border-radius: 0 3px 3px 3px;
+        background-color: white;
+        padding: 5px;
+        word-break: break-word;
+      }
+      .step-container {
+        border-left: 1px solid #ccc;
+        border-right: 1px solid #ccc;
+        border-top: 1px solid #ccc;
+        border-radius: 3px 3px 0 0;
+        font-style: italic;
+        margin-top: 10px;
+        background-color: var(--tb-ui-light-accent);
+        display: inline-block;
+        margin-left: 9px;
+        padding: 3px;
+        font-size: 12px;
+      }
+
+    </style>
+
+  </template>
+  <script>
+    Polymer({
+      is: "tf-text-loader",
+      properties: {
+        colorScale: Object,
+        run: String,
+        // This is an array of Tensorboard Text&Datum objects (See backend.ts for details). The
+        // properties of objects in this array are
+        // {
+        //   wall_time: Date,
+        //   step: number,
+        //   text: string,
+        // }
+        // they are ordered from most recent to oldest
+        _texts: {
+          type: Array,
+          value: [],
+        },
+
+      },
+      redraw: function() {
+        // Other dashboards logic requires a redraw method to be defined.
+      },
+      setVisibleSeries: function(runs) {
+        // Do nothing.
+      },
+      setSeriesData: function(run, texts) {
+        this.set("run", run);
+        this.set("_texts", texts.reverse());
+
+        // Update the border color based on the run.
+        var color = this.colorScale.scale(run);
+        this.$$("#outer").style.borderColor = color;
+      },
+      _numfmt: function(n) {
+        return d3.format(",")(n);
+      }
+    });
+  </script>
+</dom-module>
diff --git a/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/BUILD b/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/BUILD
index 384fc6f44c..3ff60d5143 100644
--- a/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/BUILD
@@ -1,62 +1,62 @@
 package(default_visibility = ["//tensorflow:internal"])
 
-load(
-    "//tensorflow/tensorboard:defs.bzl",
-    "tensorboard_ts_development_sources",
-    "tensorboard_ts_devserver",
-    "tensorboard_ts_library",
-    "tensorboard_webcomponent_library",
-)
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-tensorboard_ts_library(
-    name = "ts",
-    srcs = ["vz-distribution-chart.ts"],
-    deps = [
-        "//tensorflow/tensorboard/components:common_deps_d3v4",
-        "//tensorflow/tensorboard/components/vz_line_chart_d3v4:ts",
-        "//third_party/javascript/lodash:lodash-module",
-        "//third_party/javascript/plottable/v3:bundle",
-    ],
-)
-
-tensorboard_webcomponent_library(
-    name = "vz_distribution_chart",
+web_library(
+    name = "vz_distribution_chart_d3v4",
     srcs = [
-        "demo.html",
+        "bundle.js",
         "vz-distribution-chart.html",
     ],
-    ts_lib_deps = [":ts"],
+    path = "/vz-distribution-chart",
     visibility = ["//visibility:public"],
     deps = [
-        "//tensorflow/tensorboard/components/vz_sorting:legacy",
-        "//third_party/javascript/plottable/v3:lib",
-        "//third_party/javascript/polymer/v1/polymer:lib",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable",
+        "//tensorflow/tensorboard/components/vz_line_chart_d3v4",
+        "@org_polymer",
     ],
 )
 
-tensorboard_webcomponent_library(
+web_library(
     name = "demo",
-    srcs = ["demo.html"],
-    visibility = ["//visibility:public"],
+    srcs = ["index.html"],
+    path = "/vz-distribution-chart",
     deps = [
-        ":vz_distribution_chart",
-        "//third_party/javascript/polymer/v1/iron-demo-helpers:lib",
-        "//third_party/javascript/polymer/v1/paper-styles:lib",
+        ":vz_distribution_chart_d3v4",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
     ],
 )
 
-tensorboard_ts_devserver(
-    name = "devserver",
-    manifest = ":dev_sources",
-    serving_path = "/demo_out/bundle.js",
-    static_files = [":demo"],
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable.d.ts",
+        "@org_definitelytyped//:lodash.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/vz_line_chart_d3v4:bundle.d.ts",
+    ],
 )
 
-tensorboard_ts_development_sources(
-    name = "dev_sources",
-    deps = [":ts"],
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"VZ": [
+        "vz-distribution-chart.ts",
+    ]},
+    namespace_symbol_aliases = {"VZ": {
+        "Dataset": "Plottable.Dataset",
+        "ChartHelpers": "VZ.ChartHelpers",
+    }},
 )
 
 filegroup(
diff --git a/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/demo.html b/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/index.html
index 0a1a344056..39db09354b 100644
--- a/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/demo.html
+++ b/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/index.html
@@ -21,11 +21,10 @@ limitations under the License.
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>vz-distribution chart demo</title>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="vz-distribution-chart.html">
-    <link rel="import" href="iron-demo-helpers/demo-snippet.html">
-    <link rel="import" href="paper-styles/typography.html">
-    <script src="bundle.js"></script>
-
+    <link rel="import" href="../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../paper-styles/typography.html">
     <style type="text/css">
       body {
         font-family: "Roboto";
diff --git a/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/vz-distribution-chart.html b/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/vz-distribution-chart.html
index f274a4c24c..3c517bd164 100644
--- a/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/vz-distribution-chart.html
+++ b/tensorflow/tensorboard/components/vz_distribution_chart_d3v4/vz-distribution-chart.html
@@ -15,8 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="plottable-library/plottable_css.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/plottable.html">
+<link rel="import" href="../vz-line-chart/vz-line-chart.html">
 
 <dom-module id="vz-distribution-chart">
   <template>
@@ -40,4 +41,5 @@ limitations under the License.
 
     </style>
   </template>
+  <script src="bundle.js"></script>
 </dom-module>
diff --git a/tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4/BUILD b/tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4/BUILD
index 4396fc0981..30adc0ad3a 100644
--- a/tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4/BUILD
@@ -1,16 +1,12 @@
 package(default_visibility = ["//tensorflow:internal"])
 
 load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
-load("//tensorflow/tensorboard:defs.bzl", "tensorboard_ts_library")
-load("//tensorflow/tensorboard:defs.bzl", "tensorboard_webcomponent_library")
 
 licenses(["notice"])  # Apache 2.0
 
 web_library(
-    name = "vz_histogram_timeseries",
-    srcs = [
-        "vz-histogram-timeseries.html",
-    ],
+    name = "vz_histogram_timeseries_d3v4",
+    srcs = ["vz-histogram-timeseries.html"],
     path = "/vz-histogram-timeseries",
     deps = [
         "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
@@ -18,22 +14,21 @@ web_library(
     ],
 )
 
-filegroup(
-    name = "all_files",
-    srcs = glob(["**"]),
-    tags = ["notsan"],
-)
-
-# bazel run //third_party/tensorflow/tensorboard/components/vz_histogram_timeseries/demo
 web_library(
     name = "demo",
-    srcs = ["demo.html"],
+    srcs = ["index.html"],
     path = "/vz-histogram-timeseries",
     deps = [
-        ":vz_histogram_timeseries",
+        ":vz_histogram_timeseries_d3v4",
         "@org_polymer_iron_demo_helpers",
         "@org_polymer_paper_button",
         "@org_polymer_paper_styles",
         "@org_polymer_webcomponentsjs",
     ],
 )
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4/demo.html b/tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4/index.html
index 42efa83eb0..42efa83eb0 100644
--- a/tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4/demo.html
+++ b/tensorflow/tensorboard/components/vz_histogram_timeseries_d3v4/index.html
diff --git a/tensorflow/tensorboard/components/vz_line_chart_d3v4/BUILD b/tensorflow/tensorboard/components/vz_line_chart_d3v4/BUILD
index fd460b3608..f6690c3d7d 100644
--- a/tensorflow/tensorboard/components/vz_line_chart_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/vz_line_chart_d3v4/BUILD
@@ -1,62 +1,68 @@
 package(default_visibility = ["//tensorflow:internal"])
 
-load(
-    "//tensorflow/tensorboard:defs.bzl",
-    "tensorboard_ts_development_sources",
-    "tensorboard_ts_devserver",
-    "tensorboard_ts_library",
-    "tensorboard_webcomponent_library",
-)
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-tensorboard_ts_library(
-    name = "ts",
+web_library(
+    name = "vz_line_chart_d3v4",
     srcs = [
-        "dragZoomInteraction.ts",
-        "vz-chart-helpers.ts",
-        "vz-line-chart.ts",
+        "bundle.js",
+        "vz-line-chart.html",
     ],
-    deps = [
-        "//tensorflow/tensorboard/components:common_deps_d3v4",
-        "//third_party/javascript/lodash:lodash-module",
-        "//third_party/javascript/plottable/v3:bundle",
-    ],
-)
-
-tensorboard_webcomponent_library(
-    name = "vz_line_chart",
-    srcs = ["vz-line-chart.html"],
-    ts_lib_deps = [":ts"],
+    path = "/vz-line-chart",
     visibility = ["//visibility:public"],
     deps = [
-        "//tensorflow/tensorboard/components/vz_sorting:legacy",
-        "//third_party/javascript/plottable/v3:lib",
-        "//third_party/javascript/polymer/v1/polymer:lib",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:lodash",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable",
+        "@org_polymer",
     ],
 )
 
-tensorboard_webcomponent_library(
+web_library(
     name = "demo",
-    srcs = ["demo.html"],
-    visibility = ["//visibility:public"],
+    srcs = ["index.html"],
+    path = "/vz-line-chart",
     deps = [
-        ":vz_line_chart",
-        "//third_party/javascript/polymer/v1/iron-demo-helpers:lib",
-        "//third_party/javascript/polymer/v1/paper-styles:lib",
+        ":vz_line_chart_d3v4",
+        "@org_polymer_iron_demo_helpers",
+        "@org_polymer_paper_styles",
+        "@org_polymer_webcomponentsjs",
     ],
 )
 
-tensorboard_ts_devserver(
-    name = "devserver",
-    manifest = ":dev_sources",
-    serving_path = "/demo_out/bundle.js",
-    static_files = [":demo"],
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:lodash.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable.d.ts",
+    ],
 )
 
-tensorboard_ts_development_sources(
-    name = "dev_sources",
-    deps = [":ts"],
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {
+        "VZ.ChartHelpers": [
+            "vz-chart-helpers.ts",
+        ],
+        "VZ": [
+            "vz-line-chart.ts",
+            "dragZoomInteraction.ts",
+        ],
+    },
+    namespace_symbol_aliases = {
+        "VZ.ChartHelpers": {
+            "Dataset": "Plottable.Dataset",
+        },
+    },
 )
 
 filegroup(
diff --git a/tensorflow/tensorboard/components/vz_line_chart_d3v4/demo.html b/tensorflow/tensorboard/components/vz_line_chart_d3v4/index.html
index 4293e9791e..fb571a5183 100644
--- a/tensorflow/tensorboard/components/vz_line_chart_d3v4/demo.html
+++ b/tensorflow/tensorboard/components/vz_line_chart_d3v4/index.html
@@ -21,10 +21,10 @@ limitations under the License.
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>vz-line-chart demo</title>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="vz-line-chart.html">
-    <link rel="import" href="iron-demo-helpers/demo-snippet.html">
-    <link rel="import" href="paper-styles/typography.html">
-    <script src="bundle.js"></script>
+    <link rel="import" href="../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../paper-styles/typography.html">
     <style type="text/css">
       body {
         font-family: "Roboto";
diff --git a/tensorflow/tensorboard/components/vz_line_chart_d3v4/vz-line-chart.html b/tensorflow/tensorboard/components/vz_line_chart_d3v4/vz-line-chart.html
index 13b46d8bbf..85e24ae4be 100644
--- a/tensorflow/tensorboard/components/vz_line_chart_d3v4/vz-line-chart.html
+++ b/tensorflow/tensorboard/components/vz_line_chart_d3v4/vz-line-chart.html
@@ -15,8 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<link rel="import" href="polymer/polymer.html">
-<link rel="import" href="plottable-library/plottable_css.html">
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/d3.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../tf-imports/plottable.html">
+
 <!--
 vz-line-chart creates an element that draws a line chart for
 displaying event values.
@@ -122,4 +125,5 @@ such as different X scales (linear and temporal), tooltips and smoothing.
 
     </style>
   </template>
+  <script src="bundle.js"></script>
 </dom-module>
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/BUILD b/tensorflow/tensorboard/components/vz_projector_d3v4/BUILD
index d9703d080d..29a6244593 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/BUILD
@@ -1,179 +1,354 @@
-package(default_visibility = [":projector_group"])
+package(default_visibility = ["//tensorflow:internal"])
 
-load(
-    "//tensorflow/tensorboard:defs.bzl",
-    "tensorboard_karma_web_test_suite",
-    "tensorboard_ts_config",
-    "tensorboard_ts_declaration",
-    "tensorboard_ts_development_sources",
-    "tensorboard_ts_library",
-    "tensorboard_webcomponent_library",
-)
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-filegroup(
-    name = "all_files",
-    srcs = glob(
-        ["**"],
-        exclude = [
-            "OWNERS",
-            "tsconfig.json",
-        ],
-    ),
-    visibility = ["//tensorflow:__subpackages__"],
-)
-
-# Visibility group for all clients of projector.
-package_group(
-    name = "projector_group",
-    packages = [
-        "//apps/labs/towerbridge/...",
-        "//experimental/bigpicture/projector/...",
-        "//java/com/google/apps/labs/towerbridge/...",
-        "//learning/vis/projector/...",
-        "//tensorflow/tensorboard/...",
-    ],
-)
-
-tensorboard_ts_declaration(
-    name = "external",
-    srcs = ["external.d.ts"],
-)
-
-tensorboard_ts_library(
-    name = "ts_lib",
-    srcs = glob(
-        ["*.ts"],
-        exclude = [
-            "*.d.ts",
-            "*_test.ts",
-            "bh_tsne.ts",
-            "sptree.ts",
-        ],
-    ),
-    runtime_deps = [
-        "//third_party/javascript/numericjs",
-        "//third_party/javascript/threejs/r77:threejs",
-        "//third_party/javascript/threejs/r77/examples/js/controls:orbitcontrols",
-        "//third_party/javascript/weblas",
-    ],
-    deps = [
-        ":external",
-        ":tsne_ts_lib",
-        "//third_party/javascript/node_modules/typescript:es2015.promise",
-        "//third_party/javascript/typings/d3_v4:bundle",
-        "//third_party/javascript/typings/polymer:polymer_without_externs",
-        "//third_party/javascript/typings/threejs:three",
-        "//third_party/javascript/typings/webcomponents_js",
-    ],
-)
-
-tensorboard_ts_library(
-    name = "tsne_ts_lib",
+web_library(
+    name = "vz_projector_d3v4",
     srcs = [
-        "bh_tsne.ts",
-        "sptree.ts",
-    ],
-)
-
-_PROJECTOR_LIB_DEPS = [
-    "//third_party/javascript/polymer/v1/iron-collapse:lib",
-    "//third_party/javascript/polymer/v1/iron-icons:lib",
-    "//third_party/javascript/polymer/v1/paper-button:lib",
-    "//third_party/javascript/polymer/v1/paper-checkbox:lib",
-    "//third_party/javascript/polymer/v1/paper-dialog:lib",
-    "//third_party/javascript/polymer/v1/paper-dialog-scrollable:lib",
-    "//third_party/javascript/polymer/v1/paper-dropdown-menu:lib",
-    "//third_party/javascript/polymer/v1/paper-icon-button:lib",
-    "//third_party/javascript/polymer/v1/paper-input:lib",
-    "//third_party/javascript/polymer/v1/paper-item:lib",
-    "//third_party/javascript/polymer/v1/paper-listbox:lib",
-    "//third_party/javascript/polymer/v1/paper-slider:lib",
-    "//third_party/javascript/polymer/v1/paper-spinner:lib",
-    "//third_party/javascript/polymer/v1/paper-toast:lib",
-    "//third_party/javascript/polymer/v1/paper-toggle-button:lib",
-    "//third_party/javascript/polymer/v1/paper-tooltip:lib",
-    "//third_party/javascript/polymer/v1/polymer:lib",
-]
-
-_PROJECTOR_DESTDIR = "vz-projector"
-
-_PROJECTOR_LIB_TS_LIB_DEPS = [
-    ":ts_lib",
-    ":tsne_ts_lib",
-]
-
-# Standalone embedding projector demos should depend on this target. We
-# exclude the HTML file for the dashboard itself. Demos do not need that
-# HTML file. This was introduced because standalone demos as of today
-# have an additional Closure pass that uses a compilation configuration
-# stricter than that of TensorBoard.
-tensorboard_webcomponent_library(
-    name = "lib",
-    srcs = glob(
-        ["*.html"],
-        exclude = ["vz-projector-dashboard.html"],
-    ),
-    ts_lib_deps = _PROJECTOR_LIB_TS_LIB_DEPS,
-    destdir = _PROJECTOR_DESTDIR,
-    deps = _PROJECTOR_LIB_DEPS,
-)
-
-# TensorBoard, however, should depend on this target, which includes
-# the HTML file for the dashboard.
-tensorboard_webcomponent_library(
-    name = "lib_for_tensorboard",
-    srcs = glob(["*.html"]),
-    ts_lib_deps = _PROJECTOR_LIB_TS_LIB_DEPS,
-    destdir = _PROJECTOR_DESTDIR,
-    deps = _PROJECTOR_LIB_DEPS,
-)
-
-### Tests ###
-
-tensorboard_ts_library(
-    name = "ts_test",
-    testonly = 1,
-    srcs = glob(["*_test.ts"]),
-    runtime_deps = [
-        "//third_party/javascript/polymer/v1/polymer:lib_all_js",
+        "bundle.html",
+        "bundle.js",
+        "styles.html",
+        "vz-projector.html",
+        "vz-projector-app.html",
+        "vz-projector-bookmark-panel.html",
+        "vz-projector-colab.html",
+        "vz-projector-dashboard.html",
+        "vz-projector-data-panel.html",
+        "vz-projector-input.html",
+        "vz-projector-inspector-panel.html",
+        "vz-projector-legend.html",
+        "vz-projector-metadata-card.html",
+        "vz-projector-projections-panel.html",
     ],
+    path = "/vz-projector",
+    visibility = ["//visibility:public"],
     deps = [
-        ":ts_lib",
-        ":tsne_ts_lib",
-        "//third_party/javascript/typings/chai",
-        "//third_party/javascript/typings/jasmine:jasmine_without_externs",
-        "//third_party/javascript/typings/mocha",
+        "//tensorflow/tensorboard/components/tf_dashboard_common_d3v4",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:numericjs",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:threejs",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:weblas",
+        "@org_polymer",
+        "@org_polymer_iron_collapse",
+        "@org_polymer_iron_icons",
+        "@org_polymer_paper_button",
+        "@org_polymer_paper_checkbox",
+        "@org_polymer_paper_dialog",
+        "@org_polymer_paper_dialog_scrollable",
+        "@org_polymer_paper_dropdown_menu",
+        "@org_polymer_paper_icon_button",
+        "@org_polymer_paper_input",
+        "@org_polymer_paper_item",
+        "@org_polymer_paper_listbox",
+        "@org_polymer_paper_slider",
+        "@org_polymer_paper_spinner",
+        "@org_polymer_paper_styles",
+        "@org_polymer_paper_toast",
+        "@org_polymer_paper_toggle_button",
+        "@org_polymer_paper_tooltip",
     ],
 )
 
-tensorboard_ts_development_sources(
-    name = "dev_sources_for_test",
-    testonly = 1,
-    runtime_deps = [
-        "//third_party/javascript/chai",
-        "//third_party/javascript/mocha",
-    ],
-    deps = [
-        ":ts_test",
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "external.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "//third_party/javascript/typings/threejs:three.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
     ],
 )
 
-# To run locally, run :all_tests_local
-tensorboard_karma_web_test_suite(
-    name = "all_tests",
-    size = "medium",
-    browsers = ["//testing/web/browsers:chrome-linux"],
-    manifest = ":dev_sources_for_test",
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {
+        "VZ.Projector.Heap": ["heap.ts"],
+        "VZ.Projector.Label": ["label.ts"],
+        "VZ.Projector.SPTree": ["sptree.ts"],
+        "VZ.Projector.BhTsne": ["bh_tsne.ts"],
+        "VZ.Projector.Logging": ["logging.ts"],
+        "VZ.Projector.RenderContext": ["renderContext.ts"],
+        "VZ.Projector.ScatterPlotRectangleSelector": ["scatterPlotRectangleSelector.ts"],
+        "VZ.Projector.AnalyticsLogger": ["analyticsLogger.ts"],
+        "VZ.Projector.Util": ["util.ts"],
+        "VZ.Projector.Data": ["data.ts"],
+        "VZ.Projector.DataProvider": ["data-provider.ts"],
+        "VZ.Projector.DataProviderDemo": ["data-provider-demo.ts"],
+        "VZ.Projector.DataProviderProto": ["data-provider-proto.ts"],
+        "VZ.Projector.DataProviderServer": ["data-provider-server.ts"],
+        "VZ.Projector.Knn": ["knn.ts"],
+        "VZ.Projector.ProjectorEventContext": ["projectorEventContext.ts"],
+        "VZ.Projector.ScatterPlot": ["scatterPlot.ts"],
+        "VZ.Projector.ScatterPlotVisualizer3DLabels": ["scatterPlotVisualizer3DLabels.ts"],
+        "VZ.Projector.ScatterPlotVisualizerCanvasLabels": ["scatterPlotVisualizerCanvasLabels.ts"],
+        "VZ.Projector.ScatterPlotVisualizerPolylines": ["scatterPlotVisualizerPolylines.ts"],
+        "VZ.Projector.ScatterPlotVisualizerSprites": ["scatterPlotVisualizerSprites.ts"],
+        "VZ.Projector.ScatterPlotVisualizer": ["scatterPlotVisualizer.ts"],
+        "VZ.Projector.ProjectorScatterPlotAdapter": ["projectorScatterPlotAdapter.ts"],
+        "VZ.Projector.Vector": ["vector.ts"],
+        "VZ.Projector.ProjectorUtil": ["vz-projector-util.ts"],
+        "VZ.Projector.ProjectorBookmarkPanel": ["vz-projector-bookmark-panel.ts"],
+        "VZ.Projector.ProjectorDataPanel": ["vz-projector-data-panel.ts"],
+        "VZ.Projector.ProjectorInput": ["vz-projector-input.ts"],
+        "VZ.Projector.ProjectorInspectorPanel": ["vz-projector-inspector-panel.ts"],
+        "VZ.Projector.ProjectorLegend": ["vz-projector-legend.ts"],
+        "VZ.Projector.ProjectorMetadataCard": ["vz-projector-metadata-card.ts"],
+        "VZ.Projector.ProjectorProjectionsPanel": ["vz-projector-projections-panel.ts"],
+        "VZ.Projector": ["vz-projector.ts"],
+    },
+    namespace_symbol_aliases = {
+        "VZ.Projector.AnalyticsLogger": {
+            "ProjectionType": "VZ.Projector.Data.ProjectionType",
+        },
+        "VZ.Projector.BhTsne": {
+            "SPNode": "VZ.Projector.SPTree.SPNode",
+            "SPTree": "VZ.Projector.SPTree.SPTree",
+        },
+        "VZ.Projector.DataProviderDemo": {
+            "DataProvider": "VZ.Projector.DataProvider.DataProvider",
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "EmbeddingInfo": "VZ.Projector.DataProvider.EmbeddingInfo",
+            "ProjectorConfig": "VZ.Projector.DataProvider.ProjectorConfig",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "State": "VZ.Projector.Data.State",
+            "TENSORS_MSG_ID": "VZ.Projector.DataProvider.TENSORS_MSG_ID",
+            "dataProvider": "VZ.Projector.DataProvider",
+            "logging": "VZ.Projector.Logging",
+        },
+        "VZ.Projector.DataProviderProto": {
+            "DataPoint": "VZ.Projector.Data.DataPoint",
+            "DataProto": "VZ.Projector.Data.DataProto",
+            "DataProvider": "VZ.Projector.DataProvider.DataProvider",
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "PointMetadata": "VZ.Projector.Data.PointMetadata",
+            "ProjectorConfig": "VZ.Projector.DataProvider.ProjectorConfig",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "State": "VZ.Projector.Data.State",
+            "analyzeMetadata": "VZ.Projector.DataProvider.analyzeMetadata",
+        },
+        "VZ.Projector.DataProviderServer": {
+            "DataProvider": "VZ.Projector.DataProvider.DataProvider",
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "EmbeddingInfo": "VZ.Projector.DataProvider.EmbeddingInfo",
+            "ProjectorConfig": "VZ.Projector.DataProvider.ProjectorConfig",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "State": "VZ.Projector.Data.State",
+            "dataProvider": "VZ.Projector.DataProvider",
+            "logging": "VZ.Projector.Logging",
+        },
+        "VZ.Projector.DataProvider": {
+            "ColumnStats": "VZ.Projector.Data.ColumnStats",
+            "DataPoint": "VZ.Projector.Data.DataPoint",
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "PointMetadata": "VZ.Projector.Data.PointMetadata",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "State": "VZ.Projector.Data.State",
+            "logging": "VZ.Projector.Logging",
+            "runAsyncTask": "VZ.Projector.Util.runAsyncTask",
+        },
+        "VZ.Projector.Data": {
+            "SpriteMetadata": "VZ.Projector.DataProvider.SpriteMetadata",
+            "TSNE": "VZ.Projector.BhTsne.TSNE",
+            "knn": "VZ.Projector.Knn",
+            "logging": "VZ.Projector.Logging",
+            "scatterPlot": "VZ.Projector.ScatterPlot",
+            "util": "VZ.Projector.Util",
+            "vector": "VZ.Projector.Vector",
+        },
+        "VZ.Projector.Knn": {
+            "KMin": "VZ.Projector.Heap.KMin",
+            "Vector": "VZ.Projector.Vector.Vector",
+            "logging": "VZ.Projector.Logging",
+            "runAsyncTask": "VZ.Projector.Util.runAsyncTask",
+            "vector": "VZ.Projector.Vector",
+        },
+        "VZ.Projector.ProjectorEventContext": {
+            "DistanceFunction": "VZ.Projector.Data.DistanceFunction",
+            "NearestEntry": "VZ.Projector.Knn.NearestEntry",
+            "Projection": "VZ.Projector.Data.Projection",
+        },
+        "VZ.Projector.ProjectorScatterPlotAdapter": {
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "DistanceFunction": "VZ.Projector.Data.DistanceFunction",
+            "LabelRenderParams": "VZ.Projector.RenderContext.LabelRenderParams",
+            "NearestEntry": "VZ.Projector.Knn.NearestEntry",
+            "Projection": "VZ.Projector.Data.Projection",
+            "ProjectionComponents3D": "VZ.Projector.Data.ProjectionComponents3D",
+            "ProjectorEventContext": "VZ.Projector.ProjectorEventContext.ProjectorEventContext",
+            "ScatterPlot": "VZ.Projector.ScatterPlot.ScatterPlot",
+            "ScatterPlotVisualizer3DLabels": "VZ.Projector.ScatterPlotVisualizer3DLabels.ScatterPlotVisualizer3DLabels",
+            "ScatterPlotVisualizerCanvasLabels": "VZ.Projector.ScatterPlotVisualizerCanvasLabels.ScatterPlotVisualizerCanvasLabels",
+            "ScatterPlotVisualizerPolylines": "VZ.Projector.ScatterPlotVisualizerPolylines.ScatterPlotVisualizerPolylines",
+            "ScatterPlotVisualizerSprites": "VZ.Projector.ScatterPlotVisualizerSprites.ScatterPlotVisualizerSprites",
+            "State": "VZ.Projector.Data.State",
+            "vector": "VZ.Projector.Vector",
+        },
+        "VZ.Projector.ScatterPlot": {
+            "BoundingBox": "VZ.Projector.ScatterPlotRectangleSelector.BoundingBox",
+            "CameraType": "VZ.Projector.RenderContext.CameraType",
+            "LabelRenderParams": "VZ.Projector.RenderContext.LabelRenderParams",
+            "Point2D": "VZ.Projector.Vector.Point2D",
+            "Point3D": "VZ.Projector.Vector.Point3D",
+            "ProjectorEventContext": "VZ.Projector.ProjectorEventContext.ProjectorEventContext",
+            "RenderContext": "VZ.Projector.RenderContext.RenderContext",
+            "ScatterPlotRectangleSelector": "VZ.Projector.ScatterPlotRectangleSelector.ScatterPlotRectangleSelector",
+            "ScatterPlotVisualizer": "VZ.Projector.ScatterPlotVisualizer.ScatterPlotVisualizer",
+            "util": "VZ.Projector.Util",
+        },
+        "VZ.Projector.ScatterPlotVisualizer3DLabels": {
+            "RenderContext": "VZ.Projector.RenderContext.RenderContext",
+            "ScatterPlotVisualizer": "VZ.Projector.ScatterPlotVisualizer.ScatterPlotVisualizer",
+            "util": "VZ.Projector.Util",
+        },
+        "VZ.Projector.ScatterPlotVisualizerCanvasLabels": {
+            "BoundingBox": "VZ.Projector.Label.BoundingBox",
+            "CameraType": "VZ.Projector.RenderContext.CameraType",
+            "CollisionGrid": "VZ.Projector.Label.CollisionGrid",
+            "RenderContext": "VZ.Projector.RenderContext.RenderContext",
+            "ScatterPlotVisualizer": "VZ.Projector.ScatterPlotVisualizer.ScatterPlotVisualizer",
+            "util": "VZ.Projector.Util",
+        },
+        "VZ.Projector.ScatterPlotVisualizerPolylines": {
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "RenderContext": "VZ.Projector.RenderContext.RenderContext",
+            "ScatterPlotVisualizer": "VZ.Projector.ScatterPlotVisualizer.ScatterPlotVisualizer",
+            "util": "VZ.Projector.Util",
+        },
+        "VZ.Projector.ScatterPlotVisualizerSprites": {
+            "CameraType": "VZ.Projector.RenderContext.CameraType",
+            "RenderContext": "VZ.Projector.RenderContext.RenderContext",
+            "ScatterPlotVisualizer": "VZ.Projector.ScatterPlotVisualizer.ScatterPlotVisualizer",
+            "util": "VZ.Projector.Util",
+        },
+        "VZ.Projector.ScatterPlotVisualizer": {
+            "RenderContext": "VZ.Projector.RenderContext.RenderContext",
+        },
+        "VZ.Projector.Util": {
+            "DataPoint": "VZ.Projector.Data.DataPoint",
+            "Point2D": "VZ.Projector.Vector.Point2D",
+            "logging": "VZ.Projector.Logging",
+        },
+        "VZ.Projector.Vector": {
+            "assert": "VZ.Projector.Util.assert",
+        },
+        "VZ.Projector.ProjectorBookmarkPanel": {
+            "DataProvider": "VZ.Projector.DataProvider.DataProvider",
+            "EmbeddingInfo": "VZ.Projector.DataProvider.EmbeddingInfo",
+            "PolymerElement": "VZ.Projector.ProjectorUtil.PolymerElement",
+            "PolymerHTMLElement": "VZ.Projector.ProjectorUtil.PolymerHTMLElement",
+            "Projector": "VZ.Projector.Projector",
+            "ProjectorEventContext": "VZ.Projector.ProjectorEventContext.ProjectorEventContext",
+            "State": "VZ.Projector.Data.State",
+            "logging": "VZ.Projector.Logging",
+        },
+        "VZ.Projector.ProjectorDataPanel": {
+            "ColorLegendRenderInfo": "VZ.Projector.ProjectorLegend.ColorLegendRenderInfo",
+            "ColorLegendThreshold": "VZ.Projector.ProjectorLegend.ColorLegendThreshold",
+            "ColorOption": "VZ.Projector.Data.ColorOption",
+            "ColumnStats": "VZ.Projector.Data.ColumnStats",
+            "DataProvider": "VZ.Projector.DataProvider.DataProvider",
+            "EmbeddingInfo": "VZ.Projector.DataProvider.EmbeddingInfo",
+            "PolymerElement": "VZ.Projector.ProjectorUtil.PolymerElement",
+            "PolymerHTMLElement": "VZ.Projector.ProjectorUtil.PolymerHTMLElement",
+            "Projector": "VZ.Projector.Projector",
+            "ProjectorConfig": "VZ.Projector.DataProvider.ProjectorConfig",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "parseRawMetadata": "VZ.Projector.DataProvider.parseRawMetadata",
+            "parseRawTensors": "VZ.Projector.DataProvider.parseRawTensors",
+            "util": "VZ.Projector.Util",
+        },
+        "VZ.Projector.ProjectorInput": {
+            "PolymerElement": "VZ.Projector.ProjectorUtil.PolymerElement",
+            "PolymerHTMLElement": "VZ.Projector.ProjectorUtil.PolymerHTMLElement",
+        },
+        "VZ.Projector.ProjectorInspectorPanel": {
+            "DistanceFunction": "VZ.Projector.Data.DistanceFunction",
+            "PolymerElement": "VZ.Projector.ProjectorUtil.PolymerElement",
+            "PolymerHTMLElement": "VZ.Projector.ProjectorUtil.PolymerHTMLElement",
+            "Projector": "VZ.Projector.Projector",
+            "ProjectorEventContext": "VZ.Projector.ProjectorEventContext.ProjectorEventContext",
+            "ProjectorInput": "VZ.Projector.ProjectorInput.ProjectorInput",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "State": "VZ.Projector.Data.State",
+            "adapter": "VZ.Projector.ProjectorScatterPlotAdapter",
+            "knn": "VZ.Projector.Knn",
+            "util": "VZ.Projector.Util",
+            "vector": "VZ.Projector.Vector",
+        },
+        "VZ.Projector.ProjectorLegend": {
+            "PolymerElement": "VZ.Projector.ProjectorUtil.PolymerElement",
+            "PolymerHTMLElement": "VZ.Projector.ProjectorUtil.PolymerHTMLElement",
+        },
+        "VZ.Projector.ProjectorMetadataCard": {
+            "PointMetadata": "VZ.Projector.Data.PointMetadata",
+            "PolymerElement": "VZ.Projector.ProjectorUtil.PolymerElement",
+            "PolymerHTMLElement": "VZ.Projector.ProjectorUtil.PolymerHTMLElement",
+        },
+        "VZ.Projector.ProjectorProjectionsPanel": {
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "PolymerElement": "VZ.Projector.ProjectorUtil.PolymerElement",
+            "PolymerHTMLElement": "VZ.Projector.ProjectorUtil.PolymerHTMLElement",
+            "Projection": "VZ.Projector.Data.Projection",
+            "ProjectionType": "VZ.Projector.Data.ProjectionType",
+            "Projector": "VZ.Projector.Projector",
+            "ProjectorInput": "VZ.Projector.ProjectorInput.ProjectorInput",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "State": "VZ.Projector.Data.State",
+            "Vector": "VZ.Projector.Vector.Vector",
+            "data": "VZ.Projector.Data",
+            "util": "VZ.Projector.Util",
+            "vector": "VZ.Projector.Vector",
+        },
+        "VZ.Projector": {
+            "AnalyticsLogger": "VZ.Projector.AnalyticsLogger.AnalyticsLogger",
+            "BookmarkPanel": "VZ.Projector.ProjectorBookmarkPanel.BookmarkPanel",
+            "ColorOption": "VZ.Projector.Data.ColorOption",
+            "ColumnStats": "VZ.Projector.Data.ColumnStats",
+            "DataPanel": "VZ.Projector.ProjectorDataPanel.DataPanel",
+            "DataPoint": "VZ.Projector.Data.DataPoint",
+            "DataProto": "VZ.Projector.Data.DataProto",
+            "DataProvider": "VZ.Projector.DataProvider.DataProvider",
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "DemoDataProvider": "VZ.Projector.DataProviderDemo.DemoDataProvider",
+            "DistanceFunction": "VZ.Projector.Data.DistanceFunction",
+            "DistanceMetricChangedListener": "VZ.Projector.ProjectorEventContext.DistanceMetricChangedListener",
+            "EmbeddingInfo": "VZ.Projector.DataProvider.EmbeddingInfo",
+            "HoverListener": "VZ.Projector.ProjectorEventContext.HoverListener",
+            "InspectorPanel": "VZ.Projector.ProjectorInspectorPanel.InspectorPanel",
+            "MetadataCard": "VZ.Projector.ProjectorMetadataCard.MetadataCard",
+            "MouseMode": "VZ.Projector.ScatterPlot.MouseMode",
+            "PointMetadata": "VZ.Projector.Data.PointMetadata",
+            "PolymerElement": "VZ.Projector.ProjectorUtil.PolymerElement",
+            "PolymerHTMLElement": "VZ.Projector.ProjectorUtil.PolymerHTMLElement",
+            "Projection": "VZ.Projector.Data.Projection",
+            "ProjectionChangedListener": "VZ.Projector.ProjectorEventContext.ProjectionChangedListener",
+            "ProjectionsPanel": "VZ.Projector.ProjectorProjectionsPanel.ProjectionsPanel",
+            "ProjectorEventContext": "VZ.Projector.ProjectorEventContext.ProjectorEventContext",
+            "ProjectorScatterPlotAdapter": "VZ.Projector.ProjectorScatterPlotAdapter.ProjectorScatterPlotAdapter",
+            "ProtoDataProvider": "VZ.Projector.DataProviderProto.ProtoDataProvider",
+            "SelectionChangedListener": "VZ.Projector.ProjectorEventContext.SelectionChangedListener",
+            "ServerDataProvider": "VZ.Projector.DataProviderServer.ServerDataProvider",
+            "ServingMode": "VZ.Projector.DataProvider.ServingMode",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "State": "VZ.Projector.Data.State",
+            "data": "VZ.Projector.Data",
+            "knn": "VZ.Projector.Knn",
+            "logging": "VZ.Projector.Logging",
+            "stateGetAccessorDimensions": "VZ.Projector.Data.stateGetAccessorDimensions",
+            "util": "VZ.Projector.Util",
+        },
+    },
 )
 
-# Generate a TypeScript IDE project by running this target.
-tensorboard_ts_config(
-    name = "tsconfig",
-    deps = [
-        ":ts_lib",
-        ":ts_test",
-        ":tsne_ts_lib",
-    ],
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
 )
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/bh_tsne.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/bh_tsne.ts
index 9d2df65f56..063d57ec40 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/bh_tsne.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/bh_tsne.ts
@@ -22,6 +22,7 @@ limitations under the License.
  */
 
 /**
+ * @license
  * The MIT License (MIT)
  * Copyright (c) 2015 Andrej Karpathy
  * Permission is hereby granted, free of charge, to any person obtaining a copy
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/bundle.html b/tensorflow/tensorboard/components/vz_projector_d3v4/bundle.html
new file mode 100644
index 0000000000..2837fed870
--- /dev/null
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/bundle.html
@@ -0,0 +1,24 @@
+<!--
+@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.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/d3.html">
+<link rel="import" href="../tf-imports/numericjs.html">
+<link rel="import" href="../tf-imports/threejs.html">
+<link rel="import" href="../tf-imports/weblas.html">
+
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/projectorScatterPlotAdapter.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/projectorScatterPlotAdapter.ts
index bb09e2b153..9d6df953d6 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/projectorScatterPlotAdapter.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/projectorScatterPlotAdapter.ts
@@ -378,8 +378,8 @@ export class ProjectorScatterPlotAdapter {
     }
 
     return new LabelRenderParams(
-        visibleLabels, labelStrings, scale, opacityFlags, LABEL_FONT_SIZE,
-        fillColors, strokeColors);
+        new Float32Array(visibleLabels), labelStrings, scale, opacityFlags,
+        LABEL_FONT_SIZE, fillColors, strokeColors);
   }
 
   generatePointScaleFactorArray(
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/scatterPlotVisualizerSprites.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/scatterPlotVisualizerSprites.ts
index 8adc9a9bd2..be9c1703c7 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/scatterPlotVisualizerSprites.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/scatterPlotVisualizerSprites.ts
@@ -330,7 +330,7 @@ export class ScatterPlotVisualizerSprites implements ScatterPlotVisualizer {
 
   setSpriteAtlas(
       spriteImage: HTMLImageElement, spriteDimensions: [number, number],
-      spriteIndices: Uint8Array) {
+      spriteIndices: Float32Array) {
     this.disposeTextureAtlas();
     this.createTextureFromSpriteAtlas(
         spriteImage, spriteDimensions, spriteIndices);
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/test/BUILD b/tensorflow/tensorboard/components/vz_projector_d3v4/test/BUILD
new file mode 100644
index 0000000000..3536893748
--- /dev/null
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/BUILD
@@ -0,0 +1,81 @@
+package(
+    default_testonly = True,
+    default_visibility = ["//tensorflow:internal"],
+)
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "test",
+    srcs = [
+        "bundle.js",
+        "tests.html",
+    ],
+    path = "/vz-projector/test",
+    deps = [
+        "//tensorflow/tensorboard/components/vz_projector_d3v4",
+        "@org_npmjs_registry_web_component_tester",
+        "@org_polymer",
+        "@org_polymer_webcomponentsjs",
+    ],
+)
+
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:chai.d.ts",
+        "@org_definitelytyped//:mocha.d.ts",
+        "@org_definitelytyped//:polymer.d.ts",
+        "//third_party/javascript/typings/threejs:three.d.ts",
+        "@org_definitelytyped//:webcomponents.js.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:d3.d.ts",
+        "//tensorflow/tensorboard/components/tf_imports_d3v4:plottable.d.ts",
+        "//tensorflow/tensorboard/components/vz_projector_d3v4:bundle.d.ts",
+    ],
+)
+
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {
+        "VZ.Projector.Test": [
+            "assert.ts",
+            "sptree_test.ts",
+            "data_test.ts",
+            "data-provider_test.ts",
+            "util_test.ts",
+
+            # TODO(smilkov): Migrate these away from jasmine.
+            # "scatterPlotRectangleSelector_test.ts",
+            # "vz-projector-projections-panel_test.ts",
+        ],
+    },
+    namespace_symbol_aliases = {
+        "VZ.Projector.Test": {
+            "BoundingBox": "VZ.Projector.ScatterPlotRectangleSelector.BoundingBox",
+            "DataPoint": "VZ.Projector.Data.DataPoint",
+            "DataSet": "VZ.Projector.Data.DataSet",
+            "ProjectionsPanel": "VZ.Projector.ProjectorProjectionsPanel.ProjectionsPanel",
+            "SPTree": "VZ.Projector.SPTree.SPTree",
+            "ScatterPlotRectangleSelector": "VZ.Projector.ScatterPlotRectangleSelector.ScatterPlotRectangleSelector",
+            "SpriteAndMetadataInfo": "VZ.Projector.Data.SpriteAndMetadataInfo",
+            "State": "VZ.Projector.Data.State",
+            "State": "VZ.Projector.Data.State",
+            "data_provider": "VZ.Projector.DataProvider",
+            "stateGetAccessorDimensions": "VZ.Projector.Data.stateGetAccessorDimensions",
+            "util": "VZ.Projector.Util",
+        },
+    },
+)
+
+filegroup(
+    name = "all_files",
+    testonly = 0,
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/test/assert.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/test/assert.ts
new file mode 100644
index 0000000000..f489517a7f
--- /dev/null
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/assert.ts
@@ -0,0 +1,16 @@
+/* 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.
+==============================================================================*/
+
+const assert = chai.assert;
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/data-provider_test.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/test/data-provider_test.ts
index 01b89ca700..59a42ffbfd 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/data-provider_test.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/data-provider_test.ts
@@ -13,8 +13,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {DataPoint, SpriteAndMetadataInfo} from './data';
-import * as data_provider from './data-provider';
+import {DataPoint, SpriteAndMetadataInfo} from '../data';
+import * as data_provider from '../data-provider';
 
 /**
  * Converts a string to an ArrayBuffer.
@@ -48,15 +48,15 @@ describe('parse tensors', () => {
         .then((tensorsArrayBuffer: ArrayBuffer) => {
           data_provider.parseTensors(tensorsArrayBuffer)
               .then((data: DataPoint[]) => {
-                expect(data.length).toBe(2);
+                assert.equal(2, data.length);
 
-                expect(data[0].vector).toEqual(new Float32Array(tensors[0]));
-                expect(data[0].index).toEqual(0);
-                expect(data[0].projections).toBeNull();
+                assert.deepEqual(new Float32Array(tensors[0]), data[0].vector);
+                assert.equal(0, data[0].index);
+                assert.isNull(data[0].projections);
 
-                expect(data[1].vector).toEqual(new Float32Array(tensors[1]));
-                expect(data[1].index).toEqual(1);
-                expect(data[1].projections).toBeNull();
+                assert.deepEqual(new Float32Array(tensors[1]), data[1].vector);
+                assert.equal(1, data[1].index);
+                assert.isNull(data[1].projections);
                 doneFn();
               });
         });
@@ -68,27 +68,27 @@ describe('parse tensors', () => {
         .then((metadataArrayBuffer: ArrayBuffer) => {
           data_provider.parseMetadata(metadataArrayBuffer)
               .then((spriteAndMetadataInfo: SpriteAndMetadataInfo) => {
-                expect(spriteAndMetadataInfo.stats.length).toBe(2);
-                expect(spriteAndMetadataInfo.stats[0].name)
-                    .toBe(metadata[0][0]);
-                expect(spriteAndMetadataInfo.stats[0].isNumeric).toBe(false);
-                expect(spriteAndMetadataInfo.stats[0].tooManyUniqueValues)
-                    .toBe(false);
-                expect(spriteAndMetadataInfo.stats[1].name)
-                    .toBe(metadata[0][1]);
-                expect(spriteAndMetadataInfo.stats[1].isNumeric).toBe(true);
-                expect(spriteAndMetadataInfo.stats[1].tooManyUniqueValues)
-                    .toBe(false);
+                assert.equal(2, spriteAndMetadataInfo.stats.length);
+                assert.equal(metadata[0][0],
+                             spriteAndMetadataInfo.stats[0].name);
+                assert.isFalse(spriteAndMetadataInfo.stats[0].isNumeric);
+                assert.isFalse(
+                    spriteAndMetadataInfo.stats[0].tooManyUniqueValues);
+                assert.equal(metadata[0][1],
+                             spriteAndMetadataInfo.stats[1].name);
+                assert.isTrue(spriteAndMetadataInfo.stats[1].isNumeric);
+                assert.isFalse(
+                    spriteAndMetadataInfo.stats[1].tooManyUniqueValues);
 
-                expect(spriteAndMetadataInfo.pointsInfo.length).toBe(2);
-                expect(spriteAndMetadataInfo.pointsInfo[0]['label'])
-                    .toBe(metadata[1][0]);
-                expect(spriteAndMetadataInfo.pointsInfo[0]['fakecol'])
-                    .toBe(+metadata[1][1]);
-                expect(spriteAndMetadataInfo.pointsInfo[1]['label'])
-                    .toBe(metadata[2][0]);
-                expect(spriteAndMetadataInfo.pointsInfo[1]['fakecol'])
-                    .toBe(+metadata[2][1]);
+                assert.equal(2, spriteAndMetadataInfo.pointsInfo.length);
+                assert.equal(metadata[1][0],
+                             spriteAndMetadataInfo.pointsInfo[0]['label']);
+                assert.equal(+metadata[1][1],
+                             spriteAndMetadataInfo.pointsInfo[0]['fakecol']);
+                assert.equal(metadata[2][0],
+                             spriteAndMetadataInfo.pointsInfo[1]['label']);
+                assert.equal(+metadata[2][1],
+                             spriteAndMetadataInfo.pointsInfo[1]['fakecol']);
                 doneFn();
               });
         });
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/data_test.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/test/data_test.ts
index 924ae3a929..5e47c091c5 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/data_test.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/data_test.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {DataPoint, DataSet, State, stateGetAccessorDimensions} from './data';
+import {DataPoint, DataSet, State, stateGetAccessorDimensions} from '../data';
 
 /**
  * Helper method that makes a list of points given an array of
@@ -44,8 +44,8 @@ describe('constructor_with_sequences', () => {
     // one sequence 0->2->3.
     const points = makePointsWithSequences([2, -1, 3, -1]);
     let dataset = new DataSet(points);
-    expect(dataset.sequences.length).toEqual(1);
-    expect(dataset.sequences[0].pointIndices).toEqual([0, 2, 3]);
+    assert.equal(1, dataset.sequences.length);
+    assert.deepEqual([0, 2, 3], dataset.sequences[0].pointIndices);
   });
 
   it('Simple forward pointing sequences, __next__ metadata format', () => {
@@ -53,14 +53,14 @@ describe('constructor_with_sequences', () => {
     // one sequence 0->2->3.
     const points = makePointsWithSequences([2, -1, 3, -1], '__next__');
     let dataset = new DataSet(points);
-    expect(dataset.sequences.length).toEqual(1);
-    expect(dataset.sequences[0].pointIndices).toEqual([0, 2, 3]);
+    assert.equal(1, dataset.sequences.length);
+    assert.deepEqual([0, 2, 3], dataset.sequences[0].pointIndices);
   });
 
   it('No sequences', () => {
     let points = makePointsWithSequences([-1, -1, -1, -1]);
     let dataset = new DataSet(points);
-    expect(dataset.sequences.length).toEqual(0);
+    assert.equal(0, dataset.sequences.length);
   });
 
   it('A sequence that goes backwards and forward in the array', () => {
@@ -68,8 +68,8 @@ describe('constructor_with_sequences', () => {
     // one sequence 3->1->0->2.
     let points = makePointsWithSequences([2, 0, -1, 1]);
     let dataset = new DataSet(points);
-    expect(dataset.sequences.length).toEqual(1);
-    expect(dataset.sequences[0].pointIndices).toEqual([3, 1, 0, 2]);
+    assert.equal(1, dataset.sequences.length);
+    assert.deepEqual([3, 1, 0, 2], dataset.sequences[0].pointIndices);
   });
 });
 
@@ -78,27 +78,27 @@ describe('stateGetAccessorDimensions', () => {
     const state = new State();
     state.selectedProjection = 'tsne';
     state.tSNEis3d = false;
-    expect(stateGetAccessorDimensions(state)).toEqual([0, 1]);
+    assert.deepEqual([0, 1], stateGetAccessorDimensions(state));
   });
 
   it('returns [0, 1, 2] for 3d t-SNE', () => {
     const state = new State();
     state.selectedProjection = 'tsne';
     state.tSNEis3d = true;
-    expect(stateGetAccessorDimensions(state)).toEqual([0, 1, 2]);
+    assert.deepEqual([0, 1, 2], stateGetAccessorDimensions(state));
   });
 
   it('returns pca component dimensions array for pca', () => {
     const state = new State();
     state.selectedProjection = 'pca';
     state.pcaComponentDimensions = [13, 12, 11, 10];
-    expect(stateGetAccessorDimensions(state))
-        .toEqual(state.pcaComponentDimensions);
+    assert.deepEqual(state.pcaComponentDimensions,
+                     stateGetAccessorDimensions(state));
   });
 
   it('returns ["x", "y"] for custom projections', () => {
     const state = new State();
     state.selectedProjection = 'custom';
-    expect(stateGetAccessorDimensions(state)).toEqual(['x', 'y']);
+    assert.deepEqual(['x', 'y'], stateGetAccessorDimensions(state));
   });
 });
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/scatterPlotRectangleSelector_test.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/test/scatterPlotRectangleSelector_test.ts
index 91cb10a97e..0ee6cf620d 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/scatterPlotRectangleSelector_test.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/scatterPlotRectangleSelector_test.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {BoundingBox, ScatterPlotRectangleSelector} from './scatterPlotRectangleSelector';
+import {BoundingBox, ScatterPlotRectangleSelector} from '../scatterPlotRectangleSelector';
 
 describe('selector callbacks make bounding box start bottom left', () => {
   let containerElement: HTMLElement;
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/sptree_test.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/test/sptree_test.ts
index 440680bdf1..7e340ea62f 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/sptree_test.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/sptree_test.ts
@@ -13,9 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {SPTree} from './sptree';
-
-const assert = chai.assert;
+import {SPTree} from '../sptree';
 
 it('simple 2D data', () => {
   let data = [
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/test/tests.html b/tensorflow/tensorboard/components/vz_projector_d3v4/test/tests.html
new file mode 100644
index 0000000000..dd43079bde
--- /dev/null
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/tests.html
@@ -0,0 +1,24 @@
+<!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">
+<script src="../../web-component-tester/browser.js"></script>
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<link rel="import" href="../bundle.html">
+<body>
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/util_test.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/test/util_test.ts
index f7c0027c81..c18db95eed 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/util_test.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/util_test.ts
@@ -12,31 +12,31 @@ 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 * as util from './util';
+import * as util from '../util';
 
 describe('getURLParams', () => {
   it('search query with valid param returns correct object', () => {
     let urlParams = util.getURLParams('?config=http://google.com/');
-    expect(urlParams).toEqual({'config': 'http://google.com/'});
+    assert.deepEqual({'config': 'http://google.com/'}, urlParams);
   });
 
   it('search query with multiple valid params returns correct object', () => {
     let urlParams = util.getURLParams('?config=http://google.com/&foo=bar');
-    expect(urlParams).toEqual({'config': 'http://google.com/', 'foo': 'bar'});
+    assert.deepEqual({'config': 'http://google.com/', 'foo': 'bar'}, urlParams);
   });
 
   it('search query with valid param with URL encoded characters', () => {
     let urlParams = util.getURLParams('?config=http://google.com/%20search');
-    expect(urlParams).toEqual({'config': 'http://google.com/ search'});
+    assert.deepEqual({'config': 'http://google.com/ search'}, urlParams);
   });
 
   it('search query with pound sign', () => {
     let urlParams = util.getURLParams('?config=http://google.com/#foo');
-    expect(urlParams).toEqual({'config': 'http://google.com/'});
+    assert.deepEqual({'config': 'http://google.com/'}, urlParams);
   });
 
   it('no search query returns empty object', () => {
     let urlParams = util.getURLParams('');
-    expect(urlParams).toEqual({});
+    assert.deepEqual({}, urlParams);
   });
 });
diff --git a/tensorflow/tensorboard/components/vz_projector_d3v4/vz-projector-projections-panel_test.ts b/tensorflow/tensorboard/components/vz_projector_d3v4/test/vz-projector-projections-panel_test.ts
index fd1acf6f08..2bf0c6eb48 100644
--- a/tensorflow/tensorboard/components/vz_projector_d3v4/vz-projector-projections-panel_test.ts
+++ b/tensorflow/tensorboard/components/vz_projector_d3v4/test/vz-projector-projections-panel_test.ts
@@ -12,10 +12,8 @@ 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 {State} from './data';
-import {ProjectionsPanel} from './vz-projector-projections-panel';
-
-const assert = chai.assert;
+import {State} from '../data';
+import {ProjectionsPanel} from '../vz-projector-projections-panel';
 
 describe('restoreUIFromBookmark', () => {
   let projectionsPanel: ProjectionsPanel;
diff --git a/tensorflow/tensorboard/components/vz_sorting_d3v4/BUILD b/tensorflow/tensorboard/components/vz_sorting_d3v4/BUILD
index 6e6ce525b4..189a6a69ac 100644
--- a/tensorflow/tensorboard/components/vz_sorting_d3v4/BUILD
+++ b/tensorflow/tensorboard/components/vz_sorting_d3v4/BUILD
@@ -1,23 +1,30 @@
 package(default_visibility = ["//tensorflow:internal"])
 
-load("//tensorflow/tensorboard:defs.bzl", "tensorboard_ts_library")
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
 
 licenses(["notice"])  # Apache 2.0
 
-tensorboard_ts_library(
+web_library(
+    name = "vz_sorting_d3v4",
+    srcs = [
+        "bundle.js",
+        "vz-sorting.html",
+    ],
+    path = "/vz-sorting",
+    visibility = ["//visibility:public"],
+)
+
+tensorboard_typescript_genrule(
     name = "ts",
-    srcs = ["sorting.ts"],
+    srcs = ["bundle.ts"],
 )
 
-tensorboard_ts_library(
-    name = "tests",
-    srcs = ["sortingTests.ts"],
-    deps = [
-        ":ts",
-        "//third_party/javascript/typings/chai",
-        "//third_party/javascript/typings/mocha",
-        "//third_party/javascript/typings/sinon",
-    ],
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"VZ.Sorting": ["sorting.ts"]},
 )
 
 filegroup(
diff --git a/tensorflow/tensorboard/components/vz_sorting_d3v4/test/BUILD b/tensorflow/tensorboard/components/vz_sorting_d3v4/test/BUILD
new file mode 100644
index 0000000000..4993cf841d
--- /dev/null
+++ b/tensorflow/tensorboard/components/vz_sorting_d3v4/test/BUILD
@@ -0,0 +1,46 @@
+package(
+    default_testonly = True,
+    default_visibility = ["//tensorflow:internal"],
+)
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+load("//tensorflow/tensorboard:hacks.bzl", "tensorboard_typescript_bundle")
+load("//tensorflow/tensorboard:defs.bzl", "tensorboard_typescript_genrule")
+
+licenses(["notice"])  # Apache 2.0
+
+web_library(
+    name = "test",
+    srcs = [
+        "bundle.js",
+        "tests.html",
+    ],
+    path = "/vz-sorting/test",
+    deps = [
+        "//tensorflow/tensorboard/components/vz_sorting_d3v4",
+        "@org_npmjs_registry_web_component_tester",
+    ],
+)
+
+tensorboard_typescript_genrule(
+    name = "ts",
+    srcs = ["bundle.ts"],
+    typings = [
+        "@org_definitelytyped//:mocha.d.ts",
+        "@org_definitelytyped//:chai.d.ts",
+        "//tensorflow/tensorboard/components/vz_sorting_d3v4:bundle.d.ts",
+    ],
+)
+
+tensorboard_typescript_bundle(
+    name = "bundle",
+    out = "bundle.ts",
+    namespace_srcs = {"VZ.Sorting": ["sortingTests.ts"]},
+)
+
+filegroup(
+    name = "all_files",
+    testonly = 0,
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/components/vz_sorting_d3v4/sortingTests.ts b/tensorflow/tensorboard/components/vz_sorting_d3v4/test/sortingTests.ts
index 4cfbfeb4ea..510685cb4b 100644
--- a/tensorflow/tensorboard/components/vz_sorting_d3v4/sortingTests.ts
+++ b/tensorflow/tensorboard/components/vz_sorting_d3v4/test/sortingTests.ts
@@ -13,12 +13,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {compareTagNames} from './sorting';
-
-const assert = chai.assert;
+import {compareTagNames} from '../sorting';
 
 describe('compareTagNames', () => {
 
+  const assert = chai.assert;
   const sortTagNames = (a) => a.sort(compareTagNames);
 
   it('is asciibetical', () => {
diff --git a/tensorflow/tensorboard/components/vz_sorting_d3v4/tests.html b/tensorflow/tensorboard/components/vz_sorting_d3v4/test/tests.html
index 7148bfb418..d1b4a1db31 100644
--- a/tensorflow/tensorboard/components/vz_sorting_d3v4/tests.html
+++ b/tensorflow/tensorboard/components/vz_sorting_d3v4/test/tests.html
@@ -19,5 +19,5 @@ limitations under the License.
 <meta charset="utf-8">
 <script src="../../web-component-tester/browser.js"></script>
 <body>
-<script src="../sorting.js"></script>
-<script src="sortingTests.js"></script>
+<script src="../bundle.js"></script>
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/components/vz_sorting_d3v4/vz-sorting.html b/tensorflow/tensorboard/components/vz_sorting_d3v4/vz-sorting.html
new file mode 100644
index 0000000000..9f925951cb
--- /dev/null
+++ b/tensorflow/tensorboard/components/vz_sorting_d3v4/vz-sorting.html
@@ -0,0 +1,18 @@
+<!--
+@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.
+-->
+
+<script src="bundle.js"></script>
diff --git a/tensorflow/tensorboard/demo/BUILD b/tensorflow/tensorboard/demo/BUILD
new file mode 100644
index 0000000000..66065af044
--- /dev/null
+++ b/tensorflow/tensorboard/demo/BUILD
@@ -0,0 +1,20 @@
+package(default_visibility = ["//tensorflow:internal"])
+
+load("@io_bazel_rules_closure//closure:defs.bzl", "web_library")
+
+licenses(["notice"])  # Apache 2.0
+
+# THIS PACKAGE HAS MOVED
+# See tensorflow/tensorboard/components/tf_tensorboard_d3v4:demo
+
+web_library(
+    name = "demo_data",
+    srcs = glob(["data/**"]),
+    path = "/",
+)
+
+filegroup(
+    name = "all_files",
+    srcs = glob(["**"]),
+    tags = ["notsan"],
+)
diff --git a/tensorflow/tensorboard/demo/data/logdir b/tensorflow/tensorboard/demo/data/logdir
new file mode 100644
index 0000000000..b6362b45d7
--- /dev/null
+++ b/tensorflow/tensorboard/demo/data/logdir
@@ -0,0 +1 @@
+{"logdir": "/foo/some/fake/logdir"}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/demo/index.html b/tensorflow/tensorboard/demo/index.html
deleted file mode 100644
index 581f8a2723..0000000000
--- a/tensorflow/tensorboard/demo/index.html
+++ /dev/null
@@ -1,31 +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.
--->
-
-<!-- This demo index file serves statically serialized TensorBoard json.
-It is essentially a mocked version of the TensorBoard backend. -->
-<html>
-<head>
-  <script src="../components/webcomponentsjs/webcomponents-lite.min.js"></script>
-    <link rel="import" href="../components/tf_tensorboard/tf-tensorboard.html">
-    <link rel="stylesheet" type="text/css" href="../lib/css/global.css">
-    <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAMAAAD3eH5ZAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD/UExURfFlKfaELvFmKfNyK/67NvWALf68Nv69NvNxK/20NfyyNP22NfN0K/JrKvqhMv2zNf25Nf24Nf23NfeOL/yzNPyvNPJoKviWMPmeMfN1K/WBLfePL/FnKfeML/qlMvR7LPmcMfeLL/aJLvR5LPFoKfJuKvR3LP66NvywNPeNL/V/LfaILv21Nf26NfNzK/NvK/R6LPmaMfyxNPqfMvV+LfurM/iSMPmbMfJvKvmdMfumM/qiMvmZMfytNPJqKvysNPN2K/iYMPNwK/upM/JtKvJsKviVMPaHLvaGLvJpKvR8LPaKLvqkMvuqM/aFLvR4LPuoM/iTMPWDLfiRMPmYMXS0ngkAAALoSURBVHja7drnctpAFIbhFUISSKJ3MKYa0+y4xTW9937/15JkJhlTjhrSrHRmvuf/as6L0YLFCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJ6njenqspzgnPrsrGX9Zpi2tCrmnc6+dYNthVY5WpMmxQLWPdMsOuYVwzNj3ei2t3mQwaV43BJPDCS2NbJ5aEeuX/+9qcjQOtfFIkIkrvY2g4MVcmOBsFWbowKO/kNyj62gRpJcDaPBlxLr1B0zdG0C/8LzbJiJrshuvy1gzlA9+rD8mIkuyIJjFE3/dqnYwoSm7IUEPoD/wut8iIguSIDjlFxe/yfXL5vuSI21BTZLLhXoOILMO8Hxwa/L8bI0LfmUdhGowb2ZvT0e57pFNDgB06IlVyjmmIBl2T/nl9Rw6SD9GgSG/Q0uQkaW3XhmovKQ3eFQ4N2Uo9OQ1eFZsNerf7vP+rO4rhmY1Lg3vFVoP8+8BXg1sFnwbnCk4NThW8GuiKBDdkVVtTNFvNelVsNqTbyWnIOM2oeTRoyWvwmpJHg/ucXBrcJuXT4DwrpwZi2vy0VCx8YtXg/D2bU4OfiuQ3eFfE2KD4bfCqiLNB993gXsGlwa2CT4NzBacGIVQ6YsipQdh0xEdODUKjIxrSp88onZ8zbbFLg1DoiFO5BXvDGv2My9/JhUT8JUZTI0yDaNHLBzIbvqTDNYhUiVw/kdjQ1kM2CHFDPjKW+KzyRTF0g/ga9w9y+fANQpxvX8CU+Ny7FUWDeF3Y+g3lROIf4k0UDX9eCyvO531PyYhHga9zvPZJU5b73Y/eXj8Hv9D48n6HaF5LbcjRt8TZTtda5M1DfXnbkX1C0SHCFKzQB5Fe8op4GNGNHavvZESbVwT5r6W1xyuCPBY3Y9YgDqzknH/e3YfNzzuL30l0IebrZ5kKtuDIXt1n868ET6kf3/49tLvrCcZyF8Pu215dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcPIbNrBhOaBXucoAAAAASUVORK5CYII=">
-</head>
-<body>
-  <tf-tensorboard demo-dir="data/" use-hash></tf-tensorboard>
-</body>
-</html>