Thanks @kaushiksk ! We'll need a couple of extra things to get this across the finish line 🏁

1. We'll need a copy of this library for users that are using serve_locally=True:

• Download the contents of this file into the dash_core_components folder. Include the version number in the title, e.g. mathjax-2.7.4.js (note that relative_package_path is referring to this filename)
• Add the file to the MANIFEST.in file so that it is included in the distribution: https://github.com/plotly/dash-core-components/blob/master/MANIFEST.in

2. Create a screenshot test.

• Create a new function in test_integration: test_latex
• Include a sample graph with LaTeX in it
• self.wait_for_element_by_css_selector on that graph and then add a time.sleep(3) after since MathJax rendering is async
• Add a self.snapshot('latex rendering in graph') - This'll take a screenshot of the app using the percy.io screenshot service

3. Bump the version in version.py and the version field in package.json and add an entry in the CHANGELOG.md. This is technically a bug fix, so we'll go from 0.22.1 to 0.22.2 (see https://semver.org/)
4. Tag me for another review!

Let me know if you need help with this or if you don't have the time to do those steps.

And thanks again for your contribution to Dash! 🙌

@chriddyp I've made the changes you mentioned. Added an equation in LateX in the title of the Graph. Please do let me know if I've missed out on something.

Thank you @kaushiksk ! Looking at the screenshot test, it looks like the LaTeX isn't getting rendered :(

Now, this could be an issue with percy.io not rendering the MathJax correctly or perhaps we aren't waiting long enough for the MathJax to render.

Could you share a screenshot of this test running locally and confirm that it is rendering appropriately?

Here's the screenshot on percy.io
image

@chriddyp I changed the latex text in the title and fixed the filename issue and bumped the wait time as well.

I tested it locally. This is what happens:

• No latex in the title: everything is fine.
• Include latex in title within $ $ and the title is rendered blank.

As it turns out I get a blank legend and title in the graph given in the docs(https://plot.ly/python/LaTeX/) as well. I'm not sure if it's an issue with my browser.

Anyway, I've pushed the necessary changes, let me know what the new screenshots look like.

The previous commit message should have been "Fixed missing (削除) whitespace (削除ここまで) quote"

@chriddyp Here's how the LateX example from the docs looks like in my Firefox 59.0.2 on Ubuntu 16.04.

screenshot from 2018年05月02日 00-15-19
Notice how none of the Latex is rendered.

I ran the following snippet locally and noticed similar behavior.

import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
 html.Label('Graph'),
 dcc.Graph(
 id='graph',
 figure={
 'data': [{
 'x': [1, 2, 3, 4, 5],
 'y': [1, 3, 5, 9, 13]
 }],
 'layout': {
 'title': '$\\sqrt{(n_\\text{c}(t|{T_\\text{early}}))}$'
 }
 }
 ),
])
if __name__ == "__main__":
 app.run_server(debug=True)

Here's the ouput for the above code:
screenshot from 2018年05月02日 00-21-52

Now if I change the title to plaintext like "My Title", it renders the plaintext title.

screenshot from 2018年05月02日 00-26-23

I could see a script tag in the html pointing to the MathJax CDN, so MathJax is getting loaded.

This is what Percy.io sees
image

I'll see if I can take this PR out for a spin later today. I have some experience with Mathjax

@chriddyp Here's how the LateX example from the docs looks like in my Firefox 59.0.2 on Ubuntu 16.04.

I think this is just a firefox issue

Is this intended just for graph labels, or would equations render inside a dcc.Markdown component too?

Is this intended just for graph labels, or would equations render inside a dcc.Markdown component too?

As far as I know, just graph labels. I'm haven't looked into what it would take for MathJAX to just automatically work everywhere. If anyone knows or would like to do that research, please update the thread :)

As I understand it, MathJax by default will render any equation strings it finds anywhere in the page--but I wouldn't be surprised if this has been disabled somehow just to be polite? I'm really not sure.

There are React components out there which will do MathJax rendering for you, but it seems a shame to write another Dash component using these and possibly be loading the MathJax library twice, if MathJax is already a dependency for the core components.

As I understand it, MathJax by default will render any equation strings it finds anywhere in the page--but I wouldn't be surprised if this has been disabled somehow just to be polite? I'm really not sure.

Yeah, I think that one issue is that Dash renders everything dynamically, so I'm assuming that we'd to inform MathJax whenever new changes were made.

There are React components out there which will do MathJax rendering for you, but it seems a shame to write another Dash component using these and possibly be loading the MathJax library twice, if MathJax is already a dependency for the core components.

It might be nice if there was some kind of "MathJaxProvider component that could be placed at the top of the app and used:

app.layout = MathJaxProvider([
 html.Div(...)
])

image

Well, it's looking better but we still don't see the actual mathtype. This could just be an artifact of percy. Could you share a screenshot from your own environment to confirm that this works?

Could you share a screenshot from your own environment to confirm that this works?

@chriddyp I've shared screenshots from my environment in the comments above.

I've shared screenshots from my environment in the comments above.

It looks like the screenshots that you shared in #194 (comment) were just in Firefox, and that MathJax has issues rendering in Firefox. Could you share screenshots from another browser that doesn't have those issues, like Chrome?

This PR looks to have gone stale, but in case someone wants to pick it back up: If we only want to support MathJax within plotly.js, the config should be changed to TeX-AMS-MML_SVG. BUT we now have a way to do better: plotly/plotly.js#2994 - then if we want to support HTML-based rendering elsewhere in the page, we can keep the config as is, we just need to use the window.PlotlyConfig method described in https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-support-mathjax

Should we make a dcc.Math component to handle dynamic typesetting?? cc @xhlulu re: https://github.com/xhlulu/dash-katex, I love KaTeX and have tried to figure out how to get it in plotly.js but ATM that's not really feasible... so if we bring in MathJax for plotly.js we might as well use it for other on-page math as well.