Rendering any math prevents plotly plots from rendering

[richardye101]

Describe the bug

context When I write a python notebook with Latex-style math (\begin{align*} \end{align*} or dollar sign math) in a cell above, my plotly figures in a cell below in the same notebook fail to render. They take up the exact space I expect them to, only its white space with nothing there.

I know this is the issue because once I remove the Latex-style math from my notebook, the page renders my plotly figures just fine.

expectation I expected both rendered math and plotly plots in the same notebook to render properly.

bug But instead only the math block renders.

A screenshot of my math block:

Here is a screenshot where I expect my plot:

Here's my _config.yml file:

# Book settings
# Learn more at https://jupyterbook.org/customize/config.html

title: title
author: authors
logo: images/favicon.png
copyright: "2022"

# Ignore files not named in too
only_build_toc_files: true

# Force re-execution of notebooks on each build.
# See https://jupyterbook.org/content/execute.html
execute:
  execute_notebooks: 'cache'
  # execute_notebooks: "force"
  timeout: 10000
  allow_errors: true

# Parsing math blocks
parse:
  myst_enable_extensions:
    # don't forget to list any other extensions you want enabled,
    # including those that are enabled by default!
    - amsmath
# Define the name of the latex output file for PDF builds
latex:
  latex_documents:
    targetname: book.tex

# Add a bibtex file so that we can create citations
#bibtex_bibfiles:
#  - references.bib

# Information about where the book exists on the web
repository:
  url: https://github.com/richardye101/repo  # Online location of your book
  path_to_book: ../content  # Optional path to your book, relative to the repository root
  branch: main  # Which branch of the repository should be used when creating links (optional)

# Add GitHub buttons to your book
# See https://jupyterbook.org/customize/config.html#add-a-link-to-your-repository
html:
  favicon: "images/favicon.png"
  use_issues_button: true
  use_repository_button: true

# Plotly
sphinx:
  config:
    html_js_files:
    - https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js

problem This is a problem for people with would like to build pages with both Latex-style math and render plotly plots on the same page because it doesn't work.

Reproduce the bug

1. Create a notebook with a Latex-style math block in a markdown cell like so:

\begin{align*}
\sum^n_{i=1} x 
\end{align*}

or

$ x = 1$

or

$$
\sum^n_{i=1} x
$$

2. Import and use plotly to create an interactive plot in a code cell below:

import plotly.express as px
from sklearn import datasets
from sklearn.decomposition import PCA

iris = datasets.load_iris()
X = iris.data
y = iris.target
pca = PCA(n_components = 3)
pca_embedding = pca.fit_transform(X)
pca_embedding = pd.DataFrame(pca_embedding, index = y)

fig = px.scatter(pca_embedding, x =0 , y = 1, hover_data={"species": pca_embedding.index},
                     color = pca_embedding.index, width=1100, height=700)
fig.update_layout(legend=dict(
    orientation="h",
    yanchor="bottom",
    y = -.25,
    xanchor="center",
    x = .5
))
fig.show()

### Code also used to plot the 3d plotly figure
fig_3d = px.scatter_3d(pca_embedding, x =0 , y = 1, z = 2, hover_data={"name": pca_embedding.index},
                    color = pca_embedding.index, width=1200, height=700)
fig_3d.update_layout(legend=dict(
        orientation="h",
        yanchor="bottom",
        y = -.25,
        xanchor="center",
        x = .5
    ))
fig_3d.show()

3. Build the book

List your environment

Jupyter Book : 0.12.3 External ToC : 0.2.4 MyST-Parser : 0.15.2 MyST-NB : 0.13.2 Sphinx Book Theme : 0.1.10 Jupyter-Cache : 0.4.3 NbClient : 0.5.13

Python: 3.9.12

macOS Catalina: 10.15.7

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[mmcky]

thanks for reporting this @richardye101

@AakashGfude we should look into this re: plotly work that we are doing for themes.

[AakashGfude]

Just noting here, plotly has now started supporting mathjaxv3 from march 5th https://github.com/plotly/plotly.js/pull/6073 for v2.10.0

[mmcky]

well this is good news ❤️

[AakashGfude]

This issue will take a new plotly release to be resolved it seems. According to the thread I raised in plotly https://github.com/plotly/plotly.py/issues/3696 . We will have to wait a bit.