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. https://github.com/hakimel/reveal.js/issues/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.

````markdown
---
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

https://github.com/coatless/quarto-webr/commit/7c605eebc40a445a20929ff0140f592b5a0950f1#diff-f54aec1905d4e2d44dbfce99ee9e54cdaa83f37b54a9119b8f68636ed23b0463L66-R271

We setup a reproducible example here:

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

We reported the issue upstream here:

https://github.com/quarto-dev/quarto-cli/issues/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:

https://github.com/jgm/pandoc/issues/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 https://github.com/jgm/pandoc/issues/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.

[coatless]

So, we're probably going to send over a patch to Pandoc today. That'll kick start the process of getting it included in Pandoc &, then, getting it into the pre-release for Quarto v1.4. The Quarto team is receptive to bumping the included version of pandoc, c.f. https://github.com/quarto-dev/quarto-cli/discussions/7048

It's a bit of a long process to build Pandoc so if the PR doesn't appear tonight, don't worry too much.

[coatless]

PR was sent to Pandoc (https://github.com/jgm/pandoc/pull/9110) and an update was posted over on the Quarto tracker (https://github.com/quarto-dev/quarto-cli/issues/5666)

[jgeller112]

@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.

I tried using this code but it is not recognizing calls to libraries in the webr-r chunks.

[coatless]

@jgeller112 chances are those libraries were not compiled for R 4.1 (webR v0.1.0 - v0.1.1). We've only recently hit about 50% of CRAN packages being available for R 4.3.0 (webR v0.2.0 - v0.2.1).

[jgeller112]

@jgeller112 chances are those libraries were not compiled for R 4.1 (webR v0.1.0 - v0.1.1). We've only recently hit about 50% of CRAN packages being available for R 4.3.0 (webR v0.2.0 - v0.2.1).

I tried it with tidyverse/dplyr/ggplot2.

[coatless]

Unfortunately, the packages are probably still installing. If you open the web developer tools, you should see a "Downloading package note". There is no document "run lock" on code cells when installing with this approach compared to the packages meta key. If you have a URL, I can take a look.

That said, I would hold off on embedding in lecture slides for a bit more. We're nearly at the point where we can get the patched Pandoc version into Quarto's v1.4 pre-release. If it helps, this is a quick demo of it working with patched versions:

[jgeller112]

Here is a quick hopefully reproducible example

title: "Untitled"
format: 
  revealjs:
    theme: blood
    multiplex: true
    transition: fade
    slide-number: true
    incremental: false 
    chalkboard: true
execute:
  freeze: auto
  echo: true
  message: false
  warning: false
  fig-align: center
  fig-width: 12
  fig-height: 8
  editor_options: 
  chunk_output_type: inline
  code-overflow: wrap
  html:
    code-fold: true
    code-tools: true
filters:
  - webr
---

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

library(ggplot2)

[jgeller112]

Sounds like the patch in the pre-release will be very soon.

[coatless]

On the demo, I think this is an issue with the upstream webR package repository. There was a behind-the-scenes change to packages that re-arranged a few things, c.f. https://github.com/r-wasm/webr/issues/245

Glancing at the install command, it's taking time for each of ggplot2's dependencies. Near the end, the system seems to error when trying download and install dplyr, c.f.

[jgeller112]

On the demo, I think this is an issue with the upstream webR package repository. There was a behind-the-scenes change to packages that re-arranged a few things, c.f. https://github.com/r-wasm/webr/issues/245

Glancing at the install command, it's taking time for each of ggplot2's dependencies. Near the end, the system seems to error when trying download and install dplyr, c.f.

This shouldn't be an issue in the patches version?

[coatless]

@jgeller112:

This shouldn't be an issue in the patches version?

Correct. The above is tied to 0.0.4 of quarto-webr that used webR v0.1.0 (R 4.1).

[jgeller112]

@jgeller112:

This shouldn't be an issue in the patches version?

Correct. The above is tied to 0.0.4 of quarto-webr that used webR v0.1.0 (R 4.1).

I'll hold off on trying to make this work and wait for the patch then.

[jgeller112]

@jgeller112:

This shouldn't be an issue in the patches version?

Correct. The above is tied to 0.0.4 of quarto-webr that used webR v0.1.0 (R 4.1).

I'll hold off on trying to make this work and wait for the patch then.

Will this be updated when the patch goes through?

[coatless]

@jgeller112 yup. I'll make sure to let you know.

For now, we're waiting for pandoc's next point release which should happen soon (tm). From there, we can roll the changes into quarto pretty quickly.

[dlsun]

Since it looks like it may take a while for pandoc's next release, do you have any suggestions about how to do this patch myself on my local machine, in the meantime?

[coatless]

So, I can probably walk through the compilation steps I went through above if your computer is a Mac. If it's Windows, I'll be no help there.

That said, I'm pretty sure JGM will have a release soonish as we're almost a month out from the last one.

[dlsun]

Luckily I have a Mac. Happy to give it a try!

[dlsun]

@coatless It doesn't seem like pandoc is releasing a new version soon, would you be able to give some pointers about how I can patch the development version of pandoc to use with quarto and quarto-webr?

[coatless]

Sure. Though, I strongly recommend against what I'm sharing next...

Again, we DO NOT RECOMMEND using an unofficially patched Quarto version...

One last time.... I'm not responsible for anything that goes wrong.

---

Okidokie, with the legalese now covered, let's get started...

The following will work on an arm64/M1/M2 mac as I was only able to compile pandoc on arch64.

1. Grab a copy of a modified version of Quarto here:

git clone git@github.com:coatless-quarto/quarto-cli.git

2. Open the quarto-cli.code-workspace using Visual Studio Code.

3. Inside of the workspace's Terminal, please run:

./configure.sh

This will build Quarto with the modified pandoc version.

From there, you should get a path that looks like:

/Users/<username>/<path>/<to>/<repo>/quarto-cli/package/dist/bin/quarto

To avoid typing that out, you'll want to add on a per-session basis:

export PATH="/Users/<username>/<path>/<to>/<repo>/quarto-cli/package/dist/bin/quarto:${PATH}"

This should give you the output of:

/Users/<username>/<path>/<to>/<repo>/quarto-cli/package/dist/bin/quarto --version
99.9.9

Using this version of Quarto, you should be able to render your revealjs presentation using:

/Users/<username>/<path>/<to>/<repo>/quarto-cli/package/dist/bin/quarto preview webr-revealjs.qmd --no-browser --no-watch-inputs

where a sample document would be:

---
title: webR in Quarto RevealJS Presentations
format: revealjs
engine: knitr
filters:
  - webr
---

This is a webr-enabled code cell in a Quarto revealjs presentation.

```{webr-r}
print("Hello quarto-webr World!")

-3 + 5

• Run selected code using either:
  • macOS: ⌘ + ↩/Return
  • Windows/Linux: Ctrl + ↩/Enter
• Run the entire code by clicking the "Run code" button or pressing Shift+↩.

[dlsun]

Thanks, this worked for me!

[alexCardazzi]

For those of us more inclined to heed legalese, has there been an update?

[coatless]

@alexCardazzi still waiting on a point release from pandoc.

https://github.com/jgm/pandoc

[coatless]

Yesterday, Pandoc released a point release (3.1.9) with the fix in it. We're now moving over to get the included pandoc version in Quarto updated.

Issue with the "bump" is at:

https://github.com/quarto-dev/quarto-cli/issues/5666

[coatless]

The main Quarto team has prepared a PR that is going to bump the dependencies, including Pandoc.

https://github.com/quarto-dev/quarto-cli/pull/7419

So, my next update will be when the prerelease build contains the new version.

[alexCardazzi]

Apologies for the novice question -- could you please provide some steps for how I might implement the fix? I think I see that you've committed it, but I am not sure what I need to update besides quarto-webr. Thank you in advance.

[coatless]

@alexCardazzi Quarto has yet to bump the dependencies. The PR https://github.com/quarto-dev/quarto-cli/pull/7419 is still open. Maybe this week the PR will be merged?

From there, it's just grabbing a copy of the pre-release. I'll post those instructions if needed when the dependencies are upgraded.

[alexCardazzi]

Hi, @coatless, can you please provide some instructions to update? No rush, just wanting to make sure I can get some help on this when you have a second. Thank you, I appreciate it (and this whole endeavor, it's really amazing)!

[coatless]

@alexCardazzi There's a slight snag with the quarto pre-release due to a circular dependency hiccup that is preventing the pre-release build from rendering documents and listing updated binaries on Quarto's website. c.f. https://github.com/quarto-dev/quarto-cli/pull/7564 and https://github.com/quarto-dev/quarto-cli/pull/7562.

So, expect some notes to come a bit later tonight when that is seemingly resolved.

[cscheid]

1.4.501 should fix the problem. We apologize for the hiccup, this is a new upstream bug on deno bundle that we just ran into...

[coatless]

@cscheid no worries! We're thrilled to have a pre-release build containing the pandoc fix.

[coatless]

@alexCardazzi @jgeller112 @Lourenzutti @dlsun @chendaniely @parmsam-pfizer @dgkf-roche

The official pre-release Quarto binaries are now available with the patched version of pandoc that allows for the use of the RevealJS with the quarto-webr extension.

Please follow the instructions below to create a functional revealjs Quarto presentation augmented with webR:

1. Obtain and install the pre-release version of Quarto that is 1.4.502 or greater at: https://quarto.org/docs/download/prerelease
2. Within the Quarto project containing the revealjs presentation, install the latest version of the quarto-webr extension by typing into Terminal:

quarto add coatless/quarto-webr

Note: The latest version (v0.3.8) contains a fix for the status bar in revealjs format.

3. Inside the Quarto document's YAML field, please make sure to specify the following:

---
title: "quarto-webr Demo RevealJS Document"
format: revealjs
webr:
  packages: ['ggplot2', 'dplyr']  # if using ggplot2 or dplyr. Otherwise, omit.
filters:
- webr
---

From there, please use the webr-r code cell:

```{webr-r}

For more, consider looking over the `revealjs` example presentation: 

- Source code: <https://github.com/coatless/quarto-webr/tree/main/examples/revealjs>
- Rendered example: <https://quarto-webr.thecoatlessprofessor.com/examples/revealjs/#/title-slide>

If you wish to embed your lecture slides on your website, you can also see an example here: 

- Source code: <https://github.com/coatless/quarto-webr/blob/main/examples/website/slide-embed.qmd>
- Rendered example: <https://quarto-webr.thecoatlessprofessor.com/examples/website/slide-embed.html>

[Lourenzutti]

Thank you very much James!

On Tue, Nov 14, 2023, 01:27 James J Balamuta @.***> wrote:

@alexCardazzi https://github.com/alexCardazzi @jgeller112 https://github.com/jgeller112 @Lourenzutti https://github.com/Lourenzutti @dlsun https://github.com/dlsun @chendaniely https://github.com/chendaniely @parmsam-pfizer https://github.com/parmsam-pfizer @dgkf-roche https://github.com/dgkf-roche

The official pre-release Quarto binaries are now available with the patched version of pandoc that allows for the use of the RevealJS with the quarto-webr extension.

Please follow the instructions below to create a functional revealjs Quarto presentation augmented with webR:

1. Obtain and install the pre-release version of Quarto that is 1.4.502 or greater at: https://quarto.org/docs/download/prerelease
2. Within the Quarto project containing the revealjs presentation, install the latest version of the quarto-webr extension by typing into Terminal:

quarto add coatless/quarto-webr

Note: The latest version (v0.3.8) contains a fix for the status bar in revealjs format.

1. Inside the Quarto document's YAML field, please make sure to specify the following:

---title: "quarto-webr Demo RevealJS Document"format: revealjs: resources:

• webr-serviceworker.js
• webr-worker.jswebr: channel-type: "automatic" packages: ['ggplot2', 'dplyr']filters:

  • webr

From there, please use the webr-r code cell:

{webr-r}

You may opt for channel-type: "post-message" if you want to avoid the headache of the service workers or just keep a global copy of the extension.

For more, consider looking over the revealjs example presentation:

• Source code: https://github.com/coatless/quarto-webr/tree/main/examples/revealjs
• Rendered example: https://quarto-webr.thecoatlessprofessor.com/examples/revealjs/#/title-slide

If you wish to embed your lecture slides on your website, you can also see an example here:

• Source code: https://github.com/coatless/quarto-webr/blob/main/examples/website/slide-embed.qmd
• Rendered example: https://quarto-webr.thecoatlessprofessor.com/examples/website/slide-embed.html

— Reply to this email directly, view it on GitHub https://github.com/coatless/quarto-webr/issues/14#issuecomment-1809841554, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABMTJPLRIGWLDBOXBDUIWM3YEM2R7AVCNFSM6AAAAAAW5OQCPSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBZHA2DCNJVGQ . You are receiving this because you were mentioned.Message ID: @.***>

[mcanouil]

How one can remove the webr loading div on the title page?

The div has no specific element allowing to target it easily using CSS.

<div>
  <div class="quarto-title-meta-heading">WebR Status</div>
  <div class="quarto-title-meta-contents">
    <p id="startup" aria-live="assertive">🟢 Ready!</p>
   </div>
</div>

[coatless]

@mcanouil set show-startup-message: false in the webr key.

---
title: WebR in Quarto HTML Documents
format: revealjs
engine: knitr
webr: 
  show-startup-message: false
filters:
  - webr
---

https://quarto-webr.thecoatlessprofessor.com/qwebr-meta-options.html#native-extension-options

[mcanouil]

Thanks, I missed it from the documentation. Maybe add a note in that section about revealjs to help with the search engine to find this as I believe most user of the revealjs won't want the startup to mess with their title slide layout.

[coatless]

@mcanouil I'll also add a CSS ID. Tracking it in #110.

[jgeller112]

Will open up a new issue if need be, but is there a way to capture new code written on the slides to be saved.

[coatless]

@jgeller112 not at the moment. Tracking as a feature request in #112.