quarto-ext/shinylive

Quarto extension to embed Shinylive for Python applications

shinylive's Issues

Folder import

It's really nice to use a folder structure to create an edit Shiny apps in VS code, and it can be a bit awkward to write multiple files into a single code chunk. I put together a workaround which lets you keep your shiny files in a folder, but it would be good to include a shinylive option which did the same thing. Maybe something like this:

#| include_folder: "apps/app_1"
#| app_file: "my_app.py"
#| exclude_files: "gitignore"

This functions reads the files in a directory and inserts a shinylive chunk:

from pathlib import Path


def includ_shiny_folder(path):
    folder_path = Path(__file__).parent / path

    # Start with the header
    header = "```{shinylive-python}\n#| standalone: true\n#| components: [editor, viewer]\n#| layout: horizontal"
    print(header)

    # Print contents of app.py
    app_path = folder_path / "app.py"

    with open(app_path, "r") as app_file:
        app_contents = app_file.read()
        print(app_contents)

    file_paths = folder_path.glob("**/*")

    # Additional files need to start with ## file:
    for file_path in file_paths:
        if file_path.name != "app.py":
            print(f"\n## file: {file_path.name}")
            with open(file_path, "r") as file:
                file_contents = file.read()
                print(file_contents)

    # Finish with the closing tag
    print("```")

To call this function us echo: false and output: asis to include the raw markdown in the md file.

```{python}
#| echo: false
#| output: asis
include_shiny_folder("apps/app_1")
.```

Add ability to set `editorHeight`

In some layouts, in particular the vertical layout, the entire size of the embedded shinylive component is not completely controlled by viewerHeight. For long apps, it would be helpful to be able to limit the number of lines shown, either via an option like editorHeight or editorLines.

Any plans to create the R equivalent of this repo?

Apologies if this has been answered elsewhere, but I've looked around and haven't seen it.

In the About section of this repo, you state that it is a "Quarto extension to embed Shinylive for Python applications".

Whilst I've seen quarto-webr (A "Quarto Extension to Embed webR" into associated Quarto goodness) and r-shinylive ("An R package for exporting Shiny applications as Shinylive applications"), are there any plans to create the R equivalent of this repo (i.e. a "Quarto extension to embed Shinylive for R applications")? Or am I just missing something obvious?

Thank you for all your terrific work in this area.

Support for shinylive in rmarkdown chunks too?

Perhaps I have simply just missed the information online, but now that shinylive-r works for quarto chunks, are there plans to support this feature in Rmarkdown chunks as well? Happy to transfer this post to the relevant project if this is not the appropriate spot. This would be a very interesting addition for those using {blogdown} or similar Rmarkdown flavored packages. Happy to transfer this post to the relevant project if this is not the appropriate spot.

Use shinylive in a quarto html document rather than a website

Hi,

I would like to able to send a single html file document which contains a shinylive component. Is this possible?

If so, what would I need to do? If not, are there plans to make it possible?

If the project type is not a website I get the following error

"ERROR: The shinylive extension must be used in a Quarto project directory (with a _quarto.yml file)."

Many thanks!

Problem importing opencv in shinylive inside quarto document

I am trying to import a package supported by pyodide in shinylive under a quarto document. The main reason is I want to load an image using opencv. Firstly, this code:

#| standalone: true
#| viewerHeight: 420
from shiny import App, render, ui
import numpy as np
import matplotlib.pyplot as plt
import cv2

gives me the following error:

Error starting app! Traceback (most recent call last): File "", line 202, in _start_app File "/lib/python3.10/importlib/init.py", line 126, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "", line 1053, in _gcd_import File "", line 1030, in _find_and_load File "", line 1009, in _find_and_load_unlocked File "", line 688, in _load_unlocked
File "", line 883, in exec_module File "", line 241, in _call_with_frames_removed File "/home/pyodide/app_4mr6ploxwzzzk07rc0d4/app.py", line 2, in import cv2 ModuleNotFoundError: The module 'opencv-python' is included in the Pyodide distribution, but it is not installed. You can install it by calling: await micropip.install("opencv-python") in Python, or await pyodide.loadPackage("opencv-python") in JavaScript See https://pyodide.org/en/stable/usage/loading-packages.html for more details.

I also tried:

#| standalone: true
#| viewerHeight: 420
from shiny import App, render, ui
import numpy as np
import matplotlib.pyplot as plt
import pyodide_js
await pyodide_js.loadPackage('opencv-python')
import cv2

