1 files changed, 118 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-graph-dashboard/tf-graph-dashboard.html b/tensorflow/tensorboard/components/tf-graph-dashboard/tf-graph-dashboard.html
new file mode 100644
index 0000000000..779d2d3fe9
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-graph-dashboard/tf-graph-dashboard.html
@@ -0,0 +1,118 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../tf-graph-loader/tf-graph-loader.html">
+<link rel="import" href="../tf-graph-board/tf-graph-board.html">
+<link rel="import" href="../tf-graph/tf-graph-controls.html">
+<link rel="import" href="../tf-dashboard-common/warning-style.html">
+
+<!--
+tf-graph-dashboard displays a graph from a TensorFlow run.
+
+It has simple behavior: Creates a url-generator and run-generator
+to talk to the backend, and then passes the runsWithGraph (list of runs with
+associated graphs) along with the url generator into tf-graph-board for display.
+
+If there are multiple runs with graphs, the first run's graph is shown
+by default. The user can select a different run from a dropdown menu.
+-->
+
+<dom-module id="tf-graph-dashboard">
+<template>
+<div id="plumbing">
+  <tf-url-generator
+      out-runs-url="{{_runsUrl}}"
+      out-graph-url-generator="{{_graphUrlGen}}"
+      id="urlGenerator"
+  ></tf-url-generator>
+  <tf-run-generator
+      id="runGenerator"
+      url="[[_runsUrl]]"
+      out-runs-with-graph="{{_runsWithGraph}}"
+  /></tf-run-generator>
+</div>
+<template is="dom-if" if="[[_datasetsEmpty(_datasets)]]">
+<div class="warning">
+  <p>
+    No graph definition files were found.
+  </p>
+  <p>
+    To store a graph, create a
+    <code>tf.python.training.summary_io.SummaryWriter</code>
+    and pass the graph either via the constructor, or by calling its
+    <code>add_graph()</code> method.
+  </p>
+</div>
+</template>
+<template is="dom-if" if="[[!_datasetsEmpty(_datasets)]]">
+<tf-dashboard-layout>
+<div class="sidebar">
+  <tf-graph-controls id="controls"
+      color-by-params="[[_colorByParams]]"
+      has-stats="[[_hasStats]]"
+      color-by="{{_colorBy}}",
+      datasets="[[_datasets]]",
+      selected-dataset="{{_selectedDataset}}"
+      selected-file="{{_selectedFile}}"
+  ></tf-graph-controls>
+  <tf-graph-loader id="loader"
+          datasets="[[_datasets]]",
+          selected-dataset="[[_selectedDataset]]"
+          selected-file="[[_selectedFile]]"
+          out-graph-hierarchy="{{_graphHierarchy}}"
+          out-graph="{{_graph}}"
+          out-graph-name="{{_graphName}}"
+          has-stats="{{_hasStats}}"
+          progress="{{_progress}}"
+  ></tf-graph-loader>
+</div>
+<div class="center">
+    <tf-graph-board id="graphboard"
+                graph-hierarchy="[[_graphHierarchy]]"
+                graph="[[_graph]]"
+                has-stats="[[_hasStats]]"
+                graph-name="[[_graphName]]"
+                progress="[[_progress]]"
+                color-by="[[_colorBy]]"
+                color-by-params="{{_colorByParams}}">
+    </tf-graph-board>
+</div>
+</template>
+<style>
+
+:host /deep/ {
+  font-family: 'Roboto', sans-serif;
+}
+
+.center {
+  height: 100%;
+}
+
+</style>
+<style include="warning-style"></style>
+</template>
+</dom-module>
+
+<script>
+(function() {
+Polymer({
+  is: 'tf-graph-dashboard',
+  properties: {
+    _runsWithGraph: Array,
+    _datasets: {
+      type: Object,
+      computed: '_getDatasets(_runsWithGraph, _graphUrlGen)'
+    }
+  },
+  _getDatasets: function(runsWithGraph, graphUrlGen) {
+    return _.map(runsWithGraph, function(runName) {
+      return {
+        name: runName,
+        path: graphUrlGen(runName)
+      };
+    });
+  },
+  _datasetsEmpty: function(datasets) {
+    return !datasets || !datasets.length;
+  }
+});
+})();
+</script>