perf(core): stretch certain marks instead of redraw #1018
Conversation
|
Stretching individual shapes within a graphics object isn't allowed; you can only stretch the whole graphics object apparently. Perhaps another experiment to try would be to have all of the |
There was a problem hiding this comment.
Awesome, I think this is a great improvement! I left several comments, but otherwise the changes look good to me. Feel free to merge this to main after addressing them. I created an example on Editor to compare the original/new rendering options – please merge it to this PR if it looks good to you.
I will also test this with tracks in Chromoscope since I think this approach of stretching graphics works well with several tracks in Chromoscope.
| import type * as PIXI from 'pixi.js'; | ||
| import * as PIXI from 'pixi.js'; |
There was a problem hiding this comment.
Is the removal of type intended here?
There was a problem hiding this comment.
Ah this is because I was experimenting with some other Pixi stuff before. I'll add it back. Good catch!
| * This is much more performant than redrawing everything at every frame | ||
| */ | ||
| const [graphicsXScale, graphicsXPos] = this.getXScaleAndOffset(tile.drawnAtScale); | ||
| if (this.#hasStretchableGraphics() && !this.#isTooStretched(graphicsXScale) && graphicsXScale !== 1) { |
There was a problem hiding this comment.
Could you remind me what it means that graphicsXScale is equal to 1?
There was a problem hiding this comment.
On first render, the graphicsXScale is equal to 1. We don't to stretch because nothing has been drawn yet. I just added a variable to better reflect this. Hopefully it is more clear now!
| (!Is2DTrack(this.getResolvedTracks()[0]) && | ||
| this.options.spec.layout !== 'circular' && | ||
| stretchableMarks.includes(this.options.spec.mark || '')) |
There was a problem hiding this comment.
Could we still enable testing the original rendering with stretchGraphics: false?
| (!Is2DTrack(this.getResolvedTracks()[0]) && | |
| this.options.spec.layout !== 'circular' && | |
| stretchableMarks.includes(this.options.spec.mark || '')) | |
| (typeof this.options.spec.experimental?.stretchGraphics == 'undefined' && | |
| !Is2DTrack(this.getResolvedTracks()[0]) && | |
| this.options.spec.layout !== 'circular' && | |
| stretchableMarks.includes(this.options.spec.mark || '')) |
| this.options.spec.experimental?.stretchGraphics || | ||
| (!Is2DTrack(this.getResolvedTracks()[0]) && | ||
| this.options.spec.layout !== 'circular' && | ||
| stretchableMarks.includes(this.options.spec.mark || '')) |
There was a problem hiding this comment.
It is possible that a track that superposes multiple sub-tracks can have different mark types defined by the sub-tracks (e.g., rect, text, and triangles in ideograms). So, in some cases, it may end up using the new rendering method even though there are un-stretchable marks being used by sub-tracks. e.g.,
alignment: 'overlay',
mark: 'rect',
tracks: [
{ ... },
{ mark: 'text', ...}
]
So, we will need to check all the marks used in the sub-tracks as well, e.g.,
this.getResolvedTracks().reduce((acc, spec) => acc && stretchableMarks.includes(spec.mark), true))There was a problem hiding this comment.
I see that makes sense! I'll add that to hasStretchableGraphics
Co-authored-by: Sehi L'Yi <sehilyi@gmail.com>
|
These should resolve all the comments, thanks for the review. Will test the changes once the SSL cert is renewed to make sure everything looks good, and then will merge |
* chore: add a demo for perf comparison * chore: add a demo thumbnail --------- Co-authored-by: sehilyi <sehliyi@gmail.com>
|
Caught an additional thing---we don't want stretching to occur by default then mouse interactions are enabled. |
|
Thanks for merging. I will bump the minor version of |
Fix #1006
Toward #
Change List
stretchTilesoption. If true, all tiles will be stretched. If false, no tiles will be stretched. The threshold the tile can be stretched to can be tuned withstretchTilesThresholdoption.Checklist