Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added MathJax CDN to enable Latex #194

Open
wants to merge 9 commits into
base: dev
from

Conversation

@kaushiksk
Copy link

commented Apr 29, 2018

Solves plotly/dash#242

@chriddyp

This comment has been minimized.

Copy link
Member

commented Apr 29, 2018

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
  1. 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
  1. 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/)
  2. 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`
 - Added screenshot test
 - Bumped version to `0.22.2`
@kaushiksk

This comment has been minimized.

Copy link
Author

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.

@chriddyp

This comment has been minimized.

Copy link
Member

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?

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

This comment has been minimized.

Copy link
@chriddyp

chriddyp Apr 30, 2018

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

This comment has been minimized.

Copy link
@chriddyp

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 😄

This comment has been minimized.

Copy link
@kaushiksk

kaushiksk May 1, 2018

Author

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

self.startServer(app=app)

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

This comment has been minimized.

Copy link
@chriddyp

chriddyp Apr 30, 2018

Member

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

])
self.startServer(app=app)

graph = self.wait_for_element_by_css_selector('#graph')

This comment has been minimized.

Copy link
@chriddyp

chriddyp Apr 30, 2018

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'

@chriddyp

This comment has been minimized.

Copy link
Member

commented Apr 30, 2018

Here's the screenshot on percy.io
image

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

This comment has been minimized.

Copy link
@chriddyp

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

This comment has been minimized.

Copy link
Author

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.

@kaushiksk

This comment has been minimized.

Copy link
Author

commented May 1, 2018

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

@kaushiksk

This comment has been minimized.

Copy link
Author

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.

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.

@bpostlethwaite

This comment has been minimized.

Copy link
Member

commented May 2, 2018

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

This comment has been minimized.

Copy link
Member

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

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

This comment has been minimized.

Copy link
@chriddyp

chriddyp May 4, 2018

Member

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

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

This comment has been minimized.

Copy link
@kaushiksk

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

This comment has been minimized.

Copy link

commented May 4, 2018

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

@chriddyp

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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.

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

This comment has been minimized.

Copy link
Member

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.

@chriddyp

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Member

commented May 9, 2018

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?

@kaushiksk

This comment has been minimized.

Copy link
Author

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.

@chriddyp

This comment has been minimized.

Copy link
Member

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?

@jessexknight jessexknight referenced this pull request Aug 22, 2018
@alexcjohnson

This comment has been minimized.

Copy link
Contributor

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.

@byronz byronz changed the base branch from master to dev Aug 14, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.