Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

feat: optimize functions for getting text dimension #199

Merged
merged 5 commits into from
Aug 6, 2019
Merged

Conversation

kristw
Copy link
Contributor

@kristw kristw commented Aug 1, 2019

馃弳 Enhancements

branching off from ideas in #173.

  • Improve getTextDimension by lazy creation and deletion of the svg and text node to avoid creating multiple nodes and reusing existing one when applicable.
  • Add getMultipleTextDimensions This function takes an array of text and compute dimensions in batch, reusing the text node and apply caching.
  • The lazy creation and deletion is done via data structure LazyFactory that keeps counter of how many time a certain svg/text node is requested, hashed by container. Removal will decrease this counter and really remove the item when counter reaches 0.
  • Both getTextDimension and getMultipleTextDimensions will leave the invisible nodes around for 500ms before removal to support reusability.

@kristw kristw requested a review from a team as a code owner August 1, 2019 00:12
@codecov
Copy link

codecov bot commented Aug 1, 2019

Codecov Report

Merging #199 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #199      +/-   ##
==========================================
+ Coverage   99.91%   99.91%   +<.01%     
==========================================
  Files          94       99       +5     
  Lines        1165     1198      +33     
  Branches      281      290       +9     
==========================================
+ Hits         1164     1197      +33     
  Partials        1        1
Impacted Files Coverage 螖
...ages/superset-ui-dimension/src/getTextDimension.ts 100% <100%> (酶) 猬嗭笍
...kages/superset-ui-dimension/src/svg/getBBoxCeil.ts 100% <100%> (酶)
...perset-ui-dimension/src/svg/createHiddenSvgNode.ts 100% <100%> (酶)
...ges/superset-ui-dimension/test/getBBoxDummyFill.ts 100% <100%> (酶)
...rset-ui-dimension/src/getMultipleTextDimensions.ts 100% <100%> (酶)
...ackages/superset-ui-dimension/src/svg/constants.ts 100% <100%> (酶)
...es/superset-ui-dimension/src/svg/createTextNode.ts 100% <100%> (酶)
... and 2 more

Continue to review full report at Codecov.

Legend - Click here to learn more
螖 = absolute <relative> (impact), 酶 = not affected, ? = missing data
Powered by Codecov. Last update 32c8ffd...2a75a1d. Read the comment docs.

@codecov
Copy link

codecov bot commented Aug 1, 2019

Codecov Report

Merging #199 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #199      +/-   ##
==========================================
+ Coverage   99.91%   99.91%   +<.01%     
==========================================
  Files          94      102       +8     
  Lines        1165     1221      +56     
  Branches      281      293      +12     
==========================================
+ Hits         1164     1220      +56     
  Partials        1        1
Impacted Files Coverage 螖
...es/superset-ui-dimension/src/svg/createTextNode.ts 100% <100%> (酶)
...ackages/superset-ui-dimension/src/svg/constants.ts 100% <100%> (酶)
...ackages/superset-ui-dimension/src/svg/factories.ts 100% <100%> (酶)
...ages/superset-ui-dimension/src/getTextDimension.ts 100% <100%> (酶) 猬嗭笍
...perset-ui-dimension/src/svg/createHiddenSvgNode.ts 100% <100%> (酶)
...ges/superset-ui-dimension/test/getBBoxDummyFill.ts 100% <100%> (酶)
...rset-ui-dimension/src/getMultipleTextDimensions.ts 100% <100%> (酶)
...kages/superset-ui-dimension/src/svg/LazyFactory.ts 100% <100%> (酶)
...es/superset-ui-dimension/src/svg/updateTextNode.ts 100% <100%> (酶)
...kages/superset-ui-dimension/src/svg/getBBoxCeil.ts 100% <100%> (酶)
... and 8 more

Continue to review full report at Codecov.

Legend - Click here to learn more
螖 = absolute <relative> (impact), 酶 = not affected, ? = missing data
Powered by Codecov. Last update 32c8ffd...edcd795. Read the comment docs.

@netlify
Copy link

netlify bot commented Aug 1, 2019

Deploy preview for superset-ui ready!

Built with commit edcd795

https://deploy-preview-199--superset-ui.netlify.com

@kristw kristw changed the title feat: add function for getting multiple text dimensions feat: optimize functions for getting text dimension Aug 2, 2019
@pull-request-size pull-request-size bot added size/XL and removed size/L labels Aug 2, 2019
@kristw kristw added the reviewable Ready for review label Aug 2, 2019
Copy link
Contributor

@etr2460 etr2460 left a comment

Choose a reason for hiding this comment

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

a couple questions

const dimensions = texts.map(text => {
// Empty string
if (text.length === 0) {
return { height: 0, width: 0 };
Copy link
Contributor

Choose a reason for hiding this comment

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

instead of this special case, why not initialize the cache with:

{ "": { height: 0, width: 0 } }

then we don't need to check both cases every time (and i'd imagine the O(1) cache lookup would be about the same speed as the string length compare)

Copy link

Choose a reason for hiding this comment

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

I generally agree with this, but the W3C SVGGraphicsElement spec has a method named getBBox (that we use on line 9), so this instance may be an acceptable exception

Copy link

@isaacpz isaacpz left a comment

Choose a reason for hiding this comment

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

Nice work, just a few nits

@@ -0,0 +1,41 @@
export default class LazyFactory<T extends HTMLElement | SVGElement> {
private cache = new Map<
Copy link

Choose a reason for hiding this comment

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

Is cache the right name for this? Seems like it's storing each node for its entire lifecycle, and not really being used as a cache

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't have strong opinion here. What would you suggest it be called?

Copy link

Choose a reason for hiding this comment

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

Maybe containers? I don't feel too strongly either.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It is hashed by containers but not storing the containers, so probably should not be called containers.
I can rename to activeNodes.

Copy link
Contributor

@etr2460 etr2460 left a comment

Choose a reason for hiding this comment

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

lgtm, thanks for taking this over!

@kristw kristw merged commit ad0fa42 into master Aug 6, 2019
@delete-merged-branch delete-merged-branch bot deleted the kristw-text branch August 6, 2019 17:47
kristw pushed a commit that referenced this pull request Apr 17, 2020
* feat(datatable): render html correctly

n

* fix(sanitize string): sanitize string before parsing

n
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
reviewable Ready for review size/XL
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants