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.

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

Speed up rendering of large docs in doc table #9014

Merged
merged 2 commits into from
Nov 14, 2016
Merged

Conversation

Bargs
Copy link
Contributor

@Bargs Bargs commented Nov 9, 2016

Back in 2014 a utility was added to insert (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. I compared how the browser
renders things with and without the 's and there's almost no
difference, certainly nothing as dramatic as shown in the linked PR
which added this word breaking functionality. Perhaps browsers have
improved in the last two years, or perhaps something changed in our CSS.
Since we're getting no or negligible value from this utility and it
makes Discover impossible to use with large docs, I simply removed it.

Fixes #6328
Related #1993

screen shot 2016-11-08 at 6 49 28 pm

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. I compared how the browser
renders things with and without the <wbr>'s and there's almost no
difference, certainly nothing as dramatic as shown in the linked PR
which added this word breaking functionality. Perhaps browsers have
improved in the last two years, or perhaps something changed in our CSS.
Since we're getting no or negligible value from this utility and it
makes Discover impossible to use with large docs, I simply removed it.

Fixes elastic#6328
Related elastic#1993
@weltenwort
Copy link
Member

I have examined the change in various scenarios and saw some unfortunate column sizing without the <wbr> tags. But since I agree that inserting those tags like that does not look like a good idea, I tried setting the css property word-break: break-word; on the <td>, which lead to almost the same results:

image
image
image

Maybe this is a suitable replacement with better performance?

@Bargs
Copy link
Contributor Author

Bargs commented Nov 9, 2016

Great idea, I think break-word is exactly what we should use. Based on my tests I suspected it was already being used but I guess I didn't hit the right edge case. I'll update the PR.

To maintain similar word breaking without adding <wbr> tags I've added
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
@Bargs
Copy link
Contributor Author

Bargs commented Nov 10, 2016

PR updated and ready for re-testing. I had to provide a fallback rule as well because break-word is not yet a part of the CSS standard.

Copy link
Member

@lukasolson lukasolson left a comment

Choose a reason for hiding this comment

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

I've tested this with long fields with/without highlighting, and everything seems to work. LGTM.

Copy link
Member

@weltenwort weltenwort left a comment

Choose a reason for hiding this comment

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

LGTM

@Bargs Bargs merged commit 500d14a into elastic:master Nov 14, 2016
elastic-jasper added a commit that referenced this pull request Nov 14, 2016
Backports PR #9014

**Commit 1:**
Speed up rendering of large docs in doc table

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. I compared how the browser
renders things with and without the <wbr>'s and there's almost no
difference, certainly nothing as dramatic as shown in the linked PR
which added this word breaking functionality. Perhaps browsers have
improved in the last two years, or perhaps something changed in our CSS.
Since we're getting no or negligible value from this utility and it
makes Discover impossible to use with large docs, I simply removed it.

Fixes #6328
Related #1993

* Original sha: fc443bb
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-09T00:11:45Z

**Commit 2:**
Improve word breaking in doc table

To maintain similar word breaking without adding <wbr> tags I've added
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

* Original sha: ac38524
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-10T23:01:30Z
Bargs pushed a commit that referenced this pull request Nov 15, 2016
Backports PR #9014

**Commit 1:**
Speed up rendering of large docs in doc table

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. I compared how the browser
renders things with and without the <wbr>'s and there's almost no
difference, certainly nothing as dramatic as shown in the linked PR
which added this word breaking functionality. Perhaps browsers have
improved in the last two years, or perhaps something changed in our CSS.
Since we're getting no or negligible value from this utility and it
makes Discover impossible to use with large docs, I simply removed it.

Fixes #6328
Related #1993

* Original sha: fc443bb
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-09T00:11:45Z

**Commit 2:**
Improve word breaking in doc table

To maintain similar word breaking without adding <wbr> tags I've added
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

* Original sha: ac38524
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-10T23:01:30Z
Bargs pushed a commit that referenced this pull request Nov 15, 2016
Backports PR #9014

**Commit 1:**
Speed up rendering of large docs in doc table

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. I compared how the browser
renders things with and without the <wbr>'s and there's almost no
difference, certainly nothing as dramatic as shown in the linked PR
which added this word breaking functionality. Perhaps browsers have
improved in the last two years, or perhaps something changed in our CSS.
Since we're getting no or negligible value from this utility and it
makes Discover impossible to use with large docs, I simply removed it.

Fixes #6328
Related #1993

* Original sha: fc443bb
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-09T00:11:45Z

**Commit 2:**
Improve word breaking in doc table

To maintain similar word breaking without adding <wbr> tags I've added
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

* Original sha: ac38524
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-10T23:01:30Z
elastic-jasper added a commit that referenced this pull request Nov 18, 2016
Backports PR #9014

**Commit 1:**
Speed up rendering of large docs in doc table

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. I compared how the browser
renders things with and without the <wbr>'s and there's almost no
difference, certainly nothing as dramatic as shown in the linked PR
which added this word breaking functionality. Perhaps browsers have
improved in the last two years, or perhaps something changed in our CSS.
Since we're getting no or negligible value from this utility and it
makes Discover impossible to use with large docs, I simply removed it.

Fixes #6328
Related #1993

* Original sha: fc443bb
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-09T00:11:45Z

**Commit 2:**
Improve word breaking in doc table

To maintain similar word breaking without adding <wbr> tags I've added
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

* Original sha: ac38524
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-10T23:01:30Z
@epixa epixa added the v4.7.0 label Nov 18, 2016
Bargs pushed a commit to Bargs/kibana that referenced this pull request Nov 18, 2016
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 elastic#6328
Related elastic#1993
epixa pushed a commit that referenced this pull request Nov 21, 2016
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
@epixa epixa added v5.1.1 and removed v5.1.0 labels Dec 8, 2016
@epixa epixa added the v4.6.4 label Dec 20, 2016
airow pushed a commit to airow/kibana that referenced this pull request Feb 16, 2017
Backports PR elastic#9014

**Commit 1:**
Speed up rendering of large docs in doc table

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. I compared how the browser
renders things with and without the <wbr>'s and there's almost no
difference, certainly nothing as dramatic as shown in the linked PR
which added this word breaking functionality. Perhaps browsers have
improved in the last two years, or perhaps something changed in our CSS.
Since we're getting no or negligible value from this utility and it
makes Discover impossible to use with large docs, I simply removed it.

Fixes elastic#6328
Related elastic#1993

* Original sha: fc443bb
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-09T00:11:45Z

**Commit 2:**
Improve word breaking in doc table

To maintain similar word breaking without adding <wbr> tags I've added
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

* Original sha: ac38524
* Authored by Matthew Bargar <mbargar@gmail.com> on 2016-11-10T23:01:30Z
Former-commit-id: 379abee
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants