# Added MathJax CDN to enable Latex #194

Open
wants to merge 9 commits into
from

## Conversation

### kaushiksk commented Apr 29, 2018

 Solves plotly/dash#242
 Added MathJax CDN to enable Latex 
 b353d86 
Member

### chriddyp commented Apr 29, 2018

 Thanks @kaushiksk ! We'll need a couple of extra things to get this across the finish line 🏁 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 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 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/) 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! 🙌
 Added local copy of mathjax and screenshot test 
 - Added local copy of MathJax for users that are using serve_locally=True
- Bumped version to 0.22.2
 0f1f0a5 
Author

### kaushiksk commented Apr 30, 2018

 @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.

### kaushiksk added some commits Apr 30, 2018

 Added newline to end of file 
 bae5768 
 Added startServer in test and newline at end of file 
 a97912a 
 Merge branch 'master' of https://github.com/kaushiksk/dash-core-compo… 
…nents
 a99b7fe 
Member

### chriddyp commented Apr 30, 2018

 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?

### chriddyp reviewed Apr 30, 2018

 @@ -22,6 +22,11 @@ _this_module = _sys.modules[__name__] _js_dist = [ { 'external_url': 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML', 'relative_package_path': 'mathjax-2.7.4.js',

#### chriddyp Apr 30, 2018 • edited

Member

I believe this should be mathjax-2.7.4.min.js - it should match https://github.com/plotly/dash-core-components/pull/194/files#diff-97c91a104c431d0c365565d3ac03ac13R12

We should also rename the file dash_core_components/mathjax-2.7.4.js to dash_core_components/mathjax-2.7.4.min.js

#### chriddyp Apr 30, 2018

Member

Or vice-versa, everything could be labeled mathjax-2.7.4.js rather than mathjax-2.7.4.min.js. I don't really have a preference, but they do need to all have the same name 😄

#### kaushiksk May 1, 2018

Author

Uh my bad. I'll change it in MANIFEST.in

### chriddyp reviewed Apr 30, 2018

 self.startServer(app=app) graph = self.wait_for_element_by_css_selector('#graph') time.sleep(2)

#### chriddyp Apr 30, 2018

Member

In case this was a timing issue, let's try bumping this up to 4

### chriddyp reviewed Apr 30, 2018

 ]) self.startServer(app=app) graph = self.wait_for_element_by_css_selector('#graph')

#### chriddyp Apr 30, 2018 • edited

Member

Here's an idea - let's "wait for" the actual graph to be rendered rather than just the container. Let's update this CSS selector to be: '#graph .svg-container'

Member

### chriddyp commented Apr 30, 2018

 Here's the screenshot on percy.io

### chriddyp reviewed Apr 30, 2018

 'y': [1, 3, 5, 9, 13] }], 'layout': { 'title': 'Graph of $$y = \frac{x^2 - 2}{4}$$'

#### chriddyp Apr 30, 2018

Member

Ah I see, this isn't actually valid in plotly.js. Text needs to be all latex or none latex.

Let's use this example from the docs: https://plot.ly/python/LaTeX/

'title': '$\\sqrt{(n_\\text{c}(t|{T_\\text{early}}))}$'

 Fixed filename inconsistency and changed test 
 - Updated the test to have only latex in title
- Made mathjax filename consisten everywhere
 cfd7d44 
Author

### kaushiksk commented May 1, 2018

 @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.
 Fixed missing whitespace 
 c6c6ba2 
Author

### kaushiksk commented May 1, 2018

 The previous commit message should have been "Fixed missing whitespace quote"
Author

### kaushiksk commented May 1, 2018

 @chriddyp Here's how the LateX example from the docs looks like in my Firefox 59.0.2 on Ubuntu 16.04. 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: Now if I change the title to plaintext like "My Title", it renders the plaintext title. I could see a script tag in the html pointing to the MathJax CDN, so MathJax is getting loaded.
Member

### bpostlethwaite commented May 2, 2018

 This is what Percy.io sees I'll see if I can take this PR out for a spin later today. I have some experience with Mathjax

Member

### chriddyp commented May 4, 2018

 @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
referenced this pull request May 4, 2018

### chriddyp reviewed May 4, 2018

 'y': [1, 3, 5, 9, 13] }], 'layout': { 'title': 'sqrt{(n_\\text{c}(t|{T_\\text{early}}))}$' #### chriddyp May 4, 2018 Member we're missing a leading $ here, I believe it should be

$sqrt{(n_\\text{c}(t|{T_\\text{early}}))}$


#### kaushiksk May 5, 2018

Author

I must've missed that while testing with different inputs. Fixed this. Check perci.io output now, hopefully, this should work.

### mkhorton commented May 4, 2018

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

### chriddyp commented May 4, 2018

 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 :)

### mkhorton commented May 4, 2018 • edited

 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.
Member

### chriddyp commented May 4, 2018

 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.
Member

### chriddyp commented May 4, 2018

 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(...) ]) 
 Added missing leading \$ 
 2590b0c 
Member

### chriddyp commented May 9, 2018

 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?
 Merge branch 'master' into master 
 958f825 
Author

### kaushiksk commented May 12, 2018

 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.
Member

### chriddyp commented May 12, 2018

 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?
referenced this pull request Aug 22, 2018
Contributor

### alexcjohnson commented Dec 14, 2018

 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.