1 files changed, 162 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html b/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html
new file mode 100644
index 0000000000..e5661b98bc
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-multi-checkbox/demo/index.html
@@ -0,0 +1,162 @@
+<!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-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">
+
+</head>
+<body>
+<script>
+var seed = 1;
+function random() {
+  var x = Math.sin(seed++) * 10000;
+  return x - Math.floor(x);
+}
+</script>
+<style>
+</style>
+
+<dom-module id="mc-demo">
+  <template>
+    <tf-multi-checkbox
+      id="multiCheckbox"
+      names="[[names]]"
+      tooltips="[[_tooltips]]"
+      class-scale="[[classScale]]"
+      highlights="[[highlights]]"
+    ></tf-multi-checkbox>
+    <tf-color-scale
+      id="colorScale"
+      runs="[[names]]"
+      out-class-scale="{{classScale}}"
+    ></tf-color-scale>
+  <style>
+  </style>
+  </template>
+  <script>
+
+  function randomTooltip() {
+    var s = "";
+    while (random() < 0.8) {
+      s += String(10*random())[0];
+    }
+    return s;
+  }
+  Polymer({
+    is: "mc-demo",
+    properties: {
+      names: Array,
+      tooltips: Object,
+      autoGenerateTooltips: {value: true},
+      _tooltips: Object,
+      classScale: Function,
+      highlights: Array,
+    },
+    observers: [
+      'autogenerate(names, autoGenerateTooltips)',
+      'randomHighlights(names)'
+    ],
+    autogenerate: function(names, autoGenerateTooltips) {
+      if (autoGenerateTooltips) {
+        var tooltips = {};
+        names.forEach(function(n) {
+        if (random() > 0.5) {
+          tooltips[n] = randomTooltip();
+        }
+      });
+      this._tooltips = tooltips;
+      }
+    },
+    randomHighlights: function(names) {
+      var h = [];
+      names.forEach(function(n) {
+        if (random() > 0.6) {
+          h.push(n);
+        }
+      });
+      this.highlights = h;
+    }
+  });
+  </script>
+</dom-module>
+
+<dom-module id="x-demo">
+<style>
+.small {
+  width: 200px;
+  height: 500px;
+}
+.large {
+  width: 500px;
+  height: 900px;
+}
+html,body {
+  height: 100%;
+}
+mc-demo {
+  padding: 5px;
+  border: 1px solid var(--paper-red-500);
+  display: inline-block;
+}
+</style>
+<template>
+  <div class="demo-block">
+    <mc-demo id="demo1" class="small" names="[[long_names]]"></mc-demo>
+    <mc-demo class="small" names="[[many_names]]"></mc-demo>
+    <mc-demo class="small" names="[[many_long_names]]"></mc-demo>
+  </div>
+
+  <div class="demo-block">
+    <mc-demo class="large" names="[[long_names]]"></mc-demo>
+    <mc-demo class="large" names="[[many_names]]"></mc-demo>
+    <mc-demo class="large" names="[[many_long_names]]"></mc-demo>
+  </div>
+
+</template>
+<script>
+
+function long_names() {
+  return [
+    "foo_bar very long name with spaces",
+    "the quick brown fox jumped over the lazy dog",
+    "supercalifragilisticexpialodcious/bar/foo/zod/longer/longer",
+  ];
+}
+
+function many_names() {
+  var out = [];
+  for (var i=0; i<20; i++) {
+    out.push("foo_bar-" + i);
+    out.push("bar_zod_bing-" + i);
+    out.push("lol-" + i);
+  }
+  return out;
+}
+
+function many_long_names() {
+  var out = [];
+  for (var i=0; i<20; i++) {
+    out.push("foo_bar very very very long some spaces though-" + i);
+    out.push("bar_zod_bing_bas_womp_wub_wub_dub_wub_wub-" + i);
+    out.push("rightly_to_be_great_is_not_to_stir_without_great_argument_but_greatly_to_find_quarrel_in_a_straw_when_honors_at_the_stake-" + i);
+  }
+  return out;
+}
+
+Polymer({
+  is: "x-demo",
+  properties: {
+  long_names: {type: Array, value: long_names},
+  many_names: {type: Array, value: many_names},
+  many_long_names: {type: Array, value: many_long_names},
+},
+});
+</script>
+</dom-module>
+
+<x-demo id="demo"></x-demo>
+</body>
+</html>