SVG trace on selection perf #2583

etpinard · 2018-04-27T14:22:08Z

resolves #2459

There's still plenty of room for improvements (for example via #2548), but this PR gets scatter selection perf back to a level comparable to before the persistent selection PR (in #2135). Unfortunately, this means adding yet another method on the trace module objects. I hope @alexcjohnson won't mind. In brief, the new styleOnSelect methods only update DOM styles corresponding the selected and unselected attributes and thus by-passes much of the regular style DOM updates.

In numbers from the start to end of the selecting throttle using this codepen from #2459, before this PR we had ~300-400ms: and after: ~40-60ms

In gifs:

before

after

... that bypasses DOM style things selection doesn't affect. This speeds up on-selection perf and brings in back to a level comparably to before the persistent selection PR.

alexcjohnson · 2018-04-27T14:45:21Z

src/plots/cartesian/select.js

@@ -404,18 +404,20 @@ function updateSelectedState(gd, searchTraces, eventData) {
        var len = items.length;
        var item0 = items[0];
        var trace0 = item0.cd[0].trace;
+        var _module = item0._module;
+        var fn = _module.styleOnSelect || _module.style;


I like styleOnSelect, very nice solution!

But please call it something more descriptive than fn here - styleSelection?

sure thing 😉

done in 0e91c6e

alexcjohnson · 2018-04-27T14:50:57Z

src/traces/bar/style.js

+        Drawing.selectedPointStyle(s.selectAll('path'), trace, gd);
+        Drawing.selectedPointStyle(s.selectAll('text'), trace, gd);
+    } else {
+        stylePoints(s, trace, gd);


Why do we need this else? I don't see a corresponding case in the previous code...

BTW, I'm hesitant to suggest this after the .select().select() data-mangling mess, but does it work to do Drawing.selectedPointStyle(s.selectAll('path,text'), trace, gd)? Is that any faster?

Ah oops, this should be Drawing.selectedTextStyle(s.selectAll('text'), trace, gd). I'll add a test.

Why do we need this else? I

To get back to the original state after double-click. Drawing.selectedPointStyle and Drawing.selectedTextStyle only handle selected / unselected styling off a "base" state given by stylePoints.

I'll add a test.

added in 01df2d2

- make Drawing.pointStyle know how to apply [un]selected styles, so that we don't need to update DOM styles twice when we have set `selectedpoints`. - make Drawing.selected(Point|Text)Style no longer need a base state (coming from Drawing.pointStyle) to apply correct styles.

... as on-selection styling now goes a different pathway than restyle().

etpinard · 2018-04-30T21:53:51Z

Commit 3776e8f is a little messy, so I'll explain it here:

Previously (i.e. since the persistent selection PR #2135), [un]selected styles were applied to the DOM nodes assuming that the base style had been already applied to DOM nodes. Meaning that to get [un]selected style right, we needed to call Drawing.pointStyles first and then Drawing.selectedPointStyle() + Drawing.selectedTextStyle(). This turned out to be slow especially during selection (i.e. on drag). In other words, before commit 3776e8f, calling Drawing.selected(Point|Text)Style without Drawing.pointStyle lead to bugs.

Now post commit 3776e8f, Drawing.pointStyles knows how to apply [un]selected styles. This means DOM nodes style attributes are updated only once per Plots.style call. This should improve first-render perf for traces with [un]selected attributes.

Moreover, Drawing.selected(Point|Text)Style don't assume a base state anymore. They know how to handle cases where certain [un]selected keys are unset. This means that styleOnSelect (which bypasses Drawing.pointStyle for speed) now does the right thing^TM.

etpinard · 2018-04-30T21:56:28Z

src/components/drawing/index.js

 };

-drawing.singlePointStyle = function(d, sel, trace, markerScale, lineScale, gd) {
+drawing.makePointStyleFns = function(trace) {


Define trace-wide per-pt functions w/o knowledge of d3 or DOM methods so that non-svg modules (e.g. scattermapbox) can reuse them ♻️

alexcjohnson · 2018-04-30T22:55:52Z

src/components/drawing/index.js

+    s.each(function(d) {
+        for(var i = 0; i < seq.length; i++) {
+            seq[i](d3.select(this), d);
+        }


interesting approach with seq - it's not obvious to me that this is meaningfully different from 3 s.each calls inside if(functionExists) blocks, or 3 if(functionExists) blocks inside one s.each, did it make a big difference to do it this way?

d3's each are a little slower than regular forEach and for-loops. Nothing worth losing sleep over, but we do gains a few ms using this sequence thing.

... by gain, I mean lose a few ms and gain performance. 😄

alexcjohnson · 2018-05-01T12:54:10Z

Looks great! Thanks for the help understanding 3776e8f

💃

etpinard added 4 commits April 26, 2018 15:56

lookup in _plots instead of indexOf in array of ids

53a5a64

add 'styleOnSelect' method to Scatter* module

b6d4ebc

... that bypasses DOM style things selection doesn't affect. This speeds up on-selection perf and brings in back to a level comparably to before the persistent selection PR.

split Box & Bar .style + add .styleOnSelect

6c86e08

use Scatter.selectOnStyle directly for violin traces

0a50295

etpinard added status: reviewable type: performance labels Apr 27, 2018

etpinard added this to the 1.37.0 milestone Apr 27, 2018

alexcjohnson reviewed Apr 27, 2018

View reviewed changes

etpinard added 6 commits April 27, 2018 11:08

add styleOnSelect for geo traces

7103fab

style selected text nodes with selectedTextStyle + add test

01df2d2

add styleOnSelect test

4adc091

... as on-selection styling now goes a different pathway than restyle().

Merge branch 'master' into scatter-select-perf

46858a7

lint (fn rename)

0e91c6e

etpinard commented Apr 30, 2018

View reviewed changes

etpinard added 2 commits April 30, 2018 18:00

fixup merge master commit (candlestick can't use Box.styleOnSelect)

84ca51f

minor perf boost in Drawing.selectedPointStyle

3e32b23

alexcjohnson reviewed Apr 30, 2018

View reviewed changes

etpinard merged commit 2b1713d into master May 1, 2018

etpinard deleted the scatter-select-perf branch May 1, 2018 13:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SVG trace on selection perf #2583

SVG trace on selection perf #2583

etpinard commented Apr 27, 2018

alexcjohnson Apr 27, 2018

etpinard Apr 27, 2018

etpinard Apr 30, 2018

alexcjohnson Apr 27, 2018

etpinard Apr 27, 2018

etpinard Apr 27, 2018

etpinard Apr 30, 2018

etpinard commented Apr 30, 2018

etpinard Apr 30, 2018 •

edited

Loading

alexcjohnson Apr 30, 2018 •

edited

Loading

etpinard May 1, 2018

etpinard May 1, 2018

alexcjohnson commented May 1, 2018

SVG trace on selection perf #2583

SVG trace on selection perf #2583

Conversation

etpinard commented Apr 27, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard commented Apr 30, 2018

etpinard Apr 30, 2018 • edited Loading

Choose a reason for hiding this comment

alexcjohnson Apr 30, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson commented May 1, 2018

etpinard Apr 30, 2018 •

edited

Loading

alexcjohnson Apr 30, 2018 •

edited

Loading