Skip to content

Commit

Permalink
Speed up rendering of large docs in doc table (#9014)
Browse files Browse the repository at this point in the history
Back in 2014 a utility was added to insert <wbr> (word break opportunity)
tags into doc table fields to improve their display in the browser. This
utility looped over every character in _source when it was selected as a
column in the doc table, which it was be default. That really started to
slow things down when displaying large docs. We can maintain similar word 
breaking without adding <wbr> tags by adding some css styles that 
do essentially the same job. word-break: break-word gives us the best 
formatting but it's not a part of the standard yet (see link below) so I 
provided an almost-as-good fallback with break-all.

https://bugs.chromium.org/p/chromium/issues/detail?id=492202#c21

Fixes #6328
Related #1993
  • Loading branch information
Matt Bargar authored Nov 14, 2016
1 parent 431e803 commit 500d14a
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 84 deletions.
15 changes: 5 additions & 10 deletions src/ui/public/doc_table/components/table_row.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import _ from 'lodash';
import $ from 'jquery';
import addWordBreaks from 'ui/utils/add_word_breaks';
import 'ui/highlight';
import 'ui/highlight/highlight_tags';
import 'ui/doc_viewer';
Expand Down Expand Up @@ -150,18 +149,14 @@ module.directive('kbnTableRow', function ($compile) {
/**
* Fill an element with the value of a field
*/
function _displayField(row, fieldName, breakWords) {
function _displayField(row, fieldName, truncate) {
let indexPattern = $scope.indexPattern;
let text = indexPattern.formatField(row, fieldName);

if (breakWords) {
text = addWordBreaks(text, MIN_LINE_LENGTH);

if (text.length > MIN_LINE_LENGTH) {
return truncateByHeightTemplate({
body: text
});
}
if (truncate && text.length > MIN_LINE_LENGTH) {
return truncateByHeightTemplate({
body: text
});
}

return text;
Expand Down
10 changes: 10 additions & 0 deletions src/ui/public/doc_table/doc_table.less
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,16 @@ doc-table {

.discover-table-datafield {
white-space: pre-wrap;

// break-word is what we really want but it hasn't been added to the standard and adopted by all browsers yet,
// so we provide break-all as a fallback
word-break: break-all;
word-break: break-word;
}

.discover-table-sourcefield {
word-break: break-all;
word-break: break-word;
}

.loading {
Expand Down
25 changes: 0 additions & 25 deletions src/ui/public/utils/__tests__/add_word_breaks.js

This file was deleted.

49 changes: 0 additions & 49 deletions src/ui/public/utils/add_word_breaks.js

This file was deleted.

0 comments on commit 500d14a

Please sign in to comment.