ElasticUI
ElasticUI copied to clipboard
Preventing unnecessary searches while indexVM is still in flux
Many times in loading a search page, multiple calls to elasticsearch are made while things are still being configured (e.g., add a sort, aggs, filters, etc.). This makes multiple $watch
statements in the IndexController
fire.one after the other. Instead, I found it useful to leverage underscorejs/lo-dash's _.debounce
method as such to minimize the amount of times the search()
method is called while things are still being configured:
var lazySearch = _.debounce(function(){
_this.search();
}, 300);
$scope.$watchCollection('indexVM.filters.ejsObjects', function() {
_this.indexVM.page = 1;
lazySearch();
});
$scope.$watchCollection('indexVM.aggregationProviders.objects', function() {
return lazySearch();
});
$scope.$watch('indexVM.host', function() {
if (_this.indexVM.host != null && es.setHost(_this.indexVM.host)) {
lazySearch();
}
});
$scope.$watch('indexVM.sort', function() {
_this.indexVM.page = 1;
lazySearch();
});
$scope.$watch('indexVM.page', function() {
return lazySearch();
});
$scope.$watch('indexVM.index', function() {
return lazySearch();
});
$scope.$watch('indexVM.query', function() {
return lazySearch();
});
$scope.$watch('indexVM.highlight', function() {
return lazySearch();
});
Hi Max,
I've recognizezd this problem earlier which is why in https://github.com/YousefED/ElasticUI/blob/master/src/controllers/IndexController.ts there's a timeout of 200ms to set "loaded". I agree debouncing is probably a nicer way.
In the ideal situation we'd be able to detect when the page has fully loaded and angularjs is in a "stable" state to issue the first request. However, this seems to be a challenge with Angular. Any ideas on this?
Is there a way to have each directive attach a "loading" variable to the rootscope and monitor it that way?
I'll do some additional searching to see what other ideas people might have.