Interactive WebR playground

[grantmcdermott]

With the advent of WebR, it would be cool to provide an interactive playground where people can test out our example code directly in their browsers. No local R installation required.

The quarto-webr extension makes this really easy to serve via a standard website/html doc. But I'm not sure whether it would work with our bespoke VuePress setup.

[kylebutts]

Does quarto-webr share state across code blocks? Or would you need to load the data for each code block?

[grantmcdermott]

Yes, it shares state within the same document.

Quick .qmd example file. (You'll need to run quarto add coatless/quarto-webr to grab the extension first.)

---
title: data.table in a WebR Quarto doc
format: html
engine: knitr
webr: 
  show-startup-message: false    # Disable displaying status of webR initialization
  packages: ['data.table'] # Install R packages on document open
  autoload-packages: false
filters:
  - webr
---

```{webr-r}
library(data.table)
```

Load some data.

```{webr-r}
aq = as.data.table(airquality)
aq
```

Subset rows

```{webr-r}
aq[1:5] 
aq[Temp >= 65]
```

Collapse by group

```{webr-r}
aq[, .(mean_temp = mean(Temp)), by = Month] 
```

etc.

[grantmcdermott]

The bigger problem, as I've just discovered, is that we can't yet read datasets from the web. That requires the curl package, which doesn't yet have a WebR binary equivalent (at least not in my browser version).

Although I believe that it could be supported in the WebR REPL. More details here.

[kylebutts]

Sorry to ask you questions rather than googling, but could you have a startup script for WebR? Not the cleanest solution, but if we use a smaller version of flights, we could inline a data.table() creation call?

[grantmcdermott]

Sorry to ask you questions rather than googling, but could you have a startup script for WebR?

Yes, I think so: https://docs.r-wasm.org/webr/latest/downloading.html

[kylebutts]

@grantmcdermott What do you think about using quarto and displaying the output below. Probably way simpler than having runnable code chunks but still get the live preview?

I have a demo trying it out. The dev experience is not great (Statamarkdown is slow; cache helps a little but is buggy), but it looks really nice. I don't think this is a problem since the site is more or less done.

Repo: https://github.com/kylebutts/stata2r_v3/
Live: https://raw.githack.com/kylebutts/stata2r_v3/main/_site/data_table.html

[grantmcdermott]

Sorry for being slow @kylebutts. Two many balls in the air. Looks cool. I guess i have two immediate concerns:

• how will this handle cases where we show multiple ways to achieve the same outcome?
• how will PRs work? Hopefully less of an issue since the site is more or less compete, but having to manually render, especially under Stata's fundamental versioning limitations/ restrictions could be a PITA. Statamarkdown is it's own pain, as you note. (Aside: Is the reason that we don't go through pystata because Quarto doesn't like multiple languages computation? Couldn't we just go through reticulate in that case?)

[kylebutts]

Not a problem @grantmcdermott! I figure that displaying results of the code blocks gets us 90% of the way there. Then folks can download .qmd files if they want to try things out.

I'll have to manually rerender the website with my Stata instead of a github action. I don't have Stata 17, so I can't use pystata..