Quarto Presentation: Revealjs #14
Comments
|
So, it looks like there's a bug with Quarto adding the startup code cell in the If you downgrade to 0.0.4, then the webR initialization should work. Type in the R console: quarto add coatless/[email protected]That said, We're aiming to make a few modifications later this summer to the base style to address it. For now, the two options are:
Disable responsive scalingWe can remove responsive scaling by setting ---
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 slidesDisable layoutsAlternatively, we can stop ---
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 |
coatless
added
t: bug
|
Fantastic, thank you! |
|
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 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: From here, the change over to Monaco Editor from CodeMirror should hopefully fix the auto-resizing being done by |
|
Origination of the bug is actually in |
|
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. |
|
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: |
|
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.
If there's not a timeline, is there a workaround to be able to use packages with WebR and reveal.js? |
|
@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 ----
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. |
|
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. quarto-dev/quarto-cli#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. 
|
|
PR was sent to Pandoc (jgm/pandoc#9110) and an update was posted over on the Quarto tracker (quarto-dev/quarto-cli#5666) |
I tried using this code but it is not recognizing calls to libraries in the webr-r chunks. |
|
@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. |
|
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 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: |
|
Here is a quick hopefully reproducible example |
|
Sounds like the patch in the pre-release will be very soon. |
|
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. r-wasm/webr#245 Glancing at the install command, it's taking time for each of 
|
This shouldn't be an issue in the patches version? |
Correct. The above is tied to 0.0.4 of |
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? |
|
@jgeller112 yup. I'll make sure to let you know. For now, we're waiting for |
|
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? |
|
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. |
|
Luckily I have a Mac. Happy to give it a try! |
|
@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? |
|
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.
git clone [email protected]:coatless-quarto/quarto-cli.git
./configure.shThis 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/quartoTo 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.9Using this version of Quarto, you should be able to render your /Users/<username>/<path>/<to>/<repo>/quarto-cli/package/dist/bin/quarto preview webr-revealjs.qmd --no-browser --no-watch-inputswhere 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: <kbd>⌘</kbd> + <kbd>↩/Return</kbd>
- Windows/Linux: <kbd>Ctrl</kbd> + <kbd>↩/Enter</kbd>
- Run the entire code by clicking the "Run code" button or pressing <kbd>Shift</kbd>+<kbd>↩</kbd>.
|
|
Thanks, this worked for me! |
|
For those of us more inclined to heed legalese, has there been an update? |
|
@alexCardazzi still waiting on a point release from pandoc. |
|
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: |
|
The main Quarto team has prepared a PR that is going to bump the dependencies, including Pandoc. So, my next update will be when the prerelease build contains the new version. |
|
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. |
|
@alexCardazzi Quarto has yet to bump the dependencies. The PR quarto-dev/quarto-cli#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. |
|
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)! |
|
@alexCardazzi There's a slight snag with the So, expect some notes to come a bit later tonight when that is seemingly resolved. |
|
1.4.501 should fix the problem. We apologize for the hiccup, this is a new upstream bug on |
|
@cscheid no worries! We're thrilled to have a pre-release build containing the pandoc fix. |
|
@alexCardazzi @jgeller112 @Lourenzutti @dlsun @chendaniely @parmsam-pfizer @dgkf-roche The official pre-release Quarto binaries are now available with the patched version of Please follow the instructions below to create a functional
quarto add coatless/quarto-webrNote: The latest version (v0.3.8) contains a fix for the status bar in
---
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}
```For more, consider looking over the
If you wish to embed your lecture slides on your website, you can also see an example here: |
|
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
<#14 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABMTJPLRIGWLDBOXBDUIWM3YEM2R7AVCNFSM6AAAAAAW5OQCPSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBZHA2DCNJVGQ>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
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> |
|
@mcanouil set ---
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 |
|
Thanks, I missed it from the documentation. |
|
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. |
|
@jgeller112 not at the moment. Tracking as a feature request in #112. |
Hi!!
Thanks for working on this!
It would be amazing to have this working on the Revealjs presentation.
It is working as the
htmloutput, but if I use Revealjs, it doesn't work.Any idea/hint what is breaking in the revealjs output that I should edit?
The text was updated successfully, but these errors were encountered: