Debouce updating of runs selector, to avoid a laggy UI.

Now, when the user types text in the regex input field, the computed regex
is updated after a trailing 200ms debounce. So, if the user is typing
quickly but the regexes are updating slowly, the UI will not lag in
the middle of typing.

The debounce is short-circuited if the user clears the whole input.

The debounce only applies to updates from the user typing in the input,
not to initial load from the url hash.
Change: 137080162

tensorflow/tensorboard/components/tf_dashboard_common/tf-multi-checkbox.html

@@ -43,7 +43,8 @@ handle these situations gracefully.
         id="runs-regex"
         no-label-float
         label="Write a regex to filter runs"
-        value="{{regexInput}}"
+        value="[[regexInput]]"
+        on-bind-value-changed="_debouncedRegexChange"
       ></paper-input>
     <div id="outer-container" class="scrollbar">
       <template
@@ -161,15 +162,14 @@ handle these situations gracefully.
     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,
@@ -189,6 +189,31 @@ handle these situations gracefully.
         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',
@@ -196,10 +221,10 @@ handle these situations gracefully.
     observers: [
       "_initializeRunToIsCheckedMapping(names.*)",
       "_setIsolatorIcon(runToIsCheckedMapping)",
-      "_storeRunToIsCheckedMapping(runToIsCheckedMapping)"
+      "_storeRunToIsCheckedMapping(runToIsCheckedMapping)",
     ],
     _storeRunToIsCheckedMapping: TF.URIStorage.getObjectObserver('runToIsCheckedMapping', {}),
-    makeRegex: function(regex) {
+    _makeRegex: function(regex) {
       try {
         return new RegExp(regex)
       } catch (e) {