search

quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.88k stars 317 forks source link

Altair plots disappearing with OJS cells on Chromium-based Browser #2621

Open Lourenzutti opened 2 years ago

Lourenzutti commented 2 years ago

Bug description

Hi,

I have a quarto presentation with Altair plot and OJS.

For some reason, the Altair plots do not consistently show up on chromium-based browsers (I tested Microsoft Edge and Google Chrome). Weirdly, on Firefox, it works fine.

image

If I keep refreshing a bunch of times, eventually it works

image

I published the slides here

Here's the code for

---
title: "Altair + OJS -- Error"
format: revealjs
---

```{python}
import pandas as pd
import altair as alt
from vega_datasets import data

Slide with altair plot

cars = data.cars()

alt.Chart(cars)\
  .mark_point()\
  .encode(
      x = 'Horsepower:Q',
      y = 'Miles_per_Gallon:Q')

OJS

data = [{'x': 1, 'y': 1}, {'x': 2, 'y': 2}];

Plot.plot({
  marks: [
    Plot.dot(data, {x: "x", y: "y"})
  ]});


OS: Windows 11 (21H2)
Editor: RStudio (2022.07.1+554) and vscode -- I tried both
Quarto: 1.2.157 

### 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](https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us) 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.
cderv commented 2 years ago

For the issue shared in screenshot, it seems like an issue with loading JS dependency in the right order or right time. Dependencies for altair are dynamically loaded by adding <script> with async at the bottom of <head> https://github.com/altair-viz/altair/blob/168d14bd0a414077c12033c2b5df512e75a77f5b/altair/utils/html.py#L101-L116

I can reproduce with OJS in the presentation, and it works if I remove OJS.

It is reproducible with format: html also - it is not tied to revealjs but rather link to conflict between OJS and Vega JS lib

With HTML ````markdown --- title: "Altair + OJS -- Error" format: html --- ```{python} import pandas as pd import altair as alt from vega_datasets import data ``` ## Slide with altair plot ```{python} cars = data.cars() alt.Chart(cars)\ .mark_point()\ .encode( x = 'Horsepower:Q', y = 'Miles_per_Gallon:Q') ``` ## OJS ```{ojs} data = [{'x': 1, 'y': 1}, {'x': 2, 'y': 2}]; Plot.plot({ marks: [ Plot.dot(data, {x: "x", y: "y"}) ]}); ``` ````

FWIW it works fine with the R version of altair

Qmd with R version ````markdown --- title: "Altair + OJS -- Error" format: revealjs --- ```{r} library("altair") vega_data <- import_vega_data() ``` ## Slide with altair plot ```{r} chart <- alt$Chart(vega_data$cars())$ mark_point()$ encode( x = "Horsepower:Q", y = "Miles_per_Gallon:Q", color = "Origin:N" ) chart ``` ## OJS ```{ojs} data = [{'x': 1, 'y': 1}, {'x': 2, 'y': 2}]; Plot.plot({ marks: [ Plot.dot(data, {x: "x", y: "y"}) ]}); ``` ````

I believe this is because the dependencies are loaded differently: they are included in <script> without async

So maybe an issue with how Python version of altair load the resources ?

Hope it helps understand.