but this gives me the following error:

Traceback (most recent call last): File "", line 202, in _start_app File "/lib/python3.10/importlib/init.py", line 126, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "", line 1053, in _gcd_import File "", line 1030, in _find_and_load File "", line 1009, in _find_and_load_unlocked File "", line 688, in _load_unlocked
File "", line 879, in exec_module File "", line 1017, in get_code File "", line 947, in source_to_code File "", line 241, in _call_with_frames_removed File "/home/pyodide/app_4mr6ploxwzzzk07rc0d4/app.py", line 3 await pyodide_js.loadPackage('opencv-python') ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ SyntaxError: 'await' outside function

Any hint on how could I successfully load supported packages?

Option to return just the iframe

Currently when you view a shinylive app in quarto you end up with a bunch of containers around the iframe which holds the app. This is great when you want the editor/viewer experience, but makes it quite hard to style if you just want to include the app in another site. Can we have an option for the block to just return an iframe?

Unable to render quarto doc with embedded shinylive

Currently running quarto version 1.2.157, shinylive version 0.0.7.

After following the directions on https://github.com/quarto-ext/shinylive, when I try to render the quarto doc, I get the following error:

❯ quarto preview /Users/ryanjohnson/Desktop/Shiny_for_Python/Shiny4Python.qmd --to html --no-browser --no-watch-inputs
pandoc 
  to: html
  output-file: Shiny4Python.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: Shiny For Python
  
Error: Option '--sw-dir' requires an argument.
Error running filter /Users/ryanjohnson/Desktop/Shiny_for_Python/_extensions/quarto-ext/shinylive/shinylive.lua:
Error running shinylive (error code 2): <no output>
stack traceback:
        ...or_Python/_extensions/quarto-ext/shinylive/shinylive.lua:35: in function 'getShinyliveBaseDeps'
        ...or_Python/_extensions/quarto-ext/shinylive/shinylive.lua:17: in function 'ensureShinyliveSetup'
        ...or_Python/_extensions/quarto-ext/shinylive/shinylive.lua:50: in function <...or_Python/_extensions/quarto-ext/shinylive/shinylive.lua:48>

I've tried to figure out what the --sw-dir is, but not having any luck. Let me know if you need any more information!

A terminal component blocks the execution of all subsequent viewers

If a code block includes the component terminal all the subsequent code blocks that have a viewer are not rendered (with quarto version 1.3.450).

The following is a code example that does not allow the 2 last code blocks to render.

```{shinylive-python}
#| components: [editor, terminal]

print('First code will prevent the rest of the code blocks from showing their rendered output')
```

```{shinylive-python}
#| standalone: true
#| components: [editor, viewer]
from shiny import App, ui

app_ui = ui.page_fluid("The text in the second code block is not shown.")

app = App(app_ui, None)
```

```{shinylive-python}
#| standalone: true
#| components: [editor, viewer]
from shiny import App, ui

app_ui = ui.page_fluid("The text in the third code block is not shown.")

app = App(app_ui, None)
```

A live example can be seen at https://tailor-uob.github.io/mooc_trustworthy_ai/cha_sl/shinylive-not-working.html
and the source code of the example at https://github.com/TAILOR-UoB/mooc_trustworthy_ai/blob/main/cha_sl/shinylive-not-working.qmd

How to run the example sine.qmd ?

Hi everyone,
I am trying to reproduce the example sine.qmd but it does not work. I have followed all instructions in the README file.
I am trying to produce the interactive document using quarto render sine.qmd. The command does produce a sine.html file without any error.

• When I try to open the file with my web browser (as I do with my other quarto projects) I get this error in the web browser:
  "Shinylive uses a Service Worker, which requires either a connection to localhost, or a connection via https."
• When I use quarto preview sine.qmd instead and open the html file, I just see the shinylive code block rendered as plain text.

Can someone explain the workflow in full details ? Maybe it involves installing Pyodide but there is nothing clearly mentioning this in the README.

Issue generating example shinylive output on windows 10

I am unable to get the example code shown on the readme to correctly render as a shiny app on windows 10. I created a quarto project with the below files an ran quarto render and got the following output:

pandoc
  to: html
  output-file: ShinyQuarto.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png

metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: Quarto Basics

WARNING: Specified QUARTO_DENO does not exist, using built in deno
Output created: ShinyQuarto.html 

