Fix `gulp vulcanize`. To do this we remove bower_components folder and all components are now under `components` directory. This follows polymer conventions.

Change: 110158503

53 files changed, 163 insertions, 208 deletions

diff --git a/tensorflow/tensorboard/.bowerrc b/tensorflow/tensorboard/.bowerrc
new file mode 100644
index 0000000000..333544ec7a
--- /dev/null
+++ b/tensorflow/tensorboard/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory" : "components"
+}
\ No newline at end of file
diff --git a/tensorflow/tensorboard/.gitignore b/tensorflow/tensorboard/.gitignore
index 33117e9d63..343c2e963e 100644
--- a/tensorflow/tensorboard/.gitignore
+++ b/tensorflow/tensorboard/.gitignore
@@ -1,16 +1,25 @@
-bower_components/*
 node_modules/*
 typings/*
 build/*
 dist/tf-tensorboard-demo.html
 
+# Since bower components are stored in the same directory as
+# tensorboard components, we ignore everything under components
+# except our own components which start with tf-.
+components/*
+# This rule should always be in sync with TF_COMPONENTS_TYPESCRIPT_GLOB
+# in gulpfile.js
+!components/tf-*
+!components/index.html
+# Ignore the sample graph files since they are too large to
+# be in the repo.
 components/tf-graph/demo/tf_model_zoo/*
 
-# Js files in the graph visualizer migrated to typescript. These files
-# are produced by the compiler and should not be submitted to the repo.
+# Js files in the graph visualizer produces by the typescript
+# compiler and should not be submitted to the repo.
 components/tf-graph-common/lib/*.js
 components/tf-graph-common/lib/scene/*.js
 components/tf-event-dashboard/*.js
 components/tf-categorizer/*.js
 components/tf-dashboard-common/*.js
-components/**/test/*.js
+components/**/tf-test/*.js
diff --git a/tensorflow/tensorboard/components/imports/README.md b/tensorflow/tensorboard/components/imports/README.md
deleted file mode 100644
index 695698bf23..0000000000
--- a/tensorflow/tensorboard/components/imports/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-This file acts as import routers for third party javascript libraries,
-e.g. Plottable and D3.
-
-The "local-imports" folder contains alternate versions of the import routers
-that load from `bower_components`; it exists to faciliate local development
-with a gulp workflow.
diff --git a/tensorflow/tensorboard/components/imports/local-imports/d3.html b/tensorflow/tensorboard/components/imports/local-imports/d3.html
deleted file mode 100644
index e2797c0a1a..0000000000
--- a/tensorflow/tensorboard/components/imports/local-imports/d3.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="../../d3/d3.js"></script>
diff --git a/tensorflow/tensorboard/components/imports/local-imports/dagre.html b/tensorflow/tensorboard/components/imports/local-imports/dagre.html
deleted file mode 100644
index 29586e769d..0000000000
--- a/tensorflow/tensorboard/components/imports/local-imports/dagre.html
+++ /dev/null
@@ -1,5 +0,0 @@
-// hackhack for some reason getting graphlib via an import reference results in
-// out of order script evaluation
-<script src="../../lodash/lodash.min.js"></script>
-<script src="../../graphlib/dist/graphlib.core.js"></script>
-<script src="../../dagre/dist/dagre.core.js"></script>
diff --git a/tensorflow/tensorboard/components/imports/local-imports/graphlib.html b/tensorflow/tensorboard/components/imports/local-imports/graphlib.html
deleted file mode 100644
index 4bf3528fcd..0000000000
--- a/tensorflow/tensorboard/components/imports/local-imports/graphlib.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<script src="../../lodash/lodash.min.js"></script>
-<script src="../../graphlib/dist/graphlib.core.js"></script>
diff --git a/tensorflow/tensorboard/components/imports/local-imports/lodash.html b/tensorflow/tensorboard/components/imports/local-imports/lodash.html
deleted file mode 100644
index 95f8375a1d..0000000000
--- a/tensorflow/tensorboard/components/imports/local-imports/lodash.html
+++ /dev/null
@@ -1 +0,0 @@
-<script src="../../lodash/lodash.min.js"></script>
diff --git a/tensorflow/tensorboard/components/imports/local-imports/plottable.html b/tensorflow/tensorboard/components/imports/local-imports/plottable.html
deleted file mode 100644
index dfbe77c8c4..0000000000
--- a/tensorflow/tensorboard/components/imports/local-imports/plottable.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<link rel="import" href="../../imports/d3.html">
-<script src="../../plottable/plottable.js"></script>
-<link rel="stylesheet" type="text/css" href="../../plottable/plottable.css">
diff --git a/tensorflow/tensorboard/app/index.html b/tensorflow/tensorboard/components/index.html
index c6a1a8f80e..8b0f87d350 100644
--- a/tensorflow/tensorboard/app/index.html
+++ b/tensorflow/tensorboard/components/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
     <style>
       html, body {
         margin: 0;
@@ -10,9 +10,9 @@
         font-family: "RobotoDraft","Roboto",sans-serif;
       }
     </style>
-    <script src="analytics.js"></script>
+    <script src="../app/analytics.js"></script>
     <link rel="shortcut icon" href="lib/images/favicon.png">
-    <link rel="import" href="../components/tf-tensorboard/tf-tensorboard.html">
+    <link rel="import" href="tf-tensorboard/tf-tensorboard.html">
     <title>TensorBoard</title>
   </head>
   <body>
diff --git a/tensorflow/tensorboard/components/tf-categorizer/demo/index.html b/tensorflow/tensorboard/components/tf-categorizer/demo/index.html
index ea3f162aa5..403e25da87 100644
--- a/tensorflow/tensorboard/components/tf-categorizer/demo/index.html
+++ b/tensorflow/tensorboard/components/tf-categorizer/demo/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
  <head>
-   <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-   <script src="../../../bower_components/d3/d3.js"></script>
+   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+   <script src="../../d3/d3.js"></script>
    <link rel="import" href="../tf-categorizer.html">
-   <link rel="import" href="../../../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
+   <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
 
  </head>
  <body>
diff --git a/tensorflow/tensorboard/components/tf-categorizer/index.html b/tensorflow/tensorboard/components/tf-categorizer/index.html
index f08a125f7c..5956a9789b 100644
--- a/tensorflow/tensorboard/components/tf-categorizer/index.html
+++ b/tensorflow/tensorboard/components/tf-categorizer/index.html
@@ -6,8 +6,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-  <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
+  <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
 
 </head>
 <body>
diff --git a/tensorflow/tensorboard/components/tf-collapsable-pane/demo/index.html b/tensorflow/tensorboard/components/tf-collapsable-pane/demo/index.html
index 8906b0f3da..237870408b 100644
--- a/tensorflow/tensorboard/components/tf-collapsable-pane/demo/index.html
+++ b/tensorflow/tensorboard/components/tf-collapsable-pane/demo/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-   <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../tf-collapsable-pane.html">
  </head>
  <body>
diff --git a/tensorflow/tensorboard/components/tf-collapsable-pane/index.html b/tensorflow/tensorboard/components/tf-collapsable-pane/index.html
index 032e5be8c8..c985bc2b52 100644
--- a/tensorflow/tensorboard/components/tf-collapsable-pane/index.html
+++ b/tensorflow/tensorboard/components/tf-collapsable-pane/index.html
@@ -6,8 +6,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-  <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
+  <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
 
 </head>
 <body>
diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-generator.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-generator.html
index 4d72552049..6c3389fb7f 100644
--- a/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-generator.html
+++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-run-generator.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/lodash.html">
 
 <!--
 tf-run-generator is a plumbing component that takes in a url to load runs from, and
diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/urlGenerator.ts b/tensorflow/tensorboard/components/tf-dashboard-common/urlGenerator.ts
index cb8c97823f..b3511ce7b6 100644
--- a/tensorflow/tensorboard/components/tf-dashboard-common/urlGenerator.ts
+++ b/tensorflow/tensorboard/components/tf-dashboard-common/urlGenerator.ts
@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 /// <reference path="../../typings/tsd.d.ts" />
-/// <reference path="../../bower_components/plottable/plottable.d.ts" />
+/// <reference path="../plottable/plottable.d.ts" />
 
 module TF {
   export module Urls {
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/dataCoordinator.ts b/tensorflow/tensorboard/components/tf-event-dashboard/dataCoordinator.ts
index 5083603125..cc46d14287 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/dataCoordinator.ts
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/dataCoordinator.ts
@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 /// <reference path="../../typings/tsd.d.ts" />
-/// <reference path="../../bower_components/plottable/plottable.d.ts" />
+/// <reference path="../plottable/plottable.d.ts" />
 
 module TF {
 
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/dataset.ts b/tensorflow/tensorboard/components/tf-event-dashboard/dataset.ts
index ea2fd950e5..48d12798df 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/dataset.ts
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/dataset.ts
@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 /// <reference path="../../typings/tsd.d.ts" />
-/// <reference path="../../bower_components/plottable/plottable.d.ts" />
+/// <reference path="../plottable/plottable.d.ts" />
 
 module TF {
   /* An extension of Plottable.Dataset that knows how to load data from a backend.
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/demo/index.html b/tensorflow/tensorboard/components/tf-event-dashboard/demo/index.html
index 34ad6a7263..2df20f49b1 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/demo/index.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/demo/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="../tf-event-dashboard.html">
     <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
     <title>Event Dashboard Demo Demo</title>
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html
index 39ca9704c3..39c521e22b 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../imports/plottable.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/plottable.html">
+<link rel="import" href="../tf-imports/lodash.html">
 
 <!--
 tf-chart (TFChart) creates an element that draws a line chart for dispalying event values.
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts b/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts
index 349b50001b..f784ac8c91 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-chart.ts
@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 /// <reference path="../../typings/tsd.d.ts" />
-/// <reference path="../../bower_components/plottable/plottable.d.ts" />
+/// <reference path="../plottable/plottable.d.ts" />
 
 module TF {
   type TFDatum = [number, number, number];
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-color-scale.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-color-scale.html
index b559cab9cd..181f3a713b 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-color-scale.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-color-scale.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../imports/lodash.html">
-<link rel="import" href="../imports/plottable.html">
+<link rel="import" href="../tf-imports/lodash.html">
+<link rel="import" href="../tf-imports/plottable.html">
 
 <!--
 tf-color-scale is a plumbing component that takes in an array of runs, and produces
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-data-coordinator.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-data-coordinator.html
index 454dff4a9e..51a23ef18d 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-data-coordinator.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-data-coordinator.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../imports/plottable.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/plottable.html">
+<link rel="import" href="../tf-imports/lodash.html">
 
 <!--
 tf-data-coordinator is a simple plumbing component that takes in a value url generator
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
index 534f62072f..f8e7b22a9b 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-event-dashboard.html
@@ -15,7 +15,7 @@
 <link rel="import" href="../tf-collapsable-pane/tf-collapsable-pane.html">
 <link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/lodash.html">
 <link rel="import" href="../tf-dashboard-common/warning-style.html">
 
 <!--
diff --git a/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html b/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html
index ef58307e09..0bf7771f79 100644
--- a/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html
+++ b/tensorflow/tensorboard/components/tf-event-dashboard/tf-run-selector.html
@@ -1,7 +1,7 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/lodash.html">
 <link rel="import" href="../tf-dashboard-common/scrollbar-style.html">
 <link rel="import" href="../tf-multi-checkbox/tf-multi-checkbox.html">
 
diff --git a/tensorflow/tensorboard/components/tf-graph-common/test/index.html b/tensorflow/tensorboard/components/tf-graph-common/test/index.html
index c7694e7514..501038db1c 100644
--- a/tensorflow/tensorboard/components/tf-graph-common/test/index.html
+++ b/tensorflow/tensorboard/components/tf-graph-common/test/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-  <script src="../../../bower_components/web-component-tester/browser.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
   <link rel="import" href="../tf-graph-common.html">
 </head>
 <body>
diff --git a/tensorflow/tensorboard/components/tf-graph-common/tf-graph-common.html b/tensorflow/tensorboard/components/tf-graph-common/tf-graph-common.html
index 87a7efe500..3ef0c63335 100644
--- a/tensorflow/tensorboard/components/tf-graph-common/tf-graph-common.html
+++ b/tensorflow/tensorboard/components/tf-graph-common/tf-graph-common.html
@@ -1,7 +1,7 @@
-<link rel="import" href="../imports/d3.html">
-<link rel="import" href="../imports/dagre.html">
-<link rel="import" href="../imports/graphlib.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/d3.html">
+<link rel="import" href="../tf-imports/dagre.html">
+<link rel="import" href="../tf-imports/graphlib.html">
+<link rel="import" href="../tf-imports/lodash.html">
 
 <script src="lib/common.js"></script>
 <script src="lib/graph.js"></script>
diff --git a/tensorflow/tensorboard/components/tf-graph-loader/test/index.html b/tensorflow/tensorboard/components/tf-graph-loader/test/index.html
index e484b43822..c594ca64d6 100644
--- a/tensorflow/tensorboard/components/tf-graph-loader/test/index.html
+++ b/tensorflow/tensorboard/components/tf-graph-loader/test/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-  <script src="../../../bower_components/web-component-tester/browser.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
   <link rel="import" href="../tf-graph-loader.html">
 </head>
 <body>
diff --git a/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html b/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html
index 4664c8334c..ea65739aa8 100644
--- a/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html
+++ b/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html
@@ -169,13 +169,16 @@ Polymer({
     _progress: Object
   },
   _getDatasets: function() {
+    if(typeof DEMO_DIR_PREFIX === 'undefined') {
+      DEMO_DIR_PREFIX = '';
+    }
     return _.map(datasets, function(dataset) {
       var result = {
         name: dataset.name,
-        path: this.resolveUrl('tf_model_zoo/' + dataset.path)
+        path: this.resolveUrl('tf_model_zoo/' + dataset.path).replace("tf_model_zoo", DEMO_DIR_PREFIX + 'tf_model_zoo')
       };
       if (dataset.statsPath != null) {
-        result.statsPath = this.resolveUrl('tf_model_zoo/' + dataset.statsPath);
+        result.statsPath = this.resolveUrl('tf_model_zoo/' + dataset.statsPath).replace("tf_model_zoo", DEMO_DIR_PREFIX + 'tf_model_zoo');
       }
       return result;
     }, this);
diff --git a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
index 8f8f159964..0dd0394bb7 100644
--- a/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
+++ b/tensorflow/tensorboard/components/tf-histogram-dashboard/tf-histogram-dashboard.html
@@ -14,7 +14,7 @@
 <link rel="import" href="../tf-collapsable-pane/tf-collapsable-pane.html">
 <link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/lodash.html">
 
 <!--
 tf-histogram-dashboard is a complete frontend that loads runs from a backend,
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/demo/image-loader-demo.html b/tensorflow/tensorboard/components/tf-image-dashboard/demo/image-loader-demo.html
index 7aafd247f3..b6dcf2525d 100644
--- a/tensorflow/tensorboard/components/tf-image-dashboard/demo/image-loader-demo.html
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/demo/image-loader-demo.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-    <script src="../../../bower_components/d3/d3.js"></script>
-    <script src="../../../bower_components/plottable/plottable.js"></script>
-    <link rel="stylesheet" type="text/css" href="../../../bower_components/plottable/plottable.css">
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <script src="../../d3/d3.js"></script>
+    <script src="../../plottable/plottable.js"></script>
+    <link rel="stylesheet" type="text/css" href="../../plottable/plottable.css">
     <link rel="import" href="../tf-image-dashboard.html">
     <title>Event Dashboard Demo Demo</title>
   </head>
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/demo/index.html b/tensorflow/tensorboard/components/tf-image-dashboard/demo/index.html
index 4645b4b783..a01361cefa 100644
--- a/tensorflow/tensorboard/components/tf-image-dashboard/demo/index.html
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/demo/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
     <link rel="import" href="../tf-image-dashboard.html">
     <title>Image Dashboard Demo</title>
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html
index b7787b98c4..83ede9171b 100644
--- a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-grid.html
@@ -1,7 +1,7 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
 <link rel="import" href="tf-image-loader.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/lodash.html">
 <link rel="import" href="../tf-dashboard-common/scrollbar-style.html">
 
 <!--
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-loader.html b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-loader.html
index e70f189c73..3e8d4faa22 100644
--- a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-loader.html
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-loader.html
@@ -1,5 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/lodash.html">
 
 <!--
 tf-image-loader loads an individual image from the TensorBoard backend.
diff --git a/tensorflow/tensorboard/components/tf-imports/README.md b/tensorflow/tensorboard/components/tf-imports/README.md
new file mode 100644
index 0000000000..b1cabc61b9
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/README.md
@@ -0,0 +1,2 @@
+This file acts as import routers for third party javascript libraries,
+e.g. Plottable and D3.
diff --git a/tensorflow/tensorboard/components/tf-imports/d3.html b/tensorflow/tensorboard/components/tf-imports/d3.html
new file mode 100644
index 0000000000..de2303c3f0
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/d3.html
@@ -0,0 +1 @@
+<script src="../../bower_components/d3/d3.js"></script>
diff --git a/tensorflow/tensorboard/components/tf-imports/dagre.html b/tensorflow/tensorboard/components/tf-imports/dagre.html
new file mode 100644
index 0000000000..fc9fb118f1
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/dagre.html
@@ -0,0 +1,7 @@
+<!--
+HTML imports are non-blocking thus getting the depedency 'graphlib'
+and 'lodash' via script imports instead.
+-->
+<script src="../../bower_components/lodash/lodash.min.js"></script>
+<script src="../../bower_components/graphlib/dist/graphlib.core.js"></script>
+<script src="../../bower_components/dagre/dist/dagre.core.js"></script>
diff --git a/tensorflow/tensorboard/components/tf-imports/google/README.md b/tensorflow/tensorboard/components/tf-imports/google/README.md
new file mode 100644
index 0000000000..7ff4069770
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/google/README.md
@@ -0,0 +1,3 @@
+This file acts as import routers for third party javascript libraries,
+e.g. Plottable and D3 from `g3/third_party`; it exists to faciliate development
+inside google.
diff --git a/tensorflow/tensorboard/components/tf-imports/google/d3.html b/tensorflow/tensorboard/components/tf-imports/google/d3.html
new file mode 100644
index 0000000000..1ede44827c
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/google/d3.html
@@ -0,0 +1 @@
+<script src="../../bower_components/d3-library/d3.js"></script>
diff --git a/tensorflow/tensorboard/components/tf-imports/google/dagre.html b/tensorflow/tensorboard/components/tf-imports/google/dagre.html
new file mode 100644
index 0000000000..ea68d72e77
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/google/dagre.html
@@ -0,0 +1 @@
+<link rel="import" href="../../bower_components/dagre-library/dagre.html">
diff --git a/tensorflow/tensorboard/components/tf-imports/google/graphlib.html b/tensorflow/tensorboard/components/tf-imports/google/graphlib.html
new file mode 100644
index 0000000000..51fd0e679d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/google/graphlib.html
@@ -0,0 +1 @@
+<link rel="import" href="../../bower_components/graphlib-library/graphlib.html">
diff --git a/tensorflow/tensorboard/components/tf-imports/google/lodash.html b/tensorflow/tensorboard/components/tf-imports/google/lodash.html
new file mode 100644
index 0000000000..58f06ec84f
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/google/lodash.html
@@ -0,0 +1 @@
+<link rel="import" href="../../bower_components/lodash-library/lodash-library.html">
diff --git a/tensorflow/tensorboard/components/tf-imports/google/plottable.html b/tensorflow/tensorboard/components/tf-imports/google/plottable.html
new file mode 100644
index 0000000000..df9acdd271
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/google/plottable.html
@@ -0,0 +1,2 @@
+<link rel="import" href="d3.html">
+<link rel="import" href="../../bower_components/plottable-library/plottable.html">
diff --git a/tensorflow/tensorboard/components/tf-imports/graphlib.html b/tensorflow/tensorboard/components/tf-imports/graphlib.html
new file mode 100644
index 0000000000..03d28765ab
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/graphlib.html
@@ -0,0 +1,2 @@
+<script src="../../bower_components/lodash/lodash.min.js"></script>
+<script src="../../bower_components/graphlib/dist/graphlib.core.js"></script>
diff --git a/tensorflow/tensorboard/components/tf-imports/lodash.html b/tensorflow/tensorboard/components/tf-imports/lodash.html
new file mode 100644
index 0000000000..1e94d2c1c4
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/lodash.html
@@ -0,0 +1 @@
+<script src="../../bower_components/lodash/lodash.min.js"></script>
diff --git a/tensorflow/tensorboard/components/tf-imports/plottable.html b/tensorflow/tensorboard/components/tf-imports/plottable.html
new file mode 100644
index 0000000000..5789a5be4d
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-imports/plottable.html
@@ -0,0 +1,3 @@
+<link rel="import" href="d3.html">
+<script src="../../bower_components/plottable/plottable.js"></script>
+<link rel="stylesheet" type="text/css" href="../../bower_components/plottable/plottable.css">
diff --git a/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html b/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html
index e5661b98bc..6f4d7839f7 100644
--- a/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html
+++ b/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-<script src="../../../bower_components/d3/d3.js"></script>
+<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../d3/d3.js"></script>
 <link rel="import" href="../tf-multi-checkbox.html">
 <link rel="import" href="../../tf-event-dashboard/tf-color-scale.html">
 <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
diff --git a/tensorflow/tensorboard/components/tf-multi-checkbox/tf-multi-checkbox.html b/tensorflow/tensorboard/components/tf-multi-checkbox/tf-multi-checkbox.html
index a5447e8f5e..18dc50cd54 100644
--- a/tensorflow/tensorboard/components/tf-multi-checkbox/tf-multi-checkbox.html
+++ b/tensorflow/tensorboard/components/tf-multi-checkbox/tf-multi-checkbox.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="../imports/lodash.html">
+<link rel="import" href="../tf-imports/lodash.html">
 <link rel="import" href="../tf-dashboard-common/scrollbar-style.html">
 <link rel="import" href="../tf-dashboard-common/run-color-style.html">
 <!--
diff --git a/tensorflow/tensorboard/components/tf-regex-group/demo/index.html b/tensorflow/tensorboard/components/tf-regex-group/demo/index.html
index efef84e0fc..2eb6516c26 100644
--- a/tensorflow/tensorboard/components/tf-regex-group/demo/index.html
+++ b/tensorflow/tensorboard/components/tf-regex-group/demo/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-   <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../tf-regex-group.html">
  </head>
  <body>
diff --git a/tensorflow/tensorboard/components/tf-regex-group/index.html b/tensorflow/tensorboard/components/tf-regex-group/index.html
index 0238a8d326..1db81b1eb1 100644
--- a/tensorflow/tensorboard/components/tf-regex-group/index.html
+++ b/tensorflow/tensorboard/components/tf-regex-group/index.html
@@ -6,8 +6,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-  <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
+  <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
 
 </head>
 <body>
diff --git a/tensorflow/tensorboard/components/test/index.html b/tensorflow/tensorboard/components/tf-test/index.html
index bef954701f..5c724d6656 100644
--- a/tensorflow/tensorboard/components/test/index.html
+++ b/tensorflow/tensorboard/components/tf-test/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <script src="../bower_components/web-component-tester/browser.js"></script>
+  <script src="../web-component-tester/browser.js"></script>
 </head>
 <body>
 <script>
diff --git a/tensorflow/tensorboard/gulpfile.js b/tensorflow/tensorboard/gulpfile.js
index e6546297dd..579f0b035e 100644
--- a/tensorflow/tensorboard/gulpfile.js
+++ b/tensorflow/tensorboard/gulpfile.js
@@ -21,6 +21,7 @@ var ts = require('gulp-typescript');
 var typescript = require('typescript');
 var gutil = require('gulp-util');
 var tslint = require('gulp-tslint');
+var server = require('gulp-server-livereload');
 var concat = require('gulp-concat');
 var merge = require('merge2');
 var gulpFilter = require('gulp-filter');
@@ -28,7 +29,8 @@ var vulcanize = require('gulp-vulcanize');
 var rename = require('gulp-rename');
 var minimist = require('minimist');
 var replace = require('gulp-replace');
-var tfserve = require('./scripts/tfserve.js');
+var fs = require('fs');
+var path = require('path');
 var options = minimist(process.argv.slice(2), {
   default: {
     p: 8000,  // port for gulp server
@@ -52,13 +54,19 @@ var onError = function(err) {
   }
 };
 
+// These constants should always be in sync with the path in the .gitignore
+// file.
+var TF_COMPONENTS_PREFIX = 'tf-';
+var TF_COMPONENTS_TYPESCRIPT_GLOB = 'components/' + TF_COMPONENTS_PREFIX +
+    '*/**/*.ts';
+
 gulp.task('compile.all', function() {
   hasError = false;
   var isComponent = gulpFilter(['components/**/*.js']);
   var isApp = gulpFilter(['app/**/*.js']);
 
