Plots with Latex jump after pan with recent versions of MathJax

[jonmmease]

In the course of working to improve the experience of using the Plotly.js Latex support from plotly.py inside the Jupyter notebook, I've isolated an odd behavior with recent versions of MathJax.

The Plotly.js repo includes a copy of MathJax 2.3.0 in the dist/extras/mathjax directory and this version is used for testing and in the development dashboard.

CodePen: https://codepen.io/anon/pen/ZMRWqX?editors=1010

Here's what zoom/pan interactions look like on a plot with a LaTeX title using MathJax 2.3.0 (this is from Chrome):

And here's what happens using MathJax 2.7.0. There is a noticeable flash at the conclusion of the pan event, during which the trace returns to its pre-drag screen position (though the axes and grid lines don't move) and the title disappears. After a moment the title reappears and the trace returns to its dragged location.

I'd like to dig into this some more, as it's a somewhat distracting artifact that will show up when using latex in the Jupyter notebook once #2994 (comment) is resolved.

I'm guessing this has something to do with the interplay between the async nature of both Plotly.js and MathJax. Any suggestions on where to start?

[etpinard]

Flipping through old issues, I found #2616, which could be related.

[alexcjohnson]

This seems to be happening in dragTail. updateSubplots removes the transformations we added to the data during the zoom/pan (that's where the data jumps back) and then relayout does a more complete redraw (ensuring we get the best view of the data given the updated axis ranges).

In the past MathJax had stopped being async after the first render of any given equation - so even though internally this jump-and-redraw has always happened, it was all synchronous so there was no repaint. I guess that changed and now MathJax is always async?

The best solution here is probably to ensure that the main draw (invoked by relayout and executed by Cartesian.plot and the individual trace type module.plot routines) resets these transforms by itself, so we can remove that updateSubplots call entirely. Some of the trace types probably already do this, some probably do not... Unfortunately that solution requires testing drag with each and every trace type to ensure that it stays in the right place afterward.

[jonmmease]

Found it! mathjax/MathJax#1030, and http://docs.mathjax.org/en/latest/api/hub.html

Setting MathJax.Hub.processSectionDelay = 0; takes care of the problem for MathJax 2.5+, and checking that MathJax.Hub.processSectionDelay is undefined is enough to skip check in version <2.5.

I'll add this to #2994

And thanks for the helpful into @alexcjohnson , though I'm quite glad to not need to go down that route 🙂