From 0c8417f1d91078941f52fab54d9827f037fea9d7 Mon Sep 17 00:00:00 2001
From: Dan Smilkov <smilkov@google.com>
Date: Tue, 1 Nov 2016 19:35:17 -0800
Subject: [PATCH] Enable the embeddings tab in TensorBoard and release new
 version. Change: 137905523

---
 .../components/tf_globals/globals.ts          |   11 +-
 .../tensorboard/dist/tf-tensorboard.html      | 9091 +++++++++++++++--
 2 files changed, 8458 insertions(+), 644 deletions(-)

diff --git a/tensorflow/tensorboard/components/tf_globals/globals.ts b/tensorflow/tensorboard/components/tf_globals/globals.ts
index 36a7072a7ff..33feb26d238 100644
--- a/tensorflow/tensorboard/components/tf_globals/globals.ts
+++ b/tensorflow/tensorboard/components/tf_globals/globals.ts
@@ -15,15 +15,12 @@ limitations under the License.
 
 /* tslint:disable:no-namespace */
 module TF.Globals {
-  const PROJECTOR_LAUNCHED = false;
 
   // The names of TensorBoard tabs.
-  export var TABS =
-      ['scalars', 'images', 'audio', 'graphs', 'distributions', 'histograms'];
-
-  if (PROJECTOR_LAUNCHED) {
-    TABS.push('embeddings');
-  }
+  export var TABS = [
+    'scalars', 'images', 'audio', 'graphs', 'distributions', 'histograms',
+    'embeddings'
+  ];
 
   // If true, TensorBoard stores its hash in the URI state.
   // If false, tab switching in TensorBoard will not update location hash,
diff --git a/tensorflow/tensorboard/dist/tf-tensorboard.html b/tensorflow/tensorboard/dist/tf-tensorboard.html
index 49117764333..7ac22237241 100644
--- a/tensorflow/tensorboard/dist/tf-tensorboard.html
+++ b/tensorflow/tensorboard/dist/tf-tensorboard.html
@@ -39,68 +39,10 @@ limitations under the License.
 <link rel="import" href="../paper-checkbox/paper-checkbox.html">
 <link rel="import" href="../paper-toolbar/paper-toolbar.html">
 <link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../paper-header-panel/paper-header-panel.html">
 
-<script>/* Copyright 2015 The TensorFlow Authors. All Rights Reserved.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-==============================================================================*/
-var TF;
-(function (TF) {
-    var TensorBoard;
-    (function (TensorBoard) {
-        TensorBoard.AUTORELOAD_LOCALSTORAGE_KEY = 'TF.TensorBoard.autoReloadEnabled';
-        var getAutoReloadFromLocalStorage = function () {
-            var val = window.localStorage.getItem(TensorBoard.AUTORELOAD_LOCALSTORAGE_KEY);
-            return val === 'true' || val == null; // defaults to true
-        };
-        TensorBoard.AutoReloadBehavior = {
-            properties: {
-                autoReloadEnabled: {
-                    type: Boolean,
-                    observer: '_autoReloadObserver',
-                    value: getAutoReloadFromLocalStorage,
-                },
-                _autoReloadId: {
-                    type: Number,
-                },
-                autoReloadIntervalSecs: {
-                    type: Number,
-                    value: 120,
-                },
-            },
-            detached: function () { window.clearTimeout(this._autoReloadId); },
-            _autoReloadObserver: function (autoReload) {
-                window.localStorage.setItem(TensorBoard.AUTORELOAD_LOCALSTORAGE_KEY, autoReload);
-                if (autoReload) {
-                    var _this = this;
-                    this._autoReloadId = window.setTimeout(this._doAutoReload.bind(this), this.autoReloadIntervalSecs * 1000);
-                }
-                else {
-                    window.clearTimeout(this._autoReloadId);
-                }
-            },
-            _doAutoReload: function () {
-                if (this.reload == null) {
-                    throw new Error('AutoReloadBehavior requires a reload method');
-                }
-                this.reload();
-                this._autoReloadId = window.setTimeout(this._doAutoReload.bind(this), this.autoReloadIntervalSecs * 1000);
-            }
-        };
-    })(TensorBoard = TF.TensorBoard || (TF.TensorBoard = {}));
-})(TF || (TF = {}));
-</script>
 </head><body><div hidden="" by-vulcanize=""><dom-module id="tf-globals" assetpath="../tf-globals/">
   <script>/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
 
@@ -122,7 +64,8 @@ var TF;
     var Globals;
     (function (Globals) {
         // The names of TensorBoard tabs.
-        Globals.TABS = ['events', 'images', 'audio', 'graphs', 'distributions', 'histograms'];
+        Globals.TABS = ['scalars', 'images', 'audio', 'graphs', 'distributions',
+            'histograms', 'embeddings'];
         // If true, TensorBoard stores its hash in the URI state.
         // If false, tab switching in TensorBoard will not update location hash,
         // because hash updates interfere with wct_tests.
@@ -138,7 +81,7 @@ var TF;
 <link rel="import" href="../paper-slider/paper-slider.html">
 <link rel="import" href="../paper-input/paper-input.html">
 
-<dom-module id="tf-smoothing-input" assetpath="../tf-event-dashboard/">
+<dom-module id="tf-smoothing-input" assetpath="../tf-scalar-dashboard/">
   <template>
     <h3 class="title">Smoothing</h3>
     <div class="smoothing-block">
@@ -266,10 +209,12 @@ var VZ;
             var ai = 0;
             var bi = 0;
             while (true) {
-                if (ai === a.length)
+                if (ai === a.length) {
                     return bi === b.length ? 0 : -1;
-                if (bi === b.length)
+                }
+                if (bi === b.length) {
                     return 1;
+                }
                 if (isDigit(a[ai]) && isDigit(b[bi])) {
                     var ais = ai;
                     var bis = bi;
@@ -277,15 +222,18 @@ var VZ;
                     bi = consumeNumber(b, bi + 1);
                     var an = parseFloat(a.slice(ais, ai));
                     var bn = parseFloat(b.slice(bis, bi));
-                    if (an < bn)
+                    if (an < bn) {
                         return -1;
-                    if (an > bn)
+                    }
+                    if (an > bn) {
                         return 1;
+                    }
                     continue;
                 }
                 if (isBreak(a[ai])) {
-                    if (!isBreak(b[bi]))
+                    if (!isBreak(b[bi])) {
                         return -1;
+                    }
                 }
                 else if (isBreak(b[bi])) {
                     return 1;
@@ -339,8 +287,9 @@ var VZ;
                     }
                 }
                 else if (state === State.EXPONENT) {
-                    if (!isDigit(s[i]))
+                    if (!isDigit(s[i])) {
                         break;
+                    }
                 }
             }
             return i;
@@ -600,11 +549,12 @@ var TF;
                     return url;
                 };
             }
-            function individualImageUrl(query) {
+            function individualImageUrl(query, wallTime) {
                 var url = dataDir + '/' + clean('individualImage?' + query);
-                if (demoMode) {
-                    url += '.png';
-                }
+                // Include wall_time just to disambiguate the URL and force the browser
+                // to reload the image when the URL changes. The backend doesn't care
+                // about the value.
+                url += demoMode ? '.png' : '&ts=' + wallTime;
                 return url;
             }
             function individualAudioUrl(query) {
@@ -634,6 +584,7 @@ var TF;
                 return url;
             }
             return {
+                logdir: function () { return dataDir + '/logdir'; },
                 runs: function () { return dataDir + '/runs' + (demoMode ? '.json' : ''); },
                 individualImage: individualImageUrl,
                 individualAudio: individualAudioUrl,
@@ -688,10 +639,16 @@ var TF;
              * @param requestManager The RequestManager, overwritable so you may
              * manually clear request queue, etc. Defaults to a new RequestManager.
              */
-            function Backend(r, requestManager) {
-                this.router = r;
+            function Backend(router, requestManager) {
+                this.router = router;
                 this.requestManager = requestManager || new Backend_1.RequestManager();
             }
+            /**
+             * Returns a promise for requesting the logdir string.
+             */
+            Backend.prototype.logdir = function () {
+                return this.requestManager.request(this.router.logdir());
+            };
             /**
              * Returns a listing of all the available data in the TensorBoard backend.
              */
@@ -820,7 +777,7 @@ var TF;
                     height: x.height,
                     wall_time: timeToDate(x.wall_time),
                     step: x.step,
-                    url: this.router.individualImage(x.query),
+                    url: this.router.individualImage(x.query, x.wall_time),
                 };
             };
             Backend.prototype.createAudio = function (x) {
@@ -1455,7 +1412,7 @@ var TF;
   <template>
     <template is="dom-if" if="[[showWarning]]">
       <div class="warning">
-        <template is="dom-if" if="[[graphMode]]">
+        <template is="dom-if" if="[[_isGraph(dataType)]]">
           <h3>
             No graph definition files were found.
           </h3>
@@ -1471,7 +1428,41 @@ var TF;
             .
           </p>
         </template>
-        <template is="dom-if" if="[[!graphMode]]">
+        <template is="dom-if" if="[[_isProjector(dataType)]]">
+          <h3>
+            No projector data was found.
+          </h3>
+          <p>
+            Probable causes:
+            </p><ul>
+              <li>
+                There is no <code>projector_config.pbtxt</code> in the <code>logdir</code>.
+                To store a config file, create a
+                <a href="https://github.com/tensorflow/tensorflow/blob/master/tensorflow/contrib/tensorboard/plugins/projector/projector_config.proto">
+                  <code>projector.ProjectorConfig</code>
+                </a>
+                proto and a
+                <a href="https://www.tensorflow.org/versions/master/api_docs/python/train.html#SummaryWriter">
+                  <code>tf.train.SummaryWriter</code>
+                </a> and pass them to
+                <code>projector.visualize_embeddings()</code>.
+                The <code>projector</code> module lives in
+                <a href="https://github.com/tensorflow/tensorflow/blob/master/tensorflow/contrib/tensorboard/plugins/projector/__init__.py">
+                  <code>tensorflow.contrib.tensorboard.plugins</code>.
+                </a>
+              </li>
+              <li>
+                There is no checkpoint file. To save your model, create a
+                <a href="https://www.tensorflow.org/versions/master/api_docs/python/state_ops.html#Saver">
+                  <code>tf.train.Saver</code>
+                </a>
+                and save your model periodically
+                by calling <code>saver.save(session, LOG_DIR/model.ckpt, step)</code>.
+              </li>
+            </ul>
+          <p></p>
+        </template>
+        <template is="dom-if" if="[[_isOther(dataType)]]">
           <h3>
             No <span>[[dataType]]</span> data was found.
           </h3>
@@ -1523,12 +1514,17 @@ var TF;
       is: "tf-no-data-warning",
       properties: {
         dataType: String,
-        showWarning: Boolean,
-        graphMode: {type: Boolean, computed: "_isGraph(dataType)"},
+        showWarning: Boolean
       },
       _isGraph: function(dataType) {
         return dataType === "graph";
       },
+      _isProjector: function(dataType) {
+        return dataType === "projector";
+      },
+      _isOther: function(dataType) {
+        return !this._isGraph(dataType) && !this._isProjector(dataType);
+      }
     });
   </script>
 </dom-module>
@@ -1833,10 +1829,12 @@ var TF;
         <div class="layout horizontal wrap">
           <template is="dom-repeat" items="[[_categoryCards(category, selectedRuns.*, run2tag.*)]]">
               <div class="card">
-                <span class="card-title">[[item.tag]]</span>
-                <template is="dom-if" if="[[repeatForRuns]]">
-                  <span class="card-subtitle">[[item.run]]</span>
-                </template>
+                <div class="card-title-container" style="border-color: [[_titleBorderColor(item.run)]]">
+                  <div class="card-title" inner-h-t-m-l="[[_break(item.tag)]]"></div>
+                  <template is="dom-if" if="[[repeatForRuns]]">
+                    <div class="card-subtitle" title="[[item.run]]">[[item.run]]</div>
+                  </template>
+                </div>
                 <div class="card-content">
                   <tf-chart-scaffold tag="[[item.tag]]" data-provider="[[dataProvider]]" visible-series="[[item.runs]]" on-ready="_instantiateTemplate">
                     
@@ -1862,7 +1860,7 @@ var TF;
         display: flex;
         flex-direction: column;
         margin: 5px;
-        padding: 0 30px 30px 0;
+        padding: 0 30px 35px 0;
         -webkit-user-select: none;
         -moz-user-select: none;
         position: relative;
@@ -1903,6 +1901,11 @@ var TF;
         pointer-events: none;
       }
 
+      .card-title-container {
+        border-left: 4px solid;
+        padding-left: 5px;
+      }
+
       .expand-button {
         color: #2196F3;
         width: 32px;
@@ -1934,6 +1937,11 @@ var TF;
          */
         categories: Array,
 
+        /**
+         * Input of the colors that are used for the user's runs.
+         */
+        colorScale: Object,
+
         /**
          * The name of the data type that is used by this dashboard. This will
          * be used to display what is missing when there is no data available.
@@ -2060,6 +2068,9 @@ var TF;
 
         return cards;
       },
+      _titleBorderColor: function(run) {
+        return this.repeatForRuns ? this.colorScale.scale(run) : 'white';
+      },
 
       /*
        * Polymer data binding forwarding functions. Check the
@@ -2078,6 +2089,10 @@ var TF;
       },
       // TODO(renatoutsch): implement the instance forwarding for two-way data
       // binding.
+      // Add breaks to input so it will wrap nicely
+      _break: function(ipt) {
+        return ipt.replace(/([\/_-])/g, "$1<wbr>")
+      },
     });
   </script>
 </dom-module>
@@ -2255,8 +2270,7 @@ var TF;
          * Generates a deep clone of the defaultVal to avoid mutation issues.
          */
         function getObjectInitializer(propertyName, defaultVal) {
-            var clone = _.cloneDeep(defaultVal);
-            return _getInitializer(getObject, propertyName, clone);
+            return _getInitializer(getObject, propertyName, defaultVal);
         }
         URIStorage.getObjectInitializer = getObjectInitializer;
         /**
@@ -2363,9 +2377,29 @@ var TF;
             return function () {
                 var _this = this;
                 var URIStorageName = getURIStorageName(this, propertyName);
+                // setComponentValue will be called every time the hash changes, and is
+                // responsible for ensuring that new state in the hash will be propagated
+                // to the component with that property.
+                // It is important that this function does not re-assign needlessly,
+                // to avoid Polymer observer churn.
                 var setComponentValue = function () {
                     var uriValue = get(URIStorageName);
-                    _this[propertyName] = uriValue !== undefined ? uriValue : defaultVal;
+                    var currentValue = _this[propertyName];
+                    // if uriValue is undefined, we will ensure that the property has the
+                    // default value
+                    if (uriValue === undefined) {
+                        if (!_.isEqual(currentValue, defaultVal)) {
+                            // If we don't have an explicit URI value, then we need to ensure
+                            // the property value is equal to the default value.
+                            // We will assign a clone rather than the canonical default, because
+                            // the component receiving this property may mutate it, and we need
+                            // to keep a pristine copy of the default.
+                            _this[propertyName] = _.clone(defaultVal);
+                        }
+                    }
+                    else if (!_.isEqual(uriValue, currentValue)) {
+                        _this[propertyName] = uriValue;
+                    }
                 };
                 // Set the value on the property.
                 setComponentValue();
@@ -2402,29 +2436,22 @@ var TF;
 })(TF || (TF = {}));
 </script>
 </dom-module>
-<link rel="import" href="../paper-icon-button/paper-icon-button.html">
 
 <dom-module id="tf-regex-group" assetpath="../tf-dashboard-common/">
   <template>
     <div class="regex-list">
       <template is="dom-repeat" items="{{rawRegexes}}">
         <div class="regex-line">
-          <paper-checkbox class="active-button" checked="{{item.active}}" disabled="[[!item.valid]]"></paper-checkbox>
-          <paper-input id="text-input" class="regex-input" label="Write a regex to create a tag group" no-label-float="" bind-value="{{item.regex}}" invalid="[[!item.valid]]" on-keyup="moveFocus"></paper-input>
+          <paper-input id="text-input" class="regex-input" label="Write a regex to create a tag group" no-label-float="" value="{{item.regex}}" invalid="[[!item.valid]]" on-keyup="moveFocus"></paper-input>
           <paper-icon-button icon="close" class="delete-button" aria-label="Delete Regex" tabindex="0" on-tap="deleteRegex"></paper-icon-button>
         </div>
         <style>
           .regex-input {
-            width: 230px;
+            width: 250px;
             display: inline-block;
             margin-left: -3px;
           }
 
-          paper-checkbox {
-            --paper-checkbox-checked-color: var(--tb-ui-dark-accent);
-            --paper-checkbox-unchecked-color: var(--tb-ui-dark-accent);
-          }
-
           .delete-button {
             color: var(--paper-grey-700);
             width: 40px;
@@ -2455,16 +2482,16 @@ var TF;
       properties: {
         rawRegexes: {
           type: Array,
-          value: function() {
-            return [{regex: "", active: true, valid: true}];
-          }
+          value: TF.URIStorage.getObjectInitializer('rawRegexes', [{regex: "", valid: true}]),
         },
         regexes: {type: Array, computed: "usableRegexes(rawRegexes.*)", notify: true},
       },
       observers: [
         "addNewRegexIfNeeded(rawRegexes.*)",
         "checkValidity(rawRegexes.*)",
+        "_uriStoreRegexes(rawRegexes.*)",
       ],
+      _uriStoreRegexes: TF.URIStorage.getObjectObserver('rawRegexes', [{regex: "", valid: true}]),
       checkValidity: function(x) {
         var match = x.path.match(/rawRegexes\.(\d+)\.regex/);
         if (match) {
@@ -2486,7 +2513,7 @@ var TF;
           // Checking validity here (rather than using the data property)
           // is necessary because otherwise we might send invalid regexes due
           // to the fact that this function can call before the observer does
-          return r.regex !== "" && r.active && isValid(r.regex);
+          return r.regex !== "" && isValid(r.regex);
         }).map(function(r) {
           return r.regex;
         });
@@ -2494,7 +2521,7 @@ var TF;
       addNewRegexIfNeeded: function() {
         var last = this.rawRegexes[this.rawRegexes.length - 1];
         if (last.regex !== "") {
-          this.push("rawRegexes", {regex: "", active: true, valid: true});
+          this.push("rawRegexes", {regex: "", valid: true});
         }
       },
       deleteRegex: function(e) {
@@ -2521,7 +2548,7 @@ var TF;
 <dom-module id="tf-categorizer" assetpath="../tf-dashboard-common/">
   <template>
     <div class="inputs">
-      <tf-regex-group id="regex-group" regexes="{{regexes}}"></tf-regex-group>
+      <tf-regex-group id="regexGroup" regexes="{{regexes}}"></tf-regex-group>
     </div>
     <div id="underscore-categorization">
       <paper-checkbox checked="{{splitOnUnderscore}}">Split on underscores</paper-checkbox>
@@ -2767,12 +2794,16 @@ var Categorizer;
   <style include="run-color-style"></style>
 
   <template>
-      <paper-input id="runs-regex" no-label-float="" label="Write a regex to filter runs" value="{{regexInput}}"></paper-input>
+      <paper-input id="runs-regex" no-label-float="" label="Write a regex to filter runs" value="[[regexInput]]" on-bind-value-changed="_debouncedRegexChange"></paper-input>
     <div id="outer-container" class="scrollbar">
       <template is="dom-repeat" items="[[namesMatchingRegex]]">
         <div class="run-row">
-          <div class="checkbox-container vertical-align-container">
+          <div class="icon-container checkbox-container vertical-align-container">
             <paper-checkbox class="checkbox vertical-align-center" name="[[item]]" checked$="[[_isChecked(item, runToIsCheckedMapping.*)]]" on-change="_checkboxChange"></paper-checkbox>
+
+          </div>
+          <div class="icon-container isolator-container vertical-align-container">
+            <paper-icon-button icon="radio-button-unchecked" class="isolator vertical-align-center" on-tap="_isolateRun" name="[[item]]"></paper-icon-button>
           </div>
           <div class="item-label-container">
             <span>[[item]]</span>
@@ -2811,15 +2842,30 @@ var Categorizer;
       flex-direction: row;
       font-size: 13px;
     }
-    .checkbox-container {
+    .icon-container {
       flex-grow: 0;
       flex-shrink: 0;
+      padding-left: 2px;
     }
     .checkbox {
       padding-left: 2px;
-      width: 32px;
+      width: 18px;
+      height: 18px;
+    }
+    .isolator {
+      width: 18px;
+      height: 18px;
+      padding: 0px;
+    }
+    .isolator-container {
+      padding-left: 6px;
+      padding-right: 3px;
+    }
+    .checkbox-container {
+      padding-left: 2px;
     }
     .item-label-container {
+      padding-left: 5px;
       flex-grow: 1;
       flex-shrink: 1;
       width: 0px; /* hack to get the flex-grow to work properly */
@@ -2850,15 +2896,14 @@ var Categorizer;
     is: "tf-multi-checkbox",
     properties: {
       names: Array, // All the runs in consideration
-
       regexInput: {
         type: String,
         value: TF.URIStorage.getStringInitializer("regexInput", ""),
-        observer: "_regexInputObserver"
+        observer: "_regexInputObserver",
       }, // Regex for filtering the runs
       regex: {
         type: Object,
-        computed: "makeRegex(regexInput)"
+        computed: "_makeRegex(regexInput)"
       },
       namesMatchingRegex: {
         type: Array,
@@ -2866,7 +2911,7 @@ var Categorizer;
       }, // Runs that match the regex
       runToIsCheckedMapping: {
         type: Object,
-        value: function() {return {};}
+        value: TF.URIStorage.getObjectInitializer('runToIsCheckedMapping', {}),
       }, // run name -> Boolean (if its enabled)
       // (Allows state to persist across regex filtering)
       outSelected: {
@@ -2878,20 +2923,61 @@ var Categorizer;
         type: Object,
         observer: "synchronizeColors",
       }, // map from run name to css class
+      _debouncedRegexChange: {
+        type: Function,
+        // Updating the regex can be slow, because it involves updating styles
+        // on a large number of Polymer paper-checkboxes. We don't want to do
+        // this while the user is typing, as it may make a bad, laggy UI.
+        // So we debounce the updates that come from user typing.
+        value: function() {
+          _this = this;
+          var debounced = _.debounce(function(r) {
+            _this.regexInput = r;
+          }, 150, {leading: false});
+          return function() {
+            var r = this.$$("#runs-regex").value;
+            if (r == "") {
+              // If the user cleared the field, they may be done typing, so
+              // update more quickly.
+              this.async(function() {
+                _this.regexInput = r;
+              }, 30);
+            } else {
+              debounced(r);
+            };
+          };
+        },
+      },
     },
     listeners: {
       'dom-change': 'synchronizeColors',
     },
     observers: [
       "_initializeRunToIsCheckedMapping(names.*)",
+      "_setIsolatorIcon(runToIsCheckedMapping)",
+      "_storeRunToIsCheckedMapping(runToIsCheckedMapping)",
     ],
-    makeRegex: function(regex) {
+    _storeRunToIsCheckedMapping: TF.URIStorage.getObjectObserver('runToIsCheckedMapping', {}),
+    _makeRegex: function(regex) {
       try {
         return new RegExp(regex)
       } catch (e) {
         return null;
       }
     },
+    _setIsolatorIcon: function() {
+      var runMap = this.runToIsCheckedMapping;
+      var numChecked = _.filter(_.values(runMap)).length;
+      var buttons = Array.prototype.slice.call(this.querySelectorAll(".isolator"));
+
+      buttons.forEach(function(b) {
+        if (numChecked === 1 && runMap[b.name]) {
+          b.icon = "radio-button-checked";
+        } else {
+          b.icon = "radio-button-unchecked";
+        }
+      });
+    },
     _initializeRunToIsCheckedMapping: function(change) {
       var runToIsCheckedMapping = _.clone(this.runToIsCheckedMapping);
 
@@ -2918,6 +3004,8 @@ var Categorizer;
     synchronizeColors: function(e) {
       if (!this.colorScale) return;
 
+      this._setIsolatorIcon();
+
       var checkboxes = Array.prototype.slice.call(this.querySelectorAll("paper-checkbox"));
       var scale = this.colorScale;
       checkboxes.forEach(function(p) {
@@ -2927,16 +3015,31 @@ var Categorizer;
         p.customStyle['--paper-checkbox-unchecked-color'] = color;
         p.customStyle['--paper-checkbox-unchecked-ink-color'] = color;
       });
-      this.updateStyles();
+      var buttons = Array.prototype.slice.call(this.querySelectorAll(".isolator"));
+      buttons.forEach(function(p) {
+        var color = scale.scale(p.name);
+        p.style['color'] = color;
+      });
       // The updateStyles call fails silently if the browser doesn't have focus,
       // e.g. if TensorBoard was opened into a new tab that isn't visible.
-      // As a workaround... we know requestAnimationFrame won't fire until the
-      // page has focus, so updateStyles again on requestAnimationFrame.
+      // So we wait for requestAnimationFrame.
       var _this = this;
       window.requestAnimationFrame(function() {_this.updateStyles();});
     },
+    _isolateRun: function(e) {
+      // If user clicks on the label for one run, enable it and disable all other runs.
+
+      var name = Polymer.dom(e).localTarget.name;
+      var _this = this;
+      _.keys(this.runToIsCheckedMapping).forEach(function(k) {
+        _this.runToIsCheckedMapping[k] = false;
+      });
+      this.runToIsCheckedMapping[name] = true;
+      // we can't use notifyPath because the run names may have periods
+      this.runToIsCheckedMapping = _.clone(this.runToIsCheckedMapping);
+    },
     _checkboxChange: function(e) {
-      var target = e.srcElement || e.target; // Firefox doesn't have srcElement.
+      var target = Polymer.dom(e).localTarget;
       var name = target.name;
       var checked = target.checked;
       this.runToIsCheckedMapping[name] = checked;
@@ -2973,6 +3076,9 @@ var Categorizer;
     <paper-button class="x-button" id="toggle-all" on-tap="_toggleAll">
     Toggle All Runs
     </paper-button>
+    <template is="dom-if" if="[[logdir]]">
+      <div id="logdir" inner-h-t-m-l="{{_breakString(logdir)}}"></div>
+    </template>
     <style>
       :host {
         display: flex;
@@ -2985,7 +3091,6 @@ var Categorizer;
         flex-grow: 0;
         flex-shrink: 0;
         padding-right: 16px;
-        padding-bottom: 6px;
         box-sizing: border-box;
         color: var(--paper-grey-800);
       }
@@ -2997,7 +3102,6 @@ var Categorizer;
       .x-button {
         font-size: 13px;
         background-color: var(--tb-ui-light-accent);
-        margin-top: 5px;
         color: var(--tb-ui-dark-accent);
       }
       #tooltip-help {
@@ -3010,20 +3114,44 @@ var Categorizer;
       paper-button {
         margin-left: 0;
       }
+      #logdir {
+        color: var(--tb-ui-dark-accent);
+        font-size: 13px;
+        margin: 5px 0 0 0;
+        max-width: 288px;
+      }
     </style>
   </template>
   <script>
   Polymer({
     is: "tf-run-selector",
     properties: {
+      backend: Object,
       outSelected: {type: Array, notify: true},
       // runs: an array of strings, representing the run names that may be chosen
       runs: Array,
       colorScale: Object, // TF.ColorScale
+      logdir: {
+        type: String,
+        notify: true,
+      },
+    },
+    ready: function() {
+      // Populate the logdir.
+      this.backend.logdir().then(logdirObject => {
+        this.set('logdir', logdirObject.logdir);
+      }).catch(e => {
+        // Fetching the logdir failed. Prevent the exception from logging to
+        // console. The console already logs a 404 network event.
+      });
     },
     _toggleAll: function() {
       this.$.multiCheckbox.toggleAll();
     },
+    // Break the string at natural points, including commas, equals, and slashes
+    _breakString: function(originalString) {
+      return originalString.replace(/([\/=-_,])/g, "$1<wbr>")
+    },
   });
   </script>
 </dom-module>
@@ -3031,12 +3159,12 @@ var Categorizer;
 <dom-module id="tf-sidebar-helper" assetpath="../tf-dashboard-common/">
   <template>
     <div class="sidebar-section">
-      <tf-categorizer id="categorizer" tags="[[_visibleTags]]" categories="{{categories}}"></tf-categorizer>
+      <tf-categorizer id="categorizer" tags="[[tags]]" categories="{{categories}}"></tf-categorizer>
       <content select=".extend-first-section"></content>
     </div>
     <content></content>
     <div class="sidebar-section">
-      <tf-run-selector id="runSelector" runs="[[runs]]" color-scale="[[colorScale]]" out-selected="{{selectedRuns}}"></tf-run-selector>
+      <tf-run-selector id="runSelector" backend="[[backend]]" runs="[[runs]]" color-scale="[[colorScale]]" out-selected="{{selectedRuns}}"></tf-run-selector>
     </div>
     <style include="dashboard-style"></style>
     <style>
@@ -3080,6 +3208,11 @@ var Categorizer;
     Polymer({
       is: "tf-sidebar-helper",
       properties: {
+        /**
+         * The backend object used to issue requests.
+         */
+        backend: Object,
+
         /**
          * This is an output of the categories that the user selected to
          * separate the different tags. Each category here should be given its
@@ -3114,15 +3247,13 @@ var Categorizer;
           notify: true,
         },
 
-        _visibleTags: {
+        tags: {
           type: Array,
-          computed: "_getVisibleTags(selectedRuns.*, run2tag.*)"
+          computed: "_getTags(run2tag.*)"
         },
       },
-      _getVisibleTags: function() {
-        var keys = this.selectedRuns;
-        var dict = this.run2tag;
-        return _.union.apply(null, keys.map(function(k) {return dict[k]}));
+      _getTags: function() {
+        return _.union.apply(null, _.values(this.run2tag));
       },
     })
   </script>
@@ -3186,7 +3317,7 @@ var Categorizer;
         padding: 8px;
         z-index: 5;
         cursor: none;
-        margin-top: 5px;
+        margin-top: 10px;
       }
       .swatch {
         border-radius: 50%;
@@ -3514,10 +3645,15 @@ var VZ;
         LineChart.prototype._onDatasetChanged = function (dataset) {
             if (this.smoothingEnabled) {
                 this.resmoothDataset(dataset);
-                this.updateSpecialDatasets(this.smoothedAccessor);
+            }
+            this.updateSpecialDatasets();
+        };
+        LineChart.prototype.updateSpecialDatasets = function () {
+            if (this.smoothingEnabled) {
+                this.updateSpecialDatasetsWithAccessor(this.smoothedAccessor);
             }
             else {
-                this.updateSpecialDatasets(this.scalarAccessor);
+                this.updateSpecialDatasetsWithAccessor(this.scalarAccessor);
             }
         };
         /** Constructs special datasets. Each special dataset contains exceptional
@@ -3526,7 +3662,7 @@ var VZ;
          * (since usually those are context in the surrounding dataset).
          * The accessor will point to the correct data to access.
          */
-        LineChart.prototype.updateSpecialDatasets = function (accessor) {
+        LineChart.prototype.updateSpecialDatasetsWithAccessor = function (accessor) {
             var lastPointsData = this.datasets
                 .map(function (d) {
                 var datum = null;
@@ -3792,6 +3928,7 @@ var VZ;
          */
         LineChart.prototype.setVisibleSeries = function (names) {
             var _this = this;
+            names = names.sort();
             this.seriesNames = names;
             names.reverse(); // draw first series on top
             this.datasets.forEach(function (d) { return d.offUpdate(_this.onDatasetChanged); });
@@ -3801,6 +3938,7 @@ var VZ;
             if (this.smoothingEnabled) {
                 this.smoothLinePlot.datasets(this.datasets);
             }
+            this.updateSpecialDatasets();
         };
         /**
          * Set the data of a series on the chart.
@@ -3818,7 +3956,7 @@ var VZ;
                 this.smoothingEnabled = true;
                 this.smoothLinePlot.datasets(this.datasets);
             }
-            this.updateSpecialDatasets(this.smoothedAccessor);
+            this.updateSpecialDatasetsWithAccessor(this.smoothedAccessor);
         };
         LineChart.prototype.smoothingDisable = function () {
             if (this.smoothingEnabled) {
@@ -3826,7 +3964,7 @@ var VZ;
                 this.scatterPlot.y(this.scalarAccessor, this.yScale);
                 this.smoothLinePlot.datasets([]);
                 this.smoothingEnabled = false;
-                this.updateSpecialDatasets(this.scalarAccessor);
+                this.updateSpecialDatasetsWithAccessor(this.scalarAccessor);
             }
         };
         LineChart.prototype.setTooltipSortingMethod = function (method) {
@@ -3836,9 +3974,9 @@ var VZ;
             this.tooltipPosition = position;
         };
         LineChart.prototype.renderTo = function (targetSVG) {
-            this.outer.renderTo(targetSVG);
             this.targetSVG = targetSVG;
             this.setViewBox();
+            this.outer.renderTo(targetSVG);
         };
         /** There's an issue in Chrome where the svg overflow is a bit
          * "flickery". There is a border on the gridlines on the extreme edge of the
@@ -3849,12 +3987,14 @@ var VZ;
         LineChart.prototype.setViewBox = function () {
             // There's an issue in Firefox where if we measure with the old viewbox
             // set, we get horrible results.
-            this.targetSVG.attr('viewBox', '');
-            var svg = this.targetSVG.node();
-            var brect = svg.getBoundingClientRect();
-            var w = brect.width;
-            var h = brect.height;
-            this.targetSVG.attr('viewBox', "0 0 " + (w + 1) + " " + (h + 1));
+            this.targetSVG.attr('viewBox', null);
+            var parent = this.targetSVG.node().parentNode;
+            var w = parent.clientWidth;
+            var h = parent.clientHeight;
+            this.targetSVG.attr({
+                'height': h,
+                'viewBox': "0 0 " + (w + 1) + " " + (h + 1),
+            });
         };
         LineChart.prototype.redraw = function () {
             this.outer.redraw();
@@ -4181,8 +4321,9 @@ var VZ;
         this.scopeSubtree(this.$.chartsvg, true);
       },
       _makeChart: function(xType, yScaleType, colorScale, _attached) {
-        if (this._makeChartAsyncCallbackId === null) {
+        if (this._makeChartAsyncCallbackId !== null) {
           this.cancelAsync(this._makeChartAsyncCallbackId);
+          this._makeChartAsyncCallbackId = null;
         }
 
         this._makeChartAsyncCallbackId = this.async(function() {
@@ -4229,7 +4370,7 @@ var VZ;
   </script>
 </dom-module>
 
-<dom-module id="tf-event-dashboard" assetpath="../tf-event-dashboard/">
+<dom-module id="tf-scalar-dashboard" assetpath="../tf-scalar-dashboard/">
   <template>
     <div id="plumbing">
       <tf-color-scale id="colorScale" runs="[[runs]]" out-color-scale="{{_colorScale}}"></tf-color-scale>
@@ -4237,7 +4378,7 @@ var VZ;
 
     <tf-dashboard-layout>
       <div class="sidebar">
-        <tf-sidebar-helper categories="{{_categories}}" color-scale="[[_colorScale]]" run2tag="[[run2tag]]" runs="[[runs]]" selected-runs="{{_selectedRuns}}">
+        <tf-sidebar-helper backend="[[backend]]" categories="{{_categories}}" color-scale="[[_colorScale]]" run2tag="[[run2tag]]" runs="[[runs]]" selected-runs="{{_selectedRuns}}">
           <div class="extend-first-section">
             <paper-checkbox id="download-option" checked="{{_showDownloadLinks}}">Data download links</paper-checkbox>
             <div id="tooltip-sorting">
@@ -4264,7 +4405,7 @@ var VZ;
         </tf-sidebar-helper>
       </div>
       <div class="center">
-        <tf-panes-helper categories="[[_categories]]" data-type="[[dataType]]" data-provider="[[dataProvider]]" run2tag="[[run2tag]]" selected-runs="[[_selectedRuns]]" show-download-links="[[_showDownloadLinks]]" download-link-url-function="[[scalarUrl]]">
+        <tf-panes-helper categories="[[_categories]]" color-scale="[[_colorScale]]" data-type="[[dataType]]" data-provider="[[dataProvider]]" run2tag="[[run2tag]]" selected-runs="[[_selectedRuns]]" show-download-links="[[_showDownloadLinks]]" download-link-url-function="[[scalarUrl]]">
           <template>
             <vz-line-chart x-type="[[_xType]]" color-scale="[[_colorScale]]" smoothing-enabled="[[_smoothingEnabled]]" smoothing-weight="[[_smoothingWeight]]" tooltip-sorting-method="[[_tooltipSortingMethod]]"></vz-line-chart>
             <paper-icon-button class="log-button" icon="line-weight" on-tap="toggleLogScale" title="Toggle y-axis log scale"></paper-icon-button>
@@ -4278,7 +4419,7 @@ var VZ;
       .log-button {
         position: absolute;
         left: 35px;
-        bottom: -30px;
+        bottom: -35px;
         color: #2196F3;
         background: #fff;
         width: 32px;
@@ -4313,12 +4454,13 @@ var VZ;
 
   <script>
     Polymer({
-      is: "tf-event-dashboard",
+      is: "tf-scalar-dashboard",
       behaviors: [
         TF.Dashboard.ReloadBehavior("tf-chart-scaffold"),
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         dataType: {
           type: String,
           value: "scalar"
@@ -4377,7 +4519,7 @@ var VZ;
     });
   </script>
 </dom-module>
-<dom-module id="tf-distribution-chart" assetpath="../tf-distribution-dashboard/">
+<dom-module id="vz-distribution-chart" assetpath="../vz-distribution-chart/">
   <template>
     <svg id="chartsvg"></svg>
     <style>
@@ -4414,8 +4556,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 /* tslint:disable:no-namespace variable-name */
-var TF;
-(function (TF) {
+var VZ;
+(function (VZ) {
     var DistributionChart = (function () {
         function DistributionChart(xType, colorScale) {
             this.run2datasets = {};
@@ -4493,13 +4635,38 @@ var TF;
         DistributionChart.prototype.setSeriesData = function (name, data) {
             this.getDataset(name).data(data);
         };
-        DistributionChart.prototype.renderTo = function (target) { this.outer.renderTo(target); };
-        DistributionChart.prototype.redraw = function () { this.outer.redraw(); };
+        DistributionChart.prototype.renderTo = function (targetSVG) {
+            this.targetSVG = targetSVG;
+            this.setViewBox();
+            this.outer.renderTo(targetSVG);
+        };
+        /** There's an issue in Chrome where the svg overflow is a bit
+         * "flickery". There is a border on the gridlines on the extreme edge of the
+         * chart, which behaves inconsistently and causes the screendiffing tests to
+         * flake. We can solve this by creating 1px effective margin for the svg by
+         * setting the viewBox on the containing svg.
+         */
+        DistributionChart.prototype.setViewBox = function () {
+            // There's an issue in Firefox where if we measure with the old viewbox
+            // set, we get horrible results.
+            this.targetSVG.attr('viewBox', null);
+            var parent = this.targetSVG.node().parentNode;
+            var w = parent.clientWidth;
+            var h = parent.clientHeight;
+            this.targetSVG.attr({
+                'height': h,
+                'viewBox': "0 0 " + (w + 1) + " " + (h + 1),
+            });
+        };
+        DistributionChart.prototype.redraw = function () {
+            this.outer.redraw();
+            this.setViewBox();
+        };
         DistributionChart.prototype.destroy = function () { this.outer.destroy(); };
         return DistributionChart;
     }());
-    TF.DistributionChart = DistributionChart;
-})(TF || (TF = {}));
+    VZ.DistributionChart = DistributionChart;
+})(VZ || (VZ = {}));
 </script>
   <script>/* Copyright 2015 The TensorFlow Authors. All Rights Reserved.
 
@@ -4644,10 +4811,34 @@ var VZ;
 </script>
   <script>
     Polymer({
-      is: "tf-distribution-chart",
+      is: "vz-distribution-chart",
       properties: {
-        colorScale: Object,
-        xType: String,
+        /**
+         * Scale that maps series names to colors. The default colors are from
+         * d3.scale.category10() scale. Use this property to replace the default
+         * line colors with colors of your own choice.
+         * @type {Plottable.Scales.Color}
+         * @required
+         */
+        colorScale: {
+          type: Object,
+          value: function() {
+            return new Plottable.Scales.Color()
+                .range(d3.scale.category10().range());
+          }
+        },
+        /**
+         * The way to display the X values. Allows:
+         * - "step" - Linear scale using the  "step" property of the datum.
+         * - "wall_time" - Temporal scale using the "wall_time" property of the
+         * datum.
+         * - "relative" - Temporal scale using the "relative" property of the
+         * datum if it is present or calculating from "wall_time" if it isn't.
+         */
+        xType: {
+          type: String,
+          value: 'step'
+        },
         _attached: Boolean,
         _chart: Object,
         _visibleSeriesCache: {
@@ -4692,7 +4883,7 @@ var VZ;
           this._makeChartAsyncCallbackId = null;
           if (!_attached) return;
           if (this._chart) this._chart.destroy();
-          var chart = new TF.DistributionChart(xType, colorScale);
+          var chart = new VZ.DistributionChart(xType, colorScale);
           var svg = d3.select(this.$.chartsvg);
           chart.renderTo(svg);
           this._chart = chart;
@@ -4724,7 +4915,7 @@ var VZ;
 
     <tf-dashboard-layout>
       <div class="sidebar">
-        <tf-sidebar-helper categories="{{_categories}}" color-scale="[[_colorScale]]" run2tag="[[run2tag]]" runs="[[runs]]" selected-runs="{{_selectedRuns}}">
+        <tf-sidebar-helper backend="[[backend]]" categories="{{_categories}}" color-scale="[[_colorScale]]" run2tag="[[run2tag]]" runs="[[runs]]" selected-runs="{{_selectedRuns}}">
         <div class="sidebar-section">
           <tf-option-selector id="xTypeSelector" name="Horizontal Axis" selected-id="{{_xType}}">
             <paper-button id="step">step</paper-button>
@@ -4736,9 +4927,9 @@ var VZ;
       </div>
 
       <div class="center">
-        <tf-panes-helper categories="[[_categories]]" data-type="[[dataType]]" data-provider="[[dataProvider]]" run2tag="[[run2tag]]" selected-runs="[[_selectedRuns]]" repeat-for-runs="">
+        <tf-panes-helper categories="[[_categories]]" color-scale="[[_colorScale]]" data-type="[[dataType]]" data-provider="[[dataProvider]]" run2tag="[[run2tag]]" selected-runs="[[_selectedRuns]]" repeat-for-runs="">
           <template>
-            <tf-distribution-chart x-type="[[_xType]]" color-scale="[[_colorScale]]"></tf-distribution-chart>
+            <vz-distribution-chart x-type="[[_xType]]" color-scale="[[_colorScale]]"></vz-distribution-chart>
           </template>
         </tf-panes-helper>
       </div>
@@ -4755,6 +4946,7 @@ var VZ;
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         _xType: {
           type: String,
           value: "step"
@@ -5453,7 +5645,7 @@ var VZ;
 
     <tf-dashboard-layout>
       <div class="sidebar">
-        <tf-sidebar-helper categories="{{_categories}}" color-scale="[[_colorScale]]" run2tag="[[run2tag]]" runs="[[runs]]" selected-runs="{{_selectedRuns}}" show-download-links="{{_showDownloadLinks}}">
+        <tf-sidebar-helper backend="[[backend]]" categories="{{_categories}}" color-scale="[[_colorScale]]" run2tag="[[run2tag]]" runs="[[runs]]" selected-runs="{{_selectedRuns}}" show-download-links="{{_showDownloadLinks}}">
           <div class="sidebar-section">
             <tf-option-selector id="histogramModeSelector" name="Histogram Mode" selected-id="{{_histogramMode}}">
               <paper-button id="overlay">overlay</paper-button>
@@ -5471,7 +5663,7 @@ var VZ;
       </tf-sidebar-helper></div>
 
       <div class="center">
-        <tf-panes-helper categories="[[_categories]]" data-type="[[dataType]]" data-provider="[[dataProvider]]" run2tag="[[run2tag]]" selected-runs="[[_selectedRuns]]" repeat-for-runs="">
+        <tf-panes-helper categories="[[_categories]]" color-scale="[[_colorScale]]" data-type="[[dataType]]" data-provider="[[dataProvider]]" run2tag="[[run2tag]]" selected-runs="[[_selectedRuns]]" repeat-for-runs="">
           <template>
             <vz-histogram-timeseries time-property="[[_timeProperty]]" mode="[[_histogramMode]]" color-scale="[[_colorScaleFunction]]"></vz-histogram-timeseries>
           </template>
@@ -5496,6 +5688,7 @@ var VZ;
         TF.Backend.Behavior,
       ],
       properties: {
+        backend: Object,
         dataType: {
           type: String,
           value: "histogram"
@@ -5526,201 +5719,95 @@ var VZ;
 </dom-module>
 
 <dom-module id="tf-image-loader" assetpath="../tf-image-dashboard/">
-  <style>
-  :host {
-    display: block;
-  }
-  img {
-    image-rendering: pixelated;
-    border: 1px solid #555;
-  }
-  </style>
   <template>
-    <img src="[[imageUrl]]" width="300" height="[[height]]" on-error="reload">
+    <img id="img" src="[[imageUrl]]" on-error="reload">
+    <style>
+      :host {
+        display: block;
+        width: 100%;
+        height: auto;
+        position: relative;
+      }
+
+      img {
+        image-rendering: pixelated;
+        display: block;
+        width: 100%;
+        height: auto;
+      }
+    </style>
   </template>
   <script>
     Polymer({
       is: "tf-image-loader",
       properties: {
-        run: String,
-        tag: String,
-        imagesGenerator: Function,
+        colorScale: Object,
         imageUrl: String,
-        height: {
-          type: Number,
-          value: 300
-        }
       },
-      reload: function() {
-        var _this = this;
-        this.imageUrl = ""; // force reload
-        this.imagesGenerator(this.tag, this.run).then(function(metadatas) {
-          var last_metadata = _.last(metadatas);
-          _this.imageUrl = last_metadata.url;
-          _this.height = 300 / last_metadata.width * last_metadata.height;
-        });
+      setVisibleSeries: function(runs) {
+        // Do nothing.
       },
-      ready: function() {
-        // Need to test so that it will not error if it is constructed w/o
-        // all properties (so that it's possible to use stub to mock it out)
-        if (this.run != null && this.tag != null && this.imagesGenerator != null) {
-          this.reload();
-        }
+      setSeriesData: function(run, data) {
+        var last = _.last(data);
+        this.redraw(last.url);
+      },
+      redraw: function(newUrl) {
+        var url = newUrl || this.imageUrl;
+        this.imageUrl = ""; // Force redraw
+        this.imageUrl = url;
       },
     });
   </script>
 </dom-module>
 
-<dom-module id="tf-image-grid" assetpath="../tf-image-dashboard/">
+<dom-module id="tf-image-dashboard" assetpath="../tf-image-dashboard/">
   <template>
-    <style include="scrollbar-style"></style>
-    <div id="fullContainer" class="container scrollbar">
-      <div id="topRow" class="container">
-        <div class="noshrink cell" id="paddingCell"></div>
-        <template is="dom-repeat" items="[[runs]]" as="run">
-        <div class="run-name-cell cell noshrink">
-          <span>[[run]]</span>
-        </div>
-      </template>
-      </div>
-      <div id="bottomContainer" class="container">
-        <template is="dom-repeat" items="[[tags]]" as="tag">
-          <div class="image-row container noshrink">
-            <div class="tag-name-cell cell noshrink">
-              <span class="tag-name">[[tag]]</span>
-            </div>
-            <template is="dom-repeat" items="[[runs]]" as="run">
-              <div class="image-cell cell noshrink">
-                <template is="dom-if" if="[[_exists(run, tag, runToImages.*)]]">
-                  <tf-image-loader id="loader" run="[[run]]" tag="[[tag]]" images-generator="[[imagesGenerator]]">
-                  </tf-image-loader>
-                </template>
-              </div>
-            </template>
-          </div>
-        </template>
-      </div>
-    </div>
-    <style>
-      :host {
-        display: block;
-        height: 100%;
-      }
-      .container {
-        display: flex;
-        flex-wrap: nowrap;
-      }
-      #fullContainer {
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        padding-top: 20px;
-        overflow: auto;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-      }
-      #topRow {
-        flex-direction: row;
-      }
-      #bottomContainer {
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-      }
-      .cell {
-        margin-right: 10px;
-      }
-      .image-row {
-        flex-direction: row;
-        padding-top: 10px;
-      }
-      .image-cell {
-        width: 300px;
-      }
-      .tag-name-cell {
-        width: 300px;
-        display:flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .tag-name {
-        word-wrap: break-word;
-        text-align: center;
-        white-space: nowrap;
-      }
-      .run-name-cell {
-        width: 300px;
-        word-break:break-all;
-        text-align: center;
-      }
-      .noshrink {
-        flex-shrink: 0;
-      }
-      #paddingCell {
-        width: 300px;
-        height: 30px;
-      }
-    </style>
-  </template>
-  <script>
-    Polymer({
-      is: "tf-image-grid",
-      properties: {
-        runToImages: Object,
-        tags: Array,
-        runs: Array,
-        imagesGenerator: Function,
-      },
-      _exists: function (run, tag) {
-        return this.runToImages[run].indexOf(tag) !== -1;
-      },
-    });
-  </script>
-</dom-module>
-
-<dom-module id="tf-image-dashboard" assetpath="../tf-image-dashboard/">
-  <template>
-    <div class="center">
-      <tf-no-data-warning data-type="image" show-warning="[[dataNotFound]]"></tf-no-data-warning>
-      <tf-image-grid id="imagegrid" run-to-images="[[run2tag]]" images-generator="[[dataProvider]]" tags="[[tags]]" runs="[[runs]]"></tf-image-grid>
+    <div id="plumbing">
+      <tf-color-scale id="colorScale" runs="[[runs]]" out-color-scale="{{_colorScale}}"></tf-color-scale>
     </div>
 
+    <tf-dashboard-layout>
+      <div class="sidebar">
+        <tf-sidebar-helper backend="[[backend]]" categories="{{_categories}}" color-scale="[[_colorScale]]" run2tag="[[run2tag]]" runs="[[runs]]" selected-runs="{{_selectedRuns}}">
+        </tf-sidebar-helper>
+      </div>
+      <div class="center">
+        <tf-panes-helper categories="[[_categories]]" color-scale="[[_colorScale]]" data-type="[[dataType]]" data-provider="[[dataProvider]]" run2tag="[[run2tag]]" selected-runs="[[_selectedRuns]]" repeat-for-runs="">
+          <template>
+            <tf-image-loader color-scale="[[_colorScale]]"></tf-image-loader>
+          </template>
+        </tf-panes-helper>
+      </div>
+    </tf-dashboard-layout>
+    <style include="dashboard-style"></style>
     <style>
-      .center {
-        height: 100%;
-        width: 100%;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-      }
-      :host {
-        height: 100%;
-        display: block;
+      tf-panes-helper {
+        --card-width: 340px;
+        --card-height: auto;
+        --card-expanded-width: 700px;
+        --card-expanded-height: auto;
       }
-
     </style>
   </template>
   <script>
     Polymer({
       is: "tf-image-dashboard",
       properties: {
-        dataType: {value: "image"},
+        backend: Object,
+        dataType: {
+          type: String,
+          value: "image"
+        },
       },
       behaviors: [
-        TF.Dashboard.ReloadBehavior("tf-image-loader"),
-        TF.Backend.Behavior
+          TF.Dashboard.ReloadBehavior("tf-chart-scaffold"),
+          TF.Backend.Behavior,
       ],
       attached: function() {
         this.async(function() {
           this.fire("rendered");
         });
       },
-      _hasImages: function(runToImagesChange) {
-        return _.values(runToImagesChange.base).some(function(arr) {
-          return arr.length > 0;
-        });
-      },
     });
   </script>
 </dom-module>
@@ -6019,6 +6106,11 @@ Polymer({
     var dataTracker = tf.graph.util.getSubtaskTracker(tracker, 30, 'Data');
     tf.graph.parser.fetchAndParseGraphData(path, pbTxtFile, dataTracker)
     .then(function(graph) {
+      if (!graph) {
+        throw 'The graph is empty. Make sure that the graph is passed to the ' +
+            'SummaryWriter after the graph is defined.';
+      }
+
       // Build the flat graph (consists only of Op nodes).
 
       // This is the whitelist of inputs on op types that are considered
@@ -8528,13 +8620,12 @@ var tf;
              */
             function fetchPbTxt(filepath) {
                 return new Promise(function (resolve, reject) {
-                    d3.text(filepath, function (error, text) {
-                        if (error) {
-                            reject(error);
-                            return;
-                        }
-                        resolve(text);
-                    });
+                    var request = new XMLHttpRequest();
+                    request.open('GET', filepath);
+                    request.responseType = 'arraybuffer';
+                    request.onerror = function () { return reject(request.status); };
+                    request.onload = function () { return resolve(request.response); };
+                    request.send(null);
                 });
             }
             parser.fetchPbTxt = fetchPbTxt;
@@ -8547,27 +8638,38 @@ var tf;
                     if (path == null) {
                         return Promise.resolve(null);
                     }
-                    return fetchPbTxt(path).then(function (text) { return new Blob([text]); });
+                    return fetchPbTxt(path);
                 }, tracker)
-                    .then(function (blob) {
-                    return tf.graph.util.runTask('Parsing metadata.pbtxt', 60, function () {
-                        return blob != null ? parseStatsPbTxt(blob) : null;
+                    .then(function (arrayBuffer) {
+                    return tf.graph.util.runAsyncPromiseTask('Parsing metadata.pbtxt', 60, function () {
+                        return arrayBuffer != null ? parseStatsPbTxt(arrayBuffer) :
+                            Promise.resolve(null);
                     }, tracker);
                 });
             }
             parser.fetchAndParseMetadata = fetchAndParseMetadata;
             /**
-             * Fetches the graph file, parses it and returns a promise of the result.
+             * Fetches the graph file, parses it and returns a promise of the result. The
+             * result will be undefined if the graph is empty.
              */
             function fetchAndParseGraphData(path, pbTxtFile, tracker) {
                 return tf.graph.util
                     .runTask('Reading graph pbtxt', 40, function () {
-                    return pbTxtFile ? Promise.resolve(pbTxtFile) :
-                        fetchPbTxt(path).then(function (text) { return new Blob([text]); });
+                    if (pbTxtFile) {
+                        return new Promise(function (resolve, reject) {
+                            var fileReader = new FileReader();
+                            fileReader.onload = function () { return resolve(fileReader.result); };
+                            fileReader.onerror = function () { return reject(fileReader.error); };
+                            fileReader.readAsArrayBuffer(pbTxtFile);
+                        });
+                    }
+                    else {
+                        return fetchPbTxt(path);
+                    }
                 }, tracker)
-                    .then(function (blob) {
+                    .then(function (arrayBuffer) {
                     return tf.graph.util.runTask('Parsing graph.pbtxt', 60, function () {
-                        return parseGraphPbTxt(blob);
+                        return parseGraphPbTxt(arrayBuffer);
                     }, tracker);
                 });
             }
@@ -8575,42 +8677,34 @@ var tf;
             /**
              * Parse a file object in a streaming fashion line by line (or custom delim).
              * Can handle very large files.
-             * @param input The file object
+             * @param input The file object as an array buffer.
              * @param callback The callback called on each line
              * @param chunkSize The size of each read chunk. (optional)
              * @param delim The delimiter used to split a line. (optional)
              * @returns A promise for when it is finished.
              */
-            function streamParse(file, callback, chunkSize, delim) {
+            function streamParse(arrayBuffer, callback, chunkSize, delim) {
                 if (chunkSize === void 0) { chunkSize = 1000000; }
                 if (delim === void 0) { delim = '\n'; }
                 return new Promise(function (resolve, reject) {
                     var offset = 0;
-                    var fileSize = file.size - 1;
+                    var bufferSize = arrayBuffer.byteLength - 1;
                     var data = '';
-                    function readHandler(evt) {
-                        if (evt.target.error == null) {
-                            offset += evt.target.result.length;
-                            var str = evt.target.result;
-                            var parts = str.split(delim);
-                            var first = data + parts[0];
-                            if (parts.length === 1) {
-                                data = first;
-                                readChunk(offset, chunkSize);
-                                return;
-                            }
-                            data = parts[parts.length - 1];
-                            callback(first);
-                            for (var i = 1; i < parts.length - 1; i++) {
-                                callback(parts[i]);
-                            }
-                        }
-                        else {
-                            // read error
-                            reject(evt.target.error);
+                    function readHandler(str) {
+                        offset += chunkSize;
+                        var parts = str.split(delim);
+                        var first = data + parts[0];
+                        if (parts.length === 1) {
+                            data = first;
+                            readChunk(offset, chunkSize);
                             return;
                         }
-                        if (offset >= fileSize) {
+                        data = parts[parts.length - 1];
+                        callback(first);
+                        for (var i = 1; i < parts.length - 1; i++) {
+                            callback(parts[i]);
+                        }
+                        if (offset >= bufferSize) {
                             if (data) {
                                 callback(data);
                             }
@@ -8620,10 +8714,11 @@ var tf;
                         readChunk(offset, chunkSize);
                     }
                     function readChunk(offset, size) {
-                        var reader = new FileReader();
-                        var blob = file.slice(offset, offset + size);
-                        reader.onload = readHandler;
-                        reader.readAsText(blob);
+                        var arrayBufferChunk = arrayBuffer.slice(offset, offset + size);
+                        var blob = new Blob([arrayBufferChunk]);
+                        var file = new FileReader();
+                        file.onload = function (e) { return readHandler(e.target.result); };
+                        file.readAsText(blob);
                     }
                     readChunk(offset, chunkSize);
                 });
@@ -8656,14 +8751,14 @@ var tf;
                 'step_stats.dev_stats.node_stats.output.tensor_description.shape.dim': true
             };
             /**
-             * Parses a blob of proto txt file into a raw Graph object.
+             * Parses an ArrayBuffer of a proto txt file into a raw Graph object.
              */
             function parseGraphPbTxt(input) {
                 return parsePbtxtFile(input, GRAPH_REPEATED_FIELDS).then(function (obj) { return obj['node']; });
             }
             parser.parseGraphPbTxt = parseGraphPbTxt;
             /**
-             * Parses a blob of proto txt file into a StepStats object.
+             * Parses an ArrayBuffer of a proto txt file into a StepStats object.
              */
             function parseStatsPbTxt(input) {
                 return parsePbtxtFile(input, METADATA_REPEATED_FIELDS)
@@ -8671,9 +8766,9 @@ var tf;
             }
             parser.parseStatsPbTxt = parseStatsPbTxt;
             /**
-             * Parses a blob of proto txt file into javascript object.
+             * Parses a ArrayBuffer of a proto txt file into javascript object.
              *
-             * @param input The Blob or file object implementing slice.
+             * @param input The ArrayBuffer or file object implementing slice.
              * @param repeatedFields Map (Set) of all the repeated fields, since you can't
              *   tell directly from the pbtxt if a field is repeated or not.
              * @returns The parsed object.
@@ -8847,15 +8942,16 @@ var tf;
                  */
                 enableExtraction: true,
                 /**
-                 * Maximum in-degree that a node can have without being considered as
-                 * high in-degree node.
+                 * The minimum number of nodes for a graph to have in order for high in and
+                 * out degree nodes to be extracted in auxiliary. The aim here is to prevent
+                 * nodes from being extracted from small graphs.
                  */
-                maxInDegree: 4,
+                minNodeCountForExtraction: 15,
                 /**
-                 * Maximum out-degree that a node can have without being considered as
-                 * high out-degree node.
+                 * The minimum in or out degree a node must have in order to be possibly
+                 * extracted.
                  */
-                maxOutDegree: 4,
+                minDegreeForExtraction: 5,
                 /**
                  * Maximum number of control edges a node can have before they aren't
                  * displayed.
@@ -8872,7 +8968,7 @@ var tf;
                  * Types patterns for predefined in-extract nodes, which are
                  * source-like nodes that will be extracted from the main graph.
                  */
-                inExtractTypes: ['Variable'],
+                inExtractTypes: [],
                 /**
                  * When removing edges from a high degree node, remove all of its edges if
                  * detachAllEdgesForHighDegree is true.  Otherwise remove all in-edges if
@@ -9181,9 +9277,14 @@ var tf;
                         var _b = inbound ?
                             [renderNodeInfo.inAnnotations, childRenderInfo.inAnnotations] :
                             [renderNodeInfo.outAnnotations, childRenderInfo.outAnnotations], childAnnotations = _b[1];
-                        var isOtherHighDegree = inbound ?
-                            otherCounts.out[otherName] > PARAMS.maxOutDegree :
-                            otherCounts.in[otherName] > PARAMS.maxInDegree;
+                        // Do not render a bridge path to a node if the node is extracted into the
+                        // auxiliary graph for having a high degree. If we are not sure now,
+                        // default to not rendering a bridge path.
+                        var isOtherHighDegree = true;
+                        if (otherRenderInfo) {
+                            isOtherHighDegree = inbound ? otherRenderInfo.isOutExtract :
+                                otherRenderInfo.isInExtract;
+                        }
                         // The adjoining render metaedge info from the parent's coreGraph, if any.
                         // It will either be a Metaedge involving this node directly, if it
                         // previously came from a metagraph, or it'll be a Metaedge involving
@@ -9477,6 +9578,12 @@ var tf;
                     this.dy = 0;
                     this.width = 0;
                     this.height = 0;
+                    // Properties needed for generating an ID for the edge's path element if
+                    // this annotation is associated with a metaedge.
+                    if (renderMetaedgeInfo && renderMetaedgeInfo.metaedge) {
+                        this.v = renderMetaedgeInfo.metaedge.v;
+                        this.w = renderMetaedgeInfo.metaedge.w;
+                    }
                     this.isIn = isIn;
                     this.points = [];
                 }
@@ -9772,57 +9879,87 @@ var tf;
                     }
                 });
             }
-            /** Extract from nodes with in-degree > maxInDegree */
-            function extractHighInDegree(renderNode) {
+            /** Extract nodes deemed to have either high in-degree or high out-degree. */
+            function extractHighInOrOutDegree(renderNode) {
                 var graph = renderNode.coreGraph;
-                var maxInDegree = PARAMS.maxInDegree;
-                // detect first so degrees don't get affected by other removal
-                var highInDegreeNames = _.filter(graph.nodes(), function (n) {
-                    if (graph.node(n).node.include !== graph_1.InclusionType.UNSPECIFIED) {
-                        return false;
+                // Create mappings from node to in and out degrees. Count the number of valid
+                // nodes along the way.
+                var nodeToInDegree = {};
+                var nodeToOutDegree = {};
+                var validNodeCount = 0;
+                _.each(graph.nodes(), function (currentNode) {
+                    if (graph.node(currentNode).node.include !== graph_1.InclusionType.UNSPECIFIED) {
+                        // This node is not included in the first place.
+                        return;
                     }
-                    // Count the in-degree based on only regular edges, unless there are
-                    // no regular edges, in which case use the number of control edges.
-                    // This is done so that control edges don't effect if nodes are extracted
+                    // Count the in and out degrees based on only regular edges, unless there
+                    // are no regular edges, in which case use the number of control edges.
+                    // This is done so that control edges don't affect if nodes are extracted
                     // from the core graph, unless the node is only used for control.
-                    var numEdgesToCount = _.reduce(graph.predecessors(n), function (numEdgesToCount, pred) {
-                        var metaedge = graph.edge(pred, n).metaedge;
-                        return numEdgesToCount + (metaedge.numRegularEdges ? 1 : 0);
+                    var inDegree = _.reduce(graph.predecessors(currentNode), function (inDegree, pred) {
+                        var metaedge = graph.edge(pred, currentNode).metaedge;
+                        return inDegree + (metaedge.numRegularEdges ? 1 : 0);
                     }, 0);
-                    if (numEdgesToCount === 0 && graph.predecessors(n).length > 0) {
-                        numEdgesToCount = graph.predecessors(n).length;
-                    }
-                    return numEdgesToCount > maxInDegree;
-                });
-                _.each(highInDegreeNames, function (n) {
-                    makeOutExtract(renderNode, n);
-                });
-            }
-            /** Extract nodes with out-degree > maxOutDegree */
-            function extractHighOutDegree(renderNode) {
-                var graph = renderNode.coreGraph;
-                var maxOutDegree = PARAMS.maxOutDegree;
-                // detect first so degrees don't get affected by other removal
-                var highOutDegreeNames = _.filter(graph.nodes(), function (n) {
-                    if (graph.node(n).node.include !== graph_1.InclusionType.UNSPECIFIED) {
-                        return false;
+                    if (inDegree === 0 && graph.predecessors(currentNode).length > 0) {
+                        inDegree = graph.predecessors(currentNode).length;
                     }
-                    // Count the out-degree based on only regular edges, unless there are
-                    // no regular edges, in which case use the number of control edges.
-                    // This is done so that control edges don't effect if nodes are extracted
-                    // from the core graph, unless the node is only used for control.
-                    var numEdgesToCount = _.reduce(graph.successors(n), function (numEdgesToCount, succ) {
-                        var metaedge = graph.edge(n, succ).metaedge;
-                        return numEdgesToCount + (metaedge.numRegularEdges ? 1 : 0);
+                    var outDegree = _.reduce(graph.successors(currentNode), function (outDegree, succ) {
+                        var metaedge = graph.edge(currentNode, succ).metaedge;
+                        return outDegree + (metaedge.numRegularEdges ? 1 : 0);
                     }, 0);
-                    if (numEdgesToCount === 0 && graph.successors(n).length > 0) {
-                        numEdgesToCount = graph.successors(n).length;
+                    if (outDegree === 0 && graph.successors(currentNode).length > 0) {
+                        outDegree = graph.successors(currentNode).length;
                     }
-                    return numEdgesToCount > maxOutDegree;
+                    // Store the in and out degrees of this node to avoid recomputing.
+                    nodeToInDegree[currentNode] = inDegree;
+                    nodeToOutDegree[currentNode] = outDegree;
+                    validNodeCount++;
+                });
+                if (validNodeCount < PARAMS.minNodeCountForExtraction) {
+                    // This graph has few nodes. Do not extract any nodes.
+                    return;
+                }
+                // We only extract if the node has a min in or out degree greater than this.
+                var minUpperBound = PARAMS.minDegreeForExtraction - 1;
+                // Mark for extraction nodes with in-degree > Q3 + (Q3 - Q1).
+                var q3Index = Math.round(validNodeCount * 0.75);
+                var q1Index = Math.round(validNodeCount * 0.25);
+                var sortedByInDegree = Object.keys(nodeToInDegree).sort(function (node0, node1) {
+                    return nodeToInDegree[node0] - nodeToInDegree[node1];
                 });
-                _.each(highOutDegreeNames, function (n) {
-                    makeInExtract(renderNode, n);
+                var inDegreeQ3 = nodeToInDegree[sortedByInDegree[q3Index]];
+                var inDegreeQ1 = nodeToInDegree[sortedByInDegree[q1Index]];
+                var inDegreeUpperBound = inDegreeQ3 + inDegreeQ3 - inDegreeQ1;
+                // Only extract if the upper bound is high enough.
+                inDegreeUpperBound = Math.max(inDegreeUpperBound, minUpperBound);
+                for (var i = validNodeCount - 1; nodeToInDegree[sortedByInDegree[i]] > inDegreeUpperBound; i--) {
+                    // Extract a high in-degree node.
+                    makeInExtract(renderNode, sortedByInDegree[i]);
+                }
+                // Mark for extraction nodes with out-degree > Q3 + (Q3 - Q1) * 4.
+                var sortedByOutDegree = Object.keys(nodeToOutDegree).sort(function (node0, node1) {
+                    return nodeToOutDegree[node0] - nodeToOutDegree[node1];
                 });
+                var outDegreeQ3 = nodeToOutDegree[sortedByOutDegree[q3Index]];
+                var outDegreeQ1 = nodeToOutDegree[sortedByOutDegree[q1Index]];
+                // The upper bound for extracting out-degree nodes is higher than that for
+                // extracting in-degree ones (Note the "* 4") because, in practice, some
+                // graphs look worse with a smaller out-degree bound. For instance, a smaller
+                // out-degree bound removes the convolution nodes from cifar 10 train's graph.
+                var outDegreeUpperBound = outDegreeQ3 + (outDegreeQ3 - outDegreeQ1) * 4;
+                // Only extract if the upper bound is high enough.
+                outDegreeUpperBound = Math.max(outDegreeUpperBound, minUpperBound);
+                for (var i = validNodeCount - 1; nodeToOutDegree[sortedByOutDegree[i]] > outDegreeUpperBound; i--) {
+                    var node = graph.node(sortedByOutDegree[i]);
+                    if (!node || node.isInExtract) {
+                        // This node has already been extracted due to high in-degree. It might
+                        // have been removed from the graph in general (during in-degree
+                        // extraction) due to a lack of neighbors. Do not extract this node twice.
+                        continue;
+                    }
+                    // Extract a high out-degree node that has not already been extracted.
+                    makeOutExtract(renderNode, sortedByOutDegree[i]);
+                }
             }
             /** Remove control edges from nodes that have too many control edges */
             function removeControlEdges(renderNode) {
@@ -9879,15 +10016,7 @@ var tf;
                 if (PARAMS.inExtractTypes) {
                     extractPredefinedSource(renderNode);
                 }
-                // This has to come before extract high out-degree to protect the core part
-                // that output to many places as there are more high-degree sinks than
-                // sources.
-                if (PARAMS.maxInDegree) {
-                    extractHighInDegree(renderNode);
-                }
-                if (PARAMS.maxOutDegree) {
-                    extractHighOutDegree(renderNode);
-                }
+                extractHighInOrOutDegree(renderNode);
                 if (PARAMS.maxControlDegree) {
                     removeControlEdges(renderNode);
                 }
@@ -12386,6 +12515,44 @@ var tf;
                 });
             }
             util.runAsyncTask = runAsyncTask;
+            /**
+             * Asynchronously runs an expensive task that returns a promise. Updates the
+             * tracker's progress after the promise resolves. Returns a new promise that
+             * resolves after the progress is updated.
+             */
+            function runAsyncPromiseTask(msg, incProgressValue, task, tracker) {
+                return new Promise(function (resolve, reject) {
+                    var handleError = function (e) {
+                        // Errors that happen inside asynchronous tasks are
+                        // reported to the tracker using a user-friendly message.
+                        tracker.reportError('Failed ' + msg, e);
+                        reject(e);
+                    };
+                    // Update the progress message to say the current running task.
+                    tracker.setMessage(msg);
+                    // Run the expensive task with a delay that gives enough time for the
+                    // UI to update.
+                    setTimeout(function () {
+                        try {
+                            var start_1 = Date.now();
+                            task()
+                                .then(function (value) {
+                                /* tslint:disable */
+                                console.log(msg, ':', Date.now() - start_1, 'ms');
+                                // Update the progress value.
+                                tracker.updateProgress(incProgressValue);
+                                // Return the result to be used by other tasks.
+                                resolve(value);
+                            })
+                                .catch(handleError);
+                        }
+                        catch (e) {
+                            handleError(e);
+                        }
+                    }, ASYNC_TASK_DELAY);
+                });
+            }
+            util.runAsyncPromiseTask = runAsyncPromiseTask;
             /**
              * Returns a query selector with escaped special characters that are not
              * allowed in a query selector.
@@ -12712,7 +12879,8 @@ var tf;
                     var blob = new Blob([svgXml], { type: 'image/svg+xml;charset=utf-8' });
                     image.src = URL.createObjectURL(blob);
                 };
-                image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgXml);
+                image.src =
+                    'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgXml);
             };
             /**
              * Handles changes in zooming/panning. Should be called from the main svg
@@ -12851,6 +13019,8 @@ Polymer({
 ::content #svg {
   overflow: hidden;
   flex: 1;
+  height: 100%;
+  width: 100%;
 }
 
 ::content #hidden {
@@ -13295,6 +13465,7 @@ Polymer({
 
 .titleContainer {
   position: relative;
+  top: 20px;
 }
 
 .title {
@@ -13313,7 +13484,7 @@ Polymer({
 </style>
 <div class="titleContainer">
   <div id="title" class="title">Main Graph</div>
-  <div id="auxTitle" class="auxTitle">Auxiliary nodes</div>
+  <div id="auxTitle" class="auxTitle">Auxiliary Nodes</div>
 </div>
 <svg id="svg">
   <defs>
@@ -13603,7 +13774,8 @@ Polymer({
     setTimeout(this.fit.bind(this), tf.graph.layout.PARAMS.animation.duration);
   },
   _updateLabels: function(showLabels) {
-    var titleStyle = this.getElementsByClassName('title')[0].style;
+    var mainGraphTitleElement = this.getElementsByClassName('title')[0];
+    var titleStyle = mainGraphTitleElement.style;
     var auxTitleStyle = this.getElementsByClassName('auxTitle')[0].style;
     var core = d3.select("." + tf.graph.scene.Class.Scene.GROUP + ">." +
       tf.graph.scene.Class.Scene.CORE)[0][0];
@@ -13620,6 +13792,12 @@ Polymer({
       titleStyle.left = coreX + 'px';
       if (auxX !== null && auxX !== coreX) {
         auxTitleStyle.display = 'inline';
+
+        // Make sure that the aux title is positioned rightwards enough so as to
+        // prevent overlap with the main graph title.
+        auxX = Math.max(
+            coreX + mainGraphTitleElement.getBoundingClientRect().width, auxX);
+
         auxTitleStyle.left = auxX + 'px';
       } else {
         auxTitleStyle.display = 'none';
@@ -13812,7 +13990,9 @@ paper-button {
 </style>
 <div class="container">
   <div class="vertical">
-    <h2>[[title]]</h2>
+    <template is="dom-if" if="[[title]]">
+      <h2>[[title]]</h2>
+    </template>
     <tf-graph-scene id="scene" class="auto" render-hierarchy="[[renderHierarchy]]" highlighted-node="[[_getVisible(highlightedNode)]]" selected-node="[[selectedNode]]" color-by="[[colorBy]]" progress="[[progress]]"></tf-graph-scene>
   </div>
 </div>
@@ -15953,19 +16133,20 @@ Polymer({
   reload: function() {
     Promise.all([this.backend.graphRuns(), this.backend.runMetadataRuns()])
     .then(function(result) {
-      var runsWithGraph = result[0];
+      var runsWithGraph = result[0].sort(VZ.Sorting.compareTagNames);
       var runToMetadata = result[1];
       var datasets = _.map(runsWithGraph, function(runName) {
         return {
           name: runName,
           path: this.backend.router.graph(runName, tf.graph.LIMIT_ATTR_SIZE,
             tf.graph.LARGE_ATTRS_KEY),
-          runMetadata: runToMetadata[runName] ? _.map(runToMetadata[runName].sort(), function(tag) {
-            return {
-              tag: tag,
-              path: this.backend.router.runMetadata(tag, runName)
-            };
-          }, this) : []
+          runMetadata: runToMetadata[runName] ? _.map(
+            runToMetadata[runName].sort(VZ.Sorting.compareTagNames), function(tag) {
+              return {
+                tag: tag,
+                path: this.backend.router.runMetadata(tag, runName)
+              };
+            }, this) : []
         };
       }, this);
       this.set('_datasets', datasets);
@@ -15977,75 +16158,1540 @@ Polymer({
 });
 })();
 </script>
-</div><dom-module id="tf-tensorboard">
-  <template>
-    <paper-dialog with-backdrop="" id="settings">
-      <h2>Settings</h2>
-      <paper-checkbox id="auto-reload-checkbox" checked="{{autoReloadEnabled}}">
-        Reload data every <span>[[autoReloadIntervalSecs]]</span>s.
-      </paper-checkbox>
-    </paper-dialog>
-    <paper-header-panel>
-      <paper-toolbar id="toolbar">
-        <div id="toolbar-content">
-          <div class="toolbar-title">TensorBoard</div>
-          <paper-tabs selected="{{modeIndex}}" noink="" class="tabs" id="tabs">
-            <template is="dom-repeat" items="[[tabs]]">
-              <paper-tab data-mode="[[item]]">[[item]]</paper-tab>
-            </template>
-          </paper-tabs>
-          <div class="global-actions">
-            <paper-icon-button icon="refresh" on-tap="reload" disabled$="[[_modeIsGraphs(mode)]]" id="reload-button"></paper-icon-button>
-            <paper-icon-button icon="settings" on-tap="openSettings" id="settings-button"></paper-icon-button>
-            <a href="https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/README.md" tabindex="-1">
-              <paper-icon-button icon="help-outline"></paper-icon-button>
-            </a>
-          </div>
-        </div>
-      </paper-toolbar>
+<dom-module id="vz-projector-styles" assetpath="../vz-projector/">
+<template>
+<style>
+:host {
+  --paper-input-container-label: {
+    font-size: 14px;
+  };
+  --paper-input-container-input: {
+    font-size: 14px;
+  };
+  /* TODO: Figure out why this doesn't work */
+  --paper-dropdown-menu-input: {
+    font-size: 14px;
+  };
+}
 
-      <div id="content" class="fit">
-        <content id="injected-overview"></content>
+paper-dropdown-menu paper-item {
+  font-size: 13px;
+}
 
-        <template is="dom-if" if="[[_modeIsEvents(mode)]]">
-          <tf-event-dashboard id="events" backend="[[_backend]]" router="[[router]]"></tf-event-dashboard>
-        </template>
+paper-tooltip {
+  max-width: 200px;
+  --paper-tooltip: {
+    font-size: 12px;
+  };
+}
 
-        <template is="dom-if" if="[[_modeIsImages(mode)]]">
-          <tf-image-dashboard id="images" backend="[[_backend]]"></tf-image-dashboard>
-        </template>
+paper-checkbox {
+  --paper-checkbox-checked-color: #880E4F;
+}
 
-        <template is="dom-if" if="[[_modeIsAudio(mode)]]">
-          <tf-audio-dashboard id="audio" backend="[[_backend]]"></tf-audio-dashboard>
-        </template>
+paper-toggle-button {
+  --paper-toggle-button-checked-bar-color:  #880E4F;
+  --paper-toggle-button-checked-button-color:  #880E4F;
+  --paper-toggle-button-checked-ink-color: #880E4F;
+}
 
-        <template is="dom-if" if="[[_modeIsGraphs(mode)]]">
-          <tf-graph-dashboard id="graphs" backend="[[_backend]]"></tf-graph-dashboard>
-        </template>
+paper-icon-button {
+  border-radius: 50%;
+}
 
-        <template is="dom-if" if="[[_modeIsDistributions(mode)]]">
-          <tf-distribution-dashboard id="distributions" backend="[[_backend]]"></tf-distribution-dashboard>
-        </template>
+paper-icon-button[active] {
+  color: white;
+  background-color: #880E4F;
+}
 
-        <template is="dom-if" if="[[_modeIsHistograms(mode)]]">
-          <tf-histogram-dashboard id="histograms" backend="[[_backend]]"></tf-histogram-dashboard>
-        </template>
-      </div>
-    </paper-header-panel>
+.slider {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  justify-content: space-between;
+}
 
-    <style>
-      :host {
-        height: 100%;
-        display: block;
-        background-color: var(--paper-grey-100);
-      }
+.slider span {
+  width: 35px;
+  text-align: right;
+}
 
-      #toolbar {
-        background-color: var(--tb-toolbar-background-color, --tb-orange-strong);
-        -webkit-font-smoothing: antialiased;
-      }
+.slider label {
+  align-items: center;
+  display: flex;
+}
 
-      .toolbar-title {
+.help-icon {
+  height: 15px;
+  left: 2px;
+  min-width: 15px;
+  min-height: 15px;
+  margin: 0;
+  padding: 0;
+  top: -2px;
+  width: 15px;
+}
+
+.ink-panel {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
+.ink-panel h4 {
+  border-bottom: 1px solid #ddd;
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+}
+
+.ink-panel-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  height: 50px;
+}
+
+.ink-panel-content {
+  display: none;
+  height: 100%;
+}
+
+.ink-panel-content.active {
+  display: block;
+}
+
+.ink-panel-content h3 {
+  font-weight: 500;
+  font-size: 14px;
+  margin-top: 20px;
+  margin-bottom: 5px;
+  text-transform: uppercase;
+}
+
+.ink-panel-header h3 {
+  font-weight: 500;
+  font-size: 14px;
+  margin: 0;
+  padding: 0 24px;
+  text-transform: uppercase;
+}
+
+
+/* - Tabs */
+.ink-tab-group {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  justify-content: space-around;
+}
+
+.ink-tab-group .projection-tab {
+  color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  font-weight: 300;
+  line-height: 49px;
+  padding: 0 12px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.ink-tab-group .projection-tab:hover {
+  color: black;
+}
+
+.ink-tab-group .projection-tab.active {
+  border-bottom: 2px solid black;
+  color: black;
+  font-weight: 500;
+}
+</style>
+</template>
+</dom-module>
+<link rel="import" href="../paper-input/paper-textarea.html">
+<dom-module id="vz-projector-bookmark-panel" assetpath="../vz-projector/">
+<template>
+<style include="vz-projector-styles"></style>
+<style>
+#title {
+  background-color: #fafafa;
+  color: black;
+  font-weight: 500;
+  left: 0;
+  line-height: 60px;
+  padding-left: 24px;
+  position: absolute;
+  width: 276px;
+}
+#bookmark-container {
+  background-color: #fafafa;
+}
+#icon-container {
+  line-height: 60px;
+  position: absolute;
+  right: 0;
+}
+#header {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+#panel {
+  background-color: #fafafa;
+  position: relative;
+  overflow-y: scroll;
+  top: 60px;
+  max-height: 50vh;
+}
+paper-button {
+  border: 1px solid #ccc;
+}
+
+#save-container {
+  text-align: center;
+}
+
+.state-radio {
+  display: table-cell;
+  vertical-align: middle;
+  padding-top: 16px;
+}
+
+.state-label {
+  display: table-cell;
+  vertical-align: middle;
+  top: 14px;
+}
+
+.state-label-input {
+  width: 194px;
+}
+
+.state-clear {
+  display: table-cell;
+  vertical-align: middle;
+  padding-top: 20px;
+}
+#state-file {
+  display: none;
+}
+#no-bookmarks {
+  padding: 0 24px;
+}
+#action-buttons-container .add-icon-button {
+  background-color: #03a9f4;
+  color: white;
+  margin: 0 4px 4px auto;
+  right: 7px;
+  top: -4px;
+}
+.upload-download-icon-button {
+  padding: 0;
+}
+#action-buttons-container {
+  display: flex;
+  margin-left: 34px;
+  margin-top: 6px;
+}
+.ink-fab {
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+paper-textarea {
+  --paper-input-container-input: {
+    font-size: 12px;
+  }
+  --paper-font-caption: {
+    display: none
+  }
+}
+</style>
+
+
+<div id="bookmark-container">
+  <div id="header">
+    <div id="title">
+      BOOKMARKS ([[savedStates.length]])
+      <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
+      <paper-tooltip animation-delay="0" position="top" offset="0">
+        The bookmarks drawer allows you to bookmark a set of views into the
+        projection, saving camera position, selected points, as well as any
+        highlighting you may have. You can then download the file to save it
+        permanently, and later upload it to again view your bookmarks.
+      </paper-tooltip>
+    </div>
+    <div id="icon-container">
+      
+      <paper-icon-button id="expand-more" icon="expand-less" on-tap="_expandMore"></paper-icon-button>
+      <paper-icon-button id="expand-less" style="display: none" icon="expand-more" on-tap="_expandLess"></paper-icon-button>
+    </div>
+  </div>
+  <iron-collapse id="panel">
+    
+    <div id="state-section">
+      <template is="dom-if" if="[[!savedStates.length]]">
+        <p id="no-bookmarks">
+            No bookmarks yet, upload a bookmarks file or add a new bookmark by clicking the "+" below.
+        </p>
+      </template>
+
+      <template is="dom-repeat" items="{{savedStates}}">
+        <div class="state-row">
+          <div class="state-radio">
+            <template is="dom-if" if="{{item.isSelected}}">
+              <paper-icon-button icon="radio-button-checked"></paper-icon-button>
+            </template>
+            <template is="dom-if" if="{{!item.isSelected}}">
+              <paper-icon-button icon="radio-button-unchecked" data-index$="{{index}}" on-tap="_radioButtonHandler"></paper-icon-button>
+            </template>
+          </div>
+          <div class="state-label">
+            <paper-textarea value="[[item.label]]" class="state-label-input" on-keyup="_labelChange" data-index$="[[index]]" autoresizing="">
+          </paper-textarea></div>
+          <div class="state-clear">
+            <paper-icon-button icon="clear" data-index$="{{index}}" on-tap="_clearButtonHandler"></paper-icon-button>
+          </div>
+        </div>
+      </template>
+
+      <div id="action-buttons-container">
+        <paper-icon-button class="upload-download-icon-button" icon="file-download" title="Download bookmarks" on-tap="_downloadFile"></paper-icon-button>
+        <paper-icon-button class="upload-download-icon-button" icon="file-upload" title="Upload bookmarks" on-tap="_uploadFile"></paper-icon-button>
+        <paper-icon-button class="add-icon-button ink-fab" icon="add" title="Add bookmark" on-tap="_addBookmark"></paper-icon-button>
+        <input type="file" id="state-file" name="state-file">
+      </div>
+    </div>
+  </iron-collapse>
+</div>
+
+</template>
+</dom-module>
+<dom-module id="vz-projector-legend" assetpath="../vz-projector/">
+<template>
+<style include="vz-projector-styles"></style>
+<style>
+.item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+
+.shape {
+  width: 10px;
+  height: 10px;
+  margin-right: 10px;
+  margin-top: 5px;
+  border-radius: 50%;
+}
+
+.label {
+  flex-grow: 1;
+}
+
+.gradient {
+  width: 100%;
+  height: 10px;
+}
+
+.gradient-boundaries {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
+
+<template is="dom-repeat" items="[[renderInfo.items]]">
+  <div class="item">
+    <div class="shape" style="background-color: [[item.color]];"></div>
+    <div class="label">[[item.label]]</div>
+    <div class="info" style="color: [[item.color]];">[[item.count]]</div>
+  </div>
+</template>
+
+<template is="dom-if" if="[[renderInfo.thresholds]]">
+  <svg class="gradient">
+    <defs>
+      <linearGradient id="gradient" x1="0%" y1="100%" x2="100%" y2="100%"></linearGradient>
+    </defs>
+    <rect height="10" style="fill: url(&quot;#gradient&quot;);"></rect>
+  </svg>
+  <div class="gradient-boundaries">
+    <div>[[renderInfo.thresholds.0.value]]</div>
+    <div>[[_getLastThreshold(renderInfo.thresholds)]]</div>
+  </div>
+</template>
+
+</template>
+</dom-module><dom-module id="vz-projector-data-panel" assetpath="../vz-projector/">
+<template>
+<style include="vz-projector-styles"></style>
+<style>
+.container {
+  padding: 10px 20px 20px 20px;
+}
+
+input[type=file] {
+  display: none;
+}
+
+.file-name {
+  margin-right: 10px;
+}
+
+.dirs {
+  color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  margin: 15px 0;
+  line-height: 20px;
+}
+
+.dir {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+paper-item {
+  --paper-item-disabled: {
+    border-bottom: 1px solid black;
+    justify-content: center;
+    font-size: 12px;
+    line-height: normal;
+    min-height: 0px;
+  };
+}
+
+.item-details {
+  margin-left: 5px;
+  color: gray;
+  font-size: 12px;
+}
+
+paper-dropdown-menu {
+  width: 100%;
+}
+
+paper-dropdown-menu paper-item {
+  justify-content: space-between;
+}
+
+.title {
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  color: black;
+  display: flex;
+  font-weight: 500;
+  height: 59px;
+  padding-left: 20px;
+}
+
+#upload-buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+#normalize-data-checkbox {
+  margin: 10px 0;
+}
+</style>
+<div class="title">DATA</div>
+<div class="container">
+  
+  <template is="dom-if" if="[[_hasChoices(runNames)]]">
+    <paper-dropdown-menu no-animations="" label="[[_getNumRunsLabel(runNames)]] found">
+      <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedRun}}">
+        <template is="dom-repeat" items="[[runNames]]">
+          <paper-item value="[[item]]" label="[[item]]">
+            [[item]]
+          </paper-item>
+        </template>
+      </paper-listbox>
+    </paper-dropdown-menu>
+  </template>
+
+  <template is="dom-if" if="[[tensorNames]]">
+    
+    <paper-dropdown-menu no-animations="" label="[[_getNumTensorsLabel(tensorNames)]] found">
+      <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedTensor}}">
+        <template is="dom-repeat" items="[[tensorNames]]">
+          <paper-item value="[[item.name]]" label="[[item.name]]">
+            [[item.name]]
+            <span class="item-details">
+              [[item.shape.0]]x[[item.shape.1]]
+            </span>
+          </paper-item>
+        </template>
+      </paper-listbox>
+    </paper-dropdown-menu>
+  </template>
+  
+  <template is="dom-if" if="[[_hasChoices(labelOptions)]]">
+    <paper-dropdown-menu no-animations="" label="Label by">
+      <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedLabelOption}}">
+        <template is="dom-repeat" items="[[labelOptions]]">
+          <paper-item value="[[item]]" label="[[item]]">
+            [[item]]
+          </paper-item>
+        </template>
+      </paper-listbox>
+    </paper-dropdown-menu>
+  </template>
+
+  
+  <template is="dom-if" if="[[_hasChoices(colorOptions)]]">
+    <paper-dropdown-menu id="colorby" no-animations="" label="Color by">
+      <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedColorOptionName}}">
+        <template is="dom-repeat" items="[[colorOptions]]">
+          <paper-item class$="[[getSeparatorClass(item.isSeparator)]]" value="[[item.name]]" label="[[item.name]]" disabled="[[item.isSeparator]]">
+            [[item.name]]
+            <span class="item-details">[[item.desc]]</span>
+          </paper-item>
+        </template>
+      </paper-listbox>
+    </paper-dropdown-menu>
+    <vz-projector-legend render-info="[[colorLegendRenderInfo]]"></vz-projector-legend>
+  </template>
+  <paper-checkbox id="normalize-data-checkbox" checked="{{normalizeData}}">
+    Sphereize data
+    <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
+    <paper-tooltip position="bottom" animation-delay="0" fit-to-visible-bounds="">
+      The data is normalized by shifting each point by the centroid and making
+      it unit norm.
+    </paper-tooltip>
+  </paper-checkbox>
+  
+  <div id="upload-buttons">
+    
+    <div>
+      <button id="upload" title="Upload a TSV file" class="ink-button">Upload data</button>
+      <input type="file" id="file" name="file">
+    </div>
+    
+    <div>
+      <button id="upload-metadata" title="Upload a TSV metadata file" class="ink-button">Upload Metadata</button>
+      <input type="file" id="file-metadata" name="file-metadata">
+    </div>
+  </div>
+    <div class="dirs">
+    <div class="dir">Checkpoint: <span id="checkpoint-file"></span></div>
+    <div class="dir">Metadata: <span id="metadata-file"></span></div>
+  </div>
+</div>
+
+</template>
+</dom-module>
+<dom-module id="vz-projector-input" assetpath="../vz-projector/">
+<template>
+<style include="vz-projector-styles"></style>
+<style>
+.info {
+  color: rgba(0, 0, 0, 0.5);
+  display: block;
+  font-size: 11px;
+}
+
+.toggle {
+  font-size: 12px;
+  height: 21px;
+  margin: 0px;
+  min-width: 0px;
+  min-height: 0px;
+  padding: 0;
+  width: 17px;
+}
+
+.toggle[active] {
+  background-color: #880E4F;
+  color: white;
+}
+</style>
+
+<paper-input label="[[label]]">
+  <div class="slash" prefix="">/</div>
+  <div class="slash" suffix="">/</div>
+  <div suffix="">
+    <paper-button id="regex" toggles="" class="toggle">.*</paper-button>
+  </div>
+</paper-input>
+<paper-tooltip for="regex" position="bottom" animation-delay="0" fit-to-visible-bounds="">
+  Enable/disable regex mode.
+</paper-tooltip>
+<span class="info">[[message]]</span>
+
+
+</template>
+</dom-module><dom-module id="vz-projector-inspector-panel" assetpath="../vz-projector/">
+<style include="vz-projector-styles"></style>
+<style>
+:host {
+   display: flex;
+   flex-direction: column;
+   /* Account for the bookmark pane at the bottom */
+   height: calc(100% - 55px);
+}
+
+.container {
+  display: block;
+  padding: 10px 20px 0 20px;
+}
+
+.buttons {
+  display: flex;
+  height: 60px;
+}
+
+.button {
+  margin-right: 10px;
+  border: none;
+  border-radius: 7px;
+  font-size: 13px;
+  padding: 10px;
+  background: #e3e3e3;
+}
+
+.button:last-child {
+  margin-right: 0;
+}
+
+.nn {
+  display: flex;
+  flex-direction: column;
+}
+
+.nn > * {
+  padding: 0 20px;
+}
+
+.nn-list {
+  overflow-y: auto;
+}
+
+.nn-list .neighbor {
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.nn-list .label-and-value {
+  display: flex;
+  justify-content: space-between;
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nn-list .value {
+  color: #666;
+  float: right;
+  font-weight: 300;
+  margin-left: 8px;
+}
+
+.nn-list .bar {
+  position: relative;
+  border-top: 1px solid rgba(0, 0, 0, 0.15);
+  margin: 2px 0;
+}
+
+.nn-list .bar .fill {
+  position: absolute;
+  top: -1px;
+  border-top: 1px solid white;
+}
+
+.nn-list .tick {
+  position: absolute;
+  top: 0px;
+  height: 3px;
+  border-left: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.nn-list .neighbor-link:hover {
+  cursor: pointer;
+}
+
+.search-by {
+  display: flex;
+}
+
+.search-by vz-projector-input {
+  width: 100%;
+}
+
+.search-by paper-dropdown-menu {
+  margin-left: 10px;
+  width: 100px;
+}
+
+.distance .options {
+  float: right;
+}
+
+.options a {
+  color: #727272;
+  font-size: 13px;
+  margin-left: 12px;
+  text-decoration: none;
+}
+
+.options a.selected {
+  color: #009EFE;
+}
+
+.neighbors {
+  margin-bottom: 30px;
+}
+
+.neighbors-options {
+  margin-top: 6px;
+}
+
+.neighbors-options .option-label, .distance .option-label {
+  color: #727272;
+  margin-right: 2px;
+  width: auto;
+}
+
+.num-neighbors-container {
+  display: inline-block;
+}
+
+#nn-slider {
+  margin: 0 -12px 0 10px;
+}
+
+.euclidian {
+  margin-right: 10px;
+}
+
+.matches-list {
+  padding: 0 20px;
+}
+
+.matches-list .row {
+  border-bottom: 1px solid #ddd;
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  margin: 5px 0;
+  padding: 4px 0;
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+}
+</style>
+<template>
+<div class="container">
+  <div class="buttons">
+    <button class="button reset-filter">Show All Data</button>
+    <button class="button set-filter">Isolate selection</button>
+    <button class="button clear-selection">Clear selection</button>
+  </div>
+  <div class="search-by">
+    <vz-projector-input id="search-box" label="Search"></vz-projector-input>
+    <paper-dropdown-menu no-animations="" label="by">
+      <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{selectedMetadataField}}">
+        <template is="dom-repeat" items="[[metadataFields]]">
+          <paper-item value="[[item]]" label="[[item]]">
+            [[item]]
+          </paper-item>
+        </template>
+      </paper-listbox>
+    </paper-dropdown-menu>
+  </div>
+</div>
+<div class="results">
+  <div class="nn" style="display: none">
+    <div class="neighbors">
+      <div class="neighbors-options">
+        <div class="slider num-nn">
+          <span class="option-label">neighbors</span>
+          <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
+          <paper-tooltip position="bottom" animation-delay="0" fit-to-visible-bounds="">
+            The number of neighbors (in the original space) to show when clicking on a point.
+          </paper-tooltip>
+          <paper-slider id="nn-slider" pin="" min="5" max="1000" value="100"></paper-slider>
+          <span class="nn-count"></span>
+        </div>
+      </div>
+      <div class="distance">
+        <span class="option-label">distance</span>
+        <div class="options">
+          <a class="selected cosine" href="javascript:void(0);">COSINE</a>
+          <a class="euclidean" href="javascript:void(0);">EUCLIDIAN</a>
+        </div>
+      </div>
+    </div>
+    <p>Nearest points in the original space:
+    </p><div class="nn-list"></div>
+  </div>
+  <div class="matches-list" style="display: none">
+    <div class="list"></div>
+    <div class="limit-msg">Showing only the first 100 results...</div>
+  </div>
+</div>
+
+</template>
+</dom-module>
+<dom-module id="vz-projector-metadata-card" assetpath="../vz-projector/">
+<template>
+<style>
+#metadata-card {
+  background-color: rgba(255,255,255,0.9);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+      0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  width: 280px;
+}
+
+#header {
+  background: #e9e9e9;
+}
+
+#icon-container {
+  position: absolute;
+  right: 0;
+  top: 4px;
+}
+
+#metadata-label {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 12px 12px 8px;
+  width: 230px;
+}
+
+#metadata-table {
+  display: table;
+  padding: 8px 12px 4px;
+}
+
+.metadata-row {
+  display: table-row;
+}
+
+.metadata-key {
+  font-weight: bold;
+}
+
+.metadata-key, .metadata-value {
+  display: table-cell;
+  font-size: 12px;
+  padding: 3px 3px;
+}
+</style>
+
+<template is="dom-if" if="[[hasMetadata]]">
+  <div id="metadata-card">
+    <div id="icon-container">
+      <paper-icon-button id="expand-more" style="display: none" icon="expand-more" on-tap="_expandMore"></paper-icon-button>
+      <paper-icon-button id="expand-less" on-tap="_expandLess" icon="expand-less"></paper-icon-button>
+    </div>
+    <div id="header">
+      <div id="metadata-label">[[label]]</div>
+    </div>
+    <iron-collapse id="metadata-container" opened="">
+      <div id="metadata-table">
+        <template is="dom-repeat" items="[[metadata]]">
+          <div class="metadata-row">
+            <div class="metadata-key">[[item.key]]</div>
+            <div class="metadata-value">[[item.value]]</div>
+          </div>
+        </template>
+      </div>
+    </iron-collapse>
+  </div>
+</template>
+</template>
+</dom-module>
+<dom-module id="vz-projector-projections-panel" assetpath="../vz-projector/">
+<template>
+<style include="vz-projector-styles"></style>
+<style>
+:host {
+  transition: height 0.2s;
+}
+
+.ink-button, ::shadow .ink-button {
+  border: none;
+  border-radius: 2px;
+  font-size: 13px;
+  padding: 10px;
+  min-width: 100px;
+  flex-shrink: 0;
+  background: #e3e3e3;
+}
+
+.ink-panel-buttons {
+  margin-bottom: 10px;
+}
+
+.two-way-toggle {
+  display: flex;
+  flex-direction: row;
+}
+
+.two-way-toggle span {
+  padding-right: 7px;
+}
+
+.has-border {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.toggle {
+  min-width: 0px;
+  font-size: 12px;
+  width: 17px;
+  min-height: 0px;
+  height: 21px;
+  padding: 0;
+  margin: 0px;
+}
+
+.toggle[active] {
+  background-color: #880E4F;
+  color: white;
+}
+
+.two-columns {
+  display:flex;
+  justify-content: space-between;
+}
+
+.two-columns > :first-child {
+  margin-right: 15px;
+}
+
+.two-columns > div {
+  width: 50%;
+}
+
+.dropdown-item {
+  justify-content: space-between;
+}
+
+#z-container {
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+
+#z-checkbox {
+  margin: 27px 0 0 5px;
+  width: 18px;
+}
+
+#z-dropdown {
+  flex-grow: 1;
+}
+
+.notice {
+  color: #880E4F;
+}
+
+.container {
+  padding: 20px;
+}
+
+.book-icon {
+  height: 20px;
+  color: rgba(0, 0, 0, 0.7);
+}
+</style>
+<div id="main">
+  <div class="ink-panel-header">
+    <div class="ink-tab-group">
+
+      <div data-tab="tsne" id="tsne-tab" class="ink-tab projection-tab">t-SNE</div>
+      <paper-tooltip for="tsne-tab" position="bottom" animation-delay="0" fit-to-visible-bounds="">
+        t-distributed stochastic neighbor embedding
+      </paper-tooltip>
+
+      <div data-tab="pca" id="pca-tab" class="ink-tab projection-tab">PCA</div>
+      <paper-tooltip for="pca-tab" position="bottom" animation-delay="0" fit-to-visible-bounds="">
+        Principal component analysis
+      </paper-tooltip>
+
+      <div data-tab="custom" id="custom-tab" class="ink-tab projection-tab" title="Linear projection of two custom vectors">Custom</div>
+      <paper-tooltip for="custom-tab" position="bottom" animation-delay="0" fit-to-visible-bounds="">
+        Search for two vectors upon which to project all points.
+      </paper-tooltip>
+
+    </div>
+  </div>
+  <div class="container">
+    
+    <div data-panel="tsne" class="ink-panel-content">
+      <div class="slider">
+        <label>Dimension</label>
+        <div class="two-way-toggle">
+          <span>2D</span>
+          <paper-toggle-button id="tsne-toggle" checked="{{tSNEis3d}}">3D</paper-toggle-button>
+        </div>
+      </div>
+      <div class="slider tsne-perplexity">
+        <label>
+          Perplexity
+          <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
+          <paper-tooltip position="right" animation-delay="0" fit-to-visible-bounds="">
+            The most appropriate perplexity value depends on the density of the
+            data. Loosely speaking, a larger / denser dataset
+            requires a larger perplexity. Typical values for perplexity range
+            between 5 and 50.
+          </paper-tooltip>
+        </label>
+        <paper-slider id="perplexity-slider" pin="" min="2" max="100" value="30"></paper-slider>
+        <span></span>
+      </div>
+      <div class="slider tsne-learning-rate">
+        <label>
+          Learning rate
+          <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
+          <paper-tooltip position="right" animation-delay="0" fit-to-visible-bounds="">
+            The ideal learning rate often depends on the size of the data,
+            with smaller datasets requiring smaller learning rates.
+          </paper-tooltip>
+        </label>
+        <paper-slider id="learning-rate-slider" snaps="" min="-3" max="2" step="1" value="1" max-markers="6">
+        </paper-slider>
+        <span></span>
+      </div>
+      <p>
+        <button class="run-tsne ink-button" title="Re-run t-SNE">Re-run</button>
+        <button class="stop-tsne ink-button" title="Stop t-SNE">Stop</button>
+      </p>
+      <p>Iteration: <span class="run-tsne-iter">0</span></p>
+      <p id="tsne-sampling" class="notice">
+        For fast results, the data will be sampled down to [[getTsneSampleSize()]] points.
+      </p>
+      <p>
+        <iron-icon icon="book" class="book-icon"></iron-icon>
+        <a target="_blank" href="http://distill.pub/2016/misread-tsne/">
+          How to use t-SNE effectively.
+        </a>
+      </p>
+    </div>
+    
+    <div data-panel="pca" class="ink-panel-content">
+      <div class="two-columns">
+        <div> 
+          <paper-dropdown-menu style="width: 100%" vertical-align="bottom" no-animations="" label="X">
+            <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{pcaX}}">
+              <template is="dom-repeat" items="[[pcaComponents]]">
+                <paper-item class="dropdown-item" value="[[item]]" label="Component #[[_addOne(item)]]">
+                  Component #[[_addOne(item)]]
+                </paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+          <paper-dropdown-menu no-animations="" vertical-align="bottom" label="Z" disabled="[[!hasPcaZ]]" id="z-dropdown">
+            <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{pcaZ}}">
+              <template is="dom-repeat" items="[[pcaComponents]]">
+                <paper-item class="dropdown-item" value="[[item]]" label="Component #[[_addOne(item)]]">
+                  Component #[[_addOne(item)]]
+                </paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </div>
+        <div> 
+          <paper-dropdown-menu style="width: 100%" vertical-align="bottom" no-animations="" label="Y">
+            <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{pcaY}}">
+              <template is="dom-repeat" items="[[pcaComponents]]">
+                <paper-item class="dropdown-item" value="[[item]]" label="Component #[[_addOne(item)]]">
+                  Component #[[_addOne(item)]]
+                </paper-item>
+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
+          <paper-checkbox id="z-checkbox" checked="{{pcaIs3d}}"></paper-checkbox>
+        </div>
+      </div>
+      <p id="pca-sampling" class="notice">
+        PCA is approximate.
+        <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
+      </p>
+      <paper-tooltip for="pca-sampling" position="bottom" animation-delay="0" fit-to-visible-bounds="">
+        For fast results, the data was randomly projected down to [[getPcaSampledDim()]] dimensions.
+      </paper-tooltip>
+    </div>
+    
+    <div data-panel="custom" class="ink-panel-content">
+      <paper-dropdown-menu style="width: 100%" no-animations="" label="Search by">
+        <paper-listbox attr-for-selected="value" class="dropdown-content" selected="{{customSelectedSearchByMetadataOption}}">
+          <template is="dom-repeat" items="[[searchByMetadataOptions]]">
+            <paper-item class="dropdown-item" value="[[item]]" label="[[item]]">
+              [[item]]
+            </paper-item>
+          </template>
+        </paper-listbox>
+      </paper-dropdown-menu>
+      <div class="two-columns">
+        <vz-projector-input id="xLeft" label="Left"></vz-projector-input>
+        <vz-projector-input id="xRight" label="Right"></vz-projector-input>
+      </div>
+      <div class="two-columns">
+        <vz-projector-input id="yUp" label="Up"></vz-projector-input>
+        <vz-projector-input id="yDown" label="Down"></vz-projector-input>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+</dom-module>
+<link rel="import" href="../paper-listbox/paper-listbox.html">
+<link rel="import" href="../iron-icons/image-icons.html">
+<dom-module id="vz-projector" assetpath="../vz-projector/">
+<template>
+<style include="vz-projector-styles"></style>
+<style>
+:host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+#container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Main */
+
+#main {
+  position: relative;
+  flex-grow: 2;
+}
+
+#main .stage {
+  position: relative;
+  flex-grow: 2;
+}
+
+#scatter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+#left-pane {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 312px;
+  width: 312px;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fafafa;
+}
+
+#right-pane {
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fafafa;
+  display: flex;
+  height: 100%;
+  min-width: 300px;
+  width: 300px;
+}
+
+.file-name {
+  margin-right: 5px;
+}
+
+.control input[type=text]:focus {
+  outline: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 1);
+}
+
+.control {
+  display: inline-block;
+  width: 45%;
+  vertical-align: top;
+  margin-right: 10px;
+  overflow-x: hidden;
+}
+
+.control.last {
+  margin-right: 0;
+}
+
+#wrapper-notify-msg {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+#notify-msgs {
+  display: block;
+}
+
+.notify-msg {
+  backface-visibility: hidden;
+  font-weight: 500;
+  margin: 0;
+  opacity: 1;
+  padding: 0;
+  transition: opacity 0.3s ease-out, height 0.3s ease-out;
+}
+
+#warning-msg {
+  display: none;
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  padding: 5px;
+  font-weight: 500;
+  color: black;
+  background-color: #ffb3b6;
+  border: 1px solid black;
+}
+
+.brush .extent {
+  stroke: #fff;
+  fill-opacity: .125;
+  shape-rendering: crispEdges;
+}
+
+.origin text {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.origin line {
+  stroke: black;
+  stroke-opacity: 0.2;
+}
+
+/* Ink Framework */
+
+/* - Buttons */
+.ink-button, ::shadow .ink-button {
+  border: none;
+  border-radius: 2px;
+  font-size: 13px;
+  padding: 10px;
+  min-width: 100px;
+  flex-shrink: 0;
+  background: #e3e3e3;
+}
+
+.status-bar-panel {
+  display: flex;
+  align-items: center;
+}
+
+.status-bar-entry {
+  border-left: 1px solid rgba(0, 0, 0, 0.5);
+  margin-left: 5px;
+  padding-left: 5px;
+}
+
+/* - Menubar */
+
+.ink-panel-menubar {
+  align-items: center;
+  position: relative;
+  height: 60px;
+  border-bottom: solid 1px #eee;
+  padding: 0 24px;
+  display: flex;
+}
+
+.ink-panel-menubar .ink-fabs {
+  position: absolute;
+  right: 12px;
+  top: 40px;
+  z-index: 1;
+}
+
+#bookmark-panel {
+  bottom: 0;
+  position: absolute;
+  width: 300px;
+}
+#bookmark-panel-container {
+  bottom: 60px;
+  position: absolute;
+}
+
+.ink-fab {
+  margin-left: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.02);
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+#metadata-card {
+  position: absolute;
+  right: 5px;
+  top: 25px;
+}
+
+#help-3d-icon {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+
+#help3dDialog .main {
+  margin: 0;
+  padding: 20px;
+}
+
+#help3dDialog .note {
+  margin-top: 25px;
+  font-size: 11px;
+  text-align: right;
+}
+
+#help3dDialog h3 {
+  margin-top: 20px;
+  margin-bottom: 5px;
+}
+
+#help3dDialog h3:first-child {
+  margin-top: 0;
+}
+
+#data-panel {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+}
+</style>
+<paper-dialog id="wrapper-notify-msg" modal="">
+  <div id="notify-msgs"></div>
+</paper-dialog>
+<div id="warning-msg"></div>
+<div id="container">
+  <div id="left-pane" class="ink-panel">
+    <vz-projector-data-panel id="data-panel"></vz-projector-data-panel>
+    <vz-projector-projections-panel id="projections-panel"></vz-projector-projections-panel>
+  </div>
+  <div id="main" class="ink-panel">
+    <div class="ink-panel-menubar">
+      <paper-icon-button id="selectMode" alt="Bounding box selection" toggles="" icon="image:photo-size-select-small"></paper-icon-button>
+      <paper-tooltip for="selectMode" position="bottom" animation-delay="0" fit-to-visible-bounds="">Bounding box selection</paper-tooltip>
+
+      <paper-icon-button id="nightDayMode" alt="Enable/disable night mode" toggles="" icon="image:brightness-2"></paper-icon-button>
+      <paper-tooltip for="nightDayMode" position="bottom" animation-delay="0" fit-to-visible-bounds="">Enable/disable night mode</paper-tooltip>
+
+      <paper-icon-button id="labels3DMode" alt="Enable/disable 3D labels mode" toggles="" icon="font-download"></paper-icon-button>
+      <paper-tooltip for="labels3DMode" position="bottom" animation-delay="0" fit-to-visible-bounds="">Enable/disable 3D labels mode</paper-tooltip>
+      <div class="status-bar-panel">
+        <div class="status-bar-entry">Points: <span class="numDataPoints">Loading...</span></div>
+        <div class="status-bar-entry">Dimension: <span class="dim">Loading...</span></div>
+        <div id="status-bar" class="status-bar-entry" style="display: none;"></div>
+      </div>
+      <div class="ink-fabs">
+        <paper-icon-button id="reset-zoom" class="ink-fab" alt="Reset zoom to fit all points" icon="home"></paper-icon-button>
+        <paper-tooltip for="reset-zoom" position="left" animation-delay="0">Reset zoom to fit all points</paper-tooltip>
+      </div>
+    </div>
+    <div class="stage">
+      <div id="scatter"></div>
+      <vz-projector-metadata-card id="metadata-card"></vz-projector-metadata-card>
+      <paper-icon-button raised="" onclick="help3dDialog.open()" icon="help-outline" id="help-3d-icon"></paper-icon-button>
+      <paper-tooltip animation-delay="0" for="help-3d-icon">Help with interaction controls.</paper-tooltip>
+      <paper-dialog id="help3dDialog" with-backdrop="">
+        <div class="main" dialog-confirm="" autofocus="">
+          <h3>3D controls</h3>
+            <b>Rotate</b> Mouse left click.<br>
+            <b>Pan</b> Mouse right click.<br>
+            <b>Zoom</b> Mouse wheel.<br>
+            Holding <b>ctrl</b> reverses the mouse clicks.
+          <h3>2D controls</h3>
+            <b>Pan</b> Mouse left click.<br>
+            <b>Zoom</b> Mouse wheel.
+          <div class="note"> Click anywhere to dismiss.</div>
+        </div>
+      </paper-dialog>
+    </div>
+  </div>
+  <div id="right-pane" class="ink-panel">
+    <div class="ink-panel-content active">
+      <vz-projector-inspector-panel id="inspector-panel"></vz-projector-inspector-panel>
+    </div>
+    <div id="bookmark-panel-container">
+      <vz-projector-bookmark-panel id="bookmark-panel"></vz-projector-bookmark-panel>
+    </div>
+  </div>
+</div>
+
+</template> 
+</dom-module>
+<dom-module id="vz-projector-dashboard" assetpath="../vz-projector/">
+<template>
+  <tf-no-data-warning data-type="projector" show-warning="[[dataNotFound]]"></tf-no-data-warning>
+  <template is="dom-if" if="[[!dataNotFound]]">
+    <vz-projector id="projector" route-prefix="[[routePrefix]]" serving-mode="server"></vz-projector>
+  </template>
+</template>
+<script>
+(function() {
+Polymer({
+  is: 'vz-projector-dashboard',
+  properties: {
+    dataNotFound: Boolean,
+    routePrefix: String
+  },
+  ready() {
+    var self = this;
+    d3.json(this.routePrefix + '/runs', function(err, runs) {
+      self.dataNotFound = (runs.length === 0);
+    });
+  }
+});
+})();
+</script>
+</dom-module>
+<script>/* Copyright 2015 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+var TF;
+(function (TF) {
+    var TensorBoard;
+    (function (TensorBoard) {
+        TensorBoard.AUTORELOAD_LOCALSTORAGE_KEY = 'TF.TensorBoard.autoReloadEnabled';
+        var getAutoReloadFromLocalStorage = function () {
+            var val = window.localStorage.getItem(TensorBoard.AUTORELOAD_LOCALSTORAGE_KEY);
+            return val === 'true' || val == null; // defaults to true
+        };
+        TensorBoard.AutoReloadBehavior = {
+            properties: {
+                autoReloadEnabled: {
+                    type: Boolean,
+                    observer: '_autoReloadObserver',
+                    value: getAutoReloadFromLocalStorage,
+                },
+                _autoReloadId: {
+                    type: Number,
+                },
+                autoReloadIntervalSecs: {
+                    type: Number,
+                    value: 120,
+                },
+            },
+            detached: function () { window.clearTimeout(this._autoReloadId); },
+            _autoReloadObserver: function (autoReload) {
+                window.localStorage.setItem(TensorBoard.AUTORELOAD_LOCALSTORAGE_KEY, autoReload);
+                if (autoReload) {
+                    var _this = this;
+                    this._autoReloadId = window.setTimeout(this._doAutoReload.bind(this), this.autoReloadIntervalSecs * 1000);
+                }
+                else {
+                    window.clearTimeout(this._autoReloadId);
+                }
+            },
+            _doAutoReload: function () {
+                if (this.reload == null) {
+                    throw new Error('AutoReloadBehavior requires a reload method');
+                }
+                this.reload();
+                this._autoReloadId = window.setTimeout(this._doAutoReload.bind(this), this.autoReloadIntervalSecs * 1000);
+            }
+        };
+    })(TensorBoard = TF.TensorBoard || (TF.TensorBoard = {}));
+})(TF || (TF = {}));
+</script></div><dom-module id="tf-tensorboard">
+  <template>
+    <paper-dialog with-backdrop="" id="settings">
+      <h2>Settings</h2>
+      <paper-checkbox id="auto-reload-checkbox" checked="{{autoReloadEnabled}}">
+        Reload data every <span>[[autoReloadIntervalSecs]]</span>s.
+      </paper-checkbox>
+    </paper-dialog>
+    <paper-header-panel>
+      <paper-toolbar id="toolbar">
+        <div id="toolbar-content">
+          <div class="toolbar-title">TensorBoard</div>
+          <paper-tabs selected="{{modeIndex}}" noink="" class="tabs" id="tabs">
+            <template is="dom-repeat" items="[[tabs]]">
+              <paper-tab data-mode="[[item]]">[[item]]</paper-tab>
+            </template>
+          </paper-tabs>
+          <div class="global-actions">
+            <paper-icon-button icon="refresh" on-tap="reload" disabled$="[[_modeIsGraphs(mode)]]" id="reload-button"></paper-icon-button>
+            <paper-icon-button icon="settings" on-tap="openSettings" id="settings-button"></paper-icon-button>
+            <a href="https://github.com/tensorflow/tensorflow/blob/master/tensorflow/tensorboard/README.md" tabindex="-1">
+              <paper-icon-button icon="help-outline"></paper-icon-button>
+            </a>
+          </div>
+        </div>
+      </paper-toolbar>
+
+      <div id="content" class="fit">
+        <content id="injected-overview"></content>
+
+        <template is="dom-if" if="[[_modeIsScalars(mode)]]">
+          <tf-scalar-dashboard id="scalars" backend="[[_backend]]" router="[[router]]"></tf-scalar-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsImages(mode)]]">
+          <tf-image-dashboard id="images" backend="[[_backend]]"></tf-image-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsAudio(mode)]]">
+          <tf-audio-dashboard id="audio" backend="[[_backend]]"></tf-audio-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsGraphs(mode)]]">
+          <tf-graph-dashboard id="graphs" backend="[[_backend]]"></tf-graph-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsDistributions(mode)]]">
+          <tf-distribution-dashboard id="distributions" backend="[[_backend]]"></tf-distribution-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsHistograms(mode)]]">
+          <tf-histogram-dashboard id="histograms" backend="[[_backend]]"></tf-histogram-dashboard>
+        </template>
+
+        <template is="dom-if" if="[[_modeIsEmbeddings(mode)]]">
+          <vz-projector-dashboard id="projector" route-prefix="/data/plugin/projector">
+          </vz-projector-dashboard>
+        </template>
+      </div>
+    </paper-header-panel>
+
+    <style>
+      :host {
+        height: 100%;
+        display: block;
+        background-color: var(--paper-grey-100);
+      }
+
+      #toolbar {
+        background-color: var(--tb-toolbar-background-color, --tb-orange-strong);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .toolbar-title {
         font-size: 20px;
         margin-left: 10px;
         text-rendering: optimizeLegibility;
@@ -16055,154 +17701,6325 @@ Polymer({
         display: var(--tb-toolbar-title-display, block);
       }
 
-      .tabs {
-        flex-grow: 1;
-        text-transform: uppercase;
-        height: 100%;
-      }
+      .tabs {
+        flex-grow: 1;
+        text-transform: uppercase;
+        height: 100%;
+      }
+
+      paper-tabs {
+        --paper-tabs-selection-bar-color: white;
+      }
+
+      .global-actions {
+        flex-grow: 2;
+        display: inline-flex; /* Ensure that icons stay aligned */
+        justify-content: flex-end;
+        text-align: right;
+        color: white;
+      }
+
+      .global-actions a {
+        color: white;
+      }
+
+      #toolbar-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      #content {
+        height: 100%;
+      }
+
+      [disabled] {
+        opacity: 0.2;
+        color: white;
+      }
+
+    </style>
+  </template>
+  <script>
+    Polymer({
+      is: "tf-tensorboard",
+      behaviors: [TF.TensorBoard.AutoReloadBehavior],
+      properties: {
+        router: {
+          type: Object,
+          value: function() {
+            return TF.Backend.router();
+          },
+        },
+        _backend: {
+          type: Object,
+          computed: "_makeBackend(router, demoDir)",
+        },
+        // Which tab is selected (scalars, graph, images etc).
+        mode: {
+          type: String,
+          computed: '_getModeFromIndex(modeIndex)',
+          notify: true,
+        },
+        tabs: {
+          type: Array,
+          readOnly: true,
+          value: TF.Globals.TABS,
+        },
+        // If this is set to a string, TensorBoard will switch to "demo mode"
+        // and attempt to load serialized json data from that directory. You can
+        // generate conformant json using
+        // tensorboard/scripts/serialize_tensorboard.py
+        demoDir: {
+          type: String,
+          value: null,
+        },
+        // Set this to true to store state in URI hash. Should be true for all non-test purposes.
+        useHash: {
+          type: Boolean,
+          value: false,
+        },
+      },
+      _getModeFromIndex: function(modeIndex) {
+        var mode = this.tabs[modeIndex];
+        TF.URIStorage.setString(TF.URIStorage.TAB, mode);
+        return mode;
+      },
+      _makeBackend: function(router, demoDir) {
+        // use the demoDir if it is set, otherwise use the provided router
+        if (demoDir != null) {
+          router = TF.Backend.router(demoDir, true);
+        }
+        return new TF.Backend.Backend(router);
+      },
+      _modeIsScalars: function(mode) {
+        return mode === "scalars";
+      },
+      _modeIsImages: function(mode) {
+        return mode === "images";
+      },
+      _modeIsAudio: function(mode) {
+        return mode === "audio";
+      },
+      _modeIsGraphs: function(mode) {
+        return mode === "graphs";
+      },
+      _modeIsEmbeddings: function(mode) {
+        return mode === "embeddings";
+      },
+      _modeIsDistributions: function(mode) {
+        return mode === "distributions";
+      },
+      _modeIsHistograms: function(mode) {
+        return mode === "histograms";
+      },
+      selectedDashboard: function() {
+        var dashboard = this.$$("#" + this.mode);
+        if (dashboard == null) {
+          throw new Error(`Unable to find dashboard for mode: ${this.mode}`);
+        }
+        return dashboard;
+      },
+      ready: function() {
+        TF.Globals.USE_HASH = this.useHash;
+
+        this._getModeFromHash();
+        window.addEventListener('hashchange', function() {
+          this._getModeFromHash();
+        }.bind(this));
+      },
+      _getModeFromHash: function() {
+        var tabName = TF.URIStorage.getString(TF.URIStorage.TAB);
+        var modeIndex = this.tabs.indexOf(tabName);
+        if (modeIndex == -1 && this.modeIndex == null) {
+          // Select the first tab as default.
+          this.set('modeIndex', 0);
+        }
+        if (modeIndex != -1 && modeIndex != this.modeIndex) {
+          this.set('modeIndex', modeIndex);
+        }
+      },
+      reload: function() {
+        if (this.mode === "graphs" || this.mode === "embeddings") {
+          return;
+        }
+        this.selectedDashboard().reload();
+      },
+      openSettings: function() {
+        this.$.settings.open();
+      },
+    });
+  </script>
+  
+  <script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+/**
+ * This is a fork of the Karpathy's TSNE.js (original license below).
+ * This fork implements Barnes-Hut approximation and runs in O(NlogN)
+ * time, as opposed to the Karpathy's O(N^2) version.
+ *
+ * @author smilkov@google.com (Daniel Smilkov)
+ */
+/**
+ * The MIT License (MIT)
+ * Copyright (c) 2015 Andrej Karpathy
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var sptree_1 = require('./sptree');
+/**
+ * Barnes-hut approximation level. Higher means more approximation and faster
+ * results. Recommended value mentioned in the paper is 0.8.
+ */
+var THETA = 0.8;
+// Variables used for memorizing the second random number since running
+// gaussRandom() generates two random numbers at the cost of 1 atomic
+// computation. This optimization results in 2X speed-up of the generator.
+var return_v = false;
+var v_val = 0.0;
+/** Returns the square euclidean distance between two vectors. */
+function dist2(a, b) {
+    if (a.length !== b.length) {
+        throw new Error('Vectors a and b must be of same length');
+    }
+    var result = 0;
+    for (var i = 0; i < a.length; ++i) {
+        var diff = a[i] - b[i];
+        result += diff * diff;
+    }
+    return result;
+}
+exports.dist2 = dist2;
+/** Returns the square euclidean distance between two 2D points. */
+function dist2_2D(a, b) {
+    var dX = a[0] - b[0];
+    var dY = a[1] - b[1];
+    return dX * dX + dY * dY;
+}
+exports.dist2_2D = dist2_2D;
+/** Returns the square euclidean distance between two 3D points. */
+function dist2_3D(a, b) {
+    var dX = a[0] - b[0];
+    var dY = a[1] - b[1];
+    var dZ = a[2] - b[2];
+    return dX * dX + dY * dY + dZ * dZ;
+}
+exports.dist2_3D = dist2_3D;
+function gaussRandom(rng) {
+    if (return_v) {
+        return_v = false;
+        return v_val;
+    }
+    var u = 2 * rng() - 1;
+    var v = 2 * rng() - 1;
+    var r = u * u + v * v;
+    if (r === 0 || r > 1) {
+        return gaussRandom(rng);
+    }
+    var c = Math.sqrt(-2 * Math.log(r) / r);
+    v_val = v * c; // cache this for next function call for efficiency
+    return_v = true;
+    return u * c;
+}
+;
+// return random normal number
+function randn(rng, mu, std) {
+    return mu + gaussRandom(rng) * std;
+}
+;
+// utilitity that creates contiguous vector of zeros of size n
+function zeros(n) {
+    return new Float64Array(n);
+}
+;
+// utility that returns a matrix filled with random numbers
+// generated by the provided generator.
+function randnMatrix(n, d, rng) {
+    var nd = n * d;
+    var x = zeros(nd);
+    for (var i = 0; i < nd; ++i) {
+        x[i] = randn(rng, 0.0, 1E-4);
+    }
+    return x;
+}
+;
+// utility that returns a matrix filled with the provided value.
+function arrayofs(n, d, val) {
+    var x = [];
+    for (var i = 0; i < n; ++i) {
+        x.push(d === 3 ? [val, val, val] : [val, val]);
+    }
+    return x;
+}
+;
+// compute (p_{i|j} + p_{j|i})/(2n)
+function nearest2P(nearest, perplexity, tol) {
+    var N = nearest.length;
+    var Htarget = Math.log(perplexity); // target entropy of distribution
+    var P = zeros(N * N); // temporary probability matrix
+    var K = nearest[0].length;
+    var pRow = new Array(K); // pij[].
+    for (var i = 0; i < N; ++i) {
+        var neighbors = nearest[i];
+        var betaMin = -Infinity;
+        var betaMax = Infinity;
+        var beta = 1; // initial value of precision
+        var maxTries = 50;
+        // perform binary search to find a suitable precision beta
+        // so that the entropy of the distribution is appropriate
+        var numTries = 0;
+        while (true) {
+            // compute entropy and kernel row with beta precision
+            var psum = 0.0;
+            for (var k = 0; k < neighbors.length; ++k) {
+                var neighbor = neighbors[k];
+                var pij = (i === neighbor.index) ? 0 : Math.exp(-neighbor.dist * beta);
+                pRow[k] = pij;
+                psum += pij;
+            }
+            // normalize p and compute entropy
+            var Hhere = 0.0;
+            for (var k = 0; k < pRow.length; ++k) {
+                pRow[k] /= psum;
+                var pij = pRow[k];
+                if (pij > 1E-7) {
+                    Hhere -= pij * Math.log(pij);
+                }
+                ;
+            }
+            // adjust beta based on result
+            if (Hhere > Htarget) {
+                // entropy was too high (distribution too diffuse)
+                // so we need to increase the precision for more peaky distribution
+                betaMin = beta; // move up the bounds
+                if (betaMax === Infinity) {
+                    beta = beta * 2;
+                }
+                else {
+                    beta = (beta + betaMax) / 2;
+                }
+            }
+            else {
+                // converse case. make distrubtion less peaky
+                betaMax = beta;
+                if (betaMin === -Infinity) {
+                    beta = beta / 2;
+                }
+                else {
+                    beta = (beta + betaMin) / 2;
+                }
+            }
+            numTries++;
+            // stopping conditions: too many tries or got a good precision
+            if (numTries >= maxTries || Math.abs(Hhere - Htarget) < tol) {
+                break;
+            }
+        }
+        // copy over the final prow to P at row i
+        for (var k = 0; k < pRow.length; ++k) {
+            var pij = pRow[k];
+            var j = neighbors[k].index;
+            P[i * N + j] = pij;
+        }
+    } // end loop over examples i
+    // symmetrize P and normalize it to sum to 1 over all ij
+    var N2 = N * 2;
+    for (var i = 0; i < N; ++i) {
+        for (var j = i + 1; j < N; ++j) {
+            var i_j = i * N + j;
+            var j_i = j * N + i;
+            var value = (P[i_j] + P[j_i]) / N2;
+            P[i_j] = value;
+            P[j_i] = value;
+        }
+    }
+    return P;
+}
+;
+// helper function
+function sign(x) {
+    return x > 0 ? 1 : x < 0 ? -1 : 0;
+}
+function computeForce_2d(force, mult, pointA, pointB) {
+    force[0] += mult * (pointA[0] - pointB[0]);
+    force[1] += mult * (pointA[1] - pointB[1]);
+}
+function computeForce_3d(force, mult, pointA, pointB) {
+    force[0] += mult * (pointA[0] - pointB[0]);
+    force[1] += mult * (pointA[1] - pointB[1]);
+    force[2] += mult * (pointA[2] - pointB[2]);
+}
+var TSNE = (function () {
+    function TSNE(opt) {
+        this.iter = 0;
+        opt = opt || { dim: 2 };
+        this.perplexity = opt.perplexity || 30;
+        this.epsilon = opt.epsilon || 10;
+        this.rng = opt.rng || Math.random;
+        this.dim = opt.dim;
+        if (opt.dim === 2) {
+            this.dist2 = dist2_2D;
+            this.computeForce = computeForce_2d;
+        }
+        else if (opt.dim === 3) {
+            this.dist2 = dist2_3D;
+            this.computeForce = computeForce_3d;
+        }
+        else {
+            throw new Error('Only 2D and 3D is supported');
+        }
+    }
+    // this function takes a fattened distance matrix and creates
+    // matrix P from them.
+    // D is assumed to be provided as an array of size N^2.
+    TSNE.prototype.initDataDist = function (nearest) {
+        var N = nearest.length;
+        this.nearest = nearest;
+        this.P = nearest2P(nearest, this.perplexity, 1E-4);
+        this.N = N;
+        this.initSolution(); // refresh this
+    };
+    // (re)initializes the solution to random
+    TSNE.prototype.initSolution = function () {
+        // generate random solution to t-SNE
+        this.Y = randnMatrix(this.N, this.dim, this.rng); // the solution
+        this.gains = arrayofs(this.N, this.dim, 1.0); // step gains
+        // to accelerate progress in unchanging directions
+        this.ystep = arrayofs(this.N, this.dim, 0.0); // momentum accumulator
+        this.iter = 0;
+    };
+    // return pointer to current solution
+    TSNE.prototype.getSolution = function () { return this.Y; };
+    // perform a single step of optimization to improve the embedding
+    TSNE.prototype.step = function () {
+        this.iter += 1;
+        var N = this.N;
+        var grad = this.costGrad(this.Y); // evaluate gradient
+        // perform gradient step
+        var ymean = this.dim === 3 ? [0, 0, 0] : [0, 0];
+        for (var i = 0; i < N; ++i) {
+            for (var d = 0; d < this.dim; ++d) {
+                var gid = grad[i][d];
+                var sid = this.ystep[i][d];
+                var gainid = this.gains[i][d];
+                // compute gain update
+                var newgain = sign(gid) === sign(sid) ? gainid * 0.8 : gainid + 0.2;
+                if (newgain < 0.01) {
+                    newgain = 0.01; // clamp
+                }
+                this.gains[i][d] = newgain; // store for next turn
+                // compute momentum step direction
+                var momval = this.iter < 250 ? 0.5 : 0.8;
+                var newsid = momval * sid - this.epsilon * newgain * grad[i][d];
+                this.ystep[i][d] = newsid; // remember the step we took
+                // step!
+                var i_d = i * this.dim + d;
+                this.Y[i_d] += newsid;
+                ymean[d] += this.Y[i_d]; // accumulate mean so that we
+            }
+        }
+        // reproject Y to be zero mean
+        for (var i = 0; i < N; ++i) {
+            for (var d = 0; d < this.dim; ++d) {
+                this.Y[i * this.dim + d] -= ymean[d] / N;
+            }
+        }
+    };
+    // return cost and gradient, given an arrangement
+    TSNE.prototype.costGrad = function (Y) {
+        var _this = this;
+        var N = this.N;
+        var P = this.P;
+        // Trick that helps with local optima.
+        var alpha = this.iter < 100 ? 4 : 1;
+        // Make data for the SP tree.
+        var points = new Array(N); // (x, y)[]
+        for (var i = 0; i < N; ++i) {
+            var iTimesD = i * this.dim;
+            var row = new Array(this.dim);
+            for (var d = 0; d < this.dim; ++d) {
+                row[d] = Y[iTimesD + d];
+            }
+            points[i] = row;
+        }
+        // Make a tree.
+        var tree = new sptree_1.SPTree(points);
+        var root = tree.root;
+        // Annotate the tree.
+        var annotateTree = function (node) {
+            var numCells = 1;
+            if (node.children == null) {
+                // Update the current node and tell the parent.
+                node.numCells = numCells;
+                node.yCell = node.point;
+                return { numCells: numCells, yCell: node.yCell };
+            }
+            // node.point is a 2 or 3-dim number[], so slice() makes a copy.
+            var yCell = node.point.slice();
+            for (var i = 0; i < node.children.length; ++i) {
+                var child = node.children[i];
+                if (child == null) {
+                    continue;
+                }
+                var result = annotateTree(child);
+                numCells += result.numCells;
+                for (var d = 0; d < _this.dim; ++d) {
+                    yCell[d] += result.yCell[d];
+                }
+            }
+            // Update the node and tell the parent.
+            node.numCells = numCells;
+            node.yCell = yCell.map(function (v) { return v / numCells; });
+            return { numCells: numCells, yCell: yCell };
+        };
+        // Augment the tree with more info.
+        annotateTree(root);
+        tree.visit(function (node, low, high) {
+            node.rCell = high[0] - low[0];
+            return false;
+        });
+        // compute current Q distribution, unnormalized first
+        var grad = [];
+        var Z = 0;
+        var forces = new Array(N);
+        var _loop_1 = function(i) {
+            var pointI = points[i];
+            // Compute the positive forces for the i-th node.
+            var Fpos = this_1.dim === 3 ? [0, 0, 0] : [0, 0];
+            var neighbors = this_1.nearest[i];
+            for (var k = 0; k < neighbors.length; ++k) {
+                var j = neighbors[k].index;
+                var pij = P[i * N + j];
+                var pointJ = points[j];
+                var squaredDistItoJ = this_1.dist2(pointI, pointJ);
+                var premult = pij / (1 + squaredDistItoJ);
+                this_1.computeForce(Fpos, premult, pointI, pointJ);
+            }
+            // Compute the negative forces for the i-th node.
+            var FnegZ = this_1.dim === 3 ? [0, 0, 0] : [0, 0];
+            tree.visit(function (node) {
+                var squaredDistToCell = _this.dist2(pointI, node.yCell);
+                // Squared distance from point i to cell.
+                if (node.children == null ||
+                    (node.rCell / Math.sqrt(squaredDistToCell) < THETA)) {
+                    var qijZ_1 = 1 / (1 + squaredDistToCell);
+                    var dZ = node.numCells * qijZ_1;
+                    Z += dZ;
+                    dZ *= qijZ_1;
+                    _this.computeForce(FnegZ, dZ, pointI, node.yCell);
+                    return true;
+                }
+                // Cell is too close to approximate.
+                var squaredDistToPoint = _this.dist2(pointI, node.point);
+                var qijZ = 1 / (1 + squaredDistToPoint);
+                Z += qijZ;
+                qijZ *= qijZ;
+                _this.computeForce(FnegZ, qijZ, pointI, node.point);
+                return false;
+            }, true);
+            forces[i] = [Fpos, FnegZ];
+        };
+        var this_1 = this;
+        for (var i = 0; i < N; ++i) {
+            _loop_1(i);
+        }
+        // Normalize the negative forces and compute the gradient.
+        var A = 4 * alpha;
+        var B = 4 / Z;
+        for (var i = 0; i < N; ++i) {
+            var _a = forces[i], FPos = _a[0], FNegZ = _a[1];
+            var gsum = new Array(this.dim);
+            for (var d = 0; d < this.dim; ++d) {
+                gsum[d] = A * FPos[d] - B * FNegZ[d];
+            }
+            grad.push(gsum);
+        }
+        return grad;
+    };
+    return TSNE;
+}());
+exports.TSNE = TSNE;
+
+},{"./sptree":23}],2:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var data_1 = require('./data');
+var data_provider_1 = require('./data-provider');
+var dataProvider = require('./data-provider');
+var logging = require('./logging');
+/** Data provider that loads data from a demo folder. */
+var DemoDataProvider = (function () {
+    function DemoDataProvider() {
+        /** List of demo datasets for showing the capabilities of the tool. */
+        this.DEMO_CONFIG = {
+            embeddings: [
+                {
+                    tensorName: 'Word2Vec 5K',
+                    tensorShape: [5000, 200],
+                    tensorPath: 'word2vec_5000_200d_tensors.tsv',
+                    metadataPath: 'word2vec_5000_200d_labels.tsv'
+                },
+                {
+                    tensorName: 'Word2Vec 10K',
+                    tensorShape: [10000, 200],
+                    tensorPath: 'word2vec_10000_200d_tensors.tsv',
+                    metadataPath: 'word2vec_10000_200d_labels.tsv'
+                },
+                {
+                    tensorName: 'Word2Vec All',
+                    tensorShape: [71291, 200],
+                    tensorPath: 'word2vec_full_200d_tensors.tsv',
+                    metadataPath: 'word2vec_full_200d_labels.tsv'
+                },
+                {
+                    tensorName: 'SmartReply 5K',
+                    tensorShape: [5000, 256],
+                    tensorPath: 'smartreply_5000_256d_tensors.tsv',
+                    metadataPath: 'smartreply_5000_256d_labels.tsv'
+                },
+                {
+                    tensorName: 'SmartReply All',
+                    tensorShape: [35860, 256],
+                    tensorPath: 'smartreply_full_256d_tensors.tsv',
+                    metadataPath: 'smartreply_full_256d_labels.tsv'
+                },
+                {
+                    tensorName: 'Mnist with images 10K',
+                    tensorShape: [10000, 784],
+                    tensorPath: 'mnist_10k_784d_tensors.tsv',
+                    metadataPath: 'mnist_10k_784d_labels.tsv',
+                    sprite: {
+                        imagePath: 'mnist_10k_sprite.png',
+                        singleImageDim: [28, 28]
+                    }
+                },
+                {
+                    tensorName: 'Iris',
+                    tensorShape: [150, 4],
+                    tensorPath: 'iris_tensors.tsv',
+                    metadataPath: 'iris_labels.tsv'
+                },
+                {
+                    tensorName: 'Unit Cube',
+                    tensorShape: [8, 3],
+                    tensorPath: 'cube_tensors.tsv',
+                    metadataPath: 'cube_metadata.tsv'
+                }
+            ],
+            modelCheckpointPath: 'Demo datasets'
+        };
+        /** Name of the folder where the demo datasets are stored. */
+        this.DEMO_FOLDER = 'data';
+    }
+    DemoDataProvider.prototype.getEmbeddingInfo = function (tensorName) {
+        var embeddings = this.DEMO_CONFIG.embeddings;
+        for (var i = 0; i < embeddings.length; i++) {
+            var embedding = embeddings[i];
+            if (embedding.tensorName === tensorName) {
+                return embedding;
+            }
+        }
+        return null;
+    };
+    DemoDataProvider.prototype.retrieveRuns = function (callback) {
+        callback(['Demo']);
+    };
+    DemoDataProvider.prototype.retrieveProjectorConfig = function (run, callback) {
+        callback(this.DEMO_CONFIG);
+    };
+    DemoDataProvider.prototype.getDefaultTensor = function (run, callback) {
+        callback('SmartReply 5K');
+    };
+    DemoDataProvider.prototype.retrieveTensor = function (run, tensorName, callback) {
+        var embedding = this.getEmbeddingInfo(tensorName);
+        var separator = embedding.tensorPath.substr(-3) === 'tsv' ? '\t' : ' ';
+        var url = this.DEMO_FOLDER + "/" + embedding.tensorPath;
+        logging.setModalMessage('Fetching tensors...', data_provider_1.TENSORS_MSG_ID);
+        d3.text(url, function (error, dataString) {
+            if (error) {
+                logging.setModalMessage('Error: ' + error.responseText);
+                return;
+            }
+            dataProvider.parseTensors(dataString, separator).then(function (points) {
+                callback(new data_1.DataSet(points));
+            });
+        });
+    };
+    DemoDataProvider.prototype.retrieveSpriteAndMetadata = function (run, tensorName, callback) {
+        var embedding = this.getEmbeddingInfo(tensorName);
+        var metadataPath = null;
+        if (embedding.metadataPath) {
+            metadataPath = this.DEMO_FOLDER + "/" + embedding.metadataPath;
+        }
+        var spriteImagePath = null;
+        if (embedding.sprite && embedding.sprite.imagePath) {
+            spriteImagePath = this.DEMO_FOLDER + "/" + embedding.sprite.imagePath;
+        }
+        dataProvider.retrieveSpriteAndMetadataInfo(metadataPath, spriteImagePath, embedding.sprite, callback);
+    };
+    DemoDataProvider.prototype.getBookmarks = function (run, tensorName, callback) {
+        callback([]);
+    };
+    return DemoDataProvider;
+}());
+exports.DemoDataProvider = DemoDataProvider;
+
+},{"./data":6,"./data-provider":5,"./logging":12}],3:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var data_1 = require('./data');
+var data_provider_1 = require('./data-provider');
+var ProtoDataProvider = (function () {
+    function ProtoDataProvider(dataProto) {
+        this.dataProto = dataProto;
+    }
+    ProtoDataProvider.prototype.retrieveRuns = function (callback) {
+        callback(['proto']);
+    };
+    ProtoDataProvider.prototype.retrieveProjectorConfig = function (run, callback) {
+        callback({
+            modelCheckpointPath: 'proto',
+            embeddings: [{
+                    tensorName: 'proto',
+                    tensorShape: this.dataProto.shape,
+                    metadataPath: 'proto'
+                }]
+        });
+    };
+    ProtoDataProvider.prototype.retrieveTensor = function (run, tensorName, callback) {
+        callback(this.flatArrayToDataset(this.dataProto.tensor));
+    };
+    ProtoDataProvider.prototype.retrieveSpriteAndMetadata = function (run, tensorName, callback) {
+        var columnNames = this.dataProto.metadata.columns.map(function (c) { return c.name; });
+        var n = this.dataProto.shape[0];
+        var pointsMetadata = new Array(n);
+        this.dataProto.metadata.columns.forEach(function (c) {
+            var values = c.numericValues || c.stringValues;
+            for (var i = 0; i < n; i++) {
+                pointsMetadata[i] = pointsMetadata[i] || {};
+                pointsMetadata[i][c.name] = values[i];
+            }
+        });
+        callback({
+            stats: data_provider_1.analyzeMetadata(columnNames, pointsMetadata),
+            pointsInfo: pointsMetadata
+        });
+    };
+    ProtoDataProvider.prototype.getDefaultTensor = function (run, callback) {
+        callback('proto');
+    };
+    ProtoDataProvider.prototype.getBookmarks = function (run, tensorName, callback) {
+        return callback([]);
+    };
+    ProtoDataProvider.prototype.flatArrayToDataset = function (tensor) {
+        var points = [];
+        var n = this.dataProto.shape[0];
+        var d = this.dataProto.shape[1];
+        if (n * d !== tensor.length) {
+            throw 'The shape doesn\'t match the length of the flattened array';
+        }
+        for (var i = 0; i < n; i++) {
+            var vector = [];
+            var offset = i * d;
+            for (var j = 0; j < d; j++) {
+                vector.push(tensor[offset++]);
+            }
+            points.push({
+                vector: vector,
+                metadata: {},
+                projections: null,
+                projectedPoint: null,
+                index: i
+            });
+        }
+        return new data_1.DataSet(points);
+    };
+    return ProtoDataProvider;
+}());
+exports.ProtoDataProvider = ProtoDataProvider;
+
+},{"./data":6,"./data-provider":5}],4:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var data_1 = require('./data');
+var data_provider_1 = require('./data-provider');
+var dataProvider = require('./data-provider');
+var logging = require('./logging');
+/**
+ * Data provider that loads data provided by a python server (usually backed
+ * by a checkpoint file).
+ */
+var ServerDataProvider = (function () {
+    function ServerDataProvider(routePrefix) {
+        this.runProjectorConfigCache = {};
+        this.routePrefix = routePrefix;
+    }
+    ServerDataProvider.prototype.getEmbeddingInfo = function (run, tensorName, callback) {
+        this.retrieveProjectorConfig(run, function (config) {
+            var embeddings = config.embeddings;
+            for (var i = 0; i < embeddings.length; i++) {
+                var embedding = embeddings[i];
+                if (embedding.tensorName === tensorName) {
+                    callback(embedding);
+                    return;
+                }
+            }
+            callback(null);
+        });
+    };
+    ServerDataProvider.prototype.retrieveRuns = function (callback) {
+        var msgId = logging.setModalMessage('Fetching runs...');
+        d3.json(this.routePrefix + "/runs", function (err, runs) {
+            if (err) {
+                logging.setModalMessage('Error: ' + err.responseText);
+                return;
+            }
+            logging.setModalMessage(null, msgId);
+            callback(runs);
+        });
+    };
+    ServerDataProvider.prototype.retrieveProjectorConfig = function (run, callback) {
+        var _this = this;
+        if (run in this.runProjectorConfigCache) {
+            callback(this.runProjectorConfigCache[run]);
+            return;
+        }
+        var msgId = logging.setModalMessage('Fetching projector config...');
+        d3.json(this.routePrefix + "/info?run=" + run, function (err, config) {
+            if (err) {
+                logging.setModalMessage('Error: ' + err.responseText);
+                return;
+            }
+            logging.setModalMessage(null, msgId);
+            _this.runProjectorConfigCache[run] = config;
+            callback(config);
+        });
+    };
+    ServerDataProvider.prototype.retrieveTensor = function (run, tensorName, callback) {
+        // Get the tensor.
+        logging.setModalMessage('Fetching tensor values...', data_provider_1.TENSORS_MSG_ID);
+        d3.text(this.routePrefix + "/tensor?run=" + run + "&name=" + tensorName, function (err, tsv) {
+            if (err) {
+                logging.setModalMessage('Error: ' + err.responseText);
+                return;
+            }
+            dataProvider.parseTensors(tsv).then(function (dataPoints) {
+                callback(new data_1.DataSet(dataPoints));
+            });
+        });
+    };
+    ServerDataProvider.prototype.retrieveSpriteAndMetadata = function (run, tensorName, callback) {
+        var _this = this;
+        this.getEmbeddingInfo(run, tensorName, function (embedding) {
+            var metadataPath = null;
+            if (embedding.metadataPath) {
+                metadataPath =
+                    _this.routePrefix + "/metadata?run=" + run + "&name=" + tensorName;
+            }
+            var spriteImagePath = null;
+            if (embedding.sprite && embedding.sprite.imagePath) {
+                spriteImagePath =
+                    _this.routePrefix + "/sprite_image?run=" + run + "&name=" + tensorName;
+            }
+            dataProvider.retrieveSpriteAndMetadataInfo(metadataPath, spriteImagePath, embedding.sprite, callback);
+        });
+    };
+    ServerDataProvider.prototype.getDefaultTensor = function (run, callback) {
+        this.retrieveProjectorConfig(run, function (config) {
+            var tensorNames = config.embeddings.map(function (e) { return e.tensorName; });
+            // Return the first tensor that has metadata.
+            for (var i = 0; i < tensorNames.length; i++) {
+                var e = config.embeddings[i];
+                if (e.metadataPath) {
+                    callback(e.tensorName);
+                    return;
+                }
+            }
+            callback(tensorNames.length >= 1 ? tensorNames[0] : null);
+        });
+    };
+    ServerDataProvider.prototype.getBookmarks = function (run, tensorName, callback) {
+        var msgId = logging.setModalMessage('Fetching bookmarks...');
+        d3.json(this.routePrefix + "/bookmarks?run=" + run + "&name=" + tensorName, function (err, bookmarks) {
+            logging.setModalMessage(null, msgId);
+            if (!err) {
+                callback(bookmarks);
+            }
+        });
+    };
+    return ServerDataProvider;
+}());
+exports.ServerDataProvider = ServerDataProvider;
+
+},{"./data":6,"./data-provider":5,"./logging":12}],5:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var data_1 = require('./data');
+var logging = require('./logging');
+var util_1 = require('./util');
+/** Maximum number of colors supported in the color map. */
+var NUM_COLORS_COLOR_MAP = 50;
+exports.METADATA_MSG_ID = 'metadata';
+exports.TENSORS_MSG_ID = 'tensors';
+function parseRawTensors(content, callback) {
+    parseTensors(content).then(function (data) {
+        callback(new data_1.DataSet(data));
+    });
+}
+exports.parseRawTensors = parseRawTensors;
+function parseRawMetadata(contents, callback) {
+    parseMetadata(contents).then(function (result) { return callback(result); });
+}
+exports.parseRawMetadata = parseRawMetadata;
+/** Parses a tsv text file. */
+function parseTensors(content, delim) {
+    if (delim === void 0) { delim = '\t'; }
+    var data = [];
+    var numDim;
+    return util_1.runAsyncTask('Parsing tensors...', function () {
+        var lines = content.split('\n');
+        lines.forEach(function (line) {
+            line = line.trim();
+            if (line === '') {
+                return;
+            }
+            var row = line.split(delim);
+            var dataPoint = {
+                metadata: {},
+                vector: null,
+                index: data.length,
+                projections: null,
+                projectedPoint: null
+            };
+            // If the first label is not a number, take it as the label.
+            if (isNaN(row[0]) || numDim === row.length - 1) {
+                dataPoint.metadata['label'] = row[0];
+                dataPoint.vector = row.slice(1).map(Number);
+            }
+            else {
+                dataPoint.vector = row.map(Number);
+            }
+            data.push(dataPoint);
+            if (numDim == null) {
+                numDim = dataPoint.vector.length;
+            }
+            if (numDim !== dataPoint.vector.length) {
+                logging.setModalMessage('Parsing failed. Vector dimensions do not match');
+                throw Error('Parsing failed');
+            }
+            if (numDim <= 1) {
+                logging.setModalMessage('Parsing failed. Found a vector with only one dimension?');
+                throw Error('Parsing failed');
+            }
+        });
+        return data;
+    }, exports.TENSORS_MSG_ID).then(function (dataPoints) {
+        logging.setModalMessage(null, exports.TENSORS_MSG_ID);
+        return dataPoints;
+    });
+}
+exports.parseTensors = parseTensors;
+function analyzeMetadata(columnNames, pointsMetadata) {
+    var columnStats = columnNames.map(function (name) {
+        return {
+            name: name,
+            isNumeric: true,
+            tooManyUniqueValues: false,
+            min: Number.POSITIVE_INFINITY,
+            max: Number.NEGATIVE_INFINITY
+        };
+    });
+    var mapOfValues = columnNames.map(function () { return d3.map(); });
+    pointsMetadata.forEach(function (metadata) {
+        columnNames.forEach(function (name, colIndex) {
+            var stats = columnStats[colIndex];
+            var map = mapOfValues[colIndex];
+            var value = metadata[name];
+            // Skip missing values.
+            if (value == null) {
+                return;
+            }
+            if (!stats.tooManyUniqueValues) {
+                if (map.has(value)) {
+                    map.set(value, map.get(value) + 1);
+                }
+                else {
+                    map.set(value, 1);
+                }
+                if (map.size() > NUM_COLORS_COLOR_MAP) {
+                    stats.tooManyUniqueValues = true;
+                }
+            }
+            if (isNaN(value)) {
+                stats.isNumeric = false;
+            }
+            else {
+                metadata[name] = +value;
+                stats.min = Math.min(stats.min, +value);
+                stats.max = Math.max(stats.max, +value);
+            }
+        });
+    });
+    columnStats.forEach(function (stats, colIndex) {
+        var map = mapOfValues[colIndex];
+        if (!stats.tooManyUniqueValues) {
+            stats.uniqueEntries = map.entries().map(function (e) {
+                return { label: e.key, count: e.value };
+            });
+        }
+    });
+    return columnStats;
+}
+exports.analyzeMetadata = analyzeMetadata;
+function parseMetadata(content) {
+    return util_1.runAsyncTask('Parsing metadata...', function () {
+        var lines = content.split('\n').filter(function (line) { return line.trim().length > 0; });
+        var hasHeader = lines[0].indexOf('\t') >= 0;
+        var pointsMetadata = [];
+        // If the first row doesn't contain metadata keys, we assume that the values
+        // are labels.
+        var columnNames = ['label'];
+        if (hasHeader) {
+            columnNames = lines[0].split('\t');
+            lines = lines.slice(1);
+        }
+        lines.forEach(function (line) {
+            var rowValues = line.split('\t');
+            var metadata = {};
+            pointsMetadata.push(metadata);
+            columnNames.forEach(function (name, colIndex) {
+                var value = rowValues[colIndex];
+                // Normalize missing values.
+                value = (value === '' ? null : value);
+                metadata[name] = value;
+            });
+        });
+        return {
+            stats: analyzeMetadata(columnNames, pointsMetadata),
+            pointsInfo: pointsMetadata
+        };
+    }, exports.METADATA_MSG_ID).then(function (metadata) {
+        logging.setModalMessage(null, exports.METADATA_MSG_ID);
+        return metadata;
+    });
+}
+exports.parseMetadata = parseMetadata;
+function fetchImage(url) {
+    return new Promise(function (resolve, reject) {
+        var image = new Image();
+        image.onload = function () { return resolve(image); };
+        image.onerror = function (err) { return reject(err); };
+        image.src = url;
+    });
+}
+exports.fetchImage = fetchImage;
+function retrieveSpriteAndMetadataInfo(metadataPath, spriteImagePath, spriteMetadata, callback) {
+    var metadataPromise = Promise.resolve({});
+    if (metadataPath) {
+        metadataPromise = new Promise(function (resolve, reject) {
+            logging.setModalMessage('Fetching metadata...', exports.METADATA_MSG_ID);
+            d3.text(metadataPath, function (err, rawMetadata) {
+                if (err) {
+                    logging.setModalMessage('Error: ' + err.responseText);
+                    reject(err);
+                    return;
+                }
+                resolve(parseMetadata(rawMetadata));
+            });
+        });
+    }
+    var spriteMsgId = null;
+    var spritesPromise = null;
+    if (spriteImagePath) {
+        spriteMsgId = logging.setModalMessage('Fetching sprite image...');
+        spritesPromise = fetchImage(spriteImagePath);
+    }
+    // Fetch the metadata and the image in parallel.
+    Promise.all([metadataPromise, spritesPromise]).then(function (values) {
+        if (spriteMsgId) {
+            logging.setModalMessage(null, spriteMsgId);
+        }
+        var metadata = values[0], spriteImage = values[1];
+        metadata.spriteImage = spriteImage;
+        metadata.spriteMetadata = spriteMetadata;
+        callback(metadata);
+    });
+}
+exports.retrieveSpriteAndMetadataInfo = retrieveSpriteAndMetadataInfo;
+
+},{"./data":6,"./logging":12,"./util":24}],6:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var bh_tsne_1 = require('./bh_tsne');
+var knn = require('./knn');
+var util_1 = require('./util');
+var logging = require('./logging');
+var vector = require('./vector');
+/** Checks to see if the browser supports webgl. */
+function hasWebGLSupport() {
+    try {
+        var c = document.createElement('canvas');
+        var gl = c.getContext('webgl') || c.getContext('experimental-webgl');
+        return gl != null && typeof weblas !== 'undefined';
+    }
+    catch (e) {
+        return false;
+    }
+}
+var WEBGL_SUPPORT = hasWebGLSupport();
+var IS_FIREFOX = navigator.userAgent.toLowerCase().indexOf('firefox') >= 0;
+/** Controls whether nearest neighbors computation is done on the GPU or CPU. */
+var KNN_GPU_ENABLED = WEBGL_SUPPORT && !IS_FIREFOX;
+/** Sampling is used when computing expensive operations such as T-SNE. */
+exports.SAMPLE_SIZE = 10000;
+/** Number of dimensions to sample when doing approximate PCA. */
+exports.PCA_SAMPLE_DIM = 200;
+/** Number of pca components to compute. */
+var NUM_PCA_COMPONENTS = 10;
+/** Reserved metadata attribute used for trace information. */
+var TRACE_METADATA_ATTR = '__next__';
+/**
+ * Dataset contains a DataPoints array that should be treated as immutable. This
+ * acts as a working subset of the original data, with cached properties
+ * from computationally expensive operations. Because creating a subset
+ * requires normalizing and shifting the vector space, we make a copy of the
+ * data so we can still always create new subsets based on the original data.
+ */
+var DataSet = (function () {
+    /** Creates a new Dataset */
+    function DataSet(points, spriteAndMetadataInfo) {
+        this.sampledDataIndices = [];
+        /**
+         * This keeps a list of all current projections so you can easily test to see
+         * if it's been calculated already.
+         */
+        this.projections = d3.set();
+        this.tSNEIteration = 0;
+        this.tSNEShouldStop = true;
+        this.dim = [0, 0];
+        this.hasTSNERun = false;
+        this.points = points;
+        this.sampledDataIndices =
+            util_1.shuffle(d3.range(this.points.length)).slice(0, exports.SAMPLE_SIZE);
+        this.traces = this.computeTraces(points);
+        this.dim = [this.points.length, this.points[0].vector.length];
+        this.spriteAndMetadataInfo = spriteAndMetadataInfo;
+    }
+    DataSet.prototype.computeTraces = function (points) {
+        // Keep a list of indices seen so we don't compute traces for a given
+        // point twice.
+        var indicesSeen = new Int8Array(points.length);
+        // Compute traces.
+        var indexToTrace = {};
+        var traces = [];
+        for (var i = 0; i < points.length; i++) {
+            if (indicesSeen[i]) {
+                continue;
+            }
+            indicesSeen[i] = 1;
+            // Ignore points without a trace attribute.
+            var next = points[i].metadata[TRACE_METADATA_ATTR];
+            if (next == null || next === '') {
+                continue;
+            }
+            if (next in indexToTrace) {
+                var existingTrace = indexToTrace[+next];
+                // Pushing at the beginning of the array.
+                existingTrace.pointIndices.unshift(i);
+                indexToTrace[i] = existingTrace;
+                continue;
+            }
+            // The current point is pointing to a new/unseen trace.
+            var newTrace = { pointIndices: [] };
+            indexToTrace[i] = newTrace;
+            traces.push(newTrace);
+            var currentIndex = i;
+            while (points[currentIndex]) {
+                newTrace.pointIndices.push(currentIndex);
+                var next_1 = points[currentIndex].metadata[TRACE_METADATA_ATTR];
+                if (next_1 != null && next_1 !== '') {
+                    indicesSeen[+next_1] = 1;
+                    currentIndex = +next_1;
+                }
+                else {
+                    currentIndex = -1;
+                }
+            }
+        }
+        return traces;
+    };
+    DataSet.prototype.getPointAccessors = function (projection, components) {
+        var _this = this;
+        if (components.length > 3) {
+            throw new RangeError('components length must be <= 3');
+        }
+        var accessors = [null, null, null];
+        var prefix = (projection === 'custom') ? 'linear' : projection;
+        var _loop_1 = function(i) {
+            if (components[i] == null) {
+                return "continue";
+            }
+            accessors[i] =
+                (function (index) {
+                    return _this.points[index].projections[prefix + '-' + components[i]];
+                });
+        };
+        for (var i = 0; i < components.length; ++i) {
+            var state_1 = _loop_1(i);
+            if (state_1 === "continue") continue;
+        }
+        return accessors;
+    };
+    DataSet.prototype.hasMeaningfulVisualization = function (projection) {
+        if (projection !== 'tsne') {
+            return true;
+        }
+        return this.tSNEIteration > 0;
+    };
+    /**
+     * Returns a new subset dataset by copying out data. We make a copy because
+     * we have to modify the vectors by normalizing them.
+     *
+     * @param subset Array of indices of points that we want in the subset.
+     *
+     * @return A subset of the original dataset.
+     */
+    DataSet.prototype.getSubset = function (subset) {
+        var _this = this;
+        var pointsSubset = subset && subset.length ?
+            subset.map(function (i) { return _this.points[i]; }) : this.points;
+        var points = pointsSubset.map(function (dp) {
+            return {
+                metadata: dp.metadata,
+                index: dp.index,
+                vector: dp.vector.slice(),
+                projectedPoint: [0, 0, 0],
+                projections: {}
+            };
+        });
+        return new DataSet(points, this.spriteAndMetadataInfo);
+    };
+    /**
+     * Computes the centroid, shifts all points to that centroid,
+     * then makes them all unit norm.
+     */
+    DataSet.prototype.normalize = function () {
+        // Compute the centroid of all data points.
+        var centroid = vector.centroid(this.points, function (a) { return a.vector; });
+        if (centroid == null) {
+            throw Error('centroid should not be null');
+        }
+        // Shift all points by the centroid and make them unit norm.
+        for (var id = 0; id < this.points.length; ++id) {
+            var dataPoint = this.points[id];
+            dataPoint.vector = vector.sub(dataPoint.vector, centroid);
+            vector.unit(dataPoint.vector);
+        }
+    };
+    /** Projects the dataset onto a given vector and caches the result. */
+    DataSet.prototype.projectLinear = function (dir, label) {
+        this.projections.add(label);
+        this.points.forEach(function (dataPoint) {
+            dataPoint.projections[label] = vector.dot(dataPoint.vector, dir);
+        });
+    };
+    /** Projects the dataset along the top 10 principal components. */
+    DataSet.prototype.projectPCA = function () {
+        var _this = this;
+        if (this.projections.has('pca-0')) {
+            return Promise.resolve(null);
+        }
+        return util_1.runAsyncTask('Computing PCA...', function () {
+            // Approximate pca vectors by sampling the dimensions.
+            var dim = _this.points[0].vector.length;
+            var vectors = _this.points.map(function (d) { return d.vector; });
+            if (dim > exports.PCA_SAMPLE_DIM) {
+                vectors = vector.projectRandom(vectors, exports.PCA_SAMPLE_DIM);
+            }
+            var sigma = numeric.div(numeric.dot(numeric.transpose(vectors), vectors), vectors.length);
+            var U;
+            U = numeric.svd(sigma).U;
+            var pcaVectors = vectors.map(function (vector) {
+                var newV = [];
+                for (var d = 0; d < NUM_PCA_COMPONENTS; d++) {
+                    var dot = 0;
+                    for (var i = 0; i < vector.length; i++) {
+                        dot += vector[i] * U[i][d];
+                    }
+                    newV.push(dot);
+                }
+                return newV;
+            });
+            var _loop_2 = function(j) {
+                var label = 'pca-' + j;
+                _this.projections.add(label);
+                _this.points.forEach(function (d, i) {
+                    d.projections[label] = pcaVectors[i][j];
+                });
+            };
+            for (var j = 0; j < NUM_PCA_COMPONENTS; j++) {
+                _loop_2(j);
+            }
+        });
+    };
+    /** Runs tsne on the data. */
+    DataSet.prototype.projectTSNE = function (perplexity, learningRate, tsneDim, stepCallback) {
+        var _this = this;
+        this.hasTSNERun = true;
+        var k = Math.floor(3 * perplexity);
+        var opt = { epsilon: learningRate, perplexity: perplexity, dim: tsneDim };
+        this.tsne = new bh_tsne_1.TSNE(opt);
+        this.tSNEShouldStop = false;
+        this.tSNEIteration = 0;
+        var step = function () {
+            if (_this.tSNEShouldStop) {
+                stepCallback(null);
+                _this.tsne = null;
+                return;
+            }
+            _this.tsne.step();
+            var result = _this.tsne.getSolution();
+            _this.sampledDataIndices.forEach(function (index, i) {
+                var dataPoint = _this.points[index];
+                dataPoint.projections['tsne-0'] = result[i * tsneDim + 0];
+                dataPoint.projections['tsne-1'] = result[i * tsneDim + 1];
+                if (tsneDim === 3) {
+                    dataPoint.projections['tsne-2'] = result[i * tsneDim + 2];
+                }
+            });
+            _this.tSNEIteration++;
+            stepCallback(_this.tSNEIteration);
+            requestAnimationFrame(step);
+        };
+        // Nearest neighbors calculations.
+        var knnComputation;
+        if (this.nearest != null && k === this.nearestK) {
+            // We found the nearest neighbors before and will reuse them.
+            knnComputation = Promise.resolve(this.nearest);
+        }
+        else {
+            var sampledData = this.sampledDataIndices.map(function (i) { return _this.points[i]; });
+            this.nearestK = k;
+            knnComputation = KNN_GPU_ENABLED ?
+                knn.findKNNGPUCosine(sampledData, k, (function (d) { return d.vector; })) :
+                knn.findKNN(sampledData, k, (function (d) { return d.vector; }), function (a, b, limit) { return vector.cosDistNorm(a, b); });
+        }
+        knnComputation.then(function (nearest) {
+            _this.nearest = nearest;
+            util_1.runAsyncTask('Initializing T-SNE...', function () {
+                _this.tsne.initDataDist(_this.nearest);
+            }).then(step);
+        });
+    };
+    DataSet.prototype.mergeMetadata = function (metadata) {
+        var _this = this;
+        if (metadata.pointsInfo.length !== this.points.length) {
+            logging.setWarningMessage(("Number of tensors (" + this.points.length + ") do not match") +
+                (" the number of lines in metadata (" + metadata.pointsInfo.length + ")."));
+        }
+        this.spriteAndMetadataInfo = metadata;
+        metadata.pointsInfo.slice(0, this.points.length)
+            .forEach(function (m, i) { return _this.points[i].metadata = m; });
+    };
+    DataSet.prototype.stopTSNE = function () { this.tSNEShouldStop = true; };
+    /**
+     * Finds the nearest neighbors of the query point using a
+     * user-specified distance metric.
+     */
+    DataSet.prototype.findNeighbors = function (pointIndex, distFunc, numNN) {
+        // Find the nearest neighbors of a particular point.
+        var neighbors = knn.findKNNofPoint(this.points, pointIndex, numNN, (function (d) { return d.vector; }), distFunc);
+        // TODO(smilkov): Figure out why we slice.
+        var result = neighbors.slice(0, numNN);
+        return result;
+    };
+    /**
+     * Search the dataset based on a metadata field.
+     */
+    DataSet.prototype.query = function (query, inRegexMode, fieldName) {
+        var predicate = util_1.getSearchPredicate(query, inRegexMode, fieldName);
+        var matches = [];
+        this.points.forEach(function (point, id) {
+            if (predicate(point)) {
+                matches.push(id);
+            }
+        });
+        return matches;
+    };
+    return DataSet;
+}());
+exports.DataSet = DataSet;
+/**
+ * An interface that holds all the data for serializing the current state of
+ * the world.
+ */
+var State = (function () {
+    function State() {
+        /** A label identifying this state. */
+        this.label = '';
+        /** Whether this State is selected in the bookmarks pane. */
+        this.isSelected = false;
+        /** t-SNE parameters */
+        this.tSNEIteration = 0;
+        this.tSNEPerplexity = 0;
+        this.tSNELearningRate = 0;
+        this.tSNEis3d = true;
+        /** PCA projection component dimensions */
+        this.pcaComponentDimensions = [];
+        /** The computed projections of the tensors. */
+        this.projections = [];
+        /** The indices of selected points. */
+        this.selectedPoints = [];
+    }
+    return State;
+}());
+exports.State = State;
+function stateGetAccessorDimensions(state) {
+    var dimensions;
+    switch (state.selectedProjection) {
+        case 'pca':
+            dimensions = state.pcaComponentDimensions.slice();
+            break;
+        case 'tsne':
+            dimensions = [0, 1];
+            if (state.tSNEis3d) {
+                dimensions.push(2);
+            }
+            break;
+        case 'custom':
+            dimensions = ['x', 'y'];
+            break;
+        default:
+            throw new Error('Unexpected fallthrough');
+    }
+    return dimensions;
+}
+exports.stateGetAccessorDimensions = stateGetAccessorDimensions;
+
+},{"./bh_tsne":1,"./knn":10,"./logging":12,"./util":24,"./vector":25}],7:[function(require,module,exports){
+
+},{}],8:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+/**
+ * Min-heap data structure. Provides O(1) for peek, returning the smallest key.
+ */
+// TODO(jart): Rename to Heap and use Comparator.
+var MinHeap = (function () {
+    function MinHeap() {
+        this.arr = [];
+    }
+    /** Push an element with the provided key. */
+    MinHeap.prototype.push = function (key, value) {
+        this.arr.push({ key: key, value: value });
+        this.bubbleUp(this.arr.length - 1);
+    };
+    /** Pop the element with the smallest key. */
+    MinHeap.prototype.pop = function () {
+        if (this.arr.length === 0) {
+            throw new Error('pop() called on empty binary heap');
+        }
+        var item = this.arr[0];
+        var last = this.arr.length - 1;
+        this.arr[0] = this.arr[last];
+        this.arr.pop();
+        if (last > 0) {
+            this.bubbleDown(0);
+        }
+        return item;
+    };
+    ;
+    /** Returns, but doesn't remove the element with the smallest key */
+    MinHeap.prototype.peek = function () { return this.arr[0]; };
+    /**
+     * Pops the element with the smallest key and at the same time
+     * adds the newly provided element. This is faster than calling
+     * pop() and push() separately.
+     */
+    MinHeap.prototype.popPush = function (key, value) {
+        if (this.arr.length === 0) {
+            throw new Error('pop() called on empty binary heap');
+        }
+        var item = this.arr[0];
+        this.arr[0] = { key: key, value: value };
+        if (this.arr.length > 0) {
+            this.bubbleDown(0);
+        }
+        return item;
+    };
+    /** Returns the number of elements in the heap. */
+    MinHeap.prototype.size = function () { return this.arr.length; };
+    /** Returns all the items in the heap. */
+    MinHeap.prototype.items = function () { return this.arr; };
+    MinHeap.prototype.swap = function (a, b) {
+        var temp = this.arr[a];
+        this.arr[a] = this.arr[b];
+        this.arr[b] = temp;
+    };
+    MinHeap.prototype.bubbleDown = function (pos) {
+        var left = (pos << 1) + 1;
+        var right = left + 1;
+        var largest = pos;
+        if (left < this.arr.length && this.arr[left].key < this.arr[largest].key) {
+            largest = left;
+        }
+        if (right < this.arr.length &&
+            this.arr[right].key < this.arr[largest].key) {
+            largest = right;
+        }
+        if (largest !== pos) {
+            this.swap(largest, pos);
+            this.bubbleDown(largest);
+        }
+    };
+    MinHeap.prototype.bubbleUp = function (pos) {
+        if (pos <= 0) {
+            return;
+        }
+        var parent = ((pos - 1) >> 1);
+        if (this.arr[pos].key < this.arr[parent].key) {
+            this.swap(pos, parent);
+            this.bubbleUp(parent);
+        }
+    };
+    return MinHeap;
+}());
+exports.MinHeap = MinHeap;
+/** List that keeps the K elements with the smallest keys. */
+var KMin = (function () {
+    /** Constructs a new k-min data structure with the provided k. */
+    function KMin(k) {
+        this.maxHeap = new MinHeap();
+        this.k = k;
+    }
+    /** Adds an element to the list. */
+    KMin.prototype.add = function (key, value) {
+        if (this.maxHeap.size() < this.k) {
+            this.maxHeap.push(-key, value);
+            return;
+        }
+        var largest = this.maxHeap.peek();
+        // If the new element is smaller, replace the largest with the new element.
+        if (key < -largest.key) {
+            this.maxHeap.popPush(-key, value);
+        }
+    };
+    /** Returns the k items with the smallest keys. */
+    KMin.prototype.getMinKItems = function () {
+        var items = this.maxHeap.items();
+        items.sort(function (a, b) { return b.key - a.key; });
+        return items.map(function (a) { return a.value; });
+    };
+    /** Returns the size of the list. */
+    KMin.prototype.getSize = function () { return this.maxHeap.size(); };
+    /** Returns the largest key in the list. */
+    KMin.prototype.getLargestKey = function () {
+        return this.maxHeap.size() === 0 ? null : -this.maxHeap.peek().key;
+    };
+    return KMin;
+}());
+exports.KMin = KMin;
+
+},{}],9:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+
+},{}],10:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var util_1 = require('./util');
+var logging = require('./logging');
+var heap_1 = require('./heap');
+var vector = require('./vector');
+/**
+ * Optimal size for the height of the matrix when doing computation on the GPU
+ * using WebGL. This was found experimentally.
+ *
+ * This also guarantees that for computing pair-wise distance for up to 10K
+ * vectors, no more than 40MB will be allocated in the GPU. Without the
+ * allocation limit, we can freeze the graphics of the whole OS.
+ */
+var OPTIMAL_GPU_BLOCK_SIZE = 256;
+/** Id of message box used for knn gpu progress bar. */
+var KNN_GPU_MSG_ID = 'knn-gpu';
+/**
+ * Returns the K nearest neighbors for each vector where the distance
+ * computation is done on the GPU (WebGL) using cosine distance.
+ *
+ * @param dataPoints List of data points, where each data point holds an
+ *   n-dimensional vector.
+ * @param k Number of nearest neighbors to find.
+ * @param accessor A method that returns the vector, given the data point.
+ */
+function findKNNGPUCosine(dataPoints, k, accessor) {
+    var N = dataPoints.length;
+    var dim = accessor(dataPoints[0]).length;
+    // The goal is to compute a large matrix multiplication A*A.T where A is of
+    // size NxD and A.T is its transpose. This results in a NxN matrix which
+    // could be too big to store on the GPU memory. To avoid memory overflow, we
+    // compute multiple A*partial_A.T where partial_A is of size BxD (B is much
+    // smaller than N). This results in storing only NxB size matrices on the GPU
+    // at a given time.
+    // A*A.T will give us NxN matrix holding the cosine distance between every
+    // pair of points, which we sort using KMin data structure to obtain the
+    // K nearest neighbors for each point.
+    var typedArray = vector.toTypedArray(dataPoints, accessor);
+    var bigMatrix = new weblas.pipeline.Tensor([N, dim], typedArray);
+    var nearest = new Array(N);
+    var numPieces = Math.ceil(N / OPTIMAL_GPU_BLOCK_SIZE);
+    var M = Math.floor(N / numPieces);
+    var modulo = N % numPieces;
+    var offset = 0;
+    var progress = 0;
+    var progressDiff = 1 / (2 * numPieces);
+    var piece = 0;
+    function step(resolve) {
+        var progressMsg = 'Finding nearest neighbors: ' + (progress * 100).toFixed() + '%';
+        util_1.runAsyncTask(progressMsg, function () {
+            var B = piece < modulo ? M + 1 : M;
+            var typedB = new Float32Array(B * dim);
+            for (var i = 0; i < B; ++i) {
+                var vector_1 = accessor(dataPoints[offset + i]);
+                for (var d = 0; d < dim; ++d) {
+                    typedB[i * dim + d] = vector_1[d];
+                }
+            }
+            var partialMatrix = new weblas.pipeline.Tensor([B, dim], typedB);
+            // Result is N x B matrix.
+            var result = weblas.pipeline.sgemm(1, bigMatrix, partialMatrix, null, null);
+            var partial = result.transfer();
+            partialMatrix.delete();
+            result.delete();
+            progress += progressDiff;
+            for (var i = 0; i < B; i++) {
+                var kMin = new heap_1.KMin(k);
+                var iReal = offset + i;
+                for (var j = 0; j < N; j++) {
+                    if (j === iReal) {
+                        continue;
+                    }
+                    var cosDist = 1 - partial[j * B + i]; // [j, i];
+                    kMin.add(cosDist, { index: j, dist: cosDist });
+                }
+                nearest[iReal] = kMin.getMinKItems();
+            }
+            progress += progressDiff;
+            offset += B;
+            piece++;
+        }, KNN_GPU_MSG_ID).then(function () {
+            if (piece < numPieces) {
+                step(resolve);
+            }
+            else {
+                logging.setModalMessage(null, KNN_GPU_MSG_ID);
+                bigMatrix.delete();
+                resolve(nearest);
+            }
+        }, function (error) {
+            // GPU failed. Reverting back to CPU.
+            logging.setModalMessage(null, KNN_GPU_MSG_ID);
+            var distFunc = function (a, b, limit) { return vector.cosDistNorm(a, b); };
+            findKNN(dataPoints, k, accessor, distFunc).then(function (nearest) {
+                resolve(nearest);
+            });
+        });
+    }
+    return new Promise(function (resolve) { return step(resolve); });
+}
+exports.findKNNGPUCosine = findKNNGPUCosine;
+/**
+ * Returns the K nearest neighbors for each vector where the distance
+ * computation is done on the CPU using a user-specified distance method.
+ *
+ * @param dataPoints List of data points, where each data point holds an
+ *   n-dimensional vector.
+ * @param k Number of nearest neighbors to find.
+ * @param accessor A method that returns the vector, given the data point.
+ * @param dist Method that takes two vectors and a limit, and computes the
+ *   distance between two vectors, with the ability to stop early if the
+ *   distance is above the limit.
+ */
+function findKNN(dataPoints, k, accessor, dist) {
+    return util_1.runAsyncTask('Finding nearest neighbors...', function () {
+        var N = dataPoints.length;
+        var nearest = new Array(N);
+        // Find the distances from node i.
+        var kMin = new Array(N);
+        for (var i = 0; i < N; i++) {
+            kMin[i] = new heap_1.KMin(k);
+        }
+        for (var i = 0; i < N; i++) {
+            var a = accessor(dataPoints[i]);
+            var kMinA = kMin[i];
+            for (var j = i + 1; j < N; j++) {
+                var kMinB = kMin[j];
+                var limitI = kMinA.getSize() === k ?
+                    kMinA.getLargestKey() || Number.MAX_VALUE :
+                    Number.MAX_VALUE;
+                var limitJ = kMinB.getSize() === k ?
+                    kMinB.getLargestKey() || Number.MAX_VALUE :
+                    Number.MAX_VALUE;
+                var limit = Math.max(limitI, limitJ);
+                var dist2ItoJ = dist(a, accessor(dataPoints[j]), limit);
+                if (dist2ItoJ >= 0) {
+                    kMinA.add(dist2ItoJ, { index: j, dist: dist2ItoJ });
+                    kMinB.add(dist2ItoJ, { index: i, dist: dist2ItoJ });
+                }
+            }
+        }
+        for (var i = 0; i < N; i++) {
+            nearest[i] = kMin[i].getMinKItems();
+        }
+        return nearest;
+    });
+}
+exports.findKNN = findKNN;
+/** Calculates the minimum distance between a search point and a rectangle. */
+function minDist(point, x1, y1, x2, y2) {
+    var x = point[0];
+    var y = point[1];
+    var dx1 = x - x1;
+    var dx2 = x - x2;
+    var dy1 = y - y1;
+    var dy2 = y - y2;
+    if (dx1 * dx2 <= 0) {
+        if (dy1 * dy2 <= 0) {
+            return 0; // return 0 as point is in rect
+        }
+        return Math.min(Math.abs(dy1), Math.abs(dy2));
+    }
+    if (dy1 * dy2 <= 0) {
+        // We know it is already inside the rectangle
+        return Math.min(Math.abs(dx1), Math.abs(dx2));
+    }
+    var corner;
+    if (x > x2) {
+        // Upper-right vs lower-right.
+        corner = y > y2 ? [x2, y2] : [x2, y1];
+    }
+    else {
+        // Upper-left vs lower-left.
+        corner = y > y2 ? [x1, y2] : [x1, y1];
+    }
+    return Math.sqrt(vector.dist22D([x, y], corner));
+}
+/**
+ * Returns the nearest neighbors of a particular point.
+ *
+ * @param dataPoints List of data points.
+ * @param pointIndex The index of the point we need the nearest neighbors of.
+ * @param k Number of nearest neighbors to search for.
+ * @param accessor Method that maps a data point => vector (array of numbers).
+ * @param distance Method that takes two vectors and returns their distance.
+ */
+function findKNNofPoint(dataPoints, pointIndex, k, accessor, distance) {
+    var kMin = new heap_1.KMin(k);
+    var a = accessor(dataPoints[pointIndex]);
+    for (var i = 0; i < dataPoints.length; ++i) {
+        if (i === pointIndex) {
+            continue;
+        }
+        var b = accessor(dataPoints[i]);
+        var dist = distance(a, b);
+        kMin.add(dist, { index: i, dist: dist });
+    }
+    return kMin.getMinKItems();
+}
+exports.findKNNofPoint = findKNNofPoint;
+
+},{"./heap":8,"./logging":12,"./util":24,"./vector":25}],11:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+/**
+ * Accelerates label placement by dividing the view into a uniform grid.
+ * Labels only need to be tested for collision with other labels that overlap
+ * the same grid cells. This is a fork of {@code amoeba.CollisionGrid}.
+ */
+var CollisionGrid = (function () {
+    /**
+     * Constructs a new Collision grid.
+     *
+     * @param bound The bound of the grid. Labels out of bounds will be rejected.
+     * @param cellWidth Width of a cell in the grid.
+     * @param cellHeight Height of a cell in the grid.
+     */
+    function CollisionGrid(bound, cellWidth, cellHeight) {
+        /** The bound of the grid. Labels out of bounds will be rejected. */
+        this.bound = bound;
+        /** Width of a cell in the grid. */
+        this.cellWidth = cellWidth;
+        /** Height of a cell in the grid. */
+        this.cellHeight = cellHeight;
+        /** Number of grid cells along the x axis. */
+        this.numHorizCells = Math.ceil(this.boundWidth(bound) / cellWidth);
+        /** Number of grid cells along the y axis. */
+        this.numVertCells = Math.ceil(this.boundHeight(bound) / cellHeight);
+        /**
+         * The 2d grid (stored as a 1d array.) Each cell consists of an array of
+         * BoundingBoxes for objects that are in the cell.
+         */
+        this.grid = new Array(this.numHorizCells * this.numVertCells);
+    }
+    CollisionGrid.prototype.boundWidth = function (bound) { return bound.hiX - bound.loX; };
+    CollisionGrid.prototype.boundHeight = function (bound) { return bound.hiY - bound.loY; };
+    CollisionGrid.prototype.boundsIntersect = function (a, b) {
+        return !(a.loX > b.hiX || a.loY > b.hiY || a.hiX < b.loX || a.hiY < b.loY);
+    };
+    /**
+     * Checks if a given bounding box has any conflicts in the grid and inserts it
+     * if none are found.
+     *
+     * @param bound The bound to insert.
+     * @param justTest If true, just test if it conflicts, without inserting.
+     * @return True if the bound was successfully inserted; false if it
+     *         could not be inserted due to a conflict.
+     */
+    CollisionGrid.prototype.insert = function (bound, justTest) {
+        if (justTest === void 0) { justTest = false; }
+        // Reject if the label is out of bounds.
+        if ((bound.hiX < this.bound.loX) || (bound.loX > this.bound.hiX) ||
+            (bound.hiY < this.bound.loY) || (bound.loY > this.bound.hiY)) {
+            return false;
+        }
+        var minCellX = this.getCellX(bound.loX);
+        var maxCellX = this.getCellX(bound.hiX);
+        var minCellY = this.getCellY(bound.loY);
+        var maxCellY = this.getCellY(bound.hiY);
+        // Check all overlapped cells to verify that we can insert.
+        var baseIdx = minCellY * this.numHorizCells + minCellX;
+        var idx = baseIdx;
+        for (var j = minCellY; j <= maxCellY; j++) {
+            for (var i = minCellX; i <= maxCellX; i++) {
+                var cell = this.grid[idx++];
+                if (cell) {
+                    for (var k = 0; k < cell.length; k++) {
+                        if (this.boundsIntersect(bound, cell[k])) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            idx += this.numHorizCells - (maxCellX - minCellX + 1);
+        }
+        if (justTest) {
+            return true;
+        }
+        // Insert into the overlapped cells.
+        idx = baseIdx;
+        for (var j = minCellY; j <= maxCellY; j++) {
+            for (var i = minCellX; i <= maxCellX; i++) {
+                if (!this.grid[idx]) {
+                    this.grid[idx] = [bound];
+                }
+                else {
+                    this.grid[idx].push(bound);
+                }
+                idx++;
+            }
+            idx += this.numHorizCells - (maxCellX - minCellX + 1);
+        }
+        return true;
+    };
+    /**
+     * Returns the x index of the grid cell where the given x coordinate falls.
+     *
+     * @param x the coordinate, in world space.
+     * @return the x index of the cell.
+     */
+    CollisionGrid.prototype.getCellX = function (x) {
+        return Math.floor((x - this.bound.loX) / this.cellWidth);
+    };
+    ;
+    /**
+     * Returns the y index of the grid cell where the given y coordinate falls.
+     *
+     * @param y the coordinate, in world space.
+     * @return the y index of the cell.
+     */
+    CollisionGrid.prototype.getCellY = function (y) {
+        return Math.floor((y - this.bound.loY) / this.cellHeight);
+    };
+    ;
+    return CollisionGrid;
+}());
+exports.CollisionGrid = CollisionGrid;
+
+},{}],12:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+/** Duration in ms for showing warning messages to the user */
+var WARNING_DURATION_MS = 5000;
+/**
+ * Animation duration for the user message which should be +20ms more than the
+ * `transition` css property in `.notify-msg` in `vz-projector.html`.
+ */
+var MSG_ANIMATION_DURATION_MSEC = 300 + 20;
+var dom = null;
+var msgId = 0;
+var numActiveMessages = 0;
+function setDomContainer(domElement) {
+    dom = domElement;
+}
+exports.setDomContainer = setDomContainer;
+/**
+ * Updates the user message with the provided id.
+ *
+ * @param msg The message shown to the user. If null, the message is removed.
+ * @param id The id of an existing message. If no id is provided, a unique id
+ *     is assigned.
+ * @return The id of the message.
+ */
+function setModalMessage(msg, id) {
+    if (id === void 0) { id = null; }
+    if (dom == null) {
+        console.warn('Can\'t show modal message before the dom is initialized');
+        return;
+    }
+    if (id == null) {
+        id = (msgId++).toString();
+    }
+    var dialog = dom.querySelector('#wrapper-notify-msg');
+    var msgsContainer = dom.querySelector('#notify-msgs');
+    var divId = "notify-msg-" + id;
+    var msgDiv = d3.select(dom.querySelector('#' + divId));
+    var exists = msgDiv.size() > 0;
+    if (!exists) {
+        msgDiv = d3.select(msgsContainer).insert('div', ':first-child')
+            .attr('class', 'notify-msg')
+            .attr('id', divId);
+        numActiveMessages++;
+    }
+    if (msg == null) {
+        numActiveMessages--;
+        if (numActiveMessages === 0) {
+            dialog.close();
+        }
+        msgDiv.style('opacity', 0);
+        msgDiv.style('height', 0);
+        setTimeout(function () { return msgDiv.remove(); }, MSG_ANIMATION_DURATION_MSEC);
+    }
+    else {
+        msgDiv.text(msg);
+        dialog.open();
+    }
+    return id;
+}
+exports.setModalMessage = setModalMessage;
+/**
+ * Shows a warning message to the user for a certain amount of time.
+ */
+function setWarningMessage(msg) {
+    var warningMsg = dom.querySelector('#warning-msg');
+    var warningDiv = d3.select(warningMsg);
+    warningDiv.style('display', 'block').text('Warning: ' + msg);
+    // Hide the warning message after a certain timeout.
+    setTimeout(function () {
+        warningDiv.style('display', 'none');
+    }, WARNING_DURATION_MS);
+}
+exports.setWarningMessage = setWarningMessage;
+
+},{}],13:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var renderContext_1 = require('./renderContext');
+var LABEL_FONT_SIZE = 10;
+var LABEL_SCALE_DEFAULT = 1.0;
+var LABEL_SCALE_LARGE = 2;
+var LABEL_FILL_COLOR = 0x000000;
+var LABEL_STROKE_COLOR = 0xFFFFFF;
+var POINT_COLOR_UNSELECTED = 0xE3E3E3;
+var POINT_COLOR_NO_SELECTION = 0x7575D9;
+var POINT_COLOR_SELECTED = 0xFA6666;
+var POINT_COLOR_HOVER = 0x760B4F;
+var POINT_SCALE_DEFAULT = 1.0;
+var POINT_SCALE_SELECTED = 1.2;
+var POINT_SCALE_NEIGHBOR = 1.2;
+var POINT_SCALE_HOVER = 1.2;
+var LABELS_3D_COLOR_UNSELECTED = 0xFFFFFF;
+var LABELS_3D_COLOR_NO_SELECTION = 0xFFFFFF;
+var SPRITE_IMAGE_COLOR_UNSELECTED = 0xFFFFFF;
+var SPRITE_IMAGE_COLOR_NO_SELECTION = 0xFFFFFF;
+var TRACE_START_HUE = 60;
+var TRACE_END_HUE = 360;
+var TRACE_SATURATION = 1;
+var TRACE_LIGHTNESS = .3;
+/**
+ * Interprets projector events and assembes the arrays and commands necessary
+ * to use the ScatterPlot to render the current projected data set.
+ */
+var ProjectorScatterPlotAdapter = (function () {
+    function ProjectorScatterPlotAdapter() {
+    }
+    ProjectorScatterPlotAdapter.prototype.generateVisibleLabelRenderParams = function (ds, selectedPointIndices, neighborsOfFirstPoint, hoverPointIndex) {
+        if (ds == null) {
+            return null;
+        }
+        var n = selectedPointIndices.length + neighborsOfFirstPoint.length +
+            ((hoverPointIndex != null) ? 1 : 0);
+        var visibleLabels = new Uint32Array(n);
+        var scale = new Float32Array(n);
+        var opacityFlags = new Int8Array(n);
+        scale.fill(LABEL_SCALE_DEFAULT);
+        opacityFlags.fill(1);
+        var dst = 0;
+        if (hoverPointIndex != null) {
+            visibleLabels[dst] = hoverPointIndex;
+            scale[dst] = LABEL_SCALE_LARGE;
+            opacityFlags[dst] = 0;
+            ++dst;
+        }
+        // Selected points
+        {
+            var n_1 = selectedPointIndices.length;
+            for (var i = 0; i < n_1; ++i) {
+                visibleLabels[dst] = selectedPointIndices[i];
+                scale[dst] = LABEL_SCALE_LARGE;
+                opacityFlags[dst] = (n_1 === 1) ? 0 : 1;
+                ++dst;
+            }
+        }
+        // Neighbors
+        {
+            var n_2 = neighborsOfFirstPoint.length;
+            for (var i = 0; i < n_2; ++i) {
+                visibleLabels[dst++] = neighborsOfFirstPoint[i].index;
+            }
+        }
+        return new renderContext_1.LabelRenderParams(visibleLabels, scale, opacityFlags, LABEL_FONT_SIZE, LABEL_FILL_COLOR, LABEL_STROKE_COLOR);
+    };
+    ProjectorScatterPlotAdapter.prototype.generatePointScaleFactorArray = function (ds, selectedPointIndices, neighborsOfFirstPoint, hoverPointIndex) {
+        if (ds == null) {
+            return new Float32Array(0);
+        }
+        var scale = new Float32Array(ds.points.length);
+        scale.fill(POINT_SCALE_DEFAULT);
+        // Scale up all selected points.
+        {
+            var n = selectedPointIndices.length;
+            for (var i = 0; i < n; ++i) {
+                var p = selectedPointIndices[i];
+                scale[p] = POINT_SCALE_SELECTED;
+            }
+        }
+        // Scale up the neighbor points.
+        {
+            var n = neighborsOfFirstPoint.length;
+            for (var i = 0; i < n; ++i) {
+                var p = neighborsOfFirstPoint[i].index;
+                scale[p] = POINT_SCALE_NEIGHBOR;
+            }
+        }
+        // Scale up the hover point.
+        if (hoverPointIndex != null) {
+            scale[hoverPointIndex] = POINT_SCALE_HOVER;
+        }
+        return scale;
+    };
+    ProjectorScatterPlotAdapter.prototype.generateLineSegmentColorMap = function (ds, legendPointColorer) {
+        var traceColorArrayMap = {};
+        if (ds == null) {
+            return traceColorArrayMap;
+        }
+        for (var i = 0; i < ds.traces.length; i++) {
+            var dataTrace = ds.traces[i];
+            var colors = new Float32Array(2 * (dataTrace.pointIndices.length - 1) * 3);
+            var colorIndex = 0;
+            if (legendPointColorer) {
+                for (var j = 0; j < dataTrace.pointIndices.length - 1; j++) {
+                    var c1 = new THREE.Color(legendPointColorer(dataTrace.pointIndices[j]));
+                    var c2 = new THREE.Color(legendPointColorer(dataTrace.pointIndices[j + 1]));
+                    colors[colorIndex++] = c1.r;
+                    colors[colorIndex++] = c1.g;
+                    colors[colorIndex++] = c1.b;
+                    colors[colorIndex++] = c2.r;
+                    colors[colorIndex++] = c2.g;
+                    colors[colorIndex++] = c2.b;
+                }
+            }
+            else {
+                for (var j = 0; j < dataTrace.pointIndices.length - 1; j++) {
+                    var c1 = this.getDefaultPointInTraceColor(j, dataTrace.pointIndices.length);
+                    var c2 = this.getDefaultPointInTraceColor(j + 1, dataTrace.pointIndices.length);
+                    colors[colorIndex++] = c1.r;
+                    colors[colorIndex++] = c1.g;
+                    colors[colorIndex++] = c1.b;
+                    colors[colorIndex++] = c2.r;
+                    colors[colorIndex++] = c2.g;
+                    colors[colorIndex++] = c2.b;
+                }
+            }
+            traceColorArrayMap[i] = colors;
+        }
+        return traceColorArrayMap;
+    };
+    ProjectorScatterPlotAdapter.prototype.getDefaultPointInTraceColor = function (index, totalPoints) {
+        var hue = TRACE_START_HUE +
+            (TRACE_END_HUE - TRACE_START_HUE) * index / totalPoints;
+        var rgb = d3.hsl(hue, TRACE_SATURATION, TRACE_LIGHTNESS).rgb();
+        return new THREE.Color(rgb.r / 255, rgb.g / 255, rgb.b / 255);
+    };
+    ProjectorScatterPlotAdapter.prototype.generatePointColorArray = function (ds, legendPointColorer, selectedPointIndices, neighborsOfFirstPoint, hoverPointIndex, label3dMode, spriteImageMode) {
+        if (ds == null) {
+            return new Float32Array(0);
+        }
+        var colors = new Float32Array(ds.points.length * 3);
+        var unselectedColor = POINT_COLOR_UNSELECTED;
+        var noSelectionColor = POINT_COLOR_NO_SELECTION;
+        if (label3dMode) {
+            unselectedColor = LABELS_3D_COLOR_UNSELECTED;
+            noSelectionColor = LABELS_3D_COLOR_NO_SELECTION;
+        }
+        if (spriteImageMode) {
+            unselectedColor = SPRITE_IMAGE_COLOR_UNSELECTED;
+            noSelectionColor = SPRITE_IMAGE_COLOR_NO_SELECTION;
+        }
+        // Give all points the unselected color.
+        {
+            var n = ds.points.length;
+            var dst = 0;
+            if (selectedPointIndices.length > 0) {
+                var c = new THREE.Color(unselectedColor);
+                for (var i = 0; i < n; ++i) {
+                    colors[dst++] = c.r;
+                    colors[dst++] = c.g;
+                    colors[dst++] = c.b;
+                }
+            }
+            else {
+                if (legendPointColorer != null) {
+                    for (var i = 0; i < n; ++i) {
+                        var c = new THREE.Color(legendPointColorer(i));
+                        colors[dst++] = c.r;
+                        colors[dst++] = c.g;
+                        colors[dst++] = c.b;
+                    }
+                }
+                else {
+                    var c = new THREE.Color(noSelectionColor);
+                    for (var i = 0; i < n; ++i) {
+                        colors[dst++] = c.r;
+                        colors[dst++] = c.g;
+                        colors[dst++] = c.b;
+                    }
+                }
+            }
+        }
+        // Color the selected points.
+        {
+            var n = selectedPointIndices.length;
+            var c = new THREE.Color(POINT_COLOR_SELECTED);
+            for (var i = 0; i < n; ++i) {
+                var dst = selectedPointIndices[i] * 3;
+                colors[dst++] = c.r;
+                colors[dst++] = c.g;
+                colors[dst++] = c.b;
+            }
+        }
+        // Color the neighbors.
+        {
+            var n = neighborsOfFirstPoint.length;
+            var c = new THREE.Color(POINT_COLOR_SELECTED);
+            for (var i = 0; i < n; ++i) {
+                var dst = neighborsOfFirstPoint[i].index * 3;
+                colors[dst++] = c.r;
+                colors[dst++] = c.g;
+                colors[dst++] = c.b;
+            }
+        }
+        // Color the hover point.
+        if (hoverPointIndex != null) {
+            var c = new THREE.Color(POINT_COLOR_HOVER);
+            var dst = hoverPointIndex * 3;
+            colors[dst++] = c.r;
+            colors[dst++] = c.g;
+            colors[dst++] = c.b;
+        }
+        return colors;
+    };
+    return ProjectorScatterPlotAdapter;
+}());
+exports.ProjectorScatterPlotAdapter = ProjectorScatterPlotAdapter;
+
+},{"./renderContext":14}],14:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http:www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+/**
+ * LabelRenderParams describes the set of points that should have labels
+ * rendered next to them.
+ */
+var LabelRenderParams = (function () {
+    function LabelRenderParams(pointIndices, scaleFactors, useSceneOpacityFlags, defaultFontSize, fillColor, strokeColor) {
+        this.pointIndices = pointIndices;
+        this.scaleFactors = scaleFactors;
+        this.useSceneOpacityFlags = useSceneOpacityFlags;
+        this.defaultFontSize = defaultFontSize;
+        this.fillColor = fillColor;
+        this.strokeColor = strokeColor;
+    }
+    return LabelRenderParams;
+}());
+exports.LabelRenderParams = LabelRenderParams;
+/**
+ * RenderContext contains all of the state required to color and render the data
+ * set. ScatterPlot passes this to every attached visualizer as part of the
+ * render callback.
+ * TODO(nicholsonc): This should only contain the data that's changed between
+ * each frame. Data like colors / scale factors / labels should be recomputed
+ * only when they change.
+ */
+var RenderContext = (function () {
+    function RenderContext(camera, cameraTarget, screenWidth, screenHeight, nearestCameraSpacePointZ, farthestCameraSpacePointZ, pointColors, pointScaleFactors, labelAccessor, labels, traceColors) {
+        this.camera = camera;
+        this.cameraTarget = cameraTarget;
+        this.screenWidth = screenWidth;
+        this.screenHeight = screenHeight;
+        this.nearestCameraSpacePointZ = nearestCameraSpacePointZ;
+        this.farthestCameraSpacePointZ = farthestCameraSpacePointZ;
+        this.pointColors = pointColors;
+        this.pointScaleFactors = pointScaleFactors;
+        this.labelAccessor = labelAccessor;
+        this.labels = labels;
+        this.traceColors = traceColors;
+    }
+    return RenderContext;
+}());
+exports.RenderContext = RenderContext;
+
+},{}],15:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var renderContext_1 = require('./renderContext');
+var scatterPlotVisualizerAxes_1 = require('./scatterPlotVisualizerAxes');
+var util_1 = require('./util');
+var vector_1 = require('./vector');
+var BACKGROUND_COLOR = 0xffffff;
+/**
+ * The length of the cube (diameter of the circumscribing sphere) where all the
+ * points live.
+ */
+var CUBE_LENGTH = 2;
+var MAX_ZOOM = 5 * CUBE_LENGTH;
+var MIN_ZOOM = 0.025 * CUBE_LENGTH;
+// Constants relating to the camera parameters.
+var PERSP_CAMERA_FOV_VERTICAL = 70;
+var PERSP_CAMERA_NEAR_CLIP_PLANE = 0.01;
+var PERSP_CAMERA_FAR_CLIP_PLANE = 100;
+var ORTHO_CAMERA_FRUSTUM_HALF_EXTENT = 1.2;
+// Key presses.
+var SHIFT_KEY = 16;
+var CTRL_KEY = 17;
+var START_CAMERA_POS_3D = new THREE.Vector3(0.45, 0.9, 1.6);
+var START_CAMERA_TARGET_3D = new THREE.Vector3(0, 0, 0);
+var START_CAMERA_POS_2D = new THREE.Vector3(0, 0, 1);
+var START_CAMERA_TARGET_2D = new THREE.Vector3(0, 0, 0);
+var ORBIT_MOUSE_ROTATION_SPEED = 1;
+var ORBIT_ANIMATION_ROTATION_CYCLE_IN_SECONDS = 7;
+/** Supported modes of interaction. */
+(function (Mode) {
+    Mode[Mode["SELECT"] = 0] = "SELECT";
+    Mode[Mode["HOVER"] = 1] = "HOVER";
+})(exports.Mode || (exports.Mode = {}));
+var Mode = exports.Mode;
+/** Defines a camera, suitable for serialization. */
+var CameraDef = (function () {
+    function CameraDef() {
+        this.orthographic = false;
+    }
+    return CameraDef;
+}());
+exports.CameraDef = CameraDef;
+/**
+ * Maintains a three.js instantiation and context,
+ * animation state, and all other logic that's
+ * independent of how a 3D scatter plot is actually rendered. Also holds an
+ * array of visualizers and dispatches application events to them.
+ */
+var ScatterPlot = (function () {
+    function ScatterPlot(container, labelAccessor, selectionContext, hoverContext) {
+        this.visualizers = [];
+        this.onCameraMoveListeners = [];
+        this.backgroundColor = BACKGROUND_COLOR;
+        this.dimensionality = 3;
+        this.cameraDef = null;
+        this.orbitAnimationOnNextCameraCreation = false;
+        this.selecting = false;
+        this.mouseIsDown = false;
+        this.isDragSequence = false;
+        this.containerNode = container.node();
+        this.selectionContext = selectionContext;
+        this.hoverContext = hoverContext;
+        this.getLayoutValues();
+        this.labelAccessor = labelAccessor;
+        this.xScale = d3.scale.linear();
+        this.yScale = d3.scale.linear();
+        this.zScale = d3.scale.linear();
+        this.scene = new THREE.Scene();
+        this.renderer =
+            new THREE.WebGLRenderer({ alpha: true, premultipliedAlpha: false });
+        this.renderer.setClearColor(BACKGROUND_COLOR, 1);
+        this.containerNode.appendChild(this.renderer.domElement);
+        this.light = new THREE.PointLight(0xFFECBF, 1, 0);
+        this.scene.add(this.light);
+        this.setDimensions(3);
+        this.recreateCamera(this.makeDefaultCameraDef(this.dimensionality));
+        this.renderer.render(this.scene, this.camera);
+        this.addAxesToScene();
+        this.addInteractionListeners();
+    }
+    ScatterPlot.prototype.addInteractionListeners = function () {
+        this.containerNode.addEventListener('mousemove', this.onMouseMove.bind(this));
+        this.containerNode.addEventListener('mousedown', this.onMouseDown.bind(this));
+        this.containerNode.addEventListener('mouseup', this.onMouseUp.bind(this));
+        this.containerNode.addEventListener('click', this.onClick.bind(this));
+        window.addEventListener('keydown', this.onKeyDown.bind(this), false);
+        window.addEventListener('keyup', this.onKeyUp.bind(this), false);
+    };
+    ScatterPlot.prototype.addCameraControlsEventListeners = function (cameraControls) {
+        var _this = this;
+        // Start is called when the user stars interacting with
+        // controls.
+        cameraControls.addEventListener('start', function () {
+            _this.stopOrbitAnimation();
+            _this.onCameraMoveListeners.forEach(function (l) { return l(_this.camera.position, cameraControls.target); });
+        });
+        // Change is called everytime the user interacts with the controls.
+        cameraControls.addEventListener('change', function () {
+            _this.render();
+        });
+        // End is called when the user stops interacting with the
+        // controls (e.g. on mouse up, after dragging).
+        cameraControls.addEventListener('end', function () { });
+    };
+    ScatterPlot.prototype.makeCamera3D = function (cameraDef, w, h) {
+        var camera;
+        {
+            var aspectRatio = w / h;
+            camera = new THREE.PerspectiveCamera(PERSP_CAMERA_FOV_VERTICAL, aspectRatio, PERSP_CAMERA_NEAR_CLIP_PLANE, PERSP_CAMERA_FAR_CLIP_PLANE);
+            camera.position.set(cameraDef.position[0], cameraDef.position[1], cameraDef.position[2]);
+            var at = new THREE.Vector3(cameraDef.target[0], cameraDef.target[1], cameraDef.target[2]);
+            camera.lookAt(at);
+            camera.zoom = cameraDef.zoom;
+        }
+        var occ = new THREE.OrbitControls(camera, this.renderer.domElement);
+        occ.enableRotate = true;
+        occ.rotateSpeed = ORBIT_MOUSE_ROTATION_SPEED;
+        occ.mouseButtons.ORBIT = THREE.MOUSE.LEFT;
+        occ.mouseButtons.PAN = THREE.MOUSE.RIGHT;
+        if (this.orbitCameraControls != null) {
+            this.orbitCameraControls.dispose();
+        }
+        this.camera = camera;
+        this.orbitCameraControls = occ;
+        this.addCameraControlsEventListeners(this.orbitCameraControls);
+    };
+    ScatterPlot.prototype.makeCamera2D = function (cameraDef, w, h) {
+        var camera;
+        var target = new THREE.Vector3(cameraDef.target[0], cameraDef.target[1], cameraDef.target[2]);
+        {
+            var aspectRatio = w / h;
+            var left = -ORTHO_CAMERA_FRUSTUM_HALF_EXTENT;
+            var right = ORTHO_CAMERA_FRUSTUM_HALF_EXTENT;
+            var bottom = -ORTHO_CAMERA_FRUSTUM_HALF_EXTENT;
+            var top_1 = ORTHO_CAMERA_FRUSTUM_HALF_EXTENT;
+            // Scale up the larger of (w, h) to match the aspect ratio.
+            if (aspectRatio > 1) {
+                left *= aspectRatio;
+                right *= aspectRatio;
+            }
+            else {
+                top_1 /= aspectRatio;
+                bottom /= aspectRatio;
+            }
+            camera =
+                new THREE.OrthographicCamera(left, right, top_1, bottom, -1000, 1000);
+            camera.position.set(cameraDef.position[0], cameraDef.position[1], cameraDef.position[2]);
+            camera.up = new THREE.Vector3(0, 1, 0);
+            camera.lookAt(target);
+            camera.zoom = cameraDef.zoom;
+        }
+        var occ = new THREE.OrbitControls(camera, this.renderer.domElement);
+        occ.target = target;
+        occ.enableRotate = false;
+        occ.enableDamping = false;
+        occ.autoRotate = false;
+        occ.mouseButtons.ORBIT = null;
+        occ.mouseButtons.PAN = THREE.MOUSE.LEFT;
+        if (this.orbitCameraControls != null) {
+            this.orbitCameraControls.dispose();
+        }
+        this.camera = camera;
+        this.orbitCameraControls = occ;
+        this.addCameraControlsEventListeners(occ);
+    };
+    ScatterPlot.prototype.makeDefaultCameraDef = function (dimensionality) {
+        var def = new CameraDef();
+        def.orthographic = (dimensionality === 2);
+        def.zoom = 1.0;
+        if (def.orthographic) {
+            def.position =
+                [START_CAMERA_POS_2D.x, START_CAMERA_POS_2D.y, START_CAMERA_POS_2D.z];
+            def.target = [
+                START_CAMERA_TARGET_2D.x, START_CAMERA_TARGET_2D.y,
+                START_CAMERA_TARGET_2D.z
+            ];
+        }
+        else {
+            def.position =
+                [START_CAMERA_POS_3D.x, START_CAMERA_POS_3D.y, START_CAMERA_POS_3D.z];
+            def.target = [
+                START_CAMERA_TARGET_3D.x, START_CAMERA_TARGET_3D.y,
+                START_CAMERA_TARGET_3D.z
+            ];
+        }
+        return def;
+    };
+    /** Recreate the scatter plot camera from a definition structure. */
+    ScatterPlot.prototype.recreateCamera = function (cameraDef) {
+        if (cameraDef.orthographic) {
+            this.makeCamera2D(cameraDef, this.width, this.height);
+        }
+        else {
+            this.makeCamera3D(cameraDef, this.width, this.height);
+        }
+        this.orbitCameraControls.minDistance = MIN_ZOOM;
+        this.orbitCameraControls.maxDistance = MAX_ZOOM;
+        this.orbitCameraControls.update();
+        if (this.orbitAnimationOnNextCameraCreation) {
+            this.startOrbitAnimation();
+        }
+    };
+    ScatterPlot.prototype.onClick = function (e, notify) {
+        if (notify === void 0) { notify = true; }
+        if (e && this.selecting) {
+            return;
+        }
+        // Only call event handlers if the click originated from the scatter plot.
+        if (!this.isDragSequence && notify) {
+            var selection = this.nearestPoint ? [this.nearestPoint] : [];
+            this.selectionContext.notifySelectionChanged(selection);
+        }
+        this.isDragSequence = false;
+        this.render();
+    };
+    ScatterPlot.prototype.onMouseDown = function (e) {
+        this.isDragSequence = false;
+        this.mouseIsDown = true;
+        // If we are in selection mode, and we have in fact clicked a valid point,
+        // create a sphere so we can select things
+        if (this.selecting) {
+            this.orbitCameraControls.enabled = false;
+            this.setNearestPointToMouse(e);
+            if (this.nearestPoint) {
+                this.createSelectionSphere();
+            }
+        }
+        else if (!e.ctrlKey && this.sceneIs3D() &&
+            this.orbitCameraControls.mouseButtons.ORBIT === THREE.MOUSE.RIGHT) {
+            // The user happened to press the ctrl key when the tab was active,
+            // unpressed the ctrl when the tab was inactive, and now he/she
+            // is back to the projector tab.
+            this.orbitCameraControls.mouseButtons.ORBIT = THREE.MOUSE.LEFT;
+            this.orbitCameraControls.mouseButtons.PAN = THREE.MOUSE.RIGHT;
+        }
+        else if (e.ctrlKey && this.sceneIs3D() &&
+            this.orbitCameraControls.mouseButtons.ORBIT === THREE.MOUSE.LEFT) {
+            // Similarly to the situation above.
+            this.orbitCameraControls.mouseButtons.ORBIT = THREE.MOUSE.RIGHT;
+            this.orbitCameraControls.mouseButtons.PAN = THREE.MOUSE.LEFT;
+        }
+    };
+    /** When we stop dragging/zooming, return to normal behavior. */
+    ScatterPlot.prototype.onMouseUp = function (e) {
+        if (this.selecting) {
+            this.orbitCameraControls.enabled = true;
+            this.scene.remove(this.selectionSphere);
+            this.selectionSphere = null;
+            this.render();
+        }
+        this.mouseIsDown = false;
+    };
+    /**
+     * When the mouse moves, find the nearest point (if any) and send it to the
+     * hoverlisteners (usually called from embedding.ts)
+     */
+    ScatterPlot.prototype.onMouseMove = function (e) {
+        if (!this.dataSet) {
+            return;
+        }
+        this.isDragSequence = this.mouseIsDown;
+        // Depending if we're selecting or just navigating, handle accordingly.
+        if (this.selecting && this.mouseIsDown) {
+            if (this.selectionSphere) {
+                this.adjustSelectionSphere(e);
+            }
+            this.render();
+        }
+        else if (!this.mouseIsDown) {
+            this.setNearestPointToMouse(e);
+            this.hoverContext.notifyHoverOverPoint(this.nearestPoint);
+        }
+    };
+    /** For using ctrl + left click as right click, and for circle select */
+    ScatterPlot.prototype.onKeyDown = function (e) {
+        // If ctrl is pressed, use left click to orbit
+        if (e.keyCode === CTRL_KEY && this.sceneIs3D()) {
+            this.orbitCameraControls.mouseButtons.ORBIT = THREE.MOUSE.RIGHT;
+            this.orbitCameraControls.mouseButtons.PAN = THREE.MOUSE.LEFT;
+        }
+        // If shift is pressed, start selecting
+        if (e.keyCode === SHIFT_KEY) {
+            this.selecting = true;
+            this.containerNode.style.cursor = 'crosshair';
+        }
+    };
+    /** For using ctrl + left click as right click, and for circle select */
+    ScatterPlot.prototype.onKeyUp = function (e) {
+        if (e.keyCode === CTRL_KEY && this.sceneIs3D()) {
+            this.orbitCameraControls.mouseButtons.ORBIT = THREE.MOUSE.LEFT;
+            this.orbitCameraControls.mouseButtons.PAN = THREE.MOUSE.RIGHT;
+        }
+        // If shift is released, stop selecting
+        if (e.keyCode === SHIFT_KEY) {
+            this.selecting = (this.getMode() === Mode.SELECT);
+            if (!this.selecting) {
+                this.containerNode.style.cursor = 'default';
+            }
+            this.scene.remove(this.selectionSphere);
+            this.selectionSphere = null;
+            this.render();
+        }
+    };
+    ScatterPlot.prototype.setNearestPointToMouse = function (e) {
+        if (this.pickingTexture == null) {
+            this.nearestPoint = null;
+            return;
+        }
+        // Create buffer for reading a single pixel.
+        var pixelBuffer = new Uint8Array(4);
+        var dpr = window.devicePixelRatio || 1;
+        var x = e.offsetX * dpr;
+        var y = e.offsetY * dpr;
+        // Read the pixel under the mouse from the texture.
+        this.renderer.readRenderTargetPixels(this.pickingTexture, x, this.pickingTexture.height - y, 1, 1, pixelBuffer);
+        // Interpret the pixel as an ID.
+        var id = (pixelBuffer[0] << 16) | (pixelBuffer[1] << 8) | pixelBuffer[2];
+        this.nearestPoint =
+            (id !== 0xffffff) && (id < this.dataSet.points.length) ? id : null;
+    };
+    /** Returns the squared distance to the mouse for the i-th point. */
+    ScatterPlot.prototype.getDist2ToMouse = function (i, e) {
+        var point = util_1.getProjectedPointFromIndex(this.dataSet, i);
+        var screenCoords = util_1.vector3DToScreenCoords(this.camera, this.width, this.height, point);
+        var dpr = window.devicePixelRatio || 1;
+        return vector_1.dist_2D([e.offsetX * dpr, e.offsetY * dpr], [screenCoords[0], screenCoords[1]]);
+    };
+    ScatterPlot.prototype.adjustSelectionSphere = function (e) {
+        var _this = this;
+        var dist = this.getDist2ToMouse(this.nearestPoint, e) / 100;
+        this.selectionSphere.scale.set(dist, dist, dist);
+        var selectedPoints = [];
+        this.dataSet.points.forEach(function (point) {
+            var pt = point.projectedPoint;
+            var pointVect = new THREE.Vector3(pt[0], pt[1], pt[2]);
+            var distPointToSphereOrigin = _this.selectionSphere.position.clone().sub(pointVect).length();
+            if (distPointToSphereOrigin < dist) {
+                selectedPoints.push(_this.dataSet.points.indexOf(point));
+            }
+        });
+        this.selectionContext.notifySelectionChanged(selectedPoints);
+    };
+    ScatterPlot.prototype.removeAll = function () {
+        var _this = this;
+        this.visualizers.forEach(function (v) {
+            v.removeAllFromScene(_this.scene);
+        });
+    };
+    ScatterPlot.prototype.createSelectionSphere = function () {
+        var geometry = new THREE.SphereGeometry(1, 300, 100);
+        var material = new THREE.MeshPhongMaterial({
+            color: 0x000000,
+            specular: (this.sceneIs3D() && 0xffffff),
+            emissive: 0x000000,
+            shininess: 10,
+            shading: THREE.SmoothShading,
+            opacity: 0.125,
+            transparent: true,
+        });
+        this.selectionSphere = new THREE.Mesh(geometry, material);
+        this.selectionSphere.scale.set(0, 0, 0);
+        var pos = this.dataSet.points[this.nearestPoint].projectedPoint;
+        this.scene.add(this.selectionSphere);
+        this.selectionSphere.position.set(pos[0], pos[1], pos[2]);
+    };
+    ScatterPlot.prototype.getLayoutValues = function () {
+        this.width = this.containerNode.offsetWidth;
+        this.height = Math.max(1, this.containerNode.offsetHeight);
+        return [this.width, this.height];
+    };
+    /**
+     * Returns an x, y, z value for each item of our data based on the accessor
+     * methods.
+     */
+    ScatterPlot.prototype.getPointsCoordinates = function () {
+        var _this = this;
+        var xAccessor = this.pointAccessors[0];
+        var yAccessor = this.pointAccessors[1];
+        var zAccessor = this.pointAccessors[2];
+        // Determine max and min of each axis of our data.
+        var xExtent = d3.extent(this.dataSet.points, function (p, i) { return xAccessor(i); });
+        var yExtent = d3.extent(this.dataSet.points, function (p, i) { return yAccessor(i); });
+        var range = [-CUBE_LENGTH / 2, CUBE_LENGTH / 2];
+        this.xScale.domain(xExtent).range(range);
+        this.yScale.domain(yExtent).range(range);
+        if (zAccessor) {
+            var zExtent = d3.extent(this.dataSet.points, function (p, i) { return zAccessor(i); });
+            this.zScale.domain(zExtent).range(range);
+        }
+        // Determine 3d coordinates of each data point.
+        this.dataSet.points.forEach(function (d, i) {
+            d.projectedPoint[0] = _this.xScale(xAccessor(i));
+            d.projectedPoint[1] = _this.yScale(yAccessor(i));
+        });
+        if (zAccessor) {
+            this.dataSet.points.forEach(function (d, i) {
+                d.projectedPoint[2] = _this.zScale(zAccessor(i));
+            });
+        }
+        else {
+            this.dataSet.points.forEach(function (d, i) {
+                d.projectedPoint[2] = 0;
+            });
+        }
+    };
+    ScatterPlot.prototype.addAxesToScene = function () {
+        this.addVisualizer(new scatterPlotVisualizerAxes_1.ScatterPlotVisualizerAxes());
+    };
+    ScatterPlot.prototype.sceneIs3D = function () {
+        return this.dimensionality === 3;
+    };
+    /** Set 2d vs 3d mode. */
+    ScatterPlot.prototype.setDimensions = function (dimensionality) {
+        if ((dimensionality !== 2) && (dimensionality !== 3)) {
+            throw new RangeError('dimensionality must be 2 or 3');
+        }
+        this.dimensionality = dimensionality;
+        var def = this.cameraDef || this.makeDefaultCameraDef(dimensionality);
+        this.recreateCamera(def);
+    };
+    /** Gets the current camera information, suitable for serialization. */
+    ScatterPlot.prototype.getCameraDef = function () {
+        var def = new CameraDef();
+        var pos = this.camera.position;
+        var tgt = this.orbitCameraControls.target;
+        def.orthographic = !this.sceneIs3D();
+        def.position = [pos.x, pos.y, pos.z];
+        def.target = [tgt.x, tgt.y, tgt.z];
+        def.zoom = this.camera.zoom;
+        return def;
+    };
+    /** Sets parameters for the next camera recreation. */
+    ScatterPlot.prototype.setCameraParametersForNextCameraCreation = function (def, orbitAnimation) {
+        this.cameraDef = def;
+        this.orbitAnimationOnNextCameraCreation = orbitAnimation;
+    };
+    /** Gets the current camera position. */
+    ScatterPlot.prototype.getCameraPosition = function () {
+        var currPos = this.camera.position;
+        return [currPos.x, currPos.y, currPos.z];
+    };
+    /** Gets the current camera target. */
+    ScatterPlot.prototype.getCameraTarget = function () {
+        var currTarget = this.orbitCameraControls.target;
+        return [currTarget.x, currTarget.y, currTarget.z];
+    };
+    /** Sets up the camera from given position and target coordinates. */
+    ScatterPlot.prototype.setCameraPositionAndTarget = function (position, target) {
+        this.stopOrbitAnimation();
+        this.camera.position.set(position[0], position[1], position[2]);
+        this.orbitCameraControls.target.set(target[0], target[1], target[2]);
+        this.orbitCameraControls.update();
+        this.render();
+    };
+    /** Starts orbiting the camera around its current lookat target. */
+    ScatterPlot.prototype.startOrbitAnimation = function () {
+        if (!this.sceneIs3D()) {
+            return;
+        }
+        if (this.orbitAnimationId != null) {
+            this.stopOrbitAnimation();
+        }
+        this.orbitCameraControls.autoRotate = true;
+        this.orbitCameraControls.rotateSpeed =
+            ORBIT_ANIMATION_ROTATION_CYCLE_IN_SECONDS;
+        this.updateOrbitAnimation();
+    };
+    ScatterPlot.prototype.updateOrbitAnimation = function () {
+        var _this = this;
+        this.orbitCameraControls.update();
+        this.orbitAnimationId =
+            requestAnimationFrame(function () { return _this.updateOrbitAnimation(); });
+    };
+    /** Stops the orbiting animation on the camera. */
+    ScatterPlot.prototype.stopOrbitAnimation = function () {
+        this.orbitCameraControls.autoRotate = false;
+        this.orbitCameraControls.rotateSpeed = ORBIT_MOUSE_ROTATION_SPEED;
+        if (this.orbitAnimationId != null) {
+            cancelAnimationFrame(this.orbitAnimationId);
+            this.orbitAnimationId = null;
+        }
+    };
+    /** Adds a visualizer to the set, will start dispatching events to it */
+    ScatterPlot.prototype.addVisualizer = function (visualizer) {
+        this.visualizers.push(visualizer);
+        if (this.dataSet) {
+            visualizer.onDataSet(this.dataSet);
+        }
+        if (this.labelAccessor) {
+            visualizer.onSetLabelAccessor(this.labelAccessor);
+        }
+        if (this.scene) {
+            visualizer.onRecreateScene(this.scene, this.sceneIs3D(), this.backgroundColor);
+        }
+    };
+    /** Removes all visualizers attached to this scatter plot. */
+    ScatterPlot.prototype.removeAllVisualizers = function () {
+        this.removeAll();
+        this.visualizers = [];
+        this.addAxesToScene();
+    };
+    ScatterPlot.prototype.recreateScene = function () {
+        var _this = this;
+        this.removeAll();
+        this.visualizers.forEach(function (v) {
+            v.onRecreateScene(_this.scene, _this.sceneIs3D(), _this.backgroundColor);
+        });
+        this.resize(false);
+        this.render();
+    };
+    /** Sets the data for the scatter plot. */
+    ScatterPlot.prototype.setDataSet = function (dataSet) {
+        this.removeAll();
+        this.dataSet = dataSet;
+        this.nearestPoint = null;
+        this.visualizers.forEach(function (v) {
+            v.onDataSet(dataSet);
+        });
+        this.render();
+    };
+    ScatterPlot.prototype.update = function () {
+        var _this = this;
+        this.getPointsCoordinates();
+        this.visualizers.forEach(function (v) {
+            v.onUpdate(_this.dataSet);
+        });
+        this.render();
+    };
+    ScatterPlot.prototype.render = function () {
+        if (!this.dataSet) {
+            return;
+        }
+        // place the light near the camera
+        {
+            var lightPos = this.camera.position.clone();
+            lightPos.x += 1;
+            lightPos.y += 1;
+            this.light.position.set(lightPos.x, lightPos.y, lightPos.z);
+        }
+        var cameraSpacePointExtents = util_1.getNearFarPoints(this.dataSet, this.camera.position, this.orbitCameraControls.target);
+        var rc = new renderContext_1.RenderContext(this.camera, this.orbitCameraControls.target, this.width, this.height, cameraSpacePointExtents[0], cameraSpacePointExtents[1], this.pointColors, this.pointScaleFactors, this.labelAccessor, this.labels, this.traceColors);
+        // Render first pass to picking target. This render fills pickingTexture
+        // with colors that are actually point ids, so that sampling the texture at
+        // the mouse's current x,y coordinates will reveal the data point that the
+        // mouse is over.
+        this.visualizers.forEach(function (v) {
+            v.onPickingRender(rc);
+        });
+        this.renderer.render(this.scene, this.camera, this.pickingTexture);
+        // Render second pass to color buffer, to be displayed on the canvas.
+        this.visualizers.forEach(function (v) {
+            v.onRender(rc);
+        });
+        this.renderer.render(this.scene, this.camera);
+    };
+    ScatterPlot.prototype.setPointAccessors = function (pointAccessors) {
+        this.pointAccessors = pointAccessors;
+    };
+    ScatterPlot.prototype.setLabelAccessor = function (labelAccessor) {
+        this.labelAccessor = labelAccessor;
+        this.visualizers.forEach(function (v) {
+            v.onSetLabelAccessor(labelAccessor);
+        });
+    };
+    ScatterPlot.prototype.setMode = function (mode) {
+        this.mode = mode;
+        if (mode === Mode.SELECT) {
+            this.selecting = true;
+            this.containerNode.style.cursor = 'crosshair';
+        }
+        else {
+            this.selecting = false;
+            this.containerNode.style.cursor = 'default';
+        }
+    };
+    /** Set the colors for every data point. (RGB triplets) */
+    ScatterPlot.prototype.setPointColors = function (colors) {
+        this.pointColors = colors;
+    };
+    /** Set the scale factors for every data point. (scalars) */
+    ScatterPlot.prototype.setPointScaleFactors = function (scaleFactors) {
+        this.pointScaleFactors = scaleFactors;
+    };
+    /** Set the labels to rendered */
+    ScatterPlot.prototype.setLabels = function (labels) {
+        this.labels = labels;
+    };
+    /** Set the colors for every data trace. (RGB triplets) */
+    ScatterPlot.prototype.setTraceColors = function (colors) {
+        this.traceColors = colors;
+    };
+    ScatterPlot.prototype.getMode = function () { return this.mode; };
+    ScatterPlot.prototype.resetZoom = function () {
+        this.recreateCamera(this.makeDefaultCameraDef(this.dimensionality));
+        this.render();
+    };
+    ScatterPlot.prototype.setDayNightMode = function (isNight) {
+        d3.select(this.containerNode)
+            .selectAll('canvas')
+            .style('filter', isNight ? 'invert(100%)' : null);
+    };
+    ScatterPlot.prototype.showAxes = function (show) { };
+    ScatterPlot.prototype.showTickLabels = function (show) { };
+    ScatterPlot.prototype.resize = function (render) {
+        if (render === void 0) { render = true; }
+        var _a = [this.width, this.height], oldW = _a[0], oldH = _a[1];
+        var _b = this.getLayoutValues(), newW = _b[0], newH = _b[1];
+        if (this.dimensionality === 3) {
+            var camera = this.camera;
+            camera.aspect = newW / newH;
+            camera.updateProjectionMatrix();
+        }
+        else {
+            var camera = this.camera;
+            // Scale the ortho frustum by however much the window changed.
+            var scaleW = newW / oldW;
+            var scaleH = newH / oldH;
+            var newCamHalfWidth = ((camera.right - camera.left) * scaleW) / 2;
+            var newCamHalfHeight = ((camera.top - camera.bottom) * scaleH) / 2;
+            camera.top = newCamHalfHeight;
+            camera.bottom = -newCamHalfHeight;
+            camera.left = -newCamHalfWidth;
+            camera.right = newCamHalfWidth;
+            camera.updateProjectionMatrix();
+        }
+        // Accouting for retina displays.
+        var dpr = window.devicePixelRatio || 1;
+        this.renderer.setPixelRatio(dpr);
+        this.renderer.setSize(newW, newH);
+        // the picking texture needs to be exactly the same as the render texture.
+        {
+            var renderCanvasSize = this.renderer.getSize();
+            var pixelRatio = this.renderer.getPixelRatio();
+            this.pickingTexture = new THREE.WebGLRenderTarget(renderCanvasSize.width * pixelRatio, renderCanvasSize.height * pixelRatio);
+            this.pickingTexture.texture.minFilter = THREE.LinearFilter;
+        }
+        this.visualizers.forEach(function (v) {
+            v.onResize(newW, newH);
+        });
+        if (render) {
+            this.render();
+        }
+        ;
+    };
+    ScatterPlot.prototype.onCameraMove = function (listener) {
+        this.onCameraMoveListeners.push(listener);
+    };
+    ScatterPlot.prototype.clickOnPoint = function (pointIndex) {
+        this.nearestPoint = pointIndex;
+        this.onClick(null, false);
+    };
+    return ScatterPlot;
+}());
+exports.ScatterPlot = ScatterPlot;
+
+},{"./renderContext":14,"./scatterPlotVisualizerAxes":18,"./util":24,"./vector":25}],16:[function(require,module,exports){
+arguments[4][9][0].apply(exports,arguments)
+},{"dup":9}],17:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var util_1 = require('./util');
+var FONT_SIZE = 80;
+var ONE_OVER_FONT_SIZE = 1 / FONT_SIZE;
+var LABEL_SCALE = 2.2; // at 1:1 texel/pixel ratio
+var LABEL_COLOR = 'black';
+var LABEL_BACKGROUND = 'white';
+var MAX_CANVAS_DIMENSION = 8192;
+var NUM_GLYPHS = 256;
+var RGB_ELEMENTS_PER_ENTRY = 3;
+var XYZ_ELEMENTS_PER_ENTRY = 3;
+var UV_ELEMENTS_PER_ENTRY = 2;
+var VERTICES_PER_GLYPH = 2 * 3; // 2 triangles, 3 verts per triangle
+/**
+ * Each label is made up of triangles (two per letter.) Each vertex, then, is
+ * the corner of one of these triangles (and thus the corner of a letter
+ * rectangle.)
+ * Each has the following attributes:
+ *    posObj: The (x, y) position of the vertex within the label, where the
+ *            bottom center of the word is positioned at (0, 0);
+ *    position: The position of the label in worldspace.
+ *    vUv: The (u, v) coordinates that index into the glyphs sheet (range 0, 1.)
+ *    color: The color of the label (matches the cooresponding point's color.)
+ *    wordShown: Boolean. Whether or not the label is visible.
+ */
+var VERTEX_SHADER = "\n    attribute vec2 posObj;\n    attribute vec3 color;\n    varying vec2 vUv;\n    varying vec3 vColor;\n\n    void main() {\n      vUv = uv;\n      vColor = color;\n\n      // Rotate label to face camera.\n\n      vec4 vRight = vec4(\n        modelViewMatrix[0][0], modelViewMatrix[1][0], modelViewMatrix[2][0], 0);\n\n      vec4 vUp = vec4(\n        modelViewMatrix[0][1], modelViewMatrix[1][1], modelViewMatrix[2][1], 0);\n\n      vec4 vAt = -vec4(\n        modelViewMatrix[0][2], modelViewMatrix[1][2], modelViewMatrix[2][2], 0);\n\n      mat4 pointToCamera = mat4(vRight, vUp, vAt, vec4(0, 0, 0, 1));\n\n      vec2 scaledPos = posObj * " + ONE_OVER_FONT_SIZE + " * " + LABEL_SCALE + ";\n\n      vec4 posRotated = pointToCamera * vec4(scaledPos, 0, 1);\n      vec4 mvPosition = modelViewMatrix * (vec4(position, 0) + posRotated);\n      gl_Position = projectionMatrix * mvPosition;\n    }";
+var FRAGMENT_SHADER = "\n    uniform sampler2D texture;\n    uniform bool picking;\n    varying vec2 vUv;\n    varying vec3 vColor;\n\n    void main() {\n      if (picking) {\n        gl_FragColor = vec4(vColor, 1.0);\n      } else {\n        vec4 fromTexture = texture2D(texture, vUv);\n        gl_FragColor = vec4(vColor, 1.0) * fromTexture;\n      }\n    }";
+/**
+ * Renders the text labels as 3d geometry in the world.
+ */
+var ScatterPlotVisualizer3DLabels = (function () {
+    function ScatterPlotVisualizer3DLabels() {
+        this.glyphTexture = this.createGlyphTexture();
+        this.uniforms = {
+            texture: { type: 't', value: this.glyphTexture.texture },
+            picking: { type: 'bool', value: false },
+        };
+        this.material = new THREE.ShaderMaterial({
+            uniforms: this.uniforms,
+            transparent: true,
+            vertexShader: VERTEX_SHADER,
+            fragmentShader: FRAGMENT_SHADER,
+        });
+    }
+    ScatterPlotVisualizer3DLabels.prototype.createGlyphTexture = function () {
+        if (this.glyphTexture) {
+            this.glyphTexture.texture.dispose();
+        }
+        var canvas = document.createElement('canvas');
+        canvas.width = MAX_CANVAS_DIMENSION;
+        canvas.height = FONT_SIZE;
+        var ctx = canvas.getContext('2d');
+        ctx.font = 'bold ' + FONT_SIZE * 0.75 + 'px roboto';
+        ctx.textBaseline = 'top';
+        ctx.fillStyle = LABEL_BACKGROUND;
+        ctx.rect(0, 0, canvas.width, canvas.height);
+        ctx.fill();
+        ctx.fillStyle = LABEL_COLOR;
+        var spaceOffset = ctx.measureText(' ').width;
+        // For each letter, store length, position at the encoded index.
+        var glyphLengths = new Float32Array(NUM_GLYPHS);
+        var glyphOffset = new Float32Array(NUM_GLYPHS);
+        var leftCoord = 0;
+        for (var i = 0; i < NUM_GLYPHS; i++) {
+            var text = ' ' + String.fromCharCode(i);
+            var textLength = ctx.measureText(text).width;
+            glyphLengths[i] = textLength - spaceOffset;
+            glyphOffset[i] = leftCoord;
+            ctx.fillText(text, leftCoord - spaceOffset, 0);
+            leftCoord += textLength;
+        }
+        var tex = util_1.createTexture(canvas);
+        return { texture: tex, lengths: glyphLengths, offsets: glyphOffset };
+    };
+    ScatterPlotVisualizer3DLabels.prototype.processLabelVerts = function () {
+        var numTotalLetters = 0;
+        this.labelVertexMap = [];
+        for (var i = 0; i < this.dataSet.points.length; i++) {
+            var label = this.labelAccessor(i).toString();
+            var vertsArray = [];
+            for (var j = 0; j < label.length; j++) {
+                for (var k = 0; k < VERTICES_PER_GLYPH; k++) {
+                    vertsArray.push(numTotalLetters * VERTICES_PER_GLYPH + k);
+                }
+                numTotalLetters++;
+            }
+            this.labelVertexMap.push(vertsArray);
+        }
+        this.totalVertexCount = numTotalLetters * VERTICES_PER_GLYPH;
+    };
+    ScatterPlotVisualizer3DLabels.prototype.createColorBuffers = function () {
+        var _this = this;
+        var numPoints = this.dataSet.points.length;
+        this.pickingColors =
+            new Float32Array(this.totalVertexCount * RGB_ELEMENTS_PER_ENTRY);
+        this.renderColors =
+            new Float32Array(this.totalVertexCount * RGB_ELEMENTS_PER_ENTRY);
+        var _loop_1 = function(i) {
+            var color = new THREE.Color(i);
+            this_1.labelVertexMap[i].forEach(function (j) {
+                _this.pickingColors[RGB_ELEMENTS_PER_ENTRY * j] = color.r;
+                _this.pickingColors[RGB_ELEMENTS_PER_ENTRY * j + 1] = color.g;
+                _this.pickingColors[RGB_ELEMENTS_PER_ENTRY * j + 2] = color.b;
+                _this.renderColors[RGB_ELEMENTS_PER_ENTRY * j] = 1.0;
+                _this.renderColors[RGB_ELEMENTS_PER_ENTRY * j + 1] = 1.0;
+                _this.renderColors[RGB_ELEMENTS_PER_ENTRY * j + 2] = 1.0;
+            });
+        };
+        var this_1 = this;
+        for (var i = 0; i < numPoints; i++) {
+            _loop_1(i);
+        }
+    };
+    ScatterPlotVisualizer3DLabels.prototype.createLabelGeometry = function (dataSet) {
+        var _this = this;
+        this.processLabelVerts();
+        this.createColorBuffers();
+        var positionArray = new Float32Array(this.totalVertexCount * XYZ_ELEMENTS_PER_ENTRY);
+        this.positions =
+            new THREE.BufferAttribute(positionArray, XYZ_ELEMENTS_PER_ENTRY);
+        var posArray = new Float32Array(this.totalVertexCount * XYZ_ELEMENTS_PER_ENTRY);
+        var uvArray = new Float32Array(this.totalVertexCount * UV_ELEMENTS_PER_ENTRY);
+        var colorsArray = new Float32Array(this.totalVertexCount * RGB_ELEMENTS_PER_ENTRY);
+        var positionObject = new THREE.BufferAttribute(posArray, 2);
+        var uv = new THREE.BufferAttribute(uvArray, UV_ELEMENTS_PER_ENTRY);
+        var colors = new THREE.BufferAttribute(colorsArray, RGB_ELEMENTS_PER_ENTRY);
+        this.geometry = new THREE.BufferGeometry();
+        this.geometry.addAttribute('posObj', positionObject);
+        this.geometry.addAttribute('position', this.positions);
+        this.geometry.addAttribute('uv', uv);
+        this.geometry.addAttribute('color', colors);
+        var lettersSoFar = 0;
+        for (var i = 0; i < dataSet.points.length; i++) {
+            var label = this.labelAccessor(i).toString();
+            var leftOffset = 0;
+            // Determine length of word in pixels.
+            for (var j = 0; j < label.length; j++) {
+                var letterCode = label.charCodeAt(j);
+                leftOffset += this.glyphTexture.lengths[letterCode];
+            }
+            leftOffset /= -2; // centers text horizontally around the origin
+            for (var j = 0; j < label.length; j++) {
+                var letterCode = label.charCodeAt(j);
+                var letterWidth = this.glyphTexture.lengths[letterCode];
+                var scale = FONT_SIZE;
+                var right = (leftOffset + letterWidth) / scale;
+                var left = (leftOffset) / scale;
+                var top_1 = FONT_SIZE / scale;
+                // First triangle
+                positionObject.setXY(lettersSoFar * VERTICES_PER_GLYPH + 0, left, 0);
+                positionObject.setXY(lettersSoFar * VERTICES_PER_GLYPH + 1, right, 0);
+                positionObject.setXY(lettersSoFar * VERTICES_PER_GLYPH + 2, left, top_1);
+                // Second triangle
+                positionObject.setXY(lettersSoFar * VERTICES_PER_GLYPH + 3, left, top_1);
+                positionObject.setXY(lettersSoFar * VERTICES_PER_GLYPH + 4, right, 0);
+                positionObject.setXY(lettersSoFar * VERTICES_PER_GLYPH + 5, right, top_1);
+                // Set UVs based on letter.
+                var uLeft = (this.glyphTexture.offsets[letterCode]);
+                var uRight = (this.glyphTexture.offsets[letterCode] + letterWidth);
+                // Scale so that uvs lie between 0 and 1 on the texture.
+                uLeft /= MAX_CANVAS_DIMENSION;
+                uRight /= MAX_CANVAS_DIMENSION;
+                var vTop = 1;
+                var vBottom = 0;
+                uv.setXY(lettersSoFar * VERTICES_PER_GLYPH + 0, uLeft, vTop);
+                uv.setXY(lettersSoFar * VERTICES_PER_GLYPH + 1, uRight, vTop);
+                uv.setXY(lettersSoFar * VERTICES_PER_GLYPH + 2, uLeft, vBottom);
+                uv.setXY(lettersSoFar * VERTICES_PER_GLYPH + 3, uLeft, vBottom);
+                uv.setXY(lettersSoFar * VERTICES_PER_GLYPH + 4, uRight, vTop);
+                uv.setXY(lettersSoFar * VERTICES_PER_GLYPH + 5, uRight, vBottom);
+                lettersSoFar++;
+                leftOffset += letterWidth;
+            }
+        }
+        var _loop_2 = function(i) {
+            var pp = dataSet.points[i].projectedPoint;
+            this_2.labelVertexMap[i].forEach(function (j) {
+                _this.positions.setXYZ(j, pp[0], pp[1], pp[2]);
+            });
+        };
+        var this_2 = this;
+        for (var i = 0; i < dataSet.points.length; i++) {
+            _loop_2(i);
+        }
+        ;
+        this.labelsMesh = new THREE.Mesh(this.geometry, this.material);
+    };
+    ScatterPlotVisualizer3DLabels.prototype.destroyLabels = function () {
+        if (this.labelsMesh) {
+            if (this.scene) {
+                this.scene.remove(this.labelsMesh);
+            }
+            this.geometry.dispose();
+            this.labelsMesh = null;
+        }
+    };
+    ScatterPlotVisualizer3DLabels.prototype.createLabels = function (dataSet) {
+        this.destroyLabels();
+        if (this.labelAccessor) {
+            this.createLabelGeometry(dataSet);
+        }
+    };
+    ScatterPlotVisualizer3DLabels.prototype.colorSprites = function (pointColors) {
+        if (this.labelAccessor == null || this.geometry == null ||
+            this.dataSet == null || pointColors == null) {
+            return;
+        }
+        var colors = this.geometry.getAttribute('color');
+        colors.array = this.renderColors;
+        var n = this.dataSet.points.length;
+        var src = 0;
+        var _loop_3 = function(i) {
+            var c = new THREE.Color(pointColors[src++], pointColors[src++], pointColors[src++]);
+            this_3.labelVertexMap[i].forEach(function (j) {
+                colors.setXYZ(j, c.r, c.g, c.b);
+            });
+        };
+        var this_3 = this;
+        for (var i = 0; i < n; ++i) {
+            _loop_3(i);
+        }
+        colors.needsUpdate = true;
+    };
+    ScatterPlotVisualizer3DLabels.prototype.onRecreateScene = function (scene, sceneIs3D, backgroundColor) {
+        this.scene = scene;
+        if (this.labelsMesh == null) {
+            this.createLabels(this.dataSet);
+        }
+        if (this.labelsMesh) {
+            scene.add(this.labelsMesh);
+        }
+    };
+    ScatterPlotVisualizer3DLabels.prototype.removeAllFromScene = function (scene) {
+        this.destroyLabels();
+    };
+    ScatterPlotVisualizer3DLabels.prototype.onSetLabelAccessor = function (labelAccessor) {
+        this.labelAccessor = labelAccessor;
+        this.onUpdate(this.dataSet);
+    };
+    ScatterPlotVisualizer3DLabels.prototype.onDataSet = function (dataSet) {
+        this.dataSet = dataSet;
+        this.labelAccessor = null;
+    };
+    ScatterPlotVisualizer3DLabels.prototype.onPickingRender = function (rc) {
+        this.material.uniforms.texture.value = this.glyphTexture.texture;
+        this.material.uniforms.picking.value = true;
+        var colors = this.geometry.getAttribute('color');
+        colors.array = this.pickingColors;
+        colors.needsUpdate = true;
+    };
+    ScatterPlotVisualizer3DLabels.prototype.onRender = function (rc) {
+        this.colorSprites(rc.pointColors);
+        this.material.uniforms.texture.value = this.glyphTexture.texture;
+        this.material.uniforms.picking.value = false;
+        var colors = this.geometry.getAttribute('color');
+        colors.array = this.renderColors;
+        colors.needsUpdate = true;
+    };
+    ScatterPlotVisualizer3DLabels.prototype.onUpdate = function (dataSet) {
+        this.createLabels(dataSet);
+        if (this.labelsMesh && this.scene) {
+            this.scene.add(this.labelsMesh);
+        }
+    };
+    ScatterPlotVisualizer3DLabels.prototype.onResize = function (newWidth, newHeight) { };
+    return ScatterPlotVisualizer3DLabels;
+}());
+exports.ScatterPlotVisualizer3DLabels = ScatterPlotVisualizer3DLabels;
+
+},{"./util":24}],18:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+/**
+ * Maintains and renders 3d axes for the scatter plot.
+ */
+var ScatterPlotVisualizerAxes = (function () {
+    function ScatterPlotVisualizerAxes() {
+        this.axis = new THREE.AxisHelper();
+    }
+    ScatterPlotVisualizerAxes.prototype.onDataSet = function (dataSet) { };
+    ScatterPlotVisualizerAxes.prototype.onRecreateScene = function (scene, sceneIs3D, backgroundColor) {
+        if (sceneIs3D) {
+            scene.add(this.axis);
+        }
+    };
+    ScatterPlotVisualizerAxes.prototype.removeAllFromScene = function (scene) {
+        scene.remove(this.axis);
+    };
+    ScatterPlotVisualizerAxes.prototype.onPickingRender = function (renderContext) { };
+    ScatterPlotVisualizerAxes.prototype.onRender = function (renderContext) { };
+    ScatterPlotVisualizerAxes.prototype.onUpdate = function (dataSet) { };
+    ScatterPlotVisualizerAxes.prototype.onResize = function (newWidth, newHeight) { };
+    ScatterPlotVisualizerAxes.prototype.onSetLabelAccessor = function (labelAccessor) { };
+    return ScatterPlotVisualizerAxes;
+}());
+exports.ScatterPlotVisualizerAxes = ScatterPlotVisualizerAxes;
+
+},{}],19:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var label_1 = require('./label');
+var util_1 = require('./util');
+var MAX_LABELS_ON_SCREEN = 10000;
+/**
+ * Creates and maintains a 2d canvas on top of the GL canvas. All labels, when
+ * active, are rendered to the 2d canvas as part of the visible render pass.
+ */
+var ScatterPlotVisualizerCanvasLabels = (function () {
+    function ScatterPlotVisualizerCanvasLabels(container) {
+        this.labelsActive = true;
+        this.sceneIs3D = true;
+        this.canvas = container.append('canvas').node();
+        this.gc = this.canvas.getContext('2d');
+        d3.select(this.canvas).style({ position: 'absolute', left: 0, top: 0 });
+        this.canvas.style.pointerEvents = 'none';
+    }
+    ScatterPlotVisualizerCanvasLabels.prototype.removeAllLabels = function () {
+        var pixelWidth = this.canvas.width * window.devicePixelRatio;
+        var pixelHeight = this.canvas.height * window.devicePixelRatio;
+        this.gc.clearRect(0, 0, pixelWidth, pixelHeight);
+    };
+    /** Render all of the non-overlapping visible labels to the canvas. */
+    ScatterPlotVisualizerCanvasLabels.prototype.makeLabels = function (rc) {
+        if ((rc.labels == null) || (rc.labels.pointIndices.length === 0)) {
+            return;
+        }
+        var strokeStylePrefix;
+        var fillStylePrefix;
+        {
+            var ls = new THREE.Color(rc.labels.strokeColor).multiplyScalar(255);
+            var lc = new THREE.Color(rc.labels.fillColor).multiplyScalar(255);
+            strokeStylePrefix = 'rgba(' + ls.r + ',' + ls.g + ',' + ls.b + ',';
+            fillStylePrefix = 'rgba(' + lc.r + ',' + lc.g + ',' + lc.b + ',';
+        }
+        var labelHeight = parseInt(this.gc.font, 10);
+        var dpr = window.devicePixelRatio;
+        var grid;
+        {
+            var pixw = this.canvas.width * dpr;
+            var pixh = this.canvas.height * dpr;
+            var bb = { loX: 0, hiX: pixw, loY: 0, hiY: pixh };
+            grid = new label_1.CollisionGrid(bb, pixw / 25, pixh / 50);
+        }
+        var opacityMap = d3.scale.pow().exponent(Math.E)
+            .domain([rc.farthestCameraSpacePointZ, rc.nearestCameraSpacePointZ])
+            .range([0.1, 1]);
+        var camPos = rc.camera.position;
+        var camToTarget = camPos.clone().sub(rc.cameraTarget);
+        this.gc.lineWidth = 6;
+        this.gc.textBaseline = 'middle';
+        this.gc.miterLimit = 2;
+        // Have extra space between neighboring labels. Don't pack too tightly.
+        var labelMargin = 2;
+        // Shift the label to the right of the point circle.
+        var xShift = 4;
+        var n = Math.min(MAX_LABELS_ON_SCREEN, rc.labels.pointIndices.length);
+        for (var i = 0; i < n; ++i) {
+            var index = rc.labels.pointIndices[i];
+            var point = util_1.getProjectedPointFromIndex(this.dataSet, index);
+            // discard points that are behind the camera
+            var camToPoint = camPos.clone().sub(point);
+            if (camToTarget.dot(camToPoint) < 0) {
+                continue;
+            }
+            var _a = util_1.vector3DToScreenCoords(rc.camera, rc.screenWidth, rc.screenHeight, point), x = _a[0], y = _a[1];
+            x += xShift;
+            // Computing the width of the font is expensive,
+            // so we assume width of 1 at first. Then, if the label doesn't
+            // conflict with other labels, we measure the actual width.
+            var textBoundingBox = {
+                loX: x - labelMargin,
+                hiX: x + 1 + labelMargin,
+                loY: y - labelHeight / 2 - labelMargin,
+                hiY: y + labelHeight / 2 + labelMargin
+            };
+            if (grid.insert(textBoundingBox, true)) {
+                var text = rc.labelAccessor(index);
+                var fontSize = rc.labels.defaultFontSize * rc.labels.scaleFactors[i] * dpr;
+                this.gc.font = fontSize + 'px roboto';
+                // Now, check with properly computed width.
+                textBoundingBox.hiX += this.gc.measureText(text).width - 1;
+                if (grid.insert(textBoundingBox)) {
+                    var opacity = 1;
+                    if (this.sceneIs3D && (rc.labels.useSceneOpacityFlags[i] === 1)) {
+                        opacity = opacityMap(camToPoint.length());
+                    }
+                    this.gc.strokeStyle = strokeStylePrefix + opacity + ')';
+                    this.gc.fillStyle = fillStylePrefix + opacity + ')';
+                    this.gc.strokeText(text, x, y);
+                    this.gc.fillText(text, x, y);
+                }
+            }
+        }
+    };
+    ScatterPlotVisualizerCanvasLabels.prototype.onDataSet = function (dataSet) {
+        this.labelsActive = (dataSet.spriteAndMetadataInfo.spriteImage == null);
+        this.dataSet = dataSet;
+    };
+    ScatterPlotVisualizerCanvasLabels.prototype.onResize = function (newWidth, newHeight) {
+        var dpr = window.devicePixelRatio;
+        d3.select(this.canvas)
+            .attr('width', newWidth * dpr)
+            .attr('height', newHeight * dpr)
+            .style({ width: newWidth + 'px', height: newHeight + 'px' });
+    };
+    ScatterPlotVisualizerCanvasLabels.prototype.onRecreateScene = function (scene, sceneIs3D, backgroundColor) {
+        this.sceneIs3D = sceneIs3D;
+    };
+    ScatterPlotVisualizerCanvasLabels.prototype.removeAllFromScene = function (scene) {
+        this.removeAllLabels();
+    };
+    ScatterPlotVisualizerCanvasLabels.prototype.onUpdate = function () {
+        this.removeAllLabels();
+    };
+    ScatterPlotVisualizerCanvasLabels.prototype.onRender = function (rc) {
+        if (!this.labelsActive) {
+            return;
+        }
+        this.removeAllLabels();
+        this.makeLabels(rc);
+    };
+    ScatterPlotVisualizerCanvasLabels.prototype.onPickingRender = function (renderContext) { };
+    ScatterPlotVisualizerCanvasLabels.prototype.onSetLabelAccessor = function (labelAccessor) { };
+    return ScatterPlotVisualizerCanvasLabels;
+}());
+exports.ScatterPlotVisualizerCanvasLabels = ScatterPlotVisualizerCanvasLabels;
+
+},{"./label":11,"./util":24}],20:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var util_1 = require('./util');
+var NUM_POINTS_FOG_THRESHOLD = 5000;
+var MIN_POINT_SIZE = 5.0;
+var IMAGE_SIZE = 30;
+// Constants relating to the indices of buffer arrays.
+var RGB_NUM_ELEMENTS = 3;
+var INDEX_NUM_ELEMENTS = 1;
+var XYZ_NUM_ELEMENTS = 3;
+var VERTEX_SHADER = "\n  // Index of the specific vertex (passed in as bufferAttribute), and the\n  // variable that will be used to pass it to the fragment shader.\n  attribute float vertexIndex;\n  attribute vec3 color;\n  attribute float scaleFactor;\n\n  varying vec2 xyIndex;\n  varying vec3 vColor;\n\n  uniform bool sizeAttenuation;\n  uniform float pointSize;\n  uniform float imageWidth;\n  uniform float imageHeight;\n\n  void main() {\n    // Pass index and color values to fragment shader.\n    vColor = color;\n    xyIndex = vec2(mod(vertexIndex, imageWidth),\n              floor(vertexIndex / imageWidth));\n\n    // Transform current vertex by modelViewMatrix (model world position and\n    // camera world position matrix).\n    vec4 cameraSpacePos = modelViewMatrix * vec4(position, 1.0);\n\n    // Project vertex in camera-space to screen coordinates using the camera's\n    // projection matrix.\n    gl_Position = projectionMatrix * cameraSpacePos;\n\n    // Create size attenuation (if we're in 3D mode) by making the size of\n    // each point inversly proportional to its distance to the camera.\n    float outputPointSize = pointSize;\n    if (sizeAttenuation) {\n      outputPointSize = -pointSize / cameraSpacePos.z;\n    }\n\n    gl_PointSize =\n      max(outputPointSize * scaleFactor, " + MIN_POINT_SIZE.toFixed(1) + ");\n  }";
+var FRAGMENT_SHADER_POINT_TEST_CHUNK = "\n  bool point_in_unit_circle(vec2 spriteCoord) {\n    vec2 centerToP = spriteCoord - vec2(0.5, 0.5);\n    return dot(centerToP, centerToP) < (0.5 * 0.5);\n  }\n\n  bool point_in_unit_equilateral_triangle(vec2 spriteCoord) {\n    vec3 v0 = vec3(0, 1, 0);\n    vec3 v1 = vec3(0.5, 0, 0);\n    vec3 v2 = vec3(1, 1, 0);\n    vec3 p = vec3(spriteCoord, 0);\n    float p_in_v0_v1 = cross(v1 - v0, p - v0).z;\n    float p_in_v1_v2 = cross(v2 - v1, p - v1).z;\n    return (p_in_v0_v1 > 0.0) && (p_in_v1_v2 > 0.0);\n  }\n";
+var FRAGMENT_SHADER = "\n  varying vec2 xyIndex;\n  varying vec3 vColor;\n\n  uniform sampler2D texture;\n  uniform float imageWidth;\n  uniform float imageHeight;\n  uniform bool isImage;\n\n  " + THREE.ShaderChunk['common'] + "\n  " + THREE.ShaderChunk['fog_pars_fragment'] + "\n  " + FRAGMENT_SHADER_POINT_TEST_CHUNK + "\n\n  void main() {\n    if (isImage) {\n      // Coordinates of the vertex within the entire sprite image.\n      vec2 coords = (gl_PointCoord + xyIndex) / vec2(imageWidth, imageHeight);\n      gl_FragColor = vec4(vColor, 1.0) * texture2D(texture, coords);\n    } else {\n      bool inside = point_in_unit_circle(gl_PointCoord);\n      vec3 c = mix(vec3(1, 1, 1), vColor, float(inside));\n      gl_FragColor = vec4(c, 1);\n    }\n    " + THREE.ShaderChunk['fog_fragment'] + "\n  }";
+var FRAGMENT_SHADER_PICKING = "\n  varying vec2 xyIndex;\n  varying vec3 vColor;\n  uniform bool isImage;\n\n  " + FRAGMENT_SHADER_POINT_TEST_CHUNK + "\n\n  void main() {\n    xyIndex; // Silence 'unused variable' warning.\n    if (isImage) {\n      gl_FragColor = vec4(vColor, 1);\n    } else {\n      bool inside = point_in_unit_circle(gl_PointCoord);\n      if (!inside) {\n        discard;\n      }\n      gl_FragColor = vec4(vColor, 1);\n    }\n  }";
+/**
+ * Uses GL point sprites to render the dataset.
+ */
+var ScatterPlotVisualizerSprites = (function () {
+    function ScatterPlotVisualizerSprites() {
+        this.sceneIs3D = true;
+    }
+    /**
+     * Create points, set their locations and actually instantiate the
+     * geometry.
+     */
+    ScatterPlotVisualizerSprites.prototype.addSprites = function (scene) {
+        this.geometry = new THREE.BufferGeometry();
+        this.createBufferAttributes();
+        var canvas = document.createElement('canvas');
+        var image = this.image || canvas;
+        var tex = util_1.createTexture(image);
+        var pointSize = (this.sceneIs3D ? this.pointSize3D : this.pointSize2D);
+        var imageDim = [0, 0];
+        if (this.image) {
+            pointSize = IMAGE_SIZE;
+            imageDim =
+                this.dataSet.spriteAndMetadataInfo.spriteMetadata.singleImageDim;
+        }
+        this.uniforms = {
+            texture: { type: 't', value: tex },
+            imageWidth: { type: 'f', value: image.width / imageDim[0] },
+            imageHeight: { type: 'f', value: image.height / imageDim[1] },
+            fogColor: { type: 'c', value: this.fog.color },
+            fogNear: { type: 'f', value: this.fog.near },
+            fogFar: { type: 'f', value: this.fog.far },
+            sizeAttenuation: { type: 'bool', value: this.sceneIs3D },
+            isImage: { type: 'bool', value: (this.image != null) },
+            pointSize: { type: 'f', value: pointSize }
+        };
+        var haveImage = (this.image != null);
+        this.renderMaterial = new THREE.ShaderMaterial({
+            uniforms: this.uniforms,
+            vertexShader: VERTEX_SHADER,
+            fragmentShader: FRAGMENT_SHADER,
+            transparent: !haveImage,
+            depthTest: haveImage,
+            depthWrite: haveImage,
+            fog: true,
+            blending: (this.image ? THREE.NormalBlending : THREE.MultiplyBlending),
+        });
+        this.pickingMaterial = new THREE.ShaderMaterial({
+            uniforms: this.uniforms,
+            vertexShader: VERTEX_SHADER,
+            fragmentShader: FRAGMENT_SHADER_PICKING,
+            transparent: true,
+            depthTest: true,
+            depthWrite: true,
+            fog: false,
+            blending: THREE.NormalBlending,
+        });
+        this.points = new THREE.Points(this.geometry, this.renderMaterial);
+        scene.add(this.points);
+    };
+    ScatterPlotVisualizerSprites.prototype.calibratePointSize = function () {
+        var numPts = this.dataSet.points.length;
+        var scaleConstant = 200;
+        var logBase = 8;
+        // Scale point size inverse-logarithmically to the number of points.
+        this.pointSize3D = scaleConstant / Math.log(numPts) / Math.log(logBase);
+        this.pointSize2D = this.pointSize3D / 1.5;
+    };
+    ScatterPlotVisualizerSprites.prototype.setFogDistances = function (nearestPointZ, farthestPointZ) {
+        if (this.sceneIs3D) {
+            this.fog.near = nearestPointZ;
+            // If there are fewer points we want less fog. We do this
+            // by making the "far" value (that is, the distance from the camera to the
+            // far edge of the fog) proportional to the number of points.
+            var multiplier = 2 -
+                Math.min(this.dataSet.points.length, NUM_POINTS_FOG_THRESHOLD) /
+                    NUM_POINTS_FOG_THRESHOLD;
+            this.fog.far = farthestPointZ * multiplier;
+        }
+        else {
+            this.fog.near = Infinity;
+            this.fog.far = Infinity;
+        }
+    };
+    /**
+     * Set up buffer attributes to be used for the points/images.
+     */
+    ScatterPlotVisualizerSprites.prototype.createBufferAttributes = function () {
+        var numPoints = this.dataSet.points.length;
+        // Fill pickingColors with each point's unique id as its color.
+        this.pickingColors = new Float32Array(numPoints * RGB_NUM_ELEMENTS);
+        {
+            var dst = 0;
+            for (var i = 0; i < numPoints; i++) {
+                var c = new THREE.Color(i);
+                this.pickingColors[dst++] = c.r;
+                this.pickingColors[dst++] = c.g;
+                this.pickingColors[dst++] = c.b;
+            }
+        }
+        var colors = new THREE.BufferAttribute(this.pickingColors, RGB_NUM_ELEMENTS);
+        var scaleFactors = new THREE.BufferAttribute(new Float32Array(numPoints), INDEX_NUM_ELEMENTS);
+        var positions = new THREE.BufferAttribute(new Float32Array(numPoints * XYZ_NUM_ELEMENTS), XYZ_NUM_ELEMENTS);
+        /**
+         * The actual indices of the points which we use for sizeAttenuation in
+         * the shader.
+         */
+        var indicesShader = new THREE.BufferAttribute(new Float32Array(numPoints), 1);
+        // Create the array of indices.
+        for (var i = 0; i < numPoints; i++) {
+            indicesShader.setX(i, this.dataSet.points[i].index);
+        }
+        this.geometry.addAttribute('position', positions);
+        this.geometry.addAttribute('color', colors);
+        this.geometry.addAttribute('vertexIndex', indicesShader);
+        this.geometry.addAttribute('scaleFactor', scaleFactors);
+    };
+    ScatterPlotVisualizerSprites.prototype.updatePositionsArray = function (dataSet) {
+        if (this.geometry == null) {
+            return;
+        }
+        var n = dataSet.points.length;
+        var positions = this.geometry.getAttribute('position');
+        positions.array = new Float32Array(n * XYZ_NUM_ELEMENTS);
+        for (var i = 0; i < n; i++) {
+            var pp = dataSet.points[i].projectedPoint;
+            positions.setXYZ(i, pp[0], pp[1], pp[2]);
+        }
+        positions.needsUpdate = true;
+    };
+    ScatterPlotVisualizerSprites.prototype.removeAllFromScene = function (scene) {
+        scene.remove(this.points);
+    };
+    ScatterPlotVisualizerSprites.prototype.onDataSet = function (dataSet) {
+        this.dataSet = dataSet;
+        this.image = this.dataSet.spriteAndMetadataInfo.spriteImage;
+        this.points = null;
+        if (this.geometry) {
+            this.geometry.dispose();
+        }
+        this.geometry = null;
+        this.calibratePointSize();
+    };
+    ScatterPlotVisualizerSprites.prototype.onRecreateScene = function (scene, sceneIs3D, backgroundColor) {
+        this.sceneIs3D = sceneIs3D;
+        this.fog = new THREE.Fog(backgroundColor);
+        scene.fog = this.fog;
+        if (this.dataSet) {
+            this.addSprites(scene);
+            this.updatePositionsArray(this.dataSet);
+        }
+    };
+    ScatterPlotVisualizerSprites.prototype.onUpdate = function (dataSet) {
+        this.updatePositionsArray(dataSet);
+    };
+    ScatterPlotVisualizerSprites.prototype.onResize = function (newWidth, newHeight) { };
+    ScatterPlotVisualizerSprites.prototype.onSetLabelAccessor = function (labelAccessor) { };
+    ScatterPlotVisualizerSprites.prototype.onPickingRender = function (rc) {
+        if (!this.geometry) {
+            return;
+        }
+        this.points.material = this.pickingMaterial;
+        var colors = this.geometry.getAttribute('color');
+        colors.array = this.pickingColors;
+        colors.needsUpdate = true;
+        var scaleFactors = this.geometry.getAttribute('scaleFactor');
+        scaleFactors.array = rc.pointScaleFactors;
+        scaleFactors.needsUpdate = true;
+    };
+    ScatterPlotVisualizerSprites.prototype.onRender = function (rc) {
+        if (!this.geometry) {
+            return;
+        }
+        this.setFogDistances(rc.nearestCameraSpacePointZ, rc.farthestCameraSpacePointZ);
+        this.points.material = this.renderMaterial;
+        this.renderMaterial.uniforms.isImage.value = !!this.image;
+        var colors = this.geometry.getAttribute('color');
+        this.renderColors = rc.pointColors;
+        colors.array = this.renderColors;
+        colors.needsUpdate = true;
+        var scaleFactors = this.geometry.getAttribute('scaleFactor');
+        scaleFactors.array = rc.pointScaleFactors;
+        scaleFactors.needsUpdate = true;
+    };
+    return ScatterPlotVisualizerSprites;
+}());
+exports.ScatterPlotVisualizerSprites = ScatterPlotVisualizerSprites;
+
+},{"./util":24}],21:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var TRACE_DEFAULT_OPACITY = .2;
+var TRACE_DEFAULT_LINEWIDTH = 2;
+var TRACE_SELECTED_OPACITY = .9;
+var TRACE_SELECTED_LINEWIDTH = 3;
+var TRACE_DESELECTED_OPACITY = .05;
+var RGB_NUM_ELEMENTS = 3;
+var XYZ_NUM_ELEMENTS = 3;
+/**
+ * Renders 'traces' (polylines) that connect multiple points in the dataset
+ */
+var ScatterPlotVisualizerTraces = (function () {
+    function ScatterPlotVisualizerTraces(selectionContext) {
+        var _this = this;
+        this.tracePositionBuffer = {};
+        this.traceColorBuffer = {};
+        selectionContext.registerSelectionChangedListener(function (s) { return _this.onSelectionChanged(s); });
+    }
+    /**
+     * Create line traces between connected points and instantiate the geometry.
+     */
+    ScatterPlotVisualizerTraces.prototype.addTraces = function (scene) {
+        if (!this.dataSet || !this.dataSet.traces) {
+            return;
+        }
+        this.traces = [];
+        for (var i = 0; i < this.dataSet.traces.length; i++) {
+            var dataTrace = this.dataSet.traces[i];
+            for (var j = 0; j < dataTrace.pointIndices.length - 1; j++) {
+                this.dataSet.points[dataTrace.pointIndices[j]].traceIndex = i;
+                this.dataSet.points[dataTrace.pointIndices[j + 1]].traceIndex = i;
+            }
+            var geometry = new THREE.BufferGeometry();
+            geometry.addAttribute('position', this.tracePositionBuffer[i]);
+            this.tracePositionBuffer[i].needsUpdate = true;
+            geometry.addAttribute('color', this.traceColorBuffer[i]);
+            this.traceColorBuffer[i].needsUpdate = true;
+            // We use the same material for every line.
+            var material = new THREE.LineBasicMaterial({
+                linewidth: TRACE_DEFAULT_LINEWIDTH,
+                opacity: TRACE_DEFAULT_OPACITY,
+                transparent: true,
+                vertexColors: THREE.VertexColors
+            });
+            var trace = new THREE.LineSegments(geometry, material);
+            this.traces.push(trace);
+            scene.add(trace);
+        }
+    };
+    ScatterPlotVisualizerTraces.prototype.resetTraces = function () {
+        if (!this.traces) {
+            return;
+        }
+        for (var i = 0; i < this.traces.length; i++) {
+            this.traces[i].material.opacity = TRACE_DEFAULT_OPACITY;
+            this.traces[i].material.linewidth =
+                TRACE_DEFAULT_LINEWIDTH;
+            this.traces[i].material.needsUpdate = true;
+        }
+    };
+    ScatterPlotVisualizerTraces.prototype.removeAllFromScene = function (scene) {
+        if (!this.traces) {
+            return;
+        }
+        for (var i = 0; i < this.traces.length; i++) {
+            scene.remove(this.traces[i]);
+        }
+        this.traces = [];
+    };
+    ScatterPlotVisualizerTraces.prototype.onDataSet = function (dataSet) {
+        this.dataSet = dataSet;
+        if (dataSet) {
+            // Set up the position buffer arrays for each trace.
+            for (var i = 0; i < this.dataSet.traces.length; i++) {
+                var dataTrace = this.dataSet.traces[i];
+                var vertexCount = 2 * (dataTrace.pointIndices.length - 1);
+                var traces = new Float32Array(vertexCount * XYZ_NUM_ELEMENTS);
+                this.tracePositionBuffer[i] =
+                    new THREE.BufferAttribute(traces, XYZ_NUM_ELEMENTS);
+                var colors = new Float32Array(vertexCount * RGB_NUM_ELEMENTS);
+                this.traceColorBuffer[i] =
+                    new THREE.BufferAttribute(colors, RGB_NUM_ELEMENTS);
+            }
+        }
+    };
+    ScatterPlotVisualizerTraces.prototype.onSelectionChanged = function (selection) {
+        this.resetTraces();
+        if (selection.length > 0) {
+            var selectedIndex = selection[0];
+            var traceIndex = this.dataSet.points[selectedIndex].traceIndex;
+            if (traceIndex) {
+                for (var i = 0; i < this.traces.length; i++) {
+                    this.traces[i].material.opacity = TRACE_DESELECTED_OPACITY;
+                    this.traces[i].material.needsUpdate = true;
+                }
+                this.traces[traceIndex].material.opacity = TRACE_SELECTED_OPACITY;
+                this.traces[traceIndex].material
+                    .linewidth = TRACE_SELECTED_LINEWIDTH;
+                this.traces[traceIndex].material.needsUpdate = true;
+            }
+        }
+    };
+    ScatterPlotVisualizerTraces.prototype.onRecreateScene = function (scene, sceneIs3D, backgroundColor) {
+        this.addTraces(scene);
+    };
+    ScatterPlotVisualizerTraces.prototype.onUpdate = function () {
+        if (!this.dataSet) {
+            return;
+        }
+        for (var i = 0; i < this.dataSet.traces.length; i++) {
+            var dataTrace = this.dataSet.traces[i];
+            var vertexCount = 0;
+            for (var j = 0; j < dataTrace.pointIndices.length - 1; j++) {
+                var point1 = this.dataSet.points[dataTrace.pointIndices[j]];
+                var point2 = this.dataSet.points[dataTrace.pointIndices[j + 1]];
+                this.tracePositionBuffer[i].setXYZ(vertexCount, point1.projectedPoint[0], point1.projectedPoint[1], point1.projectedPoint[2]);
+                this.tracePositionBuffer[i].setXYZ(vertexCount + 1, point2.projectedPoint[0], point2.projectedPoint[1], point2.projectedPoint[2]);
+                vertexCount += 2;
+            }
+        }
+        for (var i = 0; i < this.dataSet.traces.length; i++) {
+            this.tracePositionBuffer[i].needsUpdate = true;
+        }
+    };
+    ScatterPlotVisualizerTraces.prototype.onRender = function (renderContext) {
+        for (var i = 0; i < this.dataSet.traces.length; i++) {
+            this.traceColorBuffer[i].array = renderContext.traceColors[i];
+            this.traceColorBuffer[i].needsUpdate = true;
+        }
+    };
+    ScatterPlotVisualizerTraces.prototype.onPickingRender = function (renderContext) { };
+    ScatterPlotVisualizerTraces.prototype.onResize = function (newWidth, newHeight) { };
+    ScatterPlotVisualizerTraces.prototype.onSetLabelAccessor = function (labelAccessor) { };
+    return ScatterPlotVisualizerTraces;
+}());
+exports.ScatterPlotVisualizerTraces = ScatterPlotVisualizerTraces;
+
+},{}],22:[function(require,module,exports){
+arguments[4][9][0].apply(exports,arguments)
+},{"dup":9}],23:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+/**
+ * A Space-partitioning tree (https://en.wikipedia.org/wiki/Space_partitioning)
+ * that recursively divides the space into regions of equal sizes. This data
+ * structure can act both as a Quad tree and an Octree when the data is 2 or
+ * 3 dimensional respectively. One usage is in t-SNE in order to do Barnes-Hut
+ * approximation.
+ */
+var SPTree = (function () {
+    /**
+     * Constructs a new tree with the provided data.
+     *
+     * @param data List of n-dimensional data points.
+     * @param capacity Number of data points to store in a single node.
+     */
+    function SPTree(data) {
+        if (data.length < 1) {
+            throw new Error('There should be at least 1 data point');
+        }
+        // Make a bounding box based on the extent of the data.
+        this.dim = data[0].length;
+        // Each node has 2^d children, where d is the dimension of the space.
+        // Binary masks (e.g. 000, 001, ... 111 in 3D) are used to determine in
+        // which child (e.g. quadron in 2D) the new point is going to be assigned.
+        // For more details, see the insert() method and its comments.
+        this.masks = new Array(Math.pow(2, this.dim));
+        for (var d = 0; d < this.masks.length; ++d) {
+            this.masks[d] = (1 << d);
+        }
+        var min = new Array(this.dim);
+        fillArray(min, Number.POSITIVE_INFINITY);
+        var max = new Array(this.dim);
+        fillArray(max, Number.NEGATIVE_INFINITY);
+        for (var i = 0; i < data.length; ++i) {
+            // For each dim get the min and max.
+            // E.g. For 2-D, get the x_min, x_max, y_min, y_max.
+            for (var d = 0; d < this.dim; ++d) {
+                min[d] = Math.min(min[d], data[i][d]);
+                max[d] = Math.max(max[d], data[i][d]);
+            }
+        }
+        // Create a bounding box with the center of the largest span.
+        var center = new Array(this.dim);
+        var halfDim = 0;
+        for (var d = 0; d < this.dim; ++d) {
+            var span = max[d] - min[d];
+            center[d] = min[d] + span / 2;
+            halfDim = Math.max(halfDim, span / 2);
+        }
+        this.root = { box: { center: center, halfDim: halfDim }, point: data[0] };
+        for (var i = 1; i < data.length; ++i) {
+            this.insert(this.root, data[i]);
+        }
+    }
+    /**
+     * Visits every node in the tree. Each node can store 1 or more points,
+     * depending on the node capacity provided in the constructor.
+     *
+     * @param accessor Method that takes the currently visited node, and the
+     * low and high point of the region that this node occupies. E.g. in 2D,
+     * the low and high points will be the lower-left corner and the upper-right
+     * corner.
+     */
+    SPTree.prototype.visit = function (accessor, noBox) {
+        if (noBox === void 0) { noBox = false; }
+        this.visitNode(this.root, accessor, noBox);
+    };
+    SPTree.prototype.visitNode = function (node, accessor, noBox) {
+        var skipChildren;
+        if (noBox) {
+            skipChildren = accessor(node);
+        }
+        else {
+            var lowPoint = new Array(this.dim);
+            var highPoint = new Array(this.dim);
+            for (var d = 0; d < this.dim; ++d) {
+                lowPoint[d] = node.box.center[d] - node.box.halfDim;
+                highPoint[d] = node.box.center[d] + node.box.halfDim;
+            }
+            skipChildren = accessor(node, lowPoint, highPoint);
+        }
+        if (!node.children || skipChildren) {
+            return;
+        }
+        for (var i = 0; i < node.children.length; ++i) {
+            var child = node.children[i];
+            if (child) {
+                this.visitNode(child, accessor, noBox);
+            }
+        }
+    };
+    SPTree.prototype.insert = function (node, p) {
+        // Subdivide and then add the point to whichever node will accept it.
+        if (node.children == null) {
+            node.children = new Array(this.masks.length);
+        }
+        // Decide which child will get the new point by constructing a D-bits binary
+        // signature (D=3 for 3D) where the k-th bit is 1 if the point's k-th
+        // coordinate is greater than the node's k-th coordinate, 0 otherwise.
+        // Then the binary signature in decimal system gives us the index of the
+        // child where the new point should be.
+        var index = 0;
+        for (var d = 0; d < this.dim; ++d) {
+            if (p[d] > node.box.center[d]) {
+                index |= this.masks[d];
+            }
+        }
+        if (node.children[index] == null) {
+            this.makeChild(node, index, p);
+        }
+        else {
+            this.insert(node.children[index], p);
+        }
+    };
+    SPTree.prototype.makeChild = function (node, index, p) {
+        var oldC = node.box.center;
+        var h = node.box.halfDim / 2;
+        var newC = new Array(this.dim);
+        for (var d = 0; d < this.dim; ++d) {
+            newC[d] = (index & (1 << d)) ? oldC[d] + h : oldC[d] - h;
+        }
+        node.children[index] = { box: { center: newC, halfDim: h }, point: p };
+    };
+    return SPTree;
+}());
+exports.SPTree = SPTree;
+function fillArray(arr, value) {
+    for (var i = 0; i < arr.length; ++i) {
+        arr[i] = value;
+    }
+}
+
+},{}],24:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var logging = require('./logging');
+/**
+ * Delay for running expensive tasks, in milliseconds.
+ * The duration was empirically found so that it leaves enough time for the
+ * browser to update its UI state before starting an expensive UI-blocking task.
+ */
+var TASK_DELAY_MS = 200;
+/** Shuffles the array in-place in O(n) time using Fisher-Yates algorithm. */
+function shuffle(array) {
+    var m = array.length;
+    var t;
+    var i;
+    // While there remain elements to shuffle.
+    while (m) {
+        // Pick a remaining element
+        i = Math.floor(Math.random() * m--);
+        // And swap it with the current element.
+        t = array[m];
+        array[m] = array[i];
+        array[i] = t;
+    }
+    return array;
+}
+exports.shuffle = shuffle;
+/** Retrieves a projected point from the data set as a THREE.js vector */
+function getProjectedPointFromIndex(dataSet, i) {
+    var pp = dataSet.points[i].projectedPoint;
+    var v = new THREE.Vector3(pp[0], pp[1], pp[2]);
+    return v;
+}
+exports.getProjectedPointFromIndex = getProjectedPointFromIndex;
+/** Projects a 3d point into screen space */
+function vector3DToScreenCoords(cam, w, h, v) {
+    var dpr = window.devicePixelRatio;
+    var pv = new THREE.Vector3().copy(v).project(cam);
+    // The screen-space origin is at the middle of the screen, with +y up.
+    var coords = [((pv.x + 1) / 2 * w) * dpr, -((pv.y - 1) / 2 * h) * dpr];
+    return coords;
+}
+exports.vector3DToScreenCoords = vector3DToScreenCoords;
+/**
+ * Gets the camera-space z coordinates of the nearest and farthest points.
+ * Ignores points that are behind the camera.
+ */
+function getNearFarPoints(dataSet, cameraPos, cameraTarget) {
+    var shortestDist = Infinity;
+    var furthestDist = 0;
+    var camToTarget = new THREE.Vector3().copy(cameraTarget).sub(cameraPos);
+    for (var i = 0; i < dataSet.points.length; i++) {
+        var point = getProjectedPointFromIndex(dataSet, i);
+        var camToPoint = new THREE.Vector3().copy(point).sub(cameraPos);
+        if (camToTarget.dot(camToPoint) < 0) {
+            continue;
+        }
+        var distToCam = cameraPos.distanceToSquared(point);
+        furthestDist = Math.max(furthestDist, distToCam);
+        shortestDist = Math.min(shortestDist, distToCam);
+    }
+    furthestDist = Math.sqrt(furthestDist);
+    shortestDist = Math.sqrt(shortestDist);
+    return [shortestDist, furthestDist];
+}
+exports.getNearFarPoints = getNearFarPoints;
+/**
+ * Generate a texture for the points/images and sets some initial params
+ */
+function createTexture(image) {
+    var tex = new THREE.Texture(image);
+    tex.needsUpdate = true;
+    // Used if the texture isn't a power of 2.
+    tex.minFilter = THREE.LinearFilter;
+    tex.generateMipmaps = false;
+    tex.flipY = false;
+    return tex;
+}
+exports.createTexture = createTexture;
+/**
+ * Assert that the condition is satisfied; if not, log user-specified message
+ * to the console.
+ */
+function assert(condition, message) {
+    if (!condition) {
+        message = message || 'Assertion failed';
+        throw new Error(message);
+    }
+}
+exports.assert = assert;
+function getSearchPredicate(query, inRegexMode, fieldName) {
+    var predicate;
+    if (inRegexMode) {
+        var regExp_1 = new RegExp(query, 'i');
+        predicate = function (p) { return regExp_1.test(p.metadata[fieldName].toString()); };
+    }
+    else {
+        // Doing a case insensitive substring match.
+        query = query.toLowerCase();
+        predicate = function (p) {
+            var label = p.metadata[fieldName].toString().toLowerCase();
+            return label.indexOf(query) >= 0;
+        };
+    }
+    return predicate;
+}
+exports.getSearchPredicate = getSearchPredicate;
+/**
+ * Runs an expensive task asynchronously with some delay
+ * so that it doesn't block the UI thread immediately.
+ *
+ * @param message The message to display to the user.
+ * @param task The expensive task to run.
+ * @param msgId Optional. ID of an existing message. If provided, will overwrite
+ *     an existing message and won't automatically clear the message when the
+ *     task is done.
+ * @return The value returned by the task.
+ */
+function runAsyncTask(message, task, msgId) {
+    if (msgId === void 0) { msgId = null; }
+    var autoClear = (msgId == null);
+    msgId = logging.setModalMessage(message, msgId);
+    return new Promise(function (resolve, reject) {
+        d3.timer(function () {
+            try {
+                var result = task();
+                // Clearing the old message.
+                if (autoClear) {
+                    logging.setModalMessage(null, msgId);
+                }
+                resolve(result);
+            }
+            catch (ex) {
+                reject(ex);
+            }
+            return true;
+        }, TASK_DELAY_MS);
+    });
+}
+exports.runAsyncTask = runAsyncTask;
+
+},{"./logging":12}],25:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var util_1 = require('./util');
+/** Returns the dot product of two vectors. */
+function dot(a, b) {
+    util_1.assert(a.length === b.length, 'Vectors a and b must be of same length');
+    var result = 0;
+    for (var i = 0; i < a.length; ++i) {
+        result += a[i] * b[i];
+    }
+    return result;
+}
+exports.dot = dot;
+/** Sums all the elements in the vector */
+function sum(a) {
+    var result = 0;
+    for (var i = 0; i < a.length; ++i) {
+        result += a[i];
+    }
+    return result;
+}
+exports.sum = sum;
+/** Returns the sum of two vectors, i.e. a + b */
+function add(a, b) {
+    util_1.assert(a.length === b.length, 'Vectors a and b must be of same length');
+    var result = new Array(a.length);
+    for (var i = 0; i < a.length; ++i) {
+        result[i] = a[i] + b[i];
+    }
+    return result;
+}
+exports.add = add;
+/** Subtracts vector b from vector a, i.e. returns a - b */
+function sub(a, b) {
+    util_1.assert(a.length === b.length, 'Vectors a and b must be of same length');
+    var result = new Array(a.length);
+    for (var i = 0; i < a.length; ++i) {
+        result[i] = a[i] - b[i];
+    }
+    return result;
+}
+exports.sub = sub;
+/** Returns the square norm of the vector */
+function norm2(a) {
+    var result = 0;
+    for (var i = 0; i < a.length; ++i) {
+        result += a[i] * a[i];
+    }
+    return result;
+}
+exports.norm2 = norm2;
+/** Returns the euclidean distance between two vectors. */
+function dist(a, b) {
+    return Math.sqrt(dist2(a, b));
+}
+exports.dist = dist;
+/** Returns the square euclidean distance between two vectors. */
+function dist2(a, b) {
+    util_1.assert(a.length === b.length, 'Vectors a and b must be of same length');
+    var result = 0;
+    for (var i = 0; i < a.length; ++i) {
+        var diff = a[i] - b[i];
+        result += diff * diff;
+    }
+    return result;
+}
+exports.dist2 = dist2;
+/** Returns the square euclidean distance between two 2D points. */
+function dist2_2D(a, b) {
+    var dX = a[0] - b[0];
+    var dY = a[1] - b[1];
+    return dX * dX + dY * dY;
+}
+exports.dist2_2D = dist2_2D;
+/** Returns the euclidean distance between 2 2D points. */
+function dist_2D(a, b) {
+    return Math.sqrt(dist2_2D(a, b));
+}
+exports.dist_2D = dist_2D;
+/** Returns the square euclidean distance between two 3D points. */
+function dist2_3D(a, b) {
+    var dX = a[0] - b[0];
+    var dY = a[1] - b[1];
+    var dZ = a[2] - b[2];
+    return dX * dX + dY * dY + dZ * dZ;
+}
+exports.dist2_3D = dist2_3D;
+/** Returns the euclidean distance between 2 3D points. */
+function dist_3D(a, b) {
+    return Math.sqrt(dist2_3D(a, b));
+}
+exports.dist_3D = dist_3D;
+/**
+ * Returns the square euclidean distance between two vectors, with an early
+ * exit (returns -1) if the distance is >= to the provided limit.
+ */
+function dist2WithLimit(a, b, limit) {
+    util_1.assert(a.length === b.length, 'Vectors a and b must be of same length');
+    var result = 0;
+    for (var i = 0; i < a.length; ++i) {
+        var diff = a[i] - b[i];
+        result += diff * diff;
+        if (result >= limit) {
+            return -1;
+        }
+    }
+    return result;
+}
+exports.dist2WithLimit = dist2WithLimit;
+/** Returns the square euclidean distance between two 2D points. */
+function dist22D(a, b) {
+    var dX = a[0] - b[0];
+    var dY = a[1] - b[1];
+    return dX * dX + dY * dY;
+}
+exports.dist22D = dist22D;
+/** Modifies the vector in-place to have unit norm. */
+function unit(a) {
+    var norm = Math.sqrt(norm2(a));
+    util_1.assert(norm >= 0, 'Norm of the vector must be > 0');
+    for (var i = 0; i < a.length; ++i) {
+        a[i] /= norm;
+    }
+}
+exports.unit = unit;
+/**
+ *  Projects the vectors to a lower dimension
+ *
+ * @param vectors Array of vectors to be projected.
+ * @param newDim The resulting dimension of the vectors.
+ */
+function projectRandom(vectors, newDim) {
+    var dim = vectors[0].length;
+    var N = vectors.length;
+    var newVectors = new Array(N);
+    for (var i = 0; i < N; ++i) {
+        newVectors[i] = new Array(newDim);
+    }
+    // Make nDim projections.
+    for (var k = 0; k < newDim; ++k) {
+        var randomVector = rn(dim);
+        for (var i = 0; i < N; ++i) {
+            newVectors[i][k] = dot(vectors[i], randomVector);
+        }
+    }
+    return newVectors;
+}
+exports.projectRandom = projectRandom;
+/**
+ * Projects a vector onto a 2D plane specified by the two direction vectors.
+ */
+function project2d(a, dir1, dir2) {
+    return [dot(a, dir1), dot(a, dir2)];
+}
+exports.project2d = project2d;
+/** Returns a vector filled with zeros */
+function zeros(length) {
+    var result = new Array(length);
+    for (var i = 0; i < length; ++i) {
+        result[i] = 0;
+    }
+    return result;
+}
+exports.zeros = zeros;
+/**
+ * Computes the centroid of the data points. If the provided data points are not
+ * vectors, an accessor function needs to be provided.
+ */
+function centroid(dataPoints, accessor) {
+    if (dataPoints.length === 0) {
+        return null;
+    }
+    if (accessor == null) {
+        accessor = function (a) { return a; };
+    }
+    util_1.assert(dataPoints.length >= 0, '`vectors` must be of length >= 1');
+    var centroid = zeros(accessor(dataPoints[0]).length);
+    for (var i = 0; i < dataPoints.length; ++i) {
+        var dataPoint = dataPoints[i];
+        var vector = accessor(dataPoint);
+        for (var j = 0; j < centroid.length; ++j) {
+            centroid[j] += vector[j];
+        }
+    }
+    for (var j = 0; j < centroid.length; ++j) {
+        centroid[j] /= dataPoints.length;
+    }
+    return centroid;
+}
+exports.centroid = centroid;
+/**
+ * Generates a vector of the specified size where each component is drawn from
+ * a random (0, 1) gaussian distribution.
+ */
+function rn(size) {
+    var normal = d3.random.normal();
+    var result = new Array(size);
+    for (var i = 0; i < size; ++i) {
+        result[i] = normal();
+    }
+    return result;
+}
+exports.rn = rn;
+/**
+ * Returns the cosine distance ([0, 2]) between two vectors
+ * that have been normalized to unit norm.
+ */
+function cosDistNorm(a, b) {
+    return 1 - dot(a, b);
+}
+exports.cosDistNorm = cosDistNorm;
+/**
+ * Returns the cosine distance ([0, 2]) between two vectors.
+ */
+function cosDist(a, b) {
+    return 1 - cosSim(a, b);
+}
+exports.cosDist = cosDist;
+/** Returns the cosine similarity ([-1, 1]) between two vectors. */
+function cosSim(a, b) {
+    return dot(a, b) / Math.sqrt(norm2(a) * norm2(b));
+}
+exports.cosSim = cosSim;
+/**
+ * Converts list of vectors (matrix) into a 1-dimensional
+ * typed array with row-first order.
+ */
+function toTypedArray(dataPoints, accessor) {
+    var N = dataPoints.length;
+    var dim = accessor(dataPoints[0]).length;
+    var result = new Float32Array(N * dim);
+    for (var i = 0; i < N; ++i) {
+        var vector = accessor(dataPoints[i]);
+        for (var d = 0; d < dim; ++d) {
+            result[i * dim + d] = vector[d];
+        }
+    }
+    return result;
+}
+exports.toTypedArray = toTypedArray;
+/**
+ * Transposes an RxC matrix represented as a flat typed array
+ * into a CxR matrix, again represented as a flat typed array.
+ */
+function transposeTypedArray(r, c, typedArray) {
+    var result = new Float32Array(r * c);
+    for (var i = 0; i < r; ++i) {
+        for (var j = 0; j < c; ++j) {
+            result[j * r + i] = typedArray[i * c + j];
+        }
+    }
+    return result;
+}
+exports.transposeTypedArray = transposeTypedArray;
+
+},{"./util":24}],26:[function(require,module,exports){
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+// tslint:disable-next-line:no-unused-variable
+var vz_projector_util_1 = require('./vz-projector-util');
+// tslint:disable-next-line
+exports.BookmarkPanelPolymer = vz_projector_util_1.PolymerElement({
+    is: 'vz-projector-bookmark-panel',
+    properties: { savedStates: Object, selectedState: Number }
+});
+var BookmarkPanel = (function (_super) {
+    __extends(BookmarkPanel, _super);
+    function BookmarkPanel() {
+        _super.apply(this, arguments);
+    }
+    BookmarkPanel.prototype.ready = function () {
+        this.dom = d3.select(this);
+        this.savedStates = [];
+        this.setupUploadButton();
+    };
+    BookmarkPanel.prototype.initialize = function (projector, dataProvider) {
+        this.projector = projector;
+        this.dataProvider = dataProvider;
+    };
+    BookmarkPanel.prototype.setSelectedTensor = function (run, tensorInfo) {
+        var _this = this;
+        if (tensorInfo && tensorInfo.bookmarksPath) {
+            this.loadAllStates([]);
+            // Get any bookmarks that may come when the projector starts up.
+            this.dataProvider.getBookmarks(run, tensorInfo.tensorName, function (bookmarks) {
+                _this.loadAllStates(bookmarks);
+            });
+        }
+    };
+    /** Handles a click on show bookmarks tray button. */
+    BookmarkPanel.prototype._expandMore = function () {
+        this.$.panel.toggle();
+        this.dom.select('#expand-more').style('display', 'none');
+        this.dom.select('#expand-less').style('display', '');
+    };
+    /** Handles a click on hide bookmarks tray button. */
+    BookmarkPanel.prototype._expandLess = function () {
+        this.$.panel.toggle();
+        this.dom.select('#expand-more').style('display', '');
+        this.dom.select('#expand-less').style('display', 'none');
+    };
+    /** Handles a click on the add bookmark button. */
+    BookmarkPanel.prototype._addBookmark = function () {
+        var currentState = this.projector.getCurrentState();
+        currentState.label = 'State ' + this.savedStates.length;
+        currentState.isSelected = true;
+        this.selectedState = this.savedStates.length;
+        for (var i = 0; i < this.savedStates.length; i++) {
+            this.savedStates[i].isSelected = false;
+            // We have to call notifyPath so that polymer knows this element was
+            // updated.
+            this.notifyPath('savedStates.' + i + '.isSelected', false, false);
+        }
+        this.push('savedStates', currentState);
+    };
+    /** Handles a click on the download bookmarks button. */
+    BookmarkPanel.prototype._downloadFile = function () {
+        var serializedState = this.serializeAllSavedStates();
+        var blob = new Blob([serializedState], { type: 'text/plain' });
+        var textFile = window.URL.createObjectURL(blob);
+        // Force a download.
+        var a = document.createElement('a');
+        document.body.appendChild(a);
+        a.style.display = 'none';
+        a.href = textFile;
+        a.download = 'state';
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(textFile);
+    };
+    /** Handles a click on the upload bookmarks button. */
+    BookmarkPanel.prototype._uploadFile = function () {
+        var fileInput = this.dom.select('#state-file');
+        fileInput.node().click();
+    };
+    BookmarkPanel.prototype.setupUploadButton = function () {
+        // Show and setup the load view button.
+        var fileInput = this.dom.select('#state-file');
+        fileInput.on('change', function () {
+            var file = d3.event.target.files[0];
+            // Clear out the value of the file chooser. This ensures that if the user
+            // selects the same file, we'll re-read it.
+            d3.event.target.value = '';
+            var fileReader = new FileReader();
+            fileReader.onload = function (evt) {
+                var str = evt.target.result;
+                var savedStates = JSON.parse(str);
+                this.loadAllStates(savedStates);
+                this.loadSavedState(0);
+            }.bind(this);
+            fileReader.readAsText(file);
+        }.bind(this));
+    };
+    BookmarkPanel.prototype.loadAllStates = function (savedStates) {
+        for (var i = 0; i < savedStates.length; i++) {
+            savedStates[i].isSelected = false;
+            this.push('savedStates', savedStates[i]);
+        }
+    };
+    /** Deselects any selected state selection. */
+    BookmarkPanel.prototype.clearStateSelection = function () {
+        for (var i = 0; i < this.savedStates.length; i++) {
+            if (this.savedStates[i].isSelected) {
+                this.savedStates[i].isSelected = false;
+                this.notifyPath('savedStates.' + i + '.isSelected', false, false);
+                return;
+            }
+        }
+    };
+    /** Handles a radio button click on a saved state. */
+    BookmarkPanel.prototype._radioButtonHandler = function (evt) {
+        var index = +evt.target.parentElement.getAttribute('data-index');
+        this.loadSavedState(index);
+    };
+    BookmarkPanel.prototype.loadSavedState = function (index) {
+        for (var i = 0; i < this.savedStates.length; i++) {
+            if (this.savedStates[i].isSelected) {
+                this.savedStates[i].isSelected = false;
+                this.notifyPath('savedStates.' + i + '.isSelected', false, false);
+            }
+            else if (index === i) {
+                this.savedStates[i].isSelected = true;
+                this.notifyPath('savedStates.' + i + '.isSelected', true, false);
+                // Update the world to this state.
+                this.projector.loadState(this.savedStates[i]);
+            }
+        }
+    };
+    /**
+     * Crawls up the DOM to find an ancestor with a data-index attribute. This is
+     * used to match events to their bookmark index.
+     */
+    BookmarkPanel.prototype._getParentDataIndex = function (evt) {
+        for (var i = 0; i < evt.path.length; i++) {
+            var dataIndex = evt.path[i].getAttribute('data-index');
+            if (dataIndex != null) {
+                return +dataIndex;
+            }
+        }
+        return -1;
+    };
+    /** Handles a clear button click on a bookmark. */
+    BookmarkPanel.prototype._clearButtonHandler = function (evt) {
+        var index = this._getParentDataIndex(evt);
+        this.splice('savedStates', index, 1);
+    };
+    /** Handles a label change event on a bookmark. */
+    BookmarkPanel.prototype._labelChange = function (evt) {
+        var index = this._getParentDataIndex(evt);
+        this.savedStates[index].label = evt.target.value;
+    };
+    /**
+     * Used to determine whether to select the radio button for a given bookmark.
+     */
+    BookmarkPanel.prototype._isSelectedState = function (index) {
+        return index === this.selectedState;
+    };
+    BookmarkPanel.prototype._isNotSelectedState = function (index) {
+        return index !== this.selectedState;
+    };
+    /**
+     * Gets all of the saved states as a serialized string.
+     */
+    BookmarkPanel.prototype.serializeAllSavedStates = function () {
+        return JSON.stringify(this.savedStates);
+    };
+    /**
+     * Loads all of the serialized states and shows them in the list of
+     * viewable states.
+     */
+    BookmarkPanel.prototype.loadSavedStates = function (serializedStates) {
+        this.savedStates = JSON.parse(serializedStates);
+    };
+    return BookmarkPanel;
+}(exports.BookmarkPanelPolymer));
+exports.BookmarkPanel = BookmarkPanel;
+document.registerElement(BookmarkPanel.prototype.is, BookmarkPanel);
+
+},{"./vz-projector-util":33}],27:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var data_provider_1 = require('./data-provider');
+// tslint:disable-next-line:no-unused-variable
+var vz_projector_util_1 = require('./vz-projector-util');
+exports.DataPanelPolymer = vz_projector_util_1.PolymerElement({
+    is: 'vz-projector-data-panel',
+    properties: {
+        selectedTensor: { type: String, observer: '_selectedTensorChanged' },
+        selectedRun: { type: String, observer: '_selectedRunChanged' },
+        selectedColorOptionName: {
+            type: String,
+            notify: true,
+            observer: '_selectedColorOptionNameChanged'
+        },
+        selectedLabelOption: { type: String, notify: true, observer: '_selectedLabelOptionChanged' },
+        normalizeData: Boolean
+    }
+});
+var DataPanel = (function (_super) {
+    __extends(DataPanel, _super);
+    function DataPanel() {
+        _super.apply(this, arguments);
+    }
+    DataPanel.prototype.ready = function () {
+        this.dom = d3.select(this);
+        this.normalizeData = true;
+    };
+    DataPanel.prototype.initialize = function (projector, dp) {
+        var _this = this;
+        this.projector = projector;
+        this.dataProvider = dp;
+        this.setupUploadButtons();
+        // Tell the projector whenever the data normalization changes.
+        // Unknown why, but the polymer checkbox button stops working as soon as
+        // you do d3.select() on it.
+        this.querySelector('#normalize-data-checkbox')
+            .addEventListener('change', function () {
+            _this.projector.setNormalizeData(_this.normalizeData);
+        });
+        // Get all the runs.
+        this.dataProvider.retrieveRuns(function (runs) {
+            _this.runNames = runs;
+            // Choose the first run by default.
+            if (_this.runNames.length > 0) {
+                _this.selectedRun = runs[0];
+            }
+        });
+    };
+    DataPanel.prototype.getSeparatorClass = function (isSeparator) {
+        return isSeparator ? 'separator' : null;
+    };
+    DataPanel.prototype.metadataChanged = function (spriteAndMetadata, metadataFile) {
+        this.updateMetadataUI(spriteAndMetadata.stats, metadataFile);
+    };
+    DataPanel.prototype.updateMetadataUI = function (columnStats, metadataFile) {
+        this.dom.select('#metadata-file')
+            .text(metadataFile)
+            .attr('title', metadataFile);
+        // Label by options.
+        var labelIndex = -1;
+        this.labelOptions = columnStats.map(function (stats, i) {
+            // Make the default label by the first non-numeric column.
+            if (!stats.isNumeric && labelIndex === -1) {
+                labelIndex = i;
+            }
+            return stats.name;
+        });
+        this.selectedLabelOption = this.labelOptions[Math.max(0, labelIndex)];
+        // Color by options.
+        var standardColorOption = [
+            { name: 'No color map' },
+        ];
+        var metadataColorOption = columnStats
+            .filter(function (stats) {
+            return !stats.tooManyUniqueValues || stats.isNumeric;
+        })
+            .map(function (stats) {
+            var map;
+            var items;
+            var thresholds;
+            if (!stats.tooManyUniqueValues) {
+                var scale = d3.scale.category20();
+                var range_1 = scale.range();
+                // Re-order the range.
+                var newRange = range_1.map(function (color, i) {
+                    var index = (i * 3) % range_1.length;
+                    return range_1[index];
+                });
+                items = stats.uniqueEntries;
+                scale.range(newRange).domain(items.map(function (x) { return x.label; }));
+                map = scale;
+            }
+            else {
+                thresholds = [
+                    { color: '#ffffdd', value: stats.min },
+                    { color: '#1f2d86', value: stats.max }
+                ];
+                map = d3.scale.linear()
+                    .domain(thresholds.map(function (t) { return t.value; }))
+                    .range(thresholds.map(function (t) { return t.color; }));
+            }
+            var desc = stats.tooManyUniqueValues ?
+                'gradient' :
+                stats.uniqueEntries.length +
+                    ((stats.uniqueEntries.length > 20) ? ' non-unique' : '') +
+                    ' colors';
+            return { name: stats.name, desc: desc, map: map, items: items, thresholds: thresholds };
+        });
+        if (metadataColorOption.length > 0) {
+            // Add a separator line between built-in color maps
+            // and those based on metadata columns.
+            standardColorOption.push({ name: 'Metadata', isSeparator: true });
+        }
+        this.colorOptions = standardColorOption.concat(metadataColorOption);
+        this.selectedColorOptionName = this.colorOptions[0].name;
+    };
+    DataPanel.prototype.setNormalizeData = function (normalizeData) {
+        this.normalizeData = normalizeData;
+    };
+    DataPanel.prototype._selectedTensorChanged = function () {
+        var _this = this;
+        if (this.selectedTensor == null) {
+            return;
+        }
+        this.dataProvider.retrieveTensor(this.selectedRun, this.selectedTensor, function (ds) {
+            var metadataFile = _this.getEmbeddingInfoByName(_this.selectedTensor).metadataPath;
+            _this.dataProvider.retrieveSpriteAndMetadata(_this.selectedRun, _this.selectedTensor, function (metadata) {
+                _this.projector.updateDataSet(ds, metadata, metadataFile);
+            });
+        });
+        this.projector.setSelectedTensor(this.selectedRun, this.getEmbeddingInfoByName(this.selectedTensor));
+    };
+    DataPanel.prototype._selectedRunChanged = function () {
+        var _this = this;
+        this.dataProvider.retrieveProjectorConfig(this.selectedRun, function (info) {
+            _this.projectorConfig = info;
+            var names = _this.projectorConfig.embeddings.map(function (e) { return e.tensorName; })
+                .filter(function (name) {
+                var shape = _this.getEmbeddingInfoByName(name).tensorShape;
+                return shape.length === 2 && shape[0] > 1 && shape[1] > 1;
+            })
+                .sort(function (a, b) {
+                var sizeA = _this.getEmbeddingInfoByName(a).tensorShape[0];
+                var sizeB = _this.getEmbeddingInfoByName(b).tensorShape[0];
+                if (sizeA === sizeB) {
+                    // If the same dimension, sort alphabetically by tensor
+                    // name.
+                    return a <= b ? -1 : 1;
+                }
+                // Sort by first tensor dimension.
+                return sizeB - sizeA;
+            });
+            _this.tensorNames = names.map(function (name) {
+                return {
+                    name: name,
+                    shape: _this.getEmbeddingInfoByName(name).tensorShape
+                };
+            });
+            _this.dom.select('#checkpoint-file')
+                .text(_this.projectorConfig.modelCheckpointPath)
+                .attr('title', _this.projectorConfig.modelCheckpointPath);
+            _this.dataProvider.getDefaultTensor(_this.selectedRun, function (defaultTensor) {
+                if (_this.selectedTensor === defaultTensor) {
+                    // Explicitly call the observer. Polymer won't call it if the previous
+                    // string matches the current string.
+                    _this._selectedTensorChanged();
+                }
+                else {
+                    _this.selectedTensor = defaultTensor;
+                }
+            });
+        });
+    };
+    DataPanel.prototype._selectedLabelOptionChanged = function () {
+        this.projector.setSelectedLabelOption(this.selectedLabelOption);
+    };
+    DataPanel.prototype._selectedColorOptionNameChanged = function () {
+        var colorOption;
+        for (var i = 0; i < this.colorOptions.length; i++) {
+            if (this.colorOptions[i].name === this.selectedColorOptionName) {
+                colorOption = this.colorOptions[i];
+                break;
+            }
+        }
+        if (!colorOption) {
+            return;
+        }
+        if (colorOption.map == null) {
+            this.colorLegendRenderInfo = null;
+        }
+        else if (colorOption.items) {
+            var items = colorOption.items.map(function (item) {
+                return {
+                    color: colorOption.map(item.label),
+                    label: item.label,
+                    count: item.count
+                };
+            });
+            this.colorLegendRenderInfo = { items: items, thresholds: null };
+        }
+        else {
+            this.colorLegendRenderInfo = {
+                items: null,
+                thresholds: colorOption.thresholds
+            };
+        }
+        this.projector.setSelectedColorOption(colorOption);
+    };
+    DataPanel.prototype.tensorWasReadFromFile = function (rawContents, fileName) {
+        var _this = this;
+        data_provider_1.parseRawTensors(rawContents, function (ds) {
+            _this.dom.select('#checkpoint-file')
+                .text(fileName)
+                .attr('title', fileName);
+            _this.projector.updateDataSet(ds);
+        });
+    };
+    DataPanel.prototype.metadataWasReadFromFile = function (rawContents, fileName) {
+        var _this = this;
+        data_provider_1.parseRawMetadata(rawContents, function (metadata) {
+            _this.projector.updateDataSet(_this.projector.dataSet, metadata, fileName);
+        });
+    };
+    DataPanel.prototype.getEmbeddingInfoByName = function (tensorName) {
+        for (var i = 0; i < this.projectorConfig.embeddings.length; i++) {
+            var e = this.projectorConfig.embeddings[i];
+            if (e.tensorName === tensorName) {
+                return e;
+            }
+        }
+    };
+    DataPanel.prototype.setupUploadButtons = function () {
+        var _this = this;
+        // Show and setup the upload button.
+        var fileInput = this.dom.select('#file');
+        fileInput.on('change', function () {
+            var file = d3.event.target.files[0];
+            // Clear out the value of the file chooser. This ensures that if the user
+            // selects the same file, we'll re-read it.
+            d3.event.target.value = '';
+            var fileReader = new FileReader();
+            fileReader.onload = function (evt) {
+                var content = evt.target.result;
+                _this.tensorWasReadFromFile(content, file.name);
+            };
+            fileReader.readAsText(file);
+        });
+        var uploadButton = this.dom.select('#upload');
+        uploadButton.on('click', function () { fileInput.node().click(); });
+        // Show and setup the upload metadata button.
+        var fileMetadataInput = this.dom.select('#file-metadata');
+        fileMetadataInput.on('change', function () {
+            var file = d3.event.target.files[0];
+            // Clear out the value of the file chooser. This ensures that if the user
+            // selects the same file, we'll re-read it.
+            d3.event.target.value = '';
+            var fileReader = new FileReader();
+            fileReader.onload = function (evt) {
+                var contents = evt.target.result;
+                _this.metadataWasReadFromFile(contents, file.name);
+            };
+            fileReader.readAsText(file);
+        });
+        var uploadMetadataButton = this.dom.select('#upload-metadata');
+        uploadMetadataButton.on('click', function () {
+            fileMetadataInput.node().click();
+        });
+    };
+    DataPanel.prototype._getNumTensorsLabel = function () {
+        return this.tensorNames.length === 1 ? '1 tensor' :
+            this.tensorNames.length + ' tensors';
+    };
+    DataPanel.prototype._getNumRunsLabel = function () {
+        return this.runNames.length === 1 ? '1 run' :
+            this.runNames.length + ' runs';
+    };
+    DataPanel.prototype._hasChoices = function (choices) {
+        return choices.length > 1;
+    };
+    return DataPanel;
+}(exports.DataPanelPolymer));
+exports.DataPanel = DataPanel;
+document.registerElement(DataPanel.prototype.is, DataPanel);
+
+},{"./data-provider":5,"./vz-projector-util":33}],28:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+// tslint:disable-next-line:no-unused-variable
+var vz_projector_util_1 = require('./vz-projector-util');
+// tslint:disable-next-line
+exports.PolymerClass = vz_projector_util_1.PolymerElement({ is: 'vz-projector-input', properties: { label: String, message: String } });
+/** Input control with custom capabilities (e.g. regex). */
+var ProjectorInput = (function (_super) {
+    __extends(ProjectorInput, _super);
+    function ProjectorInput() {
+        _super.apply(this, arguments);
+    }
+    /** Subscribe to be called everytime the input changes. */
+    ProjectorInput.prototype.registerInputChangedListener = function (listener) {
+        this.textChangedListeners.push(listener);
+    };
+    ProjectorInput.prototype.ready = function () {
+        var _this = this;
+        this.inRegexMode = false;
+        this.textChangedListeners = [];
+        this.dom = d3.select(this);
+        this.paperInput = this.querySelector('paper-input');
+        this.inRegexModeButton =
+            this.querySelector('paper-button');
+        this.paperInput.setAttribute('error-message', 'Invalid regex');
+        this.paperInput.addEventListener('input', function () {
+            _this.onTextChanged();
+        });
+        this.paperInput.addEventListener('keydown', function (event) {
+            event.stopPropagation();
+        });
+        this.inRegexModeButton.addEventListener('click', function () { return _this.onClickRegexModeButton(); });
+        this.updateRegexModeDisplaySlashes();
+        this.onTextChanged();
+    };
+    ProjectorInput.prototype.onClickRegexModeButton = function () {
+        this.inRegexMode = this.inRegexModeButton.active;
+        this.updateRegexModeDisplaySlashes();
+        this.onTextChanged();
+    };
+    ProjectorInput.prototype.notifyInputChanged = function (value, inRegexMode) {
+        this.textChangedListeners.forEach(function (l) { return l(value, inRegexMode); });
+    };
+    ProjectorInput.prototype.onTextChanged = function () {
+        try {
+            if (this.inRegexMode) {
+                new RegExp(this.paperInput.value);
+            }
+        }
+        catch (invalidRegexException) {
+            this.paperInput.setAttribute('invalid', 'true');
+            this.message = '';
+            this.notifyInputChanged(null, true);
+            return;
+        }
+        this.paperInput.removeAttribute('invalid');
+        this.notifyInputChanged(this.paperInput.value, this.inRegexMode);
+    };
+    ProjectorInput.prototype.updateRegexModeDisplaySlashes = function () {
+        d3.select(this.paperInput)
+            .selectAll('.slash')
+            .style('display', this.inRegexMode ? null : 'none');
+    };
+    ProjectorInput.prototype.getValue = function () {
+        return this.paperInput.value;
+    };
+    ProjectorInput.prototype.getInRegexMode = function () {
+        return this.inRegexMode;
+    };
+    ProjectorInput.prototype.set = function (value, inRegexMode) {
+        this.inRegexModeButton.active = inRegexMode;
+        this.paperInput.value = value;
+        this.onClickRegexModeButton();
+    };
+    return ProjectorInput;
+}(exports.PolymerClass));
+exports.ProjectorInput = ProjectorInput;
+document.registerElement(ProjectorInput.prototype.is, ProjectorInput);
+
+},{"./vz-projector-util":33}],29:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var vector = require('./vector');
+// tslint:disable-next-line:no-unused-variable
+var vz_projector_util_1 = require('./vz-projector-util');
+/** Color scale for nearest neighbors. */
+var NN_COLOR_SCALE = d3.scale.linear()
+    .domain([1, 0.7, 0.4])
+    .range(['hsl(285, 80%, 40%)', 'hsl(0, 80%, 65%)', 'hsl(40, 70%, 60%)'])
+    .clamp(true);
+/** Limit the number of search results we show to the user. */
+var LIMIT_RESULTS = 100;
+// tslint:disable-next-line
+exports.PolymerClass = vz_projector_util_1.PolymerElement({
+    is: 'vz-projector-inspector-panel',
+    properties: {
+        selectedMetadataField: String,
+        metadataFields: Array
+    }
+});
+var InspectorPanel = (function (_super) {
+    __extends(InspectorPanel, _super);
+    function InspectorPanel() {
+        _super.apply(this, arguments);
+    }
+    InspectorPanel.prototype.ready = function () {
+        this.dom = d3.select(this);
+        this.resetFilterButton = this.dom.select('.reset-filter');
+        this.setFilterButton = this.dom.select('.set-filter');
+        this.clearSelectionButton = this.dom.select('.clear-selection');
+        this.limitMessage = this.dom.select('.limit-msg');
+        this.searchBox = this.querySelector('#search-box');
+        // https://www.polymer-project.org/1.0/docs/devguide/styling#scope-subtree
+        this.scopeSubtree(this, true);
+    };
+    InspectorPanel.prototype.initialize = function (projector) {
+        this.projector = projector;
+        this.setupUI();
+    };
+    /** Updates the nearest neighbors list in the inspector. */
+    InspectorPanel.prototype.updateInspectorPane = function (indices, neighbors) {
+        if (neighbors.length > 0) {
+            this.selectedPointIndex = indices[0];
+        }
+        else {
+            this.selectedPointIndex = null;
+        }
+        this.updateFilterButtons(indices.length + neighbors.length);
+        this.updateNeighborsList(neighbors);
+        if (neighbors.length === 0) {
+            this.updateSearchResults(indices);
+        }
+        else {
+            this.updateSearchResults([]);
+        }
+    };
+    InspectorPanel.prototype.metadataChanged = function (spriteAndMetadata) {
+        var labelIndex = -1;
+        this.metadataFields = spriteAndMetadata.stats.map(function (stats, i) {
+            if (!stats.isNumeric && labelIndex === -1) {
+                labelIndex = i;
+            }
+            return stats.name;
+        });
+        labelIndex = Math.max(0, labelIndex);
+        // Make the default label the first non-numeric column.
+        this.selectedMetadataField = spriteAndMetadata.stats[labelIndex].name;
+    };
+    InspectorPanel.prototype.datasetChanged = function () {
+        this.resetFilterButton.attr('disabled', true);
+    };
+    InspectorPanel.prototype.updateSearchResults = function (indices) {
+        var _this = this;
+        var container = this.dom.select('.matches-list');
+        container.style('display', indices.length ? null : 'none');
+        var list = container.select('.list');
+        list.html('');
+        if (indices.length === 0) {
+            return;
+        }
+        this.limitMessage.style('display', indices.length <= LIMIT_RESULTS ? 'none' : null);
+        indices = indices.slice(0, LIMIT_RESULTS);
+        var rows = list.selectAll('.row')
+            .data(indices)
+            .enter()
+            .append('div').attr('class', 'row');
+        rows.append('a')
+            .attr('class', 'label')
+            .attr('title', function (index) { return _this.getLabelFromIndex(index); })
+            .text(function (index) { return _this.getLabelFromIndex(index); });
+        rows.on('mouseenter', function (index) {
+            _this.projector.notifyHoverOverPoint(index);
+        });
+        rows.on('mouseleave', function () {
+            _this.projector.notifyHoverOverPoint(null);
+        });
+        rows.on('click', function (index) {
+            _this.projector.notifySelectionChanged([index]);
+        });
+    };
+    InspectorPanel.prototype.getLabelFromIndex = function (pointIndex) {
+        var point = this.projector.dataSet.points[pointIndex];
+        return point.metadata[this.selectedMetadataField].toString();
+    };
+    InspectorPanel.prototype.updateNeighborsList = function (neighbors) {
+        var _this = this;
+        var nnlist = this.dom.select('.nn-list');
+        nnlist.html('');
+        this.dom.select('.nn').style('display', neighbors.length ? null : 'none');
+        if (neighbors.length === 0) {
+            return;
+        }
+        this.searchBox.message = '';
+        var minDist = neighbors.length > 0 ? neighbors[0].dist : 0;
+        var n = nnlist.selectAll('.neighbor')
+            .data(neighbors)
+            .enter()
+            .append('div')
+            .attr('class', 'neighbor')
+            .append('a')
+            .attr('class', 'neighbor-link')
+            .attr('title', function (d) { return _this.getLabelFromIndex(d.index); });
+        var labelValue = n.append('div').attr('class', 'label-and-value');
+        labelValue.append('div')
+            .attr('class', 'label')
+            .style('color', function (d) { return dist2color(_this.distFunc, d.dist, minDist); })
+            .text(function (d) { return _this.getLabelFromIndex(d.index); });
+        labelValue.append('div')
+            .attr('class', 'value')
+            .text(function (d) { return d.dist.toFixed(3); });
+        var bar = n.append('div').attr('class', 'bar');
+        bar.append('div')
+            .attr('class', 'fill')
+            .style('border-top-color', function (d) {
+            return dist2color(_this.distFunc, d.dist, minDist);
+        })
+            .style('width', function (d) {
+            return normalizeDist(_this.distFunc, d.dist, minDist) * 100 + '%';
+        });
+        bar.selectAll('.tick')
+            .data(d3.range(1, 4))
+            .enter()
+            .append('div')
+            .attr('class', 'tick')
+            .style('left', function (d) { return d * 100 / 4 + '%'; });
+        n.on('mouseenter', function (d) {
+            _this.projector.notifyHoverOverPoint(d.index);
+        });
+        n.on('mouseleave', function () {
+            _this.projector.notifyHoverOverPoint(null);
+        });
+        n.on('click', function (d) {
+            _this.projector.notifySelectionChanged([d.index]);
+        });
+    };
+    InspectorPanel.prototype.updateFilterButtons = function (numPoints) {
+        if (numPoints > 1) {
+            this.setFilterButton.text("Isolate " + numPoints + " points")
+                .attr('disabled', null);
+            this.clearSelectionButton.attr('disabled', null);
+        }
+        else {
+            this.setFilterButton.attr('disabled', true);
+            this.clearSelectionButton.attr('disabled', true);
+        }
+    };
+    InspectorPanel.prototype.setupUI = function () {
+        var _this = this;
+        this.distFunc = vector.cosDist;
+        var eucDist = this.dom.select('.distance a.euclidean');
+        eucDist.on('click', function () {
+            _this.dom.selectAll('.distance a').classed('selected', false);
+            eucDist.classed('selected', true);
+            _this.distFunc = vector.dist;
+            var neighbors = _this.projector.dataSet.findNeighbors(_this.selectedPointIndex, _this.distFunc, _this.numNN);
+            _this.updateNeighborsList(neighbors);
+        });
+        var cosDist = this.dom.select('.distance a.cosine');
+        cosDist.on('click', function () {
+            _this.dom.selectAll('.distance a').classed('selected', false);
+            cosDist.classed('selected', true);
+            _this.distFunc = vector.cosDist;
+            var neighbors = _this.projector.dataSet.findNeighbors(_this.selectedPointIndex, _this.distFunc, _this.numNN);
+            _this.updateNeighborsList(neighbors);
+        });
+        // Called whenever the search text input changes.
+        var updateInput = function (value, inRegexMode) {
+            if (value == null || value.trim() === '') {
+                _this.searchBox.message = '';
+                _this.projector.notifySelectionChanged([]);
+                return;
+            }
+            var indices = _this.projector.dataSet.query(value, inRegexMode, _this.selectedMetadataField);
+            if (indices.length === 0) {
+                _this.searchBox.message = '0 matches.';
+            }
+            else {
+                _this.searchBox.message = indices.length + " matches.";
+            }
+            _this.projector.notifySelectionChanged(indices);
+        };
+        this.searchBox.registerInputChangedListener(function (value, inRegexMode) {
+            updateInput(value, inRegexMode);
+        });
+        // Nearest neighbors controls.
+        var numNNInput = this.$$('#nn-slider');
+        var updateNumNN = function () {
+            _this.numNN = +numNNInput.value;
+            _this.dom.select('.num-nn .nn-count').text(_this.numNN);
+            if (_this.selectedPointIndex != null) {
+                _this.projector.notifySelectionChanged([_this.selectedPointIndex]);
+            }
+        };
+        numNNInput.addEventListener('change', updateNumNN);
+        updateNumNN();
+        // Filtering dataset.
+        this.setFilterButton.on('click', function () {
+            _this.projector.filterDataset();
+            _this.resetFilterButton.attr('disabled', null);
+            _this.updateFilterButtons(0);
+        });
+        this.resetFilterButton.on('click', function () {
+            _this.projector.resetFilterDataset();
+            _this.resetFilterButton.attr('disabled', true);
+        });
+        this.clearSelectionButton.on('click', function () {
+            _this.projector.adjustSelectionAndHover([]);
+        });
+        this.resetFilterButton.attr('disabled', true);
+    };
+    return InspectorPanel;
+}(exports.PolymerClass));
+exports.InspectorPanel = InspectorPanel;
+/**
+ * Normalizes the distance so it can be visually encoded with color.
+ * The normalization depends on the distance metric (cosine vs euclidean).
+ */
+function normalizeDist(distFunc, d, minDist) {
+    return distFunc === vector.dist ? minDist / d : 1 - d;
+}
+/** Normalizes and encodes the provided distance with color. */
+function dist2color(distFunc, d, minDist) {
+    return NN_COLOR_SCALE(normalizeDist(distFunc, d, minDist));
+}
+document.registerElement(InspectorPanel.prototype.is, InspectorPanel);
+
+},{"./vector":25,"./vz-projector-util":33}],30:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+// tslint:disable-next-line:no-unused-variable
+var vz_projector_util_1 = require('./vz-projector-util');
+// tslint:disable-next-line
+exports.LegendPolymer = vz_projector_util_1.PolymerElement({
+    is: 'vz-projector-legend',
+    properties: { renderInfo: { type: Object, observer: '_renderInfoChanged' } }
+});
+var Legend = (function (_super) {
+    __extends(Legend, _super);
+    function Legend() {
+        _super.apply(this, arguments);
+    }
+    Legend.prototype.ready = function () {
+        this.dom = d3.select(this);
+    };
+    Legend.prototype._renderInfoChanged = function () {
+        var _this = this;
+        if (this.renderInfo == null) {
+            return;
+        }
+        if (this.renderInfo.thresholds) {
+            // <linearGradient> is under dom-if so we should wait for it to be
+            // inserted in the dom tree using async().
+            this.async(function () { return _this.setupLinearGradient(); });
+        }
+    };
+    Legend.prototype._getLastThreshold = function () {
+        if (this.renderInfo == null || this.renderInfo.thresholds == null) {
+            return;
+        }
+        return this.renderInfo.thresholds[this.renderInfo.thresholds.length - 1]
+            .value;
+    };
+    Legend.prototype.getOffset = function (value) {
+        var min = this.renderInfo.thresholds[0].value;
+        var max = this.renderInfo.thresholds[this.renderInfo.thresholds.length - 1].value;
+        return (100 * (value - min) / (max - min)).toFixed(2) + '%';
+    };
+    Legend.prototype.setupLinearGradient = function () {
+        var _this = this;
+        var linearGradient = this.dom.select('#gradient');
+        var width = this.dom.select('svg.gradient').node().clientWidth;
+        // Set the svg <rect> to be the width of its <svg> parent.
+        this.dom.select('svg.gradient rect').attr('width', width);
+        // Remove all <stop> children from before.
+        linearGradient.selectAll('*').remove();
+        // Add a <stop> child in <linearGradient> for each gradient threshold.
+        this.renderInfo.thresholds.forEach(function (t) {
+            linearGradient.append('stop')
+                .attr('offset', _this.getOffset(t.value))
+                .attr('stop-color', t.color);
+        });
+    };
+    return Legend;
+}(exports.LegendPolymer));
+exports.Legend = Legend;
+document.registerElement(Legend.prototype.is, Legend);
+
+},{"./vz-projector-util":33}],31:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+// tslint:disable-next-line:no-unused-variable
+var vz_projector_util_1 = require('./vz-projector-util');
+// tslint:disable-next-line
+exports.MetadataCardPolymer = vz_projector_util_1.PolymerElement({
+    is: 'vz-projector-metadata-card',
+    properties: {
+        hasMetadata: { type: Boolean, value: false },
+        metadata: { type: Array },
+        label: String
+    }
+});
+var MetadataCard = (function (_super) {
+    __extends(MetadataCard, _super);
+    function MetadataCard() {
+        _super.apply(this, arguments);
+    }
+    MetadataCard.prototype.ready = function () {
+        this.dom = d3.select(this);
+    };
+    /** Handles a click on the expand more icon. */
+    MetadataCard.prototype._expandMore = function () {
+        this.$$('#metadata-container').toggle();
+        this.dom.select('#expand-more').style('display', 'none');
+        this.dom.select('#expand-less').style('display', '');
+    };
+    /** Handles a click on the expand less icon. */
+    MetadataCard.prototype._expandLess = function () {
+        this.$$('#metadata-container').toggle();
+        this.dom.select('#expand-more').style('display', '');
+        this.dom.select('#expand-less').style('display', 'none');
+    };
+    MetadataCard.prototype.updateMetadata = function (pointMetadata) {
+        this.pointMetadata = pointMetadata;
+        this.hasMetadata = (pointMetadata != null);
+        if (pointMetadata) {
+            var metadata = [];
+            for (var metadataKey in pointMetadata) {
+                if (!pointMetadata.hasOwnProperty(metadataKey)) {
+                    continue;
+                }
+                metadata.push({ key: metadataKey, value: pointMetadata[metadataKey] });
+            }
+            this.metadata = metadata;
+            this.label = '' + this.pointMetadata[this.labelOption];
+        }
+    };
+    MetadataCard.prototype.setLabelOption = function (labelOption) {
+        this.labelOption = labelOption;
+        if (this.pointMetadata) {
+            this.label = '' + this.pointMetadata[this.labelOption];
+        }
+    };
+    return MetadataCard;
+}(exports.MetadataCardPolymer));
+exports.MetadataCard = MetadataCard;
+document.registerElement(MetadataCard.prototype.is, MetadataCard);
+
+},{"./vz-projector-util":33}],32:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var data_1 = require('./data');
+var vector = require('./vector');
+// tslint:disable-next-line:no-unused-variable
+var vz_projector_util_1 = require('./vz-projector-util');
+// tslint:disable-next-line
+exports.ProjectionsPanelPolymer = vz_projector_util_1.PolymerElement({
+    is: 'vz-projector-projections-panel',
+    properties: {
+        pcaIs3d: { type: Boolean, value: true, observer: '_pcaDimensionToggleObserver' },
+        tSNEis3d: { type: Boolean, value: true, observer: '_tsneDimensionToggleObserver' },
+        // PCA projection.
+        pcaComponents: { type: Array, value: d3.range(0, 10) },
+        pcaX: { type: Number, value: 0, observer: 'showPCAIfEnabled' },
+        pcaY: { type: Number, value: 1, observer: 'showPCAIfEnabled' },
+        pcaZ: { type: Number, value: 2, observer: 'showPCAIfEnabled' },
+        // Custom projection.
+        customSelectedSearchByMetadataOption: {
+            type: String,
+            observer: '_customSelectedSearchByMetadataOptionChanged'
+        },
+    }
+});
+/**
+ * A polymer component which handles the projection tabs in the projector.
+ */
+var ProjectionsPanel = (function (_super) {
+    __extends(ProjectionsPanel, _super);
+    function ProjectionsPanel() {
+        _super.apply(this, arguments);
+    }
+    ProjectionsPanel.prototype.initialize = function (projector) {
+        this.polymerChangesTriggerReprojection = true;
+        this.projector = projector;
+        // Set up TSNE projections.
+        this.perplexity = 30;
+        this.learningRate = 10;
+        // Setup Custom projections.
+        this.centroidValues = { xLeft: null, xRight: null, yUp: null, yDown: null };
+        this.clearCentroids();
+        this.setupUIControls();
+    };
+    ProjectionsPanel.prototype.ready = function () {
+        this.dom = d3.select(this);
+        this.zDropdown = this.dom.select('#z-dropdown');
+        this.runTsneButton = this.dom.select('.run-tsne');
+        this.stopTsneButton = this.dom.select('.stop-tsne');
+        this.perplexitySlider = this.$$('#perplexity-slider');
+        this.learningRateInput =
+            this.$$('#learning-rate-slider');
+        this.iterationLabel = this.dom.select('.run-tsne-iter');
+    };
+    ProjectionsPanel.prototype.disablePolymerChangesTriggerReprojection = function () {
+        this.polymerChangesTriggerReprojection = false;
+    };
+    ProjectionsPanel.prototype.enablePolymerChangesTriggerReprojection = function () {
+        this.polymerChangesTriggerReprojection = true;
+    };
+    ProjectionsPanel.prototype.updateTSNEPerplexityFromUIChange = function () {
+        if (this.perplexitySlider) {
+            this.perplexity = +this.perplexitySlider.value;
+        }
+        this.dom.select('.tsne-perplexity span').text(this.perplexity);
+    };
+    ProjectionsPanel.prototype.updateTSNELearningRateFromUIChange = function () {
+        if (this.learningRateInput) {
+            this.learningRate = Math.pow(10, +this.learningRateInput.value);
+        }
+        this.dom.select('.tsne-learning-rate span').text(this.learningRate);
+    };
+    ProjectionsPanel.prototype.setupUIControls = function () {
+        var _this = this;
+        {
+            var self_1 = this;
+            this.dom.selectAll('.ink-tab').on('click', function () {
+                var id = this.getAttribute('data-tab');
+                self_1.showTab(id);
+            });
+        }
+        this.runTsneButton.on('click', function () { return _this.runTSNE(); });
+        this.stopTsneButton.on('click', function () { return _this.dataSet.stopTSNE(); });
+        this.perplexitySlider.value = this.perplexity.toString();
+        this.perplexitySlider.addEventListener('change', function () { return _this.updateTSNEPerplexityFromUIChange(); });
+        this.updateTSNEPerplexityFromUIChange();
+        this.learningRateInput.addEventListener('change', function () { return _this.updateTSNELearningRateFromUIChange(); });
+        this.updateTSNELearningRateFromUIChange();
+        this.setupCustomProjectionInputFields();
+        // TODO: figure out why `--paper-input-container-input` css mixin didn't
+        // work.
+        this.dom.selectAll('paper-dropdown-menu paper-input input')
+            .style('font-size', '14px');
+    };
+    ProjectionsPanel.prototype.restoreUIFromBookmark = function (bookmark) {
+        this.disablePolymerChangesTriggerReprojection();
+        // PCA
+        this.pcaX = bookmark.pcaComponentDimensions[0];
+        this.pcaY = bookmark.pcaComponentDimensions[1];
+        if (bookmark.pcaComponentDimensions.length === 3) {
+            this.pcaZ = bookmark.pcaComponentDimensions[2];
+        }
+        this.pcaIs3d = (bookmark.pcaComponentDimensions.length === 3);
+        // t-SNE
+        if (this.perplexitySlider) {
+            this.perplexitySlider.value = bookmark.tSNEPerplexity.toString();
+        }
+        if (this.learningRateInput) {
+            this.learningRateInput.value = bookmark.tSNELearningRate.toString();
+        }
+        this.tSNEis3d = bookmark.tSNEis3d;
+        // custom
+        this.customSelectedSearchByMetadataOption =
+            bookmark.customSelectedSearchByMetadataOption;
+        if (this.customProjectionXLeftInput) {
+            this.customProjectionXLeftInput.set(bookmark.customXLeftText, bookmark.customXLeftRegex);
+        }
+        if (this.customProjectionXRightInput) {
+            this.customProjectionXRightInput.set(bookmark.customXRightText, bookmark.customXRightRegex);
+        }
+        if (this.customProjectionYUpInput) {
+            this.customProjectionYUpInput.set(bookmark.customYUpText, bookmark.customYUpRegex);
+        }
+        if (this.customProjectionYDownInput) {
+            this.customProjectionYDownInput.set(bookmark.customYDownText, bookmark.customYDownRegex);
+        }
+        this.computeAllCentroids();
+        this.setZDropdownEnabled(this.pcaIs3d);
+        this.updateTSNEPerplexityFromUIChange();
+        this.updateTSNELearningRateFromUIChange();
+        if (this.iterationLabel) {
+            this.iterationLabel.text(bookmark.tSNEIteration.toString());
+        }
+        this.showTab(bookmark.selectedProjection);
+        this.enablePolymerChangesTriggerReprojection();
+    };
+    ProjectionsPanel.prototype.populateBookmarkFromUI = function (bookmark) {
+        this.disablePolymerChangesTriggerReprojection();
+        // PCA
+        bookmark.pcaComponentDimensions = [this.pcaX, this.pcaY];
+        if (this.pcaIs3d) {
+            bookmark.pcaComponentDimensions.push(this.pcaZ);
+        }
+        // t-SNE
+        if (this.perplexitySlider != null) {
+            bookmark.tSNEPerplexity = +this.perplexitySlider.value;
+        }
+        if (this.learningRateInput != null) {
+            bookmark.tSNELearningRate = +this.learningRateInput.value;
+        }
+        bookmark.tSNEis3d = this.tSNEis3d;
+        // custom
+        bookmark.customSelectedSearchByMetadataOption =
+            this.customSelectedSearchByMetadataOption;
+        if (this.customProjectionXLeftInput != null) {
+            bookmark.customXLeftText = this.customProjectionXLeftInput.getValue();
+            bookmark.customXLeftRegex =
+                this.customProjectionXLeftInput.getInRegexMode();
+        }
+        if (this.customProjectionXRightInput != null) {
+            bookmark.customXRightText = this.customProjectionXRightInput.getValue();
+            bookmark.customXRightRegex =
+                this.customProjectionXRightInput.getInRegexMode();
+        }
+        if (this.customProjectionYUpInput != null) {
+            bookmark.customYUpText = this.customProjectionYUpInput.getValue();
+            bookmark.customYUpRegex = this.customProjectionYUpInput.getInRegexMode();
+        }
+        if (this.customProjectionYDownInput != null) {
+            bookmark.customYDownText = this.customProjectionYDownInput.getValue();
+            bookmark.customYDownRegex =
+                this.customProjectionYDownInput.getInRegexMode();
+        }
+        this.enablePolymerChangesTriggerReprojection();
+    };
+    // This method is marked as public as it is used as the view method that
+    // abstracts DOM manipulation so we can stub it in a test.
+    // TODO(nsthorat): Move this to its own class as the glue between this class
+    // and the DOM.
+    ProjectionsPanel.prototype.setZDropdownEnabled = function (enabled) {
+        if (this.zDropdown) {
+            this.zDropdown.attr('disabled', enabled ? null : true);
+        }
+    };
+    ProjectionsPanel.prototype.dataSetUpdated = function (dataSet, originalDataSet, dim) {
+        this.dataSet = dataSet;
+        this.originalDataSet = originalDataSet;
+        this.dim = dim;
+        this.clearCentroids();
+        this.dom.select('#tsne-sampling')
+            .style('display', dataSet.points.length > data_1.SAMPLE_SIZE ? null : 'none');
+        this.dom.select('#pca-sampling')
+            .style('display', dataSet.dim[1] > data_1.PCA_SAMPLE_DIM ? null : 'none');
+        this.showTab('pca');
+    };
+    ProjectionsPanel.prototype._pcaDimensionToggleObserver = function () {
+        this.setZDropdownEnabled(this.pcaIs3d);
+        this.beginProjection(this.currentProjection);
+    };
+    ProjectionsPanel.prototype._tsneDimensionToggleObserver = function () {
+        this.beginProjection(this.currentProjection);
+    };
+    ProjectionsPanel.prototype.metadataChanged = function (spriteAndMetadata) {
+        // Project by options for custom projections.
+        var searchByMetadataIndex = -1;
+        this.searchByMetadataOptions = spriteAndMetadata.stats.map(function (stats, i) {
+            // Make the default label by the first non-numeric column.
+            if (!stats.isNumeric && searchByMetadataIndex === -1) {
+                searchByMetadataIndex = i;
+            }
+            return stats.name;
+        });
+        this.customSelectedSearchByMetadataOption =
+            this.searchByMetadataOptions[Math.max(0, searchByMetadataIndex)];
+    };
+    ProjectionsPanel.prototype.showTab = function (id) {
+        var _this = this;
+        this.currentProjection = id;
+        var tab = this.dom.select('.ink-tab[data-tab="' + id + '"]');
+        this.dom.selectAll('.ink-tab').classed('active', false);
+        tab.classed('active', true);
+        this.dom.selectAll('.ink-panel-content').classed('active', false);
+        this.dom.select('.ink-panel-content[data-panel="' + id + '"]')
+            .classed('active', true);
+        // guard for unit tests, where polymer isn't attached and $ doesn't exist.
+        if (this.$ != null) {
+            var main_1 = this.$['main'];
+            // In order for the projections panel to animate its height, we need to
+            // set it explicitly.
+            requestAnimationFrame(function () {
+                _this.style.height = main_1.clientHeight + 'px';
+            });
+        }
+        this.beginProjection(id);
+    };
+    ProjectionsPanel.prototype.beginProjection = function (projection) {
+        if (this.polymerChangesTriggerReprojection === false) {
+            return;
+        }
+        if (projection === 'pca') {
+            this.dataSet.stopTSNE();
+            this.showPCA();
+        }
+        else if (projection === 'tsne') {
+            this.showTSNE();
+        }
+        else if (projection === 'custom') {
+            this.dataSet.stopTSNE();
+            this.computeAllCentroids();
+            this.reprojectCustom();
+        }
+    };
+    ProjectionsPanel.prototype.showTSNE = function () {
+        var dataSet = this.dataSet;
+        if (dataSet == null) {
+            return;
+        }
+        var accessors = dataSet.getPointAccessors('tsne', [0, 1, this.tSNEis3d ? 2 : null]);
+        this.projector.setProjection('tsne', this.tSNEis3d ? 3 : 2, accessors);
+        if (!this.dataSet.hasTSNERun) {
+            this.runTSNE();
+        }
+        else {
+            this.projector.notifyProjectionsUpdated();
+        }
+    };
+    ProjectionsPanel.prototype.runTSNE = function () {
+        var _this = this;
+        this.runTsneButton.attr('disabled', true);
+        this.stopTsneButton.attr('disabled', null);
+        this.dataSet.projectTSNE(this.perplexity, this.learningRate, this.tSNEis3d ? 3 : 2, function (iteration) {
+            if (iteration != null) {
+                _this.iterationLabel.text(iteration);
+                _this.projector.notifyProjectionsUpdated();
+            }
+            else {
+                _this.runTsneButton.attr('disabled', null);
+                _this.stopTsneButton.attr('disabled', true);
+            }
+        });
+    };
+    // tslint:disable-next-line:no-unused-variable
+    ProjectionsPanel.prototype.showPCAIfEnabled = function () {
+        if (this.polymerChangesTriggerReprojection) {
+            this.showPCA();
+        }
+    };
+    ProjectionsPanel.prototype.showPCA = function () {
+        var _this = this;
+        if (this.dataSet == null) {
+            return;
+        }
+        this.dataSet.projectPCA().then(function () {
+            // Polymer properties are 1-based.
+            var accessors = _this.dataSet.getPointAccessors('pca', [_this.pcaX, _this.pcaY, _this.pcaZ]);
+            _this.projector.setProjection('pca', _this.pcaIs3d ? 3 : 2, accessors);
+        });
+    };
+    ProjectionsPanel.prototype.reprojectCustom = function () {
+        if (this.centroids == null || this.centroids.xLeft == null ||
+            this.centroids.xRight == null || this.centroids.yUp == null ||
+            this.centroids.yDown == null) {
+            return;
+        }
+        var xDir = vector.sub(this.centroids.xRight, this.centroids.xLeft);
+        this.dataSet.projectLinear(xDir, 'linear-x');
+        var yDir = vector.sub(this.centroids.yUp, this.centroids.yDown);
+        this.dataSet.projectLinear(yDir, 'linear-y');
+        var accessors = this.dataSet.getPointAccessors('custom', ['x', 'y']);
+        this.projector.setProjection('custom', 2, accessors);
+    };
+    ProjectionsPanel.prototype.clearCentroids = function () {
+        this.centroids = { xLeft: null, xRight: null, yUp: null, yDown: null };
+        this.allCentroid = null;
+    };
+    ProjectionsPanel.prototype._customSelectedSearchByMetadataOptionChanged = function (newVal, oldVal) {
+        if (this.polymerChangesTriggerReprojection === false) {
+            return;
+        }
+        if (this.currentProjection === 'custom') {
+            this.computeAllCentroids();
+            this.reprojectCustom();
+        }
+    };
+    ProjectionsPanel.prototype.setupCustomProjectionInputFields = function () {
+        this.customProjectionXLeftInput =
+            this.setupCustomProjectionInputField('xLeft');
+        this.customProjectionXRightInput =
+            this.setupCustomProjectionInputField('xRight');
+        this.customProjectionYUpInput = this.setupCustomProjectionInputField('yUp');
+        this.customProjectionYDownInput =
+            this.setupCustomProjectionInputField('yDown');
+    };
+    ProjectionsPanel.prototype.computeAllCentroids = function () {
+        this.computeCentroid('xLeft');
+        this.computeCentroid('xRight');
+        this.computeCentroid('yUp');
+        this.computeCentroid('yDown');
+    };
+    ProjectionsPanel.prototype.computeCentroid = function (name) {
+        var input = this.querySelector('#' + name);
+        if (input == null) {
+            return;
+        }
+        var value = input.getValue();
+        if (value == null) {
+            return;
+        }
+        var inRegexMode = input.getInRegexMode();
+        var result = this.getCentroid(value, inRegexMode);
+        if (result.numMatches === 0) {
+            input.message = '0 matches. Using a random vector.';
+            result.centroid = vector.rn(this.dim);
+        }
+        else {
+            input.message = result.numMatches + " matches.";
+        }
+        this.centroids[name] = result.centroid;
+        this.centroidValues[name] = value;
+    };
+    ProjectionsPanel.prototype.setupCustomProjectionInputField = function (name) {
+        var _this = this;
+        var input = this.querySelector('#' + name);
+        input.registerInputChangedListener(function (input, inRegexMode) {
+            if (_this.polymerChangesTriggerReprojection) {
+                _this.computeCentroid(name);
+                _this.reprojectCustom();
+            }
+        });
+        return input;
+    };
+    ProjectionsPanel.prototype.getCentroid = function (pattern, inRegexMode) {
+        var _this = this;
+        if (pattern == null || pattern === '') {
+            return { numMatches: 0 };
+        }
+        // Search by the original dataset since we often want to filter and project
+        // only the nearest neighbors of A onto B-C where B and C are not nearest
+        // neighbors of A.
+        var accessor = function (i) { return _this.originalDataSet.points[i].vector; };
+        var r = this.originalDataSet.query(pattern, inRegexMode, this.customSelectedSearchByMetadataOption);
+        return { centroid: vector.centroid(r, accessor), numMatches: r.length };
+    };
+    ProjectionsPanel.prototype.getPcaSampledDim = function () {
+        return data_1.PCA_SAMPLE_DIM.toLocaleString();
+    };
+    ProjectionsPanel.prototype.getTsneSampleSize = function () {
+        return data_1.SAMPLE_SIZE.toLocaleString();
+    };
+    ProjectionsPanel.prototype._addOne = function (value) {
+        return value + 1;
+    };
+    return ProjectionsPanel;
+}(exports.ProjectionsPanelPolymer));
+exports.ProjectionsPanel = ProjectionsPanel;
+document.registerElement(ProjectionsPanel.prototype.is, ProjectionsPanel);
+
+},{"./data":6,"./vector":25,"./vz-projector-util":33}],33:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
 
-      paper-tabs {
-        --paper-tabs-selection-bar-color: white;
-      }
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-      .global-actions {
-        flex-grow: 2;
-        display: inline-flex; /* Ensure that icons stay aligned */
-        justify-content: flex-end;
-        text-align: right;
-        color: white;
-      }
+http://www.apache.org/licenses/LICENSE-2.0
 
-      .global-actions a {
-        color: white;
-      }
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+function PolymerElement(spec) {
+    return Polymer.Class(spec);
+}
+exports.PolymerElement = PolymerElement;
 
-      #toolbar-content {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-      }
+},{}],34:[function(require,module,exports){
+/* Copyright 2016 The TensorFlow Authors. All Rights Reserved.
 
-      #content {
-        height: 100%;
-      }
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-      [disabled] {
-        opacity: 0.2;
-        color: white;
-      }
+http://www.apache.org/licenses/LICENSE-2.0
 
-    </style>
-  </template>
-  <script>
-    Polymer({
-      is: "tf-tensorboard",
-      behaviors: [TF.TensorBoard.AutoReloadBehavior],
-      properties: {
-        router: {
-          type: Object,
-          value: function() {
-            return TF.Backend.router();
-          },
-        },
-        _backend: {
-          type: Object,
-          computed: "_makeBackend(router, demoDir)",
-        },
-        // Which tab is selected (events, graph, images etc).
-        mode: {
-          type: String,
-          computed: '_getModeFromIndex(modeIndex)',
-          notify: true,
-        },
-        tabs: {
-          type: Array,
-          readOnly: true,
-          value: TF.Globals.TABS,
-        },
-        // If this is set to a string, TensorBoard will switch to "demo mode"
-        // and attempt to load serialized json data from that directory. You can
-        // generate conformant json using
-        // tensorboard/scripts/serialize_tensorboard.py
-        demoDir: {
-          type: String,
-          value: null,
-        },
-        // Set this to true to store state in URI hash. Should be true for all non-test purposes.
-        useHash: {
-          type: Boolean,
-          value: false,
-        },
-      },
-      _getModeFromIndex: function(modeIndex) {
-        var mode = this.tabs[modeIndex];
-        TF.URIStorage.setString(TF.URIStorage.TAB, mode);
-        return mode;
-      },
-      _makeBackend: function(router, demoDir) {
-        // use the demoDir if it is set, otherwise use the provided router
-        if (demoDir != null) {
-          router = TF.Backend.router(demoDir, true);
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var data_1 = require('./data');
+var data_provider_demo_1 = require('./data-provider-demo');
+var data_provider_proto_1 = require('./data-provider-proto');
+var data_provider_server_1 = require('./data-provider-server');
+var logging = require('./logging');
+var projectorScatterPlotAdapter_1 = require('./projectorScatterPlotAdapter');
+var scatterPlot_1 = require('./scatterPlot');
+var scatterPlotVisualizer3DLabels_1 = require('./scatterPlotVisualizer3DLabels');
+var scatterPlotVisualizerCanvasLabels_1 = require('./scatterPlotVisualizerCanvasLabels');
+var scatterPlotVisualizerSprites_1 = require('./scatterPlotVisualizerSprites');
+var scatterPlotVisualizerTraces_1 = require('./scatterPlotVisualizerTraces');
+// tslint:disable-next-line:no-unused-variable
+var vz_projector_util_1 = require('./vz-projector-util');
+/**
+ * The minimum number of dimensions the data should have to automatically
+ * decide to normalize the data.
+ */
+var THRESHOLD_DIM_NORMALIZE = 50;
+var POINT_COLOR_MISSING = 'black';
+exports.ProjectorPolymer = vz_projector_util_1.PolymerElement({
+    is: 'vz-projector',
+    properties: {
+        routePrefix: String,
+        dataProto: { type: String, observer: '_dataProtoChanged' },
+        servingMode: String
+    }
+});
+var INDEX_METADATA_FIELD = '__index__';
+var Projector = (function (_super) {
+    __extends(Projector, _super);
+    function Projector() {
+        _super.apply(this, arguments);
+    }
+    Projector.prototype.ready = function () {
+        this.selectionChangedListeners = [];
+        this.hoverListeners = [];
+        this.selectedPointIndices = [];
+        this.neighborsOfFirstPoint = [];
+        this.dom = d3.select(this);
+        logging.setDomContainer(this);
+        this.dataPanel = this.$['data-panel'];
+        this.inspectorPanel = this.$['inspector-panel'];
+        this.inspectorPanel.initialize(this);
+        this.projectionsPanel = this.$['projections-panel'];
+        this.projectionsPanel.initialize(this);
+        this.metadataCard = this.$['metadata-card'];
+        this.statusBar = this.dom.select('#status-bar');
+        this.bookmarkPanel = this.$['bookmark-panel'];
+        this.scopeSubtree(this.$$('#wrapper-notify-msg'), true);
+        this.setupUIControls();
+        this.initializeDataProvider();
+    };
+    Projector.prototype.setSelectedLabelOption = function (labelOption) {
+        var _this = this;
+        this.selectedLabelOption = labelOption;
+        var labelAccessor = function (i) {
+            return _this.dataSet.points[i]
+                .metadata[_this.selectedLabelOption];
+        };
+        this.scatterPlot.setLabelAccessor(labelAccessor);
+        this.metadataCard.setLabelOption(this.selectedLabelOption);
+    };
+    Projector.prototype.setSelectedColorOption = function (colorOption) {
+        this.selectedColorOption = colorOption;
+        this.updateScatterPlot();
+    };
+    Projector.prototype.setNormalizeData = function (normalizeData) {
+        this.normalizeData = normalizeData;
+        this.setCurrentDataSet(this.originalDataSet.getSubset());
+    };
+    Projector.prototype.updateDataSet = function (ds, spriteAndMetadata, metadataFile) {
+        this.originalDataSet = ds;
+        if (this.scatterPlot == null || this.originalDataSet == null) {
+            // We are not ready yet.
+            return;
         }
-        return new TF.Backend.Backend(router);
-      },
-      _modeIsEvents: function(mode) {
-        return mode === "events";
-      },
-      _modeIsImages: function(mode) {
-        return mode === "images";
-      },
-      _modeIsAudio: function(mode) {
-        return mode === "audio";
-      },
-      _modeIsGraphs: function(mode) {
-        return mode === "graphs";
-      },
-      _modeIsDistributions: function(mode) {
-        return mode === "distributions";
-      },
-      _modeIsHistograms: function(mode) {
-        return mode === "histograms";
-      },
-      selectedDashboard: function() {
-        var dashboard = this.$$("#" + this.mode);
-        if (dashboard == null) {
-          throw new Error(`Unable to find dashboard for mode: ${this.mode}`);
+        this.normalizeData = this.originalDataSet.dim[1] >= THRESHOLD_DIM_NORMALIZE;
+        spriteAndMetadata = spriteAndMetadata || {};
+        if (spriteAndMetadata.pointsInfo == null) {
+            var _a = this.makeDefaultPointsInfoAndStats(ds.points), pointsInfo = _a[0], stats = _a[1];
+            spriteAndMetadata.pointsInfo = pointsInfo;
+            spriteAndMetadata.stats = stats;
         }
-        return dashboard;
-      },
-      ready: function() {
-        TF.Globals.USE_HASH = this.useHash;
-
-        this._getModeFromHash();
-        window.addEventListener('hashchange', function() {
-          this._getModeFromHash();
-        }.bind(this));
-      },
-      _getModeFromHash: function() {
-        var tabName = TF.URIStorage.getString(TF.URIStorage.TAB);
-        var modeIndex = this.tabs.indexOf(tabName);
-        if (modeIndex == -1 && this.modeIndex == null) {
-          // Select the first tab as default.
-          this.set('modeIndex', 0);
+        ds.mergeMetadata(spriteAndMetadata);
+        this.dataPanel.setNormalizeData(this.normalizeData);
+        this.setCurrentDataSet(this.originalDataSet.getSubset());
+        this.inspectorPanel.datasetChanged();
+        this.inspectorPanel.metadataChanged(spriteAndMetadata);
+        this.projectionsPanel.metadataChanged(spriteAndMetadata);
+        this.dataPanel.metadataChanged(spriteAndMetadata, metadataFile);
+        // Set the container to a fixed height, otherwise in Colab the
+        // height can grow indefinitely.
+        var container = this.dom.select('#container');
+        container.style('height', container.property('clientHeight') + 'px');
+    };
+    Projector.prototype.setSelectedTensor = function (run, tensorInfo) {
+        this.bookmarkPanel.setSelectedTensor(run, tensorInfo);
+    };
+    /**
+     * Registers a listener to be called any time the selected point set changes.
+     */
+    Projector.prototype.registerSelectionChangedListener = function (listener) {
+        this.selectionChangedListeners.push(listener);
+    };
+    Projector.prototype.filterDataset = function () {
+        var indices = this.selectedPointIndices.concat(this.neighborsOfFirstPoint.map(function (n) { return n.index; }));
+        var selectionSize = this.selectedPointIndices.length;
+        this.setCurrentDataSet(this.dataSet.getSubset(indices));
+        this.adjustSelectionAndHover(d3.range(selectionSize));
+        this.scatterPlot.recreateScene();
+    };
+    Projector.prototype.resetFilterDataset = function () {
+        var _this = this;
+        var originalPointIndices = this.selectedPointIndices.map(function (localIndex) {
+            return _this.dataSet.points[localIndex].index;
+        });
+        this.setCurrentDataSet(this.originalDataSet.getSubset());
+        this.adjustSelectionAndHover(originalPointIndices);
+    };
+    /**
+     * Used by clients to indicate that a selection has occurred.
+     */
+    Projector.prototype.notifySelectionChanged = function (newSelectedPointIndices) {
+        var _this = this;
+        this.selectedPointIndices = newSelectedPointIndices;
+        var neighbors = [];
+        if (newSelectedPointIndices.length === 1) {
+            neighbors = this.dataSet.findNeighbors(newSelectedPointIndices[0], this.inspectorPanel.distFunc, this.inspectorPanel.numNN);
+            this.metadataCard.updateMetadata(this.dataSet.points[newSelectedPointIndices[0]].metadata);
         }
-        if (modeIndex != -1 && modeIndex != this.modeIndex) {
-          this.set('modeIndex', modeIndex);
+        else {
+            this.metadataCard.updateMetadata(null);
         }
-      },
-      reload: function() {
-        if (this.mode === "graphs") {
-          return;
+        this.selectionChangedListeners.forEach(function (l) { return l(_this.selectedPointIndices, neighbors); });
+    };
+    /**
+     * Registers a listener to be called any time the mouse hovers over a point.
+     */
+    Projector.prototype.registerHoverListener = function (listener) {
+        this.hoverListeners.push(listener);
+    };
+    /**
+     * Used by clients to indicate that a hover is occurring.
+     */
+    Projector.prototype.notifyHoverOverPoint = function (pointIndex) {
+        this.hoverListeners.forEach(function (l) { return l(pointIndex); });
+    };
+    Projector.prototype._dataProtoChanged = function (dataProtoString) {
+        var dataProto = dataProtoString ?
+            JSON.parse(dataProtoString) : null;
+        this.initializeDataProvider(dataProto);
+    };
+    Projector.prototype.makeDefaultPointsInfoAndStats = function (points) {
+        var pointsInfo = [];
+        points.forEach(function (p) {
+            var pointInfo = {};
+            pointInfo[INDEX_METADATA_FIELD] = p.index;
+            pointsInfo.push(pointInfo);
+        });
+        var stats = [{
+                name: INDEX_METADATA_FIELD,
+                isNumeric: false,
+                tooManyUniqueValues: true,
+                min: 0,
+                max: pointsInfo.length - 1
+            }];
+        return [pointsInfo, stats];
+    };
+    Projector.prototype.initializeDataProvider = function (dataProto) {
+        if (this.servingMode === 'demo') {
+            this.dataProvider = new data_provider_demo_1.DemoDataProvider();
         }
-        this.selectedDashboard().reload();
-      },
-      openSettings: function() {
-        this.$.settings.open();
-      },
-    });
-  </script>
+        else if (this.servingMode === 'server') {
+            if (!this.routePrefix) {
+                throw 'route-prefix is a required parameter';
+            }
+            this.dataProvider = new data_provider_server_1.ServerDataProvider(this.routePrefix);
+        }
+        else if (this.servingMode === 'proto' && dataProto != null) {
+            this.dataProvider = new data_provider_proto_1.ProtoDataProvider(dataProto);
+        }
+        this.dataPanel.initialize(this, this.dataProvider);
+        this.bookmarkPanel.initialize(this, this.dataProvider);
+    };
+    Projector.prototype.getLegendPointColorer = function (colorOption) {
+        var _this = this;
+        if ((colorOption == null) || (colorOption.map == null)) {
+            return null;
+        }
+        var colorer = function (i) {
+            var value = _this.dataSet.points[i].metadata[_this.selectedColorOption.name];
+            if (value == null) {
+                return POINT_COLOR_MISSING;
+            }
+            return colorOption.map(value);
+        };
+        return colorer;
+    };
+    Projector.prototype.get3DLabelModeButton = function () {
+        return this.querySelector('#labels3DMode');
+    };
+    Projector.prototype.get3DLabelMode = function () {
+        var label3DModeButton = this.get3DLabelModeButton();
+        return label3DModeButton.active;
+    };
+    Projector.prototype.getSpriteImageMode = function () {
+        return this.dataSet &&
+            this.dataSet.spriteAndMetadataInfo &&
+            this.dataSet.spriteAndMetadataInfo.spriteImage != null;
+    };
+    Projector.prototype.adjustSelectionAndHover = function (selectedPointIndices, hoverIndex) {
+        this.notifySelectionChanged(selectedPointIndices);
+        this.notifyHoverOverPoint(hoverIndex);
+        this.scatterPlot.setMode(scatterPlot_1.Mode.HOVER);
+    };
+    Projector.prototype.unsetCurrentDataSet = function () {
+        this.dataSet.stopTSNE();
+    };
+    Projector.prototype.setCurrentDataSet = function (ds) {
+        this.adjustSelectionAndHover([]);
+        if (this.dataSet != null) {
+            this.unsetCurrentDataSet();
+        }
+        this.dataSet = ds;
+        if (this.normalizeData) {
+            this.dataSet.normalize();
+        }
+        this.dim = this.dataSet.dim[1];
+        this.dom.select('span.numDataPoints').text(this.dataSet.dim[0]);
+        this.dom.select('span.dim').text(this.dataSet.dim[1]);
+        this.projectionsPanel.dataSetUpdated(this.dataSet, this.originalDataSet, this.dim);
+        this.scatterPlot.setCameraParametersForNextCameraCreation(null, true);
+        this.scatterPlot.setDataSet(this.dataSet);
+        this.updateScatterPlot();
+    };
+    Projector.prototype.setupUIControls = function () {
+        var _this = this;
+        // View controls
+        this.querySelector('#reset-zoom').addEventListener('click', function () {
+            _this.scatterPlot.resetZoom();
+            _this.scatterPlot.startOrbitAnimation();
+        });
+        var selectModeButton = this.querySelector('#selectMode');
+        selectModeButton.addEventListener('click', function (event) {
+            _this.scatterPlot.setMode(selectModeButton.active ? scatterPlot_1.Mode.SELECT : scatterPlot_1.Mode.HOVER);
+        });
+        var nightModeButton = this.querySelector('#nightDayMode');
+        nightModeButton.addEventListener('click', function () {
+            _this.scatterPlot.setDayNightMode(nightModeButton.active);
+        });
+        var labels3DModeButton = this.get3DLabelModeButton();
+        labels3DModeButton.addEventListener('click', function () {
+            _this.createVisualizers(labels3DModeButton.active);
+            _this.scatterPlot.recreateScene();
+            _this.updateScatterPlot();
+            _this.scatterPlot.update();
+        });
+        window.addEventListener('resize', function () {
+            var container = _this.dom.select('#container');
+            var parentHeight = container.node().parentNode.clientHeight;
+            container.style('height', parentHeight + 'px');
+            _this.scatterPlot.resize();
+        });
+        this.projectorScatterPlotAdapter = new projectorScatterPlotAdapter_1.ProjectorScatterPlotAdapter();
+        this.scatterPlot = new scatterPlot_1.ScatterPlot(this.getScatterContainer(), function (i) { return '' +
+            _this.dataSet.points[i].metadata[_this.selectedLabelOption]; }, this, this);
+        this.createVisualizers(false);
+        this.scatterPlot.onCameraMove(function (cameraPosition, cameraTarget) {
+            return _this.bookmarkPanel.clearStateSelection();
+        });
+        this.registerHoverListener(function (hoverIndex) { return _this.onHover(hoverIndex); });
+        this.registerSelectionChangedListener(function (selectedPointIndices, neighborsOfFirstPoint) {
+            return _this.onSelectionChanged(selectedPointIndices, neighborsOfFirstPoint);
+        });
+    };
+    Projector.prototype.onHover = function (hoverIndex) {
+        this.hoverPointIndex = hoverIndex;
+        var hoverText = null;
+        if (hoverIndex != null) {
+            var point = this.dataSet.points[hoverIndex];
+            if (point.metadata[this.selectedLabelOption]) {
+                hoverText = point.metadata[this.selectedLabelOption].toString();
+            }
+        }
+        this.updateScatterPlot();
+        if (this.selectedPointIndices.length === 0) {
+            this.statusBar.style('display', hoverText ? null : 'none');
+            this.statusBar.text(hoverText);
+        }
+    };
+    Projector.prototype.updateScatterPlot = function () {
+        var dataSet = this.dataSet;
+        var selectedSet = this.selectedPointIndices;
+        var hoverIndex = this.hoverPointIndex;
+        var neighbors = this.neighborsOfFirstPoint;
+        var pointColorer = this.getLegendPointColorer(this.selectedColorOption);
+        var pointColors = this.projectorScatterPlotAdapter.generatePointColorArray(dataSet, pointColorer, selectedSet, neighbors, hoverIndex, this.get3DLabelMode(), this.getSpriteImageMode());
+        var pointScaleFactors = this.projectorScatterPlotAdapter.generatePointScaleFactorArray(dataSet, selectedSet, neighbors, hoverIndex);
+        var labels = this.projectorScatterPlotAdapter.generateVisibleLabelRenderParams(dataSet, selectedSet, neighbors, hoverIndex);
+        var traceColors = this.projectorScatterPlotAdapter.generateLineSegmentColorMap(dataSet, pointColorer);
+        this.scatterPlot.setPointColors(pointColors);
+        this.scatterPlot.setPointScaleFactors(pointScaleFactors);
+        this.scatterPlot.setLabels(labels);
+        this.scatterPlot.setTraceColors(traceColors);
+        this.scatterPlot.render();
+    };
+    Projector.prototype.getScatterContainer = function () {
+        return this.dom.select('#scatter');
+    };
+    Projector.prototype.createVisualizers = function (inLabels3DMode) {
+        var scatterPlot = this.scatterPlot;
+        var selectionContext = this;
+        scatterPlot.removeAllVisualizers();
+        if (inLabels3DMode) {
+            scatterPlot.addVisualizer(new scatterPlotVisualizer3DLabels_1.ScatterPlotVisualizer3DLabels());
+        }
+        else {
+            scatterPlot.addVisualizer(new scatterPlotVisualizerSprites_1.ScatterPlotVisualizerSprites());
+            scatterPlot.addVisualizer(new scatterPlotVisualizerTraces_1.ScatterPlotVisualizerTraces(selectionContext));
+            scatterPlot.addVisualizer(new scatterPlotVisualizerCanvasLabels_1.ScatterPlotVisualizerCanvasLabels(this.getScatterContainer()));
+        }
+    };
+    Projector.prototype.onSelectionChanged = function (selectedPointIndices, neighborsOfFirstPoint) {
+        this.selectedPointIndices = selectedPointIndices;
+        this.neighborsOfFirstPoint = neighborsOfFirstPoint;
+        var totalNumPoints = this.selectedPointIndices.length + neighborsOfFirstPoint.length;
+        this.statusBar.text("Selected " + totalNumPoints + " points")
+            .style('display', totalNumPoints > 0 ? null : 'none');
+        this.inspectorPanel.updateInspectorPane(selectedPointIndices, neighborsOfFirstPoint);
+        this.updateScatterPlot();
+    };
+    Projector.prototype.setProjection = function (projection, dimensionality, pointAccessors) {
+        this.selectedProjection = projection;
+        this.scatterPlot.setDimensions(dimensionality);
+        this.scatterPlot.showTickLabels(false);
+        this.scatterPlot.setPointAccessors(pointAccessors);
+        if (this.dataSet.hasMeaningfulVisualization(projection)) {
+            this.scatterPlot.update();
+        }
+        this.scatterPlot.recreateScene();
+        this.scatterPlot.setCameraParametersForNextCameraCreation(null, false);
+    };
+    Projector.prototype.notifyProjectionsUpdated = function () {
+        this.scatterPlot.update();
+    };
+    /**
+     * Gets the current view of the embedding and saves it as a State object.
+     */
+    Projector.prototype.getCurrentState = function () {
+        var state = new data_1.State();
+        // Save the individual datapoint projections.
+        state.projections = [];
+        for (var i = 0; i < this.dataSet.points.length; i++) {
+            var point = this.dataSet.points[i];
+            var projections = {};
+            var keys = Object.keys(point.projections);
+            for (var j = 0; j < keys.length; ++j) {
+                projections[keys[j]] = point.projections[keys[j]];
+            }
+            state.projections.push(projections);
+        }
+        state.selectedProjection = this.selectedProjection;
+        state.tSNEIteration = this.dataSet.tSNEIteration;
+        state.selectedPoints = this.selectedPointIndices;
+        state.cameraDef = this.scatterPlot.getCameraDef();
+        state.selectedColorOptionName = this.dataPanel.selectedColorOptionName;
+        state.selectedLabelOption = this.selectedLabelOption;
+        this.projectionsPanel.populateBookmarkFromUI(state);
+        return state;
+    };
+    /** Loads a State object into the world. */
+    Projector.prototype.loadState = function (state) {
+        for (var i = 0; i < state.projections.length; i++) {
+            var point = this.dataSet.points[i];
+            var projection = state.projections[i];
+            var keys = Object.keys(projection);
+            for (var j = 0; j < keys.length; ++j) {
+                point.projections[keys[j]] = projection[keys[j]];
+            }
+        }
+        this.dataSet.hasTSNERun = (state.selectedProjection === 'tsne');
+        this.dataSet.tSNEIteration = state.tSNEIteration;
+        this.projectionsPanel.restoreUIFromBookmark(state);
+        this.dataPanel.selectedColorOptionName = state.selectedColorOptionName;
+        this.selectedLabelOption = state.selectedLabelOption;
+        this.scatterPlot.setCameraParametersForNextCameraCreation(state.cameraDef, false);
+        {
+            var dimensions = data_1.stateGetAccessorDimensions(state);
+            var accessors = this.dataSet.getPointAccessors(state.selectedProjection, dimensions);
+            this.setProjection(state.selectedProjection, dimensions.length, accessors);
+        }
+        this.notifySelectionChanged(state.selectedPoints);
+    };
+    return Projector;
+}(exports.ProjectorPolymer));
+exports.Projector = Projector;
+document.registerElement(Projector.prototype.is, Projector);
+
+},{"./data":6,"./data-provider-demo":2,"./data-provider-proto":3,"./data-provider-server":4,"./logging":12,"./projectorScatterPlotAdapter":13,"./scatterPlot":15,"./scatterPlotVisualizer3DLabels":17,"./scatterPlotVisualizerCanvasLabels":19,"./scatterPlotVisualizerSprites":20,"./scatterPlotVisualizerTraces":21,"./vz-projector-util":33}],35:[function(require,module,exports){
+arguments[4][7][0].apply(exports,arguments)
+},{"dup":7}]},{},[35,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34]);
+</script>
 </dom-module>
 </body></html>
\ No newline at end of file
-- 
GitLab