Added MathJax CDN to enable Latex #194

kaushiksk · 2018-04-29T11:00:22Z

Solves plotly/dash#242

chriddyp · 2018-04-29T21:01:37Z

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 for users that are using `serve_locally=True` - Added screenshot test - Bumped version to `0.22.2`

kaushiksk · 2018-04-30T07:22:46Z

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

…nents

chriddyp · 2018-04-30T17:56:48Z

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 · 2018-04-30T17:57:15Z

dash_core_components/__init__.py

@@ -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',


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

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 😄

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

chriddyp · 2018-04-30T17:58:38Z

test/test_integration.py

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


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

chriddyp · 2018-04-30T17:59:40Z

test/test_integration.py

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


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'

chriddyp · 2018-04-30T18:04:37Z

Here's the screenshot on percy.io

chriddyp · 2018-04-30T18:07:08Z

test/test_integration.py

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


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}}))}$'

- Updated the test to have only latex in title - Made mathjax filename consisten everywhere

kaushiksk · 2018-05-01T18:40:51Z

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

kaushiksk · 2018-05-01T18:43:42Z

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

kaushiksk · 2018-05-01T18:59:16Z

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

bpostlethwaite · 2018-05-02T12:48:36Z

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

chriddyp · 2018-05-04T20:41:21Z

@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

chriddyp · 2018-05-04T20:43:28Z

test/test_integration.py

+                        'y': [1, 3, 5, 9, 13]
+                    }],
+                    'layout': {
+                        'title': 'sqrt{(n_\\text{c}(t|{T_\\text{early}}))}$'


we're missing a leading $ here, I believe it should be

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

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

mkhorton · 2018-05-04T21:04:14Z

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

chriddyp · 2018-05-04T21:05:59Z

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 · 2018-05-04T21:12:06Z

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.

chriddyp · 2018-05-04T21:17:47Z

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.

chriddyp · 2018-05-04T21:18:32Z

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(...)
])

chriddyp · 2018-05-09T16:55:08Z

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?

kaushiksk · 2018-05-12T03:14:29Z

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.

chriddyp · 2018-05-12T04:38:27Z

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?

alexcjohnson · 2018-12-14T03:28:50Z

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.

Added MathJax CDN to enable Latex

b353d86

Added local copy of mathjax and screenshot test

0f1f0a5

- Added local copy of MathJax for users that are using `serve_locally=True` - Added screenshot test - Bumped version to `0.22.2`

kaushiksk added 3 commits April 30, 2018 12:56

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…

a99b7fe

…nents

chriddyp reviewed Apr 30, 2018

View reviewed changes

Fixed filename inconsistency and changed test

cfd7d44

- Updated the test to have only latex in title - Made mathjax filename consisten everywhere

Fixed missing whitespace

c6c6ba2

bpostlethwaite added in progress and removed in progress labels May 2, 2018

chriddyp mentioned this pull request May 4, 2018

mathjax doesn't render for firefox plotly/plotly.js#2616

Closed

chriddyp reviewed May 4, 2018

View reviewed changes

Added missing leading $

2590b0c

Merge branch 'master' into master

958f825

jessexknight mentioned this pull request Aug 22, 2018

latex support plotly/dash#242

Closed

byronz changed the base branch from master to dev August 14, 2019 21:00

anders-kiaer mentioned this pull request Sep 2, 2019

Math in dcc.Markdown #634

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added MathJax CDN to enable Latex #194

Added MathJax CDN to enable Latex #194

kaushiksk commented Apr 29, 2018

chriddyp commented Apr 29, 2018

kaushiksk commented Apr 30, 2018

chriddyp commented Apr 30, 2018

chriddyp Apr 30, 2018 •

edited

Loading

chriddyp Apr 30, 2018

kaushiksk May 1, 2018

chriddyp Apr 30, 2018

chriddyp Apr 30, 2018 •

edited

Loading

chriddyp commented Apr 30, 2018

chriddyp Apr 30, 2018

kaushiksk commented May 1, 2018

kaushiksk commented May 1, 2018

kaushiksk commented May 1, 2018

bpostlethwaite commented May 2, 2018

chriddyp commented May 4, 2018

chriddyp May 4, 2018

kaushiksk May 5, 2018

mkhorton commented May 4, 2018

chriddyp commented May 4, 2018

mkhorton commented May 4, 2018 •

edited

Loading

chriddyp commented May 4, 2018

chriddyp commented May 4, 2018

chriddyp commented May 9, 2018

kaushiksk commented May 12, 2018

chriddyp commented May 12, 2018

alexcjohnson commented Dec 14, 2018

Added MathJax CDN to enable Latex #194

Are you sure you want to change the base?

Added MathJax CDN to enable Latex #194

Conversation

kaushiksk commented Apr 29, 2018

chriddyp commented Apr 29, 2018

kaushiksk commented Apr 30, 2018

chriddyp commented Apr 30, 2018

chriddyp Apr 30, 2018 • edited Loading

Choose a reason for hiding this comment

chriddyp Apr 30, 2018

Choose a reason for hiding this comment

kaushiksk May 1, 2018

Choose a reason for hiding this comment

chriddyp Apr 30, 2018

Choose a reason for hiding this comment

chriddyp Apr 30, 2018 • edited Loading

Choose a reason for hiding this comment

chriddyp commented Apr 30, 2018

chriddyp Apr 30, 2018

Choose a reason for hiding this comment

kaushiksk commented May 1, 2018

kaushiksk commented May 1, 2018

kaushiksk commented May 1, 2018

bpostlethwaite commented May 2, 2018

chriddyp commented May 4, 2018

chriddyp May 4, 2018

Choose a reason for hiding this comment

kaushiksk May 5, 2018

Choose a reason for hiding this comment

mkhorton commented May 4, 2018

chriddyp commented May 4, 2018

mkhorton commented May 4, 2018 • edited Loading

chriddyp commented May 4, 2018

chriddyp commented May 4, 2018

chriddyp commented May 9, 2018

kaushiksk commented May 12, 2018

chriddyp commented May 12, 2018

alexcjohnson commented Dec 14, 2018

chriddyp Apr 30, 2018 •

edited

Loading

chriddyp Apr 30, 2018 •

edited

Loading

mkhorton commented May 4, 2018 •

edited

Loading