Quarto Presentation: Revealjs

[Lourenzutti]

Hi!!
Thanks for working on this!

It would be amazing to have this working on the Revealjs presentation.
It is working as the html output, but if I use Revealjs, it doesn't work.

Any idea/hint what is breaking in the revealjs output that I should edit?

[coatless]

So, it looks like there's a bug with Quarto adding the startup code cell in the revealjs format at the moment.

If you downgrade to 0.0.4, then the webR initialization should work. Type in the R console:

quarto add coatless/quarto-webr@0.0.4

That said, revealjs isn't playing nicely with CodeMirror at the moment, c.f. hakimel/reveal.js#1735

We're aiming to make a few modifications later this summer to the base style to address it. For now, the two options are:

1. Disable responsive scaling; or
2. Disable layouts

Disable responsive scaling

We can remove responsive scaling by setting min-scale and max-scale equal to 1.

---
title: "webR with Quarto Revealjs - Disable Scale"
format: 
  revealjs:
    min-scale: 1.0
    max-scale: 1.0
filters:
  - webr
---

## Running Code

Demo running code:

```{webr-r}
1 + 1
```

## More content

Additional slides

Disable layouts

Alternatively, we can stop revealjs from controlling the slide layout by setting disable-layout: true. The downside here is the content is no longer centered.

---
title: "webR with Quarto Revealjs - Disable Layout"
format: 
  revealjs:
    disable-layout: true
filters:
  - webr
---

## Running Code

Demo running code:

```{webr-r}
1 + 1
```

## More content

Additional slides

[Lourenzutti]

Fantastic, thank you!

[coatless]

Notes to my future self:

The bug originated when we switched from 0.0.4 to 0.1.0 due to a change in how we inserted our initialization script for the document. The main goal behind the change was to start allowing for customization of the webr client through meta data in the document header.

In particular, we went from:

  quarto.doc.include_file("in-header", "webr-init.html")

To:

  quarto.doc.include_text("in-header", initializedConfigurationWebR)

Specific diff

7c605ee#diff-f54aec1905d4e2d44dbfce99ee9e54cdaa83f37b54a9119b8f68636ed23b0463L66-R271

We setup a reproducible example here:

https://github.com/coatless/quarto-ext-revealjs-bug

We reported the issue upstream here:

quarto-dev/quarto-cli#5666

From here, the change over to Monaco Editor from CodeMirror should hopefully fix the auto-resizing being done by revealjs so that the code cells are aligned correctly. (This still needs to be tested.)

[coatless]

Origination of the bug is actually in pandoc itself! So, we're going to be blocked from using the revealjs format until the following pandoc release contains a bugfix for:

jgm/pandoc#8880

[coatless]

With quarto v1.4 pre-release, we can slowly move away from the pandoc issue by generating the configuration header in the extension folder and, then, incorporating the header in the document body.

[coatless]

With the shift over to Monaco, it also seems like we should be fine with auto-sourcing a code area in a slide deck when needed.

presentation.qmd

## {background-image="my-background.png" background-opacity="20%"}

<iframe seamless width="100%" height="100%" scrolling="no" src="webr.html"></iframe>

webr-document.qmd

---
title: " "
format: html
engine: knitr
filters:
- webr
---

<style>
body {
  background-color: black;
}
pre code {
  color: white;
}
.quarto-title-meta-heading,
.quarto-title-meta-contents {
  color: white !important;
}
</style>

```{webr-r}
sessionInfo()
```

Hat tip to @hrbrmstr on this trick. Extracted from his NYR talk:

https://gitlab.com/hrbrmstr/2023-nyr-webr/-/tree/batman/

[dlsun]

Just wanted to check if there a timeline on this.

I am using Quarto to make reveal.js slides for teaching, and I would love to use WebR in my slides. Right now, the only way I can get WebR to load with my slides is to downgrade to 0.0.4, as suggested by @coatless above. However, this seems to make it impossible to use any packages.

• It seems that installing packages on document open does not work in 0.0.4.
• Installing packages interactively using webr::install(...) fails with errors like Error: download from 'https://repo.r-wasm.org/bin/emscripten/contrib/4.1/gtable_0.3.4.tgz' failed. Probably because these versions are too old?

If there's not a timeline, is there a workaround to be able to use packages with WebR and reveal.js?

[coatless]

@dlsun, thanks for the inquiry.

Timeline-wise, this will probably be available with Quarto 1.4 later this fall.

What's stopping this feature from working right _now is we need a patch upstream in Pandoc and, then, need the included Pandoc in Quarto to be updated as well. Earlier today I initiated a check about what was needed for the fix in jgm/pandoc#8880 and JGM responded confirming that the bugfix requires placing new comparison logic. I'll try to see if I can have that patched sometime this week.

In the interim, if you downgrade to v0.0.4, the packages key will not work as setting meta options were added in the next version 0.1.0. You can re-create what the packages key is doing by inserting at the top of the document a raw HTML chunk as shown below.

----
title: Lecture on ...
format: revealjs
filters:
- webr
---

```{=html}
<script type="module">
await globalThis.webR.installPackages(['dplyr','ggplot2'])
</script>	
```

Note: It's worth mentioning that when downgrading to v0.0.4 of {quarto-webr}, you may not have access to the most up-to-date versions of R packages from the main webR project. At that time, webR was utilizing R version 4.1.