Latex not working in jupyter notebook v7.

[pfebrer]

I recently upgraded to jupyter notebook v7 and I noticed that some plotly plots that previously rendered flawlessly now fail to render. I get the following output:

After some exploration I found out that it comes from an error using MathJax in jupyterlab-plotly. It tries to access MathJax.config.startup.output, but MathJax.config.startup is undefined.

It is very easy to reproduce this error:

• Create a new python environment (I tried with python 3.8).
• pip install jupyter plotly
• Open a jupyter notebook with jupyter notebook.
• Run a cell with the following code:

from plotly.graph_objects import Figure

Figure().update_layout(title="$Title$")

[pfebrer]

Ok, I installed the jupyterlab-plotly extension with jupyter labextension install plotlywidget and it works, so I guess this will be fixed in the next python package release (?)

[pfebrer]

No, sorry it also doesn't work, the previous code snippet just literally shows "$Title$" as a title, but prepending the string with 'r' makes the issue show again:

from plotly.graph_objects import Figure

Figure().update_layout(title=r"$Title$")

[zhimin-z]

Hi, I faced the same issue, any update?

[pfebrer]

No, I still need some solution for this 😅

[newville]

@zhimin-z @pfebrer I've been seeing this issue for a while too. Is there any understanding of the cause and what might be done to fix it?

[zhimin-z]

Yeah, still there... @newville

[newville]

@zhimin-z Yes, the problem still exists. Is there any understanding of the cause of the problem? Has anyone investigated what is going on in the code? I'm afraid this is a bit outside of my area of expertise.

[zhimin-z]

I have no idea...anyone who is in charge of latex functionality in this repo?

[pfebrer]

I'm tagging @alexcjohnson since he seems to be the last to have committed something to jupyterlab-plotly other than version changes :)

It looks like this is an easy fix that just needs an update to use the latest MathJax version, or somehow forcing jupyterlab to use an oldest one, I don't know if that's possible.

[newville]

@pfebrer @alexcjohnson Thanks for looking into this. Is there anything the rest of us can do to help further troubleshoot or fix this issue? I'll admit that I do not have a deep understanding of how plotply.py and plotly.js interact or which version of mathjax
is actually being used.

[pfebrer]

I don't know, everything I know is that jupyterlab uses MathJax 3.2 and plotly's docs use 2.7, but in principle version 3 should work as well according to https://github.com/plotly/plotly.js/pull/6073

I don't even know how to modify jupyterlab-plotly and use a modified version of the extension. I have tried to pip install -e . the plotly repo to play a little bit with it but then jupyter doesn't render anything.

[newville]

@pfebrer Thanks, sorry to be dense, but what precisely would one have to do to make it work? Could that be folded into the plotly-py code?

The issue is kind of 3 months old, and it seems that there has been no explanation or acknowledgment of this issue.
But, I don't really know what that means. Maybe the solution is obvious to someone?

[pfebrer]

I don't know, if I knew I would have submitted a PR already :)

I already tried to fix it and I couldn't even set up a dev environment. I'm not a plotly developer so I don't have more time to spend on it unfortunately.

They already marked it as a bug, so I guess they'll address it whenever they have time. The bug is very annoying and I guess plenty of people will find it since everyone uses jupyter notebooks, so eventually they will have to fix it if they don't want people to move to other packages because of this very small detail.

[pfebrer]

Could that be folded into the plotly-py code?

My impression for this was that plotlyjs should be modified (not just the javascript in jupyterlab-plotly), but I might be wrong.

[newville]

@pfebrer @alexcjohnson it looks like maybe this is related to #3661, #3696, and #3706, first identified 18 months ago and related to plotly using MathJax 2 when other code (say, Jupyter) has already loaded MathJax 3.

FWIW, the last release of MathJax2 was 3 years ago. MathJax 3 has been actively developed, and MathJax 4 is now in beta.

[alexcjohnson]

As @pfebrer pointed out, Plotly.js has been able to use MathJax v3 or v2 since https://github.com/plotly/plotly.js/pull/6073 which was released in v2.10 (March 2022), so the problem is something about how we're detecting or invoking MathJax in certain environments.

I have to admit my own attempts a few months ago to get multiple versions of Jupyter and Jupyterlab installed side-by-side so I could test and fix these issues left me with a borked environment that wouldn't run anything correctly, and I haven't tried to go back to it since then. So if someone else wants to give this a shot we'd welcome a PR - otherwise we'll get back to it at some point but I can't say when.

@newville thanks for the note about MathJax 4, we'll give it a look! We'll certainly want to get it working in Plotly.js and Dash, regardless of the issues we've had in the various Jupyter environments.

[newville]

@alexcjohnson Thanks for the response. For me, running a standalone plot script, as in https://plotly.com/python/LaTeX/ from a plain Python shell works fine (Python 3.10.12 or 3.11.5 on MacOS) -- it opens a browser in Chrome and the plot correctly renders the LaTeX.

