Plotly.js: Order-independent script tags (MathJax & locales)

[alexcjohnson]

Spurred by https://github.com/plotly/dash/issues/880 as it's annoying to have to control script tag ordering in dash.

Currently the docs say MathJax must be loaded before plotly.js, and locales must be loaded after. This is because plotly.js looks for typeof MathJax !== 'undefined' during script execution, and if it finds MathJax it configures it. Whereas the opposite happens with locales: the script immediately calls Plotly.register, so it assumes that the Plotly object exists.

For MathJax we could simply defer this configuration to the first Plotly.plot call - and set some flag so we don't do it again.

For locales it's a little more complicated, we would have to do something like call Plotly.register if it exists, otherwise stash the locale in some global like window.PlotlyLocales (in a way that's compatible with multiple locale scripts), and then during the plotly.js script execution grab these and register them. At first I was thinking of deferring this to the first Plotly.plot call along with the MathJax config, and that may still work, I just worry people may want to inspect the available locales and would be confused that they don't see the right ones.

[alexcjohnson]

This problem has gotten worse with the async loading in dash 1.5...

[antoinerg]

I am trying to reproduce the MathJax part of the issue described here. In the following Codepen, even though MathJax is loaded after plotly.js, the rendering of equations works. What am I missing?

cc @alexcjohnson

[alexcjohnson]

Huh OK, maybe that's a result of https://github.com/plotly/plotly.js/pull/2994? At this point I've lost track of why in #2994 we couldn't just always configure MathJax immediately before using it... if we could do that, and get rid of the attempt to configure it during initial script execution it would be more obvious that order is irrelevant. But it doesn't look as though anyone actually tried flipping MathJax to after plotly.js in the course of https://github.com/plotly/dash/issues/880, so if we can simply convince ourselves that this is OK, and remove the comment about script ordering in the plotly.js docs, then I'm happy with the MathJax part.

[antoinerg]

Thanks @alexcjohnson for the reply!

At this point I've lost track of why in #2994 we couldn't just _always_ configure MathJax immediately before using it... if we could do that, and get rid of the attempt to configure it during initial script execution it would be more obvious that order is irrelevant.

@jonmmease can you enlighten me? Is it possible to always configure Mathajx before using it and make everything order independent?

[jonmmease]

Here's what I recall:

• After #2994, we do always configure Mathjax as we need it before typesetting, and then restore it to any externally set configuration after typesetting. So it should be fine for Mathjax to be loaded after plotly.js.
• The only reason we still do any Mathjax config when plotly.js is loaded is for backward compatibility (in case a plotly.js user was relying on the loading of plotly.js to configure Mathjax a certain way).
• When window.PlotlyConfig = {MathJaxConfig: 'local'}, we don't do any Mathjax config on load. plotly.py sets this before loading plotly.js so that plotly.js doesn't interfere with the Jupyter notebook's use of Mathjax. The idea was that in Plotly.js version 2, this would be the default and only behavior.

I haven't followed the Dash issues, but it might make sense for Dash to always set this MathJaxConfig flag to 'local' before loading plotly.js as well.

Hope that helps!