Plotly.js: Transforms don't work correctly while interacting during animation

[rreusser]

For reference, here is a plot illustrating interaction during animation with all of the current restrictions removed (which amounted to locking out dragbox events while transitions are taking place). Solving these issues requires getting pretty far into the weeds regarding transforms etc.

https://rreusser.github.io/demos/plotly-unsupported/interaction-failure.html

cc @etpinard @alexcjohnson @bpostlethwaite

[bpostlethwaite]

I think you meant to tag @alexcjohnson instead of @alexander-daniel :)

[rreusser]

To be clear, this is the behavior that results if the interaction-during animation restriction is removed. It's not the worst, but it's not the best.

[bpostlethwaite]

what are some of the "not best" things you see?

[rreusser]

If you mousewheel zoom, the trace zooms correctly while animating 🎉

Then once you're done, it transitions back to the initial axis limits before transitioning back to the new correct axis limits. 😞

Dragging a zoom box is similar. It's not the worst. If we need to enable this we need to enable it and we can tick off corner cases. I had trouble managing exactly when the interaction transformation is removed relative to the animation updates since there aren't really any guarantees that API commands finish all of there asynchronous updates before another might be triggered.

[bpostlethwaite]

@alexcjohnson I have no idea what any of this means. Are you able to help out here?

[rreusser]

[rreusser]

It also seems that mousewheel zooms don't always complete successfully. Sometimes it snaps back to the original limits instead of properly updating. The above gif is a bit confusing but shows what should be pretty simple zooming in and out being pretty all over the place.

[alexcjohnson]

What's going on here is that during these drags, I do funny things with what the axis thinks its range is. That's because:

• The plot area itself doesn't get redrawn, just rescaled, until the end, so during the interaction it doesn't care what the axis thinks its range is
• But the ticks, grids, and labels DO get completely redrawn at every step, so they need to think the axis has its new range
• Then at the end, we redraw the plot area. In order to make sure it really redraws, and to get the undoit value correct, I first put the axis range back to what it was before, and then call relayout to set it to the new value. This, presumably, is what is causing it to look like it jumps back to the old value and transitions to the new one.

So I suspect if we don't include the intermediate reset to the original range, this problem would go away. Maybe we don't actually care about including these transitions in undo/redo? Maybe we already don't? Maybe it would just work to relayout from the final range to the same values with no actual changes, or maybe we need to insert an infinitesimal change just to force a redraw? Or maybe we don't use relayout at all for this, and just go straight to the redraw, which could then be done more granularly, esp. with subplots. Just some thoughts.

@rreusser and I also chatted just now about, before we go for the full fix, whether we can keep the zoom/pan interactions disabled but enable other interactions (notably click).

[rreusser]

@alexcjohnson Yeah, I worked through a moderate share of the details but had a tricky time figuring out a few of the subtleties and then just _had_ to move on without fully resolving it. I'll submit a patch to reenable plotly_click and then may have to ping you regarding specific pain points to get a more complete fix through.

cc @bpostlethwaite

[jacobq]

@rreusser the link in your original post appears to be broken (domain parked). I'd like to see if this is related to the transform: scale(0.5) problem I have: https://jsbin.com/dogefe/9/edit?js,output.

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $45k-$50k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.