1 files changed, 97 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-categorizer/demo/index.html b/tensorflow/tensorboard/components/tf-categorizer/demo/index.html
new file mode 100644
index 0000000000..ea3f162aa5
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-categorizer/demo/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+ <head>
+   <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+   <script src="../../../bower_components/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">
+
+ </head>
+ <body>
+  <style>
+  </style>
+  <dom-module id="x-demo">
+    <style>
+      .container {
+        width: 255px;
+        padding: 10px;
+        border: 1px solid var(--paper-indigo-900);
+        border-radius: 5px;
+        position: fixed;
+      }
+      :host {
+        margin: 0px;
+      }
+
+      .categories {
+        font-family: "RobotoDraft",Helvetica;
+        margin-left: 300px;
+        width: 500px;
+        border: 1px solid var(--paper-indigo-500);
+        border-radius: 5px;
+      }
+
+      .category {
+        background-color: var(--paper-indigo-50);
+        margin: 20px;
+        padding: 20px;
+        border-radius: 5px;
+      }
+
+      .cat-name {
+        font-size: 20px;
+      }
+
+      .tag {
+        border-radius: 5px;
+        padding: 5px;
+        margin: 5px;
+        background-color: var(--paper-indigo-900);
+        color: white;
+      }
+    </style>
+    <template>
+      <div class="container">
+        <tf-categorizer categories="{{categories}}" tags="[[tags]]" id="demo"></tf-categorizer>
+      </div>
+      <div class="categories">
+        <template is="dom-repeat" items="[[categories]]">
+          <div class="category">
+            <p class="cat-name">Category: <span>[[item.name]]</span></p>
+            <div class="tags-container layout horizontal wrap">
+              <template is="dom-repeat" items="[[item.tags]]">
+                <span class="tag layout vertical center-center">[[item]]</span>
+              </template>
+          </div>
+        </template>
+      </div>
+    </template>
+    <script>
+
+    function tagsGenerator() {
+      var tags = ["special1", "special2", "special3", "special4", "special5"];
+      ["l1", "l2", "l3", "l4", "l5"].forEach(function(l) {
+        ["foo", "bar", "baz", "boink", "zod", "specialx"].forEach(function(x) {
+          tags.push(l + "/" + x);
+        });
+      });
+      return tags;
+    }
+
+    Polymer({
+      is: "x-demo",
+      properties: {
+        tags: { type: Array, value: tagsGenerator },
+      },
+    });
+    </script>
+  </dom-module>
+
+  <x-demo id="demo"></x-demo>
+ </body>
+ <script>
+  HTMLImports.whenReady(function() {
+    window.demo = document.getElementById("demo");
+  })
+ </script>
+</html>