-  var srcs = ['components/**/*.ts', 'test/**/*.ts', 'app/**/*.ts',
-              'typings/**/*.d.ts', 'bower_components/**/*.d.ts'];
+  var srcs = [TF_COMPONENTS_TYPESCRIPT_GLOB, 'components/**/*.d.ts',
+      'typings/**/*.d.ts'];
 
   var tsResult = gulp.src(srcs, {base: '.'})
                      .pipe(ts(tsProject))
@@ -73,7 +81,7 @@ gulp.task('compile.all', function() {
 });
 
 gulp.task('test', ['tslint-strict', 'compile.all'], function(done) {
-  tester({suites: ['components/test/'],
+  tester({suites: ['components/tf-test/'],
           plugins: {local: {}, sauce: false}}, function(error) {
     if (error) {
       // Pretty error for gulp.
@@ -90,7 +98,7 @@ var tslintTask = function(strict) {
       done();
       return;
     }
-    return gulp.src(['components/**/*.ts', 'test/**/*.ts'])
+    return gulp.src([TF_COMPONENTS_TYPESCRIPT_GLOB])
                .pipe(tslint())
                .pipe(tslint.report('verbose', {
                   emitError: strict,
@@ -108,51 +116,72 @@ gulp.task('tslint-strict', [], tslintTask(true));
 gulp.task('watch', ['compile.all', 'tslint-permissive'], function() {
   failOnError = false;
   // Avoid watching generated .d.ts in the build (aka output) directory.
-  return gulp.watch(['test/**/*.ts', 'components/**/*.ts'],
+  return gulp.watch([TF_COMPONENTS_TYPESCRIPT_GLOB],
           {ignoreInitial: true},
           ['compile.all', 'tslint-permissive']);
 });
 
 gulp.task('server', function() {
-  tfserve({
-    port: options.p,
-    host: options.h,
-    verbose: options.v,
-  });
+  gulp.src('.')
+    .pipe(server({
+      host: options.h,
+      port: options.p,
+      livereload: {
+        enable: true,
+        port: 27729 + options.p
+      },
+      directoryListing: true,
+    }));
 });
 
+/**
+ * Returns a list of non-tensorboard components inside the components
+ * directory, i.e. components that don't begin with 'tf-'.
+ */
+function getNonTensorBoardComponents() {
+  return fs.readdirSync("components").filter(function(file) {
+    var filePrefix = file.slice(0, TF_COMPONENTS_PREFIX.length);
+    return fs.statSync(path.join("components", file)).isDirectory()
+        && filePrefix !== TF_COMPONENTS_PREFIX;
+  }).map(function(dir) {
+    return '/' + dir + '/';
+  });
+}
+
 
-var linkRegex = /<link rel="[^"]*" (type="[^"]*" )?href=".*bower_components[^"]*">\n/g;
-var scriptRegex = /<script src=".*bower_components[^"]*"><\/script>\n/g;
+var linkRegex = /<link rel="[^"]*" (type="[^"]*" )?href="[^"]*">\n/g;
+var scriptRegex = /<script src="[^"]*"><\/script>\n/g;
 gulp.task('vulcanize', ['compile.all', 'tslint-strict'], function() {
-      gulp.src('app/tf-tensorboard.html')
-          .pipe(vulcanize({
-            inlineScripts: true,
-            inlineCss: true,
-            stripComments: true,
-            excludes: ['/bower_components/'],
-          }))
-          // TODO(danmane): Remove this worrysome brittleness when vulcanize
-          // fixes https://github.com/Polymer/vulcanize/issues/273
-          .pipe(replace(linkRegex, ''))
-          .pipe(replace(scriptRegex, ''))
-          .pipe(gulp.dest('dist'));
-
-      gulp.src('app/index.html')
-          .pipe(vulcanize({
-            inlineScripts: true,
-            inlineCss: true,
-            stripComments: true,
-          }))
-          .pipe(gulp.dest('dist'));
-
-      gulp.src('app/tf-tensorboard-demo.html')
-          .pipe(vulcanize({
-            inlineScripts: true,
-            inlineCss: true,
-            stripComments: true,
-          }))
-          .pipe(gulp.dest('dist'));
+  // Vulcanize TensorBoard without external libraries.
+  gulp.src('components/tf-tensorboard/tf-tensorboard.html')
+    .pipe(vulcanize({
+      inlineScripts: true,
+      inlineCss: true,
+      stripComments: true,
+      excludes: getNonTensorBoardComponents(),
+    }))
+    // TODO(danmane): Remove this worrysome brittleness when vulcanize
+    // fixes https://github.com/Polymer/vulcanize/issues/273
+    .pipe(replace(linkRegex, ''))
+    .pipe(replace(scriptRegex, ''))
+    .pipe(gulp.dest('dist'));
+
+  // Vulcanize TensorBoard with all external libraries inlined.
+  gulp.src('components/index.html')
+    .pipe(vulcanize({
+      inlineScripts: true,
+      inlineCss: true,
+      stripComments: true,
+    }))
+    .pipe(gulp.dest('dist'));
+
+  gulp.src('app/tf-tensorboard-demo.html')
+    .pipe(vulcanize({
+      inlineScripts: true,
+      inlineCss: true,
+      stripComments: true,
+    }))
+    .pipe(gulp.dest('dist'));
 });
 
 gulp.task('serve', ['server']); // alias
diff --git a/tensorflow/tensorboard/package.json b/tensorflow/tensorboard/package.json
index 2637e87373..068d2f0496 100644
--- a/tensorflow/tensorboard/package.json
+++ b/tensorflow/tensorboard/package.json
@@ -30,8 +30,6 @@
     "gulp-vulcanize": "~6.0.1",
     "minimist": "~1.2.0",
     "gulp-replace": "~0.5.4",
-    "web-component-tester": "~3.3.30",
-    "send": "~0.13.0",
-    "express": "~4.13.3"
+    "web-component-tester": "~3.3.30"
   }
 }
diff --git a/tensorflow/tensorboard/scripts/tfserve.js b/tensorflow/tensorboard/scripts/tfserve.js
deleted file mode 100644
index d4d1e32b27..0000000000
--- a/tensorflow/tensorboard/scripts/tfserve.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/* Copyright 2015 Google Inc. 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.
-==============================================================================*/
-
-/**
- * Simple server for running TensorBoard during development.
- */
-
-var express = require('express');
-var http = require('http');
-var fs = require('fs');
-var parseUrl = require('url').parse;
-var send = require('send');
-
-function pathExists(path) {
-  try {
-    fs.statSync(path);
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function serveTensorBoard(options) {
-  var logger = options.verbose ? console.log : new Function();
-
-  function serveFile(req, res) {
-    var url = parseUrl(req.url, true);
-    var splitPath = url.pathname.split('/').slice(1);
-    var filePath = splitPath.join('/');
-    logger('serve file path:', filePath);
-    send(req, filePath).pipe(res);
-  }
-
-  options.port = options.port || 8000;
-  options.host = options.host || 'localhost';
-  console.log('Serving TensorBoard at', options.host, ':', options.port);
-  logger('Serving in verbose mode.');
-  var app = express();
-  app.get('/', function(req, res) {
-    // redirect to the demo page
-    logger('Redirecting from / to the demo page');
-    res.redirect(301, '/components/tf-tensorboard/demo/index.html');
-  });
-  app.get('/components/imports/local-imports/*', serveFile);
-  app.get('/components/imports/*', function(req, res) {
-    var url = parseUrl(req.url, true).pathname;
-    var newUrl = url.replace('imports', 'imports/local-imports');
-    logger('redirect:', url, '->', newUrl);
-    res.redirect(301, newUrl);
-  });
-  app.get('/components/*', function(req, res) {
-    // serve from bower_components if possible, components otherwise
-    var url = parseUrl(req.url, true);
-    var splitPath = url.pathname.split('/').slice(2);
-    var bowerPath = ['bower_components'].concat(splitPath).join('/');
-    var componentsPath = ['components'].concat(splitPath).join('/');
-    var path;
-    if (pathExists(bowerPath)) {
-      path = bowerPath;
-    } else if (pathExists(componentsPath)) {
-      path = componentsPath;
-    } else {
-      console.error('Unable to find path:', componentsPath);
-      res.status(404).send('404 - couldnt find', componentsPath);
-      return;
-    }
-    logger('sending file:', path);
-    send(req, path).pipe(res);
-  });
-  app.get('*', serveFile);
-
-  var server = http.createServer(app);
-  server.listen(options.port, options.host);
-
-  server.on('error', function(err) {
-    if (err.code === 'EADDRINUSE') {
-      console.error('tfserve.js: Error - Port in use:', options.port);
-    }
-  });
-}
-
-module.exports = serveTensorBoard;