how do I use sidebars/toolboxes for input?

[lostmygithubaccount]

Description

The examples here are all empty: https://quarto.org/docs/dashboards/inputs.html

I just need a few text/single select inputs for a dashboard I'm using. see code below

[lostmygithubaccount]

found an example here I believe: https://github.com/quarto-dev/quarto-web/blob/8dac33b1e847a06215d07f5a0b31b52052672cd3/docs/dashboards/_inputs.qmd#L71C1-L76

[mcanouil]

Your code is not reproducible, so can't really help.

The option symbol should have no space in it: #| not # |. Syntax matters.

You should start playing with the example, then tweak the example, and finally try your own thing.
There are no shortcuts to learn something.

[lostmygithubaccount]

I was hoping this was something simple -- I've used Ibis, Quarto (including dashboards), and Plotly before but the documentation for how to use inputs in Quarto dashboards (linked at the top) just shows empty code. So I've been looking around for an example. The one I found I followed, but it results in empty output where the plot should be with no information to help debug (hence asking for help here). Here's a reproducible example:

pip install 'ibis-framework[duckdb,examples]' shiny itables plotly

(might be missing some installs)

Dashboard qmd:

--- 
title: "repro"
format:
  dashboard:
    theme: darkly
    scrolling: true
--- 

```{python}
#| echo: false
#| output: false
import ibis

import plotly.express as px

from shiny import ui, render
from itables import show

# set plotly express to dark mode
px.defaults.template = "plotly_dark"

ibis.options.interactive = True

t = ibis.examples.penguins.fetch()
```

## {height=25%}

```{python}
show(t.limit(10).to_pandas())
```

```{python}
show(
  t.group_by(ibis._.species)
  .agg(
    count=ibis._.count()
  )
  .order_by(ibis._["count"].desc())
  .to_pandas()
)
```

## {height=10%}

### {.toolbar}

```{python}
#| panel: input
ui.input_text("species", "Species:", value="Gentoo")
```

### plot

```{python}
@render.plot
def bar_chart():
    px.bar(
        t.filter(t.species == input.species())
        .group_by(ibis._.island)
        .agg(
            count=ibis._.count()
        ),
        x="island",
        y="count",
    )
```

dashboard preview:

[mcanouil]

Look at the links I shared: https://quarto.org/docs/dashboards/interactivity/shiny-python/index.html

[lostmygithubaccount]

I did. The only noticable difference seems to be the server: shiny which does not change anything when added.

Using that example there, it seems like plotly simply doesn't work (or I'm still doing something wrong):

note: plotly histogram code below is off but the point is plotly plots don't seem to work unless I'm missing something

---
title: "Penguin Bills"
format: dashboard
server: shiny
---

```{python}
import seaborn as sns
import plotly.express as px
penguins = sns.load_dataset("penguins")
```

## {.sidebar}

```{python}
from shiny import render, ui
ui.input_select("x", "Variable:",
                choices=["bill_length_mm", "bill_depth_mm"])
ui.input_select("dist", "Distribution:", choices=["hist", "kde"])
ui.input_checkbox("rug", "Show rug marks", value = False)
```

## Column

```{python}
@render.plot
def displot():
    #sns.displot(
    #    data=penguins, hue="species", multiple="stack",
    #    x=input.x(), rug=input.rug(), kind=input.dist())

    px.histogram(penguins, x=input.x(), color="species", marginal="rug",
                 histfunc="count", barmode="overlay")
```

versus w/ the seaborn code:

it's very difficult to debug with no documentation and silent errors (hence coming here to ask for help)

[mcanouil]

See https://quarto.org/docs/troubleshooting/index.html.
Here your issue is mostly about Python rather than Quarto.

Take a look at other discussions involving plotly:

• Plotly plots are not rendering #5264
• https://github.com/quarto-dev/quarto-cli/discussions?discussions_q=plotly

[mcanouil]

FWIW, there are two examples in the gallery: https://quarto.org/docs/gallery/#dashboards

• https://github.com/wch/retirement-simulation-dashboard
• https://github.com/jjallaire/penguins-dashboard

And: https://shiny.posit.co/py/docs/shinylive.html

As of today, the only thing that does not seem to support # | in Python-like code cell is the Quarto-shinylive extension.

---
title: "Quarto Playground"
format: html
filters:
  - shinylive
---

```{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)
```

[mcanouil]

• # | is not supported quarto-ext/shinylive#67