Implement SVG rendering of equations in dcc.Graph and dcc.Markdown using MathJax v3

[archmoj]

Also bumping plotly.js to v2.10.1.
See additions and fixes in v2.10.0 and v2.10.1.

Example app:

importdashfromdashimportdccfromdashimporthtmlapp=dash.Dash(__name__)
false=Falsetrue=Truefig= {
"data":[{
"x": [0, 1],
"y": [0, 1.414],
"name": "$E^2=m^2c^4+p^2c^2$"
}, {
"x": [0, 1],
"y": [1.4, 0.1],
"type": "bar",
"name": "$x=\\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$"
}, {
"type": "pie",
"values": [1, 9],
"labels": ["$\\frac{1}{10}=10\\%$", "$\\frac{9}{10}=90\\%$"],
"domain": {"x": [0.3, 0.75], "y": [0.55, 1]}
}, {
"type": "heatmap",
"z": [[1,2],[3,4]],
"xaxis": "x2",
"yaxis": "y2",
"colorbar": {"y": 0.225, "len": 0.45}
}],
"layout": {
"yaxis":{"domain": [0, 0.45], "title": {"text": "$y=\\sin{2 \\theta}$"}},
"xaxis":{
"domain": [0, 0.45],
"title": {"text": "$x=\\int_0^a a^2+1$"},
"tickvals": [0, 1],
"ticktext": ["$\\frac{0}{100}$", "$\\frac{100}{100}$"]
},
"xaxis2": {"domain": [0.85, 1], "anchor": "y2"},
"yaxis2": {
"domain": [0, 0.45],
"anchor": "x2",
"title": {"text": "$(||01\\rangle+|10\\rangle)/\\sqrt2$"}
},
"height":500,
"width":800,
"margin": {"r": 250},
"title": {"text": "$i\\hbar\\frac{d\\Psi}{dt}=-[V-\\frac{-\\hbar^2}{2m}\\nabla^2]\\Psi$"},
"annotations":[
{
"text":"$(top,left)$","showarrow":false,"xref":"paper","yref":"paper",
"xanchor":"left","yanchor":"top","x":0,"y":1,"textangle":10,
"bordercolor":"#0c0","borderpad":3,"bgcolor":"#dfd"
},
{
"text":"$(right,bottom)$","xref":"paper","yref":"paper",
"xanchor":"right","yanchor":"bottom","x":0.2,"y":0.7,"ax":-20,"ay":-20,
"textangle":-30,"bordercolor":"#0c0","borderpad":3,"bgcolor":"#dfd",
"opacity":0.5
},
{"text":"$not-visible$", "visible": false},
{
"text":"$^{29}Si$","x":0.7,"y":0.7,"showarrow":false,
"xanchor":"right","yanchor":"top"
},
{
"text":"$^{17}O$","x":0.7,"y":0.7,"ax":15,"ay":-15,
"xanchor":"left","yanchor":"bottom"
}
]
}
}
app.layout=html.Div(children=[
dcc.Markdown('# h1 tag with inline MathJax: $E=mc^2$', mathjax=True),
dcc.Markdown(''' ## h2 tag with MathJax block: $$\\frac{1}{(\\sqrt{\\phi \\sqrt{5}}-\\phi) e^{\\frac25 \\pi}} = 1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\ldots} } } } $$ ## Next line. ''', mathjax=True),
dcc.Graph(
mathjax=True,
id='graph-with-math',
figure=fig
),
dcc.Markdown('### No MathJax: Apple: $2, Orange: $3'),
dcc.Graph(
id='graph-without-math',
figure=fig
)
])
if__name__=='__main__':
app.run_server(debug=True)

[archmoj]

Thanks to @anders-kiaer for the contribution in 🏆 🏆 🏆 plotly/dash-core-components#634 🏆 🏆 🏆

[archmoj]

@alexcjohnson How does the percy image test for MathJax look like?

[alexcjohnson]

Looks good! Some parts of the graphs are grossly misaligned, but that's unfortunately normal for percy, we're missing some CSS from plotly.js

[alexcjohnson]

💃 Fantastic work @archmoj!