Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce lag experienced when expanding doc table rows #9326

Merged
merged 7 commits into from
Dec 27, 2016
Merged

Reduce lag experienced when expanding doc table rows #9326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
666c788
Only render JSON view when the user clicks the tab
Bargs Nov 29, 2016
3509be1
Decouple width polling from digest cycle
Bargs Dec 1, 2016
cd58a4f
documentation
Bargs Dec 1, 2016
b642ba6
Flush those timeouts!
Bargs Dec 2, 2016
a260f69
Use debounce instead of timeout
Bargs Dec 19, 2016
bb7369d
move assignment into if block
Bargs Dec 19, 2016
78090bc
Mock debounce so the tests don't need to know anything about its inte…
Bargs Dec 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/ui/public/directives/__tests__/fixed_scroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/ui/public/doc_viewer/doc_viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
27 changes: 21 additions & 6 deletions src/ui/public/fixed_scroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the clarifying comment. 👍

uiModules
.get('kibana')
.directive('fixedScroll', function ($timeout) {
.directive('fixedScroll', function (debounce) {
return {
restrict: 'A',
link: function ($scope, $el) {
Expand Down Expand Up @@ -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 () {
Expand Down