Running that same script in a Jupyter Notebook fails to render the LaTeX. To reproduce, one should be able to install Miniforge (https://github.com/conda-forge/miniforge), activate that environment, and then install with

mamba install -c conda-forge notebook pandas plotly

I might be willing to help, but I am having difficulty even navigating where to start here (not very fluent with the Jupyter code or Plotly). I cannot really even figure out where the

Javascript error: cannot read properties of undefined

is coming from.

[pfebrer]

I cannot really even figure out where the

Javascript error: cannot read properties of undefined is coming from.

If you open the browser console (F12) you'll see some more information. But the JavaScript files are minified so it's really an impossible mission to debug from there.

That's why I tried to set up a dev environment, but I failed. @alexcjohnson maybe if you can point us to somewhere where it is explained how to set up the dev environment for the whole stack (plotly.py, jupyterlab-plotly, plotlyjs), we could try to help. Otherwise, at least in my case, it feels too difficult to try to contribute because I have to figure out everything myself and I don't know if I'm doing things right.

[newville]

@alexcjohnson @pfebrer Just in case it wasn't obvious (or in case it helps with debugging), downgrading to jupyter notebook < 7 does avoid this problem:

pip install "notebook<7"

[newville]

@alexcjohnson @pfebrer any thoughts on whether progress is going to be possible on this? Help (or an attempt to help, at least) was offered, but the very low response rate here is less than encouraging. I hope all is well.

[newville]

@alexcjohnson @pfebrer any updates on this?

Perhaps a pull request on the documentation (https://github.com/plotly/plotly.py/blob/master/doc/python/LaTeX.md) to change that to state that latex formatting of strings is no longer supported in Jupyter would be in order? The current statement there is misleading at best.

[pfebrer]

I have no idea how to fix it and I'm not part of the plotly team, so I don't see how I can help, sorry :(

I would like to see this fixed as well, but there's nothing I can do.

[newville]

@pfebrer Thanks - I am in the same position. It seems like the developers are either ignoring this or won't be able to fix it. I think that perhaps the best option is to admit that this is not working, and put in a PR to change to documentation to say that latex strings do not work with Jupyter Notebook 7.

[timoklein]

I hope this gets moved up the priority list because it's kind of a dealbreaker for using plotly in scientific publications. Just had to fall back to matplotlib because I was not able to properly name my axes on jupyterlab 4.2.0.

[LunarLanding]

Currently migrating my report from https://github.com/plotly/plotly.js/issues/5374 to here. On plotly 4.22, jupyter lab 4.2.3, python 3.11.9, firefox 127.0.2, OSX Sonoma 14.5:

import plotly.graph_objects as go
f=go.Figure()

f.update_yaxes(title=dict(text="$log_{10}(D)$", font_size=16))

f.show()

[newville]

@LunarLanding @timoklein Yeah, the lack of attention and the lack of response to this issue is pretty disappointing. It was raised 10 months ago now. And as you say, it is a dealbreaker for using Plotly with JupyterLab.

Both Plotly and JupyterLab explicitly say in multiple places that they work together, and both explicitly say that Latex strings are supported and render correctly. The fact is -- and has been for a very long time -- that they do not. Using latex strings with Plotly in JupyterLab or Notebook>7 straight-up breaks any rendering by Plotly.

The Plotly developers continue to not acknowledge this bug and have shown no inclination to address it.

[marthacryan]

Hey all! @newville @LunarLanding @timoklein I'm investigating how to fix this, but in the meantime I've had some success with changing the default renderer in plotly.io like this (before running your plotly code):

import plotly.io as pio
pio.renderers.default = 'iframe'

Let me know if that works for you! Sorry for the delay on this and thanks for posting this issue.

[newville]

@marthacryan Thanks very much for responding and for the helpful suggestion. That does work for the couple of examples I've tried. So that is very promising.

I have not looked at the code in any detail. Is there some documentation or more information about these renderers?

When using 'iframe', a folder called "iframe_figures" is created in the working directory, which has non-trivial HTML files (it appears one per figure, though I am not certain of that). These seem to not be cleaned up when the notebook is closed. Would it be possible to either clean these on exit or perhaps write these files to a common temporary folder like /tmp?

FWIW, these HTML files appear to load https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js, which is 5+ years old. Is that necessary, or could a more recent version be used?

Anyway, that seems very promising. Thanks!

[archmoj]

Thanks very much @marthacryan. It looks like the default renderer is not correctly set on plotly.py. What do you think?

[pfebrer]

Hi @archmoj, if what you are proposing is to set iframe as the default renderer, in my opinion it doesn't make much sense as a definitive solution, specially if that creates an extra folder in your filesystem as @newville says.

Still, if an iframe can be displayed without writing files to your filesystem I think what would make sense is to temporarily make the notebook renderer use the iframe machinery until the mathjax bug is fixed.

But to me time seems better invested on understanding what goes on with mathjax than in making iframes not write files to the filesystem. Specially since we have finally caught the attention of someone who seems to have the knowledge to solve the issue, i.e. @marthacryan :)