Reduce lag experienced when expanding doc table rows (#9326)
Improves responsiveness by avoiding a couple of forced reflows. * Only renders JSON doc view when requested, instead of rendering it as soon as the row is expanded. * Improves fixedScroll directive by avoiding width/height checks during the digest cycle.
This commit is contained in:
parent
5cdc3a521f
commit
b6969f537e
|
@ -12,6 +12,11 @@ describe('FixedScroll directive', function () {
|
|||
const trash = [];
|
||||
|
||||
beforeEach(ngMock.module('kibana'));
|
||||
beforeEach(ngMock.module(function ($provide) {
|
||||
$provide.service('debounce', () => {
|
||||
return targetFunction => targetFunction;
|
||||
});
|
||||
}));
|
||||
beforeEach(ngMock.inject(function ($compile, $rootScope) {
|
||||
|
||||
compile = function (ratioY, ratioX) {
|
||||
|
|
|
@ -30,7 +30,7 @@ uiModules.get('kibana')
|
|||
</li>`);
|
||||
$tabs.append($tab);
|
||||
const $viewAttrs = 'hit="hit" index-pattern="indexPattern" filter="filter" columns="columns"';
|
||||
const $ext = $(`<render-directive ${$viewAttrs} ng-show="mode == '${view.name}'" definition="docViews['${view.name}'].directive">
|
||||
const $ext = $(`<render-directive ${$viewAttrs} ng-if="mode == '${view.name}'" definition="docViews['${view.name}'].directive">
|
||||
</render-directive>`);
|
||||
$ext.html(view.directive.template);
|
||||
$content.append($ext);
|
||||
|
|
|
@ -4,9 +4,14 @@ import uiModules from 'ui/modules';
|
|||
|
||||
const SCROLLER_HEIGHT = 20;
|
||||
|
||||
/**
|
||||
* This directive adds a fixed horizontal scrollbar to the bottom of the window that proxies its scroll events
|
||||
* to the target element's real scrollbar. This is useful when the target element's horizontal scrollbar
|
||||
* might be waaaay down the page, like the doc table on Discover.
|
||||
*/
|
||||
uiModules
|
||||
.get('kibana')
|
||||
.directive('fixedScroll', function ($timeout) {
|
||||
.directive('fixedScroll', function (debounce) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function ($scope, $el) {
|
||||
|
@ -98,11 +103,21 @@ uiModules
|
|||
listen();
|
||||
}
|
||||
|
||||
// reset when the width or scrollWidth of the $el changes
|
||||
$scope.$watchMulti([
|
||||
function () { return $el.prop('scrollWidth'); },
|
||||
function () { return $el.width(); }
|
||||
], setup);
|
||||
let width;
|
||||
let scrollWidth;
|
||||
function checkWidth() {
|
||||
const newScrollWidth = $el.prop('scrollWidth');
|
||||
const newWidth = $el.width();
|
||||
|
||||
if (scrollWidth !== newScrollWidth || width !== newWidth) {
|
||||
setup();
|
||||
|
||||
scrollWidth = newScrollWidth;
|
||||
width = newWidth;
|
||||
}
|
||||
}
|
||||
|
||||
$scope.$watch(debounce(checkWidth, 100));
|
||||
|
||||
// cleanup when the scope is destroyed
|
||||
$scope.$on('$destroy', function () {
|
||||
|
|
Loading…
Reference in a new issue