LaTeX Strings in plotly lead to javascript error.

[j-fu]

Hi, using LaTeX strings in plotly.js leads to the following javascript error with MathJax setup:

SetupMathJax.js:17 Uncaught (in promise) TypeError: window.MathJax.Callback is not a function
    at Object.Queue (SetupMathJax.js:17)
    at plotly-1.58.4.min.js:61
    at plotly-1.58.4.min.js:61
    at new Promise (<anonymous>)
   ...

An MWE in form of a pluto notebook can be found here:

plotly-mathjax-mwe.jl

The same error appears in the Plot.jl sample notebook when using LaTeXStrings and plotting with plot!(years, oranges, label=L"$x^3$".s)

[fonsp]

The problem is that plotly uses MathJax 2, but we are using MathJax 3, and because MathJax does not provide an ES module export, we can only use one version at the same time on one page :(

[j-fu]

It seems that the problem is known over there: https://github.com/plotly/plotly.js/issues/4563

[j-fu]

FYI: https://github.com/plotly/plotly.js/pull/6073

[disberd]

I was trying to make recent plotly work in Pluto with latex given the recent support to MathJax 3. Unlike before, now the plot appears correctly if using a version of Plotly > 2.10, but latex still does not display where it's supposed to:

It does seem that there is some issue with the global MathJax fontCache.

equations that are rendered before the plot is loaded are correctly rendered also in the plot, but loading the plotly plot then breaks rendering of new symbols even outside of plotly plots (If you try to change the latextring in the cell below to some latex other latex glyph after rendering the plot you get an empty SVG).

Finally, it seems that commenting out these lines: https://github.com/fonsp/Pluto.jl/blob/84574a6d51561f24b659049db9f1e80c64bff13f/frontend/common/SetupMathJax.js#L63-L65 fix the latex rendering issues with plotly.

I have seen that the plan might be to migrate to KaTeX directly as in https://github.com/fonsp/Pluto.jl/pull/1998 but I am still tagging @fonsp as he might understand more about this fontCache problem 😄

Edit: Adding the notebook code

# ╔═╡ 89c83fb6-26a2-466f-bec4-399eceef6070
using LaTeXStrings

# ╔═╡ d65eea4b-da9e-48f0-9763-103cadca0a92
L"$\Psi = 3"

# ╔═╡ 6e3ef160-a833-11ec-0086-973be8405af3
html"""
<div id='graph'>
</div>
  <script src="https://cdn.plot.ly/plotly-2.11.1.js"></script>
<script>
Plotly.newPlot('graph', [{
  y: [2,1,2],
	name: '$\\sigma = 3$',
showlegend: true,
}], {
  title: '$\\Psi=3$'
})
</script>
"""