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
This commit is contained in:
Dan Mané 2016-10-24 13:27:32 -08:00 committed by TensorFlower Gardener
parent c7ec4bca45
commit 79a2a241c4

View File

@ -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) {