The rendered .html just shows the code in the shinylive python cell as plain text rather than showing the app itself.

Quartro version: 1.2.247
python version: 3.9.13

ShinyQuarto.qmd

```
---
title: Quarto Basics
format: html
filters:
  - shinylive
---

This is a Shinylive application embedded in a Quarto doc.

```{shinylive-python}
#| standalone: true

from shiny import *

app_ui = ui.page_fluid(
    ui.input_slider("n", "N", 0, 100, 40),
    ui.output_text_verbatim("txt"),
)

def server(input, output, session):
    @output
    @render.text
    def txt():
        return f"The value of n*2 is {input.n() * 2}"

app = App(app_ui, server)
```

_quarto.yml

project:
  title: "ShinyQuarto"
filters:
  - shinylive

Can't run shinylive, module error on ts

Tried spinning up my old code to work on some parts, and when I try to render I get the following error:

error: Uncaught SyntaxError: The requested module 'https://deno.land/std/io/buffer.ts' does not provide an export named 'readLines'
import { readLines } from "https://deno.land/std/io/buffer.ts";
         ^
    at <anonymous> (file:///home/zach/.cache/shinylive/shinylive-0.1.3/scripts/codeblock-to-json.js:2776:10)
Error running filter /home/zach/quarto-cli/src/resources/filters/main.lua:
Error running quarto (error code 1): <no output>
stack traceback:
        ...-Learning/_extensions/quarto-ext/shinylive/shinylive.lua:72: in function <...-Learning/_extensions/quarto-ext/shinylive/shinylive.lua:67>
        [C]: in ?
        [C]: in method 'walk'
        ...h/quarto-cli/src/resources/filters/./ast/customnodes.lua:72: in function 'run_emulated_filter'
        .../quarto-cli/src/resources/filters/./ast/runemulation.lua:34: in local 'callback'
        [string "..."]:1884: in field 'withScriptFile'
        .../quarto-cli/src/resources/filters/./ast/runemulation.lua:43: in upvalue 'run_emulated_filter_chain'
        .../quarto-cli/src/resources/filters/./ast/runemulation.lua:78: in function <.../quarto-cli/src/resources/filters/./ast/runemulation.lua:75>
stack traceback:
        ...h/quarto-cli/src/resources/filters/./ast/customnodes.lua:72: in function 'run_emulated_filter'
        .../quarto-cli/src/resources/filters/./ast/runemulation.lua:34: in local 'callback'
        [string "..."]:1884: in field 'withScriptFile'
        .../quarto-cli/src/resources/filters/./ast/runemulation.lua:43: in upvalue 'run_emulated_filter_chain'
        .../quarto-cli/src/resources/filters/./ast/runemulation.lua:78: in function <.../quarto-cli/src/resources/filters/./ast/runemulation.lua:75>
ERROR: Error
    at renderFiles (file:///home/zach/quarto-cli/src/command/render/render-files.ts:546:23)
    at eventLoopTick (ext:core/01_core.js:181:11)
    at async renderProject (file:///home/zach/quarto-cli/src/command/render/project.ts:266:23)
    at async serveProject (file:///home/zach/quarto-cli/src/project/serve/serve.ts:208:24)
    at async Command.fn (file:///home/zach/quarto-cli/src/command/preview/cmd.ts:331:9)
    at async Command.execute (file:///home/zach/quarto-cli/src/vendor/deno.land/x/[email protected]/command/command.ts:1790:7)
    at async quarto (file:///home/zach/quarto-cli/src/quarto.ts:135:3)
    at async file:///home/zach/quarto-cli/src/quarto.ts:167:5

shinylive is v0.0.14, code is as follows:

```{shinylive-python}
#| standalone: true

def addition(a:int, b:int) -> int:
    "Returns the sum of `a` and `b`"
    return a+b

def multiplication(a:int, b:int) -> int:
    "Returns the product of `a` and `b`"
    return a*b

print(addition(2,3))
print(multiplication(2,3))
```

Can one load custom wheel files? (pyodide-built; out of tree)

Hi Team Py-Shiny,

This is really amazing work; thank you. I am wondering if there current the capability to sideload pyodide-built .whl into the environment. I see something similar is done with the requirements.txt file in the py-shiny repo and would hope to be able to do the something similar here.

Thanks,
zach cp

Issue with `embed-resources: true` and shinylive

Hi all!

Love the project :)

Hit a fun snag when I was getting a recent blog up and going where if embed-resources:true is set in my _quarto.yml, shinylive just won't render!

Minimal repr:

YAML:

project:
  type: website
format:
  html:
    css: styles.css
    embed-resources: true

somepage.qmd:

# A test

```{shinylive-python}
#| components: [editor, terminal]

