MathJax, or otherwise, LaTeX-rendered SVG's into Cytoscape nodes/edge labels?

Dash Python
1

Hi,
I’ve been down several rabbit holes trying to figure out how to do this most naturally.

For example dash-latex. Had an issue.
PyLaTeX heavy reliance on ActiveState, and wouldn’t run client-side. And it’s broken. I installed perl etc and it still doesn’t work.

Our best bet is still MathJax!

Has anyone got this to work? I am able to render mathjax to SVG with:

<html>
<header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=default"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        extensions: ["tex2jax.js", "TeX/AMSmath.js"],
        jax: ["input/TeX", "output/SVG"],
    })
</script>
</header>
<body>
<svg width="1960" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<div>$$a = b + c$$</div>
</svg>
</body>
</html>

It fills out the SVG in place. But you can’t view it with “View source” in your browser. “Inspect” works in chrome.

Just wondering how then to tie this SVG element to a node label.

Also, how do I include MathJax.js locally or remotely into a Dash app header?

The documentations have an /assets/ folder with a custom-script.js that somehow magically loads itself.

However, copying the entire MathJax/ folder hierarchy into /assets/ does not seem like a good idea intuitively.

Then, also, how would connect to a remote MathJax CDN like the one in the static html above?

2

It seems like you have two questions; one related to MathJax and one to Cytoscape. I’ll start the the former.

You should only use the static folder for your own css files. For libraries such as MathJax, it is better to use a CDN as in your example. In Dash, an MWE could look like this

import dash
import dash_html_components as html

# Create app.
external_stylesheets = ['https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
# Make some LaTeX content.
app.layout = html.Div(id='main', children='$$ \LaTeX $$')
# Run app.
if __name__ == '__main__':
    app.run_server(debug=True)

where the MathJax configuration should be tailored to the application content for performance considerations. While this solution works, there is (at least) one caveat; only static content is rendered. I am not sure if this is a deal breaker for your use case (it is possible to pre render all possible labels)?

Additional discussion is available on the github thread,

3

Is there no workaround such as passing the user’s LaTeX input string to the server and then updating the page?