1 files changed, 90 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html
new file mode 100644
index 0000000000..726a420e9f
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/tf-image-dashboard.html
@@ -0,0 +1,90 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../tf-dashboard-common/tf-run-generator.html">
+<link rel="import" href="../tf-dashboard-common/tf-url-generator.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="tf-image-grid.html">
+<link rel="import" href="../tf-dashboard-common/warning-style.html">
+
+<!--
+tf-image-dashboard displays a dashboard that loads images from a TensorFlow run.
+
+Right now it has very simple behavior: Creates a url-generator and run-generator
+to talk to the backend, and then passes the runToImages map and urlGenerators into
+a tf-image-grid for display.
+
+Likely we will add more in the future, e.g. a sidebar like in the event
+dashboard that allows filtering and organizing the tags and runs, and a
+mechanism for loading older images rather than always getting the most recent one.
+-->
+<dom-module id="tf-image-dashboard">
+  <template>
+    <div id="plumbing">
+      <tf-url-generator
+        out-runs-url="{{runsUrl}}"
+        out-images-url-generator="{{imagesUrlGen}}"
+        out-individual-image-url-generator="{{individualImageUrlGen}}"
+        id="urlGenerator"
+      ></tf-url-generator>
+
+      <tf-run-generator
+        id="runGenerator"
+        url="[[runsUrl]]"
+        out-run-to-images="{{runToImages}}"
+      /></tf-run-generator>
+    </div>
+
+    <div class="center">
+      <template is="dom-if" if="[[!_hasImages(runToImages.*)]]">
+        <div class="warning">
+          <p>
+            No image tags were found.
+          </p>
+          <p>
+            Maybe data hasn't loaded yet, or maybe you need
+            to add some <code>tf.image_summary</code> ops to your graph, and
+            serialize them using the <code>tf.training.summary_io.SummaryWriter</code>.
+          </p>
+        </div>
+      </template>
+      <tf-image-grid
+        id="imageGrid"
+        run-to-images="[[runToImages]]"
+        images-generator="[[imagesUrlGen]]"
+        individual-image-generator="[[individualImageUrlGen]]"
+      ></tf-image-grid>
+    </div>
+
+    <style>
+      .center {
+        padding-left: 10px;
+        padding-right: 10px;
+        height: 100%;
+        width: 100%;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+      :host {
+        height: 100%;
+        display: block;
+      }
+
+    </style>
+    <style include="warning-style"></style>
+  </template>
+  <script>
+    Polymer({
+      is: "tf-image-dashboard",
+      properties: {
+        runToImages: Object,
+        imagesUrlGen: Function,
+        individualImageUrlGen: Function,
+      },
+      _hasImages: function(runToImagesChange) {
+        return _.values(runToImagesChange.base).some(function(arr) {
+          return arr.length > 0;
+        });
+      },
+    });
+  </script>
+</dom-module>