def hello_world():
  "Something that prints Hello World"
  return "Hello World"
 

hello_world()
```

Result:

Whereas normally I'd expect a shinylive app to be there!

Note that if I don't have embed-resources, it works fine :) Thanks!

Auto viewerHeight?

Is there currently a way to have the viewerHeight automatically expand with content size, rather than scroll? Recommendations for alternative ways around this? I have a few responsive Shiny applications that rearrange their layouts with smaller width screens and would like to avoid scrolling within the shinylive viewer.

Only add unique resources to quarto's `"shinylive"` htmldependency

If there are multiple python apps on the same page, duplicate resource files will be added to the shinylive dependency.

shinylive on windows apparently not working?

I can't forward issues across organizations, but take a look at quarto-dev/quarto-cli#4207

`renv` library does not seem to be supported by extension lookup

I tried https://github.com/coatless-quarto/r-shinylive-demo using a renv setup which is becoming the basis, but unfortunately, the shinylive extension is looking for the R shinylive package elsewhere.

See https://github.com/mcanouil/quarto-codespaces/tree/test/r-shinylive.

Am I missing something?

@mcanouil ➜ /workspaces/quarto-codespaces (test/r-shinylive) $ quarto preview /workspaces/quarto-codespaces/index.qmd --no-browser --no-watch-inputs
pandoc 
  to: html
  output-file: index.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: Joe Cheng's r-shinylive App in a Quarto document!
  resources:
    - shinylive-sw.js
  
Warning message:
The 'yaml' package is required to parse dependencies within Quarto Markdown files
Consider installing it with `install.packages("yaml")`. 
Error in loadNamespace(x) : there is no package called ‘shinylive’
Calls: loadNamespace -> withRestarts -> withOneRestart -> doWithOneRestart
Execution halted
(E) Error running 'Rscript' command. Perhaps you need to install / update the 'shinylive' R package?
 Error:
 pandoc.pipe.error {command: "Rscript", error_code: 1, output: ""}
Error running filter /opt/quarto/share/filters/main.lua:
...odespaces/_extensions/quarto-ext/shinylive/shinylive.lua:40: Error running 'Rscript' command. Perhaps you need to install / update the 'shinylive' R package?

stack traceback:
        ...odespaces/_extensions/quarto-ext/shinylive/shinylive.lua:40: in global 'throw_quarto_error'
        ...odespaces/_extensions/quarto-ext/shinylive/shinylive.lua:86: in global 'callRShinylive'
        ...odespaces/_extensions/quarto-ext/shinylive/shinylive.lua:113: in global 'callShinylive'
        ...odespaces/_extensions/quarto-ext/shinylive/shinylive.lua:286: in global 'ensureBaseSetup'
        ...odespaces/_extensions/quarto-ext/shinylive/shinylive.lua:315: in global 'ensureLanguageSetup'
        ...odespaces/_extensions/quarto-ext/shinylive/shinylive.lua:414: in function <...odespaces/_extensions/quarto-ext/shinylive/shinylive.lua:398>
        [C]: in ?
        [C]: in method 'walk'
        /opt/quarto/share/filters/main.lua:205: in local 'checked_walk'
        /opt/quarto/share/filters/main.lua:257: in function 'run_emulated_filter'
        /opt/quarto/share/filters/main.lua:917: in local 'callback'
        [string "..."]:1888: in field 'withScriptFile'
        /opt/quarto/share/filters/main.lua:930: in upvalue 'run_emulated_filter_chain'
        /opt/quarto/share/filters/main.lua:968: in function </opt/quarto/share/filters/main.lua:965>
stack traceback:
        /opt/quarto/share/filters/main.lua:205: in local 'checked_walk'
        /opt/quarto/share/filters/main.lua:257: in function 'run_emulated_filter'
        /opt/quarto/share/filters/main.lua:917: in local 'callback'
        [string "..."]:1888: in field 'withScriptFile'
        /opt/quarto/share/filters/main.lua:930: in upvalue 'run_emulated_filter_chain'
        /opt/quarto/share/filters/main.lua:968: in function </opt/quarto/share/filters/main.lua:965>

Edit: Rscript should be ran at the "working directory" used by Quarto.

Quarto 1.4.3 triggers shinylive error due to deno standard library change

Reposted from quarto-dev/quarto#242.

I updated my Macbook to the developer version of quarto, 1.4.303, and noticed that I could no longer render quarto documents that contained Shinylive apps, as I reported #15 (comment).

Rolling back to quarto 1.3.450 made the error go away.

While I was using 1.4.303, I could create the error by ...

To which @jjallaire suggests

This is going to require a change in the shinylive extension to work with the updated version of the deno standard library included with v1.4 (unfortunately it is still shifting around a bit). Could you re-post the issue there?

Note that if shinylive wants to make 2 versions available (one for use with v1.3 and one for v1.4) they can use a branch/tag based installation (as described here: https://quarto.org/docs/extensions/distributing.html#github-distribution) and just update docs accordingly to help users pick the right one.

Quarto breaks if "PYTHONINSPECT=1"

When setting up this awesome extension, and installing everything.
I found that my setup broke with the error:

SystemExit: 0
ERROR: Error running 'shinylive' command. Perhaps you need to install the 'shinylive' Python package?

I determined that the error occurs when the quarto environment has PYTHONINSPECT=1 as suggested in the docs

Removing this caused everything to work.

No clue why this happens, but posting workaround for the benefits of others.

Add link in toolbar to open the app on shinylive

For documentation, blog posts, etc, it would be helpful if there were a button in the toolbar to open the example on shinylive in a new window.

For example, this would allow users to jump out of the py-shiny docs and into a focused editor experience.

Require that r-shinylive's and py-shinylive's asset versions are equal

Could you give an example where data is being loaded locally?

Hi there!

Thanks very much for your amazing work.

I came to shinylive because I was looking for a way to get my shiny apps onto my netlify webpage without having to host them at e.g. shinyapp.io (where I'd have to pay above a certain useage).

I'm fairly comfortable making shiny apps and with R and RMarkdown. But I'm pretty new to Python, and my technical knowledge of what's going on behind the scenes here is very limited.

My apologies for asking what seems like a very basic question. I managed to get your example up and running in a Quarto web project published to netlify, but I'm struggling to figure out how to make an app that is reading data locally. I don't really get what is going on with the file structures and how to refer to them.

For instance, what I'd like to do is something like this:

def server(input, output, session):
    @output
    @render.table
    def table():
    
        df = pd.read_csv(WHAT_GOES_HERE?)
      
        return df

I tried various guesses at 'WHAT_GOES_HERE', and various file structures but couldn't ever find a way to read in the data.

I'd really appreciate it if you could explain, or perhaps put up an example that would help me see how to do this.

Many thanks in advance!

Filter cli output and only parse first JSON line

If my R profile prints something, I'd like for it to not be processed by shinylive extension.

cc @jcheng5

When multiple terminals are present in the same page only the last one is used as an output

I want to create a step by step guide on how to use Python and I have tried to create multiple block codes with an editor and a terminal. It seems that when there are multiple terminals in the same page only the last terminal is used as the output of all of them. However, the input (when clicking on run) seems to be associated with their respective code block.

The following is an example of the problem (with quarto version 1.3.450)

```{shinylive-python}
#| components: [editor, terminal]

print('This is the first code.')
```

```{shinylive-python}
#| components: [editor, terminal]

print('This is the second code.')
```

```{shinylive-python}
#| components: [editor, terminal]

print('This is the last code.')
```

An online example can be found at https://tailor-uob.github.io/mooc_trustworthy_ai/cha_sl/shinylive-not-working-terminals.html
and its source code at https://github.com/TAILOR-UoB/mooc_trustworthy_ai/blob/main/cha_sl/shinylive-not-working-terminals.qmd

Is there a way to fix this?

Support for regular shiny-for-python in quarto

See post linked below. Question: Have you considered combining Quarto + Shiny-for-python as a (more) direct competitor to Streamlit? It could be the gateway for more people in the Python community to get to know Shiny.

quarto-dev/quarto-cli#6312

shinylive not rendering in quartopub

The in-document shinylive extension is working whenever I knit from quarto, but whenever I try to publish to quartopub it disappears after trying to load for a few seconds. The 'editor' section will show before it's done loading but will dissapear with the 'viewer' section.