1 files changed, 135 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/app/tf-tensorboard.html b/tensorflow/tensorboard/app/tf-tensorboard.html
new file mode 100644
index 0000000000..0f5114143e
--- /dev/null
+++ b/tensorflow/tensorboard/app/tf-tensorboard.html
@@ -0,0 +1,135 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
+<link rel="import" href="../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
+<link rel="import" href="../components/tf-event-dashboard/tf-event-dashboard.html">
+<link rel="import" href="../components/tf-histogram-dashboard/tf-histogram-dashboard.html">
+<link rel="import" href="../components/tf-image-dashboard/tf-image-dashboard.html">
+<link rel="import" href="../components/tf-graph-dashboard/tf-graph-dashboard.html">
+<link rel="import" href="../components/tf-dashboard-common/tensorboard-color.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.
+-->
+<dom-module id="tf-tensorboard">
+  <template>
+    <paper-header-panel>
+      <paper-toolbar id="toolbar">
+        <div id="toolbar-content">
+          <div class="toolbar-title">
+            TensorBoard
+          </div>
+          <div class="right-buttons">
+            <paper-button
+              class="link-button"
+              on-click="chooseEvents"
+              active$="[[eventDashboard(mode)]]"
+              noink
+            >Events</paper-button>
+            <paper-button
+              class="link-button"
+              on-click="chooseImages"
+              active$="[[imageDashboard(mode)]]"
+              noink
+            >Images</paper-button>
+            <paper-button
+              class="link-button"
+              on-click="chooseGraphs"
+              active$="[[graphDashboard(mode)]]"
+              noink
+            >Graph</paper-button>
+            <paper-button
+              class="link-button"
+              on-click="chooseHistograms"
+              active$="[[histogramDashboard(mode)]]"
+              noink
+            >Histograms</paper-button>
+          </div>
+        </div>
+      </paper-toolbar>
+      <div id="content" class="fit">
+        <template is="dom-if" if="[[eventDashboard(mode)]]">
+          <tf-event-dashboard id="eventDash"></tf-event-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[imageDashboard(mode)]]">
+          <tf-image-dashboard id="imageDash"></tf-image-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[graphDashboard(mode)]]">
+          <tf-graph-dashboard id="graphDash"></tf-graph-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[histogramDashboard(mode)]]">
+          <tf-histogram-dashboard id="histogramDash"></tf-histogram-dashboard>
+        </template>
+      </div>
+    </paper-header-panel>
+    <style>
+      #toolbar {
+        background-color: var(--tb-orange-strong);
+        background-image: radial-gradient(ellipse, var(--tb-orange-weak), var(--tb-orange-strong));
+      }
+      #toolbar-content {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .toolbar-title {
+        font-size: 30px;
+      }
+      #content {
+        height: 100%;
+      }
+      .link-button {
+        height: 30px;
+      }
+      [active] {
+        font-weight: bold;
+      }
+      :host {
+        height: 100%;
+        display: block;
+      }
+    </style>
+  </template>
+  <script>
+    Polymer({
+      is: "tf-tensorboard",
+      properties: {
+        mode: {
+          type: String,
+          value: "events",
+        },
+      },
+      chooseEvents: function() {
+        this.mode = "events";
+      },
+      chooseImages: function() {
+        this.mode = "images";
+      },
+      chooseGraphs: function() {
+        this.mode = "graphs";
+      },
+      chooseHistograms: function() {
+        this.mode = "histograms";
+      },
+      eventDashboard: function(mode) {
+        return mode === "events";
+      },
+      imageDashboard: function(mode) {
+        return mode === "images";
+      },
+      graphDashboard: function(mode) {
+        return mode === "graphs";
+      },
+      histogramDashboard: function(mode) {
+        return mode === "histograms";
+      }
+    });
+  </script>
+</dom-module>