1 files changed, 69 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-graph/tf-graph-minimap.html b/tensorflow/tensorboard/components/tf-graph/tf-graph-minimap.html
new file mode 100644
index 0000000000..2b6beeaded
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-graph/tf-graph-minimap.html
@@ -0,0 +1,69 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<script src="../tf-graph-common/lib/scene/minimap.js"></script>
+<dom-module id="tf-graph-minimap">
+<template>
+<style>
+:host {
+  background-color:white;
+  transition: opacity .3s linear;
+  pointer-events: auto;
+}
+
+:host.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+canvas {
+  border: 1px solid #999;
+}
+
+rect {
+  fill: white;
+  stroke: #111111;
+  stroke-width: 1px;
+  fill-opacity: 0;
+  filter: url(#minimapDropShadow);
+  cursor: move;
+}
+
+svg {
+  position: absolute;
+}
+</style>
+<svg>
+  <defs>
+    <filter id="minimapDropShadow" x="-20%" y="-20%" width="150%" height="150%">
+      <feOffset result="offOut" in="SourceGraphic" dx="1" dy="1"></feOffset>
+      <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.5 0"></feColorMatrix>
+      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2"></feGaussianBlur>
+      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
+    </filter>
+  </defs>
+  <rect></rect>
+</svg>
+<canvas class="first"></canvas>
+<!-- Additional canvas to use as buffer to avoid flickering between updates -->
+<canvas class="second"></canvas>
+</template>
+<script>
+Polymer({
+  is: 'tf-graph-minimap',
+
+  /**
+   * Initializes the minimap and returns a minimap object to notify when
+   * things update.
+   *
+   * @param svg The main svg element.
+   * @param zoomG The svg group used for panning and zooming the main svg.
+   * @param mainZoom The main zoom behavior.
+   * @param maxWandH The maximum width/height for the minimap.
+   * @param labelPadding Padding in pixels due to the main graph labels.
+   */
+  init: function(svg, zoomG, mainZoom, maxWAndH, labelPadding) {
+    return new tf.scene.Minimap(svg, zoomG, mainZoom, this, maxWAndH,
+        labelPadding);
+  }
+});
+</script>
+</dom-module>