Quarto is not compatible with plotly

XiangyunHuang commented 1 year ago

Bug description

When I add a figure before another figure which includes some math symbols, then math symbols is disappeared.

The first figure.

# https://plotly.com/r/reference/scatter/
plotly::plot_ly(data = quakes, x = ~long, y = ~lat) |> 
  plotly::add_markers()

Here is another figure.

x <- seq(from = -4, to = 8, length.out = 193)
y1 <- dnorm(x, mean = 3, sd = 1)
plotly::plot_ly(
  x = x, y = y1,
  type = "scatter", mode = "lines",
  fill = "tozeroy", fillcolor = "rgba(102, 102, 102, 0.2)",
  text = ~ paste0(
    "x：", x, "<br>",
    "y：", round(y1, 3), "<br>"
  ),
  hoverinfo = "text",
  name = plotly::TeX("\\mathcal{N}(3,1^2)"),
  line = list(shape = "spline", color = "#666666")
) |> 
  plotly::layout(
    xaxis = list(
      showgrid = F,
      title = plotly::TeX("x")
    ),
    yaxis = list(
      showgrid = F,
      title = plotly::TeX("f(x)")
    ),
    legend = list(x = 0.8, y = 1, orientation = "v")
  ) |> 
  plotly::config(
    mathjax = "cdn",
    displayModeBar = FALSE
  )

The whole Qmd file

---
title: "Untitled"
format:
  html:
    toc: true
    html-math-method: mathjax
editor: visual
---

```{r}
# https://plotly.com/r/reference/scatter/
plotly::plot_ly(data = quakes, x = ~long, y = ~lat) |> 
  plotly::add_markers()

x <- seq(from = -4, to = 8, length.out = 193)
y1 <- dnorm(x, mean = 3, sd = 1)
plotly::plot_ly(
  x = x, y = y1,
  type = "scatter", mode = "lines",
  fill = "tozeroy", fillcolor = "rgba(102, 102, 102, 0.2)",
  text = ~ paste0(
    "x：", x, "<br>",
    "y：", round(y1, 3), "<br>"
  ),
  hoverinfo = "text",
  name = plotly::TeX("\\mathcal{N}(3,1^2)"),
  line = list(shape = "spline", color = "#666666")
) |> 
  plotly::layout(
    xaxis = list(
      showgrid = F,
      title = plotly::TeX("x")
    ),
    yaxis = list(
      showgrid = F,
      title = plotly::TeX("f(x)")
    ),
    legend = list(x = 0.8, y = 1, orientation = "v")
  ) |> 
  plotly::config(
    mathjax = "cdn",
    displayModeBar = FALSE
  )


## My Sessoninfo

- Quarto 1.3.340
- plotly 4.10.1

RStudio 2023.03.0+386 "Cherry Blossom" Release (3c53477afb13ab959aeb5b34df1f10c237b256c3, 2023-03-09) for macOS
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) RStudio/2023.03.0+386 Chrome/108.0.5359.179 Electron/22.0.3 Safari/537.36

```r
sessionInfo()

R version 4.3.0 (2023-04-21)
Platform: x86_64-apple-darwin22.4.0 (64-bit)
Running under: macOS Ventura 13.3.1

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib 
LAPACK: /usr/local/Cellar/r/4.3.0/lib/R/lib/libRlapack.dylib;  LAPACK version 3.11.0

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

time zone: Asia/Shanghai
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods  
[7] base     

loaded via a namespace (and not attached):
 [1] gtable_0.3.3      jsonlite_1.8.4    dplyr_1.1.2      
 [4] compiler_4.3.0    tidyselect_1.2.0  Rcpp_1.0.10      
 [7] later_1.3.0       tidyr_1.3.0       scales_1.2.1     
[10] yaml_2.3.7        fastmap_1.1.1     ggplot2_3.4.2    
[13] R6_2.5.1          generics_0.1.3    knitr_1.42       
[16] htmlwidgets_1.6.2 tibble_3.2.1      munsell_0.5.0    
[19] pillar_1.9.0      rlang_1.1.0       utf8_1.2.3       
[22] xfun_0.39         lazyeval_0.2.2    viridisLite_0.4.1
[25] plotly_4.10.1     cli_3.6.1         magrittr_2.0.3   
[28] ps_1.7.5          digest_0.6.31     grid_4.3.0       
[31] processx_3.8.1    rstudioapi_0.14   lifecycle_1.0.3  
[34] vctrs_0.6.2       evaluate_0.20     glue_1.6.2       
[37] data.table_1.14.8 fansi_1.0.4       colorspace_2.1-0 
[40] rmarkdown_2.21    purrr_1.0.1       httr_1.4.5       
[43] tools_4.3.0       pkgconfig_2.0.3   quarto_1.2       
[46] htmltools_0.5.5

quarto check

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.340
      Path: /Applications/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.11.3
      Path: /usr/local/opt/python@3.11/bin/python3.11
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.3.0
      Path: /usr/local/Cellar/r/4.3.0/lib/R
      LibPaths:
        - /usr/local/lib/R/4.3/site-library
        - /usr/local/Cellar/r/4.3.0/lib/R/library
      knitr: 1.42
      rmarkdown: 2.21

[✓] Checking Knitr engine render......OK

Checklist

[X] Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
[X] Please format your issue so it is easier for us to read the bug report.
[X] Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
[X] Please document the operating system you're running. If on Linux, please provide the specific distribution.
[X] Please provide the output of quarto check so we know which version of quarto and its dependencies you're running.

mcanouil commented 1 year ago

The issue appears because you embed two versions of MathJax, one inside plotly and one inside Quarto which causes conflicts.

Don't set MathJax
Setting MathJax and adding an equation

The only case it does not work is when setting MathJax in Quarto/Pandoc with no equations.

cscheid commented 1 year ago

Thanks for tracking this down, @mcanouil!

Unfortunately, there's not much we can do about javascript libraries that pollute the global namespace and conflict with each other in this way.

cderv commented 1 year ago

I was curious about what you found @mcanouil so I did have a look.

The only case it does not work is when setting MathJax in Quarto/Pandoc with no equations.

For me it works also in this case when interacted with the graph. This is because a Mathjax method is called to render the equation.

I think this is missing when only plotly is loaded somehow. When loading mathjax with Quarto, this is mathjax 3 which is used, and it will correctly

So issue could be either in how plotly is loading the Math and missing the render command at the end of document, or maybe a difference between Mathajx 2.7 and 3

Either way, I don't think this is Quarto related indeed.

quarto-dev / quarto-cli