Reactivity

Reactivity overview

Agenda

• Reactivity overview

• Reactive calculations

• Overriding reactivity

• Side effects

How did Shiny do that?

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 650
from shiny import App, render, ui
import pandas as pd
from pathlib import Path
from plots import dist_plot, scatter_plot

infile = Path(__file__).parent / "penguins.csv"
penguins = pd.read_csv(infile)

app_ui = ui.page_fluid(
    ui.panel_title("Hello Penguins!"),
    ui.layout_sidebar(
        ui.panel_sidebar(
            ui.input_slider(
                "mass",
                "Mass",
                2000,
                8000,
                6000,
            ),
            ui.input_checkbox("trend", "Add trendline"),
        ),
        ui.panel_main(
            ui.output_plot("scatter"),
            ui.output_data_frame("table"),
            ui.output_plot("dist"),
        ),
    ),
)


def server(input, output, session):
    @output
    @render.data_frame
    def table():
        df = penguins.copy()
        filtered = df.loc[df["body_mass"] < input.mass()]
        summary = (
            filtered.set_index("species")
            .groupby(level="species")
            .agg({"bill_length": "mean", "bill_depth": "mean"})
            .reset_index()
        )
        return summary

    @output
    @render.plot
    def dist():
        df = penguins.copy()
        filtered = df.loc[df["body_mass"] < input.mass()]
        return dist_plot(filtered)

    @output
    @render.plot
    def scatter():
        df = penguins.copy()
        filtered = df.loc[df["body_mass"] < input.mass()]
        return scatter_plot(filtered, input.trend())


app = App(app_ui, server)

## file: penguins.csv
species,island,bill_length,bill_depth,flipper_length,body_mass,sex,year
Adelie,Torgersen,39.1,18.7,181,3750,male,2007
Adelie,Torgersen,39.5,17.4,186,3800,female,2007
Adelie,Torgersen,40.3,18,195,3250,female,2007
Adelie,Torgersen,NA,NA,NA,NA,NA,2007
Adelie,Torgersen,36.7,19.3,193,3450,female,2007
Adelie,Torgersen,39.3,20.6,190,3650,male,2007
Adelie,Torgersen,38.9,17.8,181,3625,female,2007
Adelie,Torgersen,39.2,19.6,195,4675,male,2007
Adelie,Torgersen,34.1,18.1,193,3475,NA,2007
Adelie,Torgersen,42,20.2,190,4250,NA,2007
Adelie,Torgersen,37.8,17.1,186,3300,NA,2007
Adelie,Torgersen,37.8,17.3,180,3700,NA,2007
Adelie,Torgersen,41.1,17.6,182,3200,female,2007
Adelie,Torgersen,38.6,21.2,191,3800,male,2007
Adelie,Torgersen,34.6,21.1,198,4400,male,2007
Adelie,Torgersen,36.6,17.8,185,3700,female,2007
Adelie,Torgersen,38.7,19,195,3450,female,2007
Adelie,Torgersen,42.5,20.7,197,4500,male,2007
Adelie,Torgersen,34.4,18.4,184,3325,female,2007
Adelie,Torgersen,46,21.5,194,4200,male,2007
Adelie,Biscoe,37.8,18.3,174,3400,female,2007
Adelie,Biscoe,37.7,18.7,180,3600,male,2007
Adelie,Biscoe,35.9,19.2,189,3800,female,2007
Adelie,Biscoe,38.2,18.1,185,3950,male,2007
Adelie,Biscoe,38.8,17.2,180,3800,male,2007
Adelie,Biscoe,35.3,18.9,187,3800,female,2007
Adelie,Biscoe,40.6,18.6,183,3550,male,2007
Adelie,Biscoe,40.5,17.9,187,3200,female,2007
Adelie,Biscoe,37.9,18.6,172,3150,female,2007
Adelie,Biscoe,40.5,18.9,180,3950,male,2007
Adelie,Dream,39.5,16.7,178,3250,female,2007
Adelie,Dream,37.2,18.1,178,3900,male,2007
Adelie,Dream,39.5,17.8,188,3300,female,2007
Adelie,Dream,40.9,18.9,184,3900,male,2007
Adelie,Dream,36.4,17,195,3325,female,2007
Adelie,Dream,39.2,21.1,196,4150,male,2007
Adelie,Dream,38.8,20,190,3950,male,2007
Adelie,Dream,42.2,18.5,180,3550,female,2007
Adelie,Dream,37.6,19.3,181,3300,female,2007
Adelie,Dream,39.8,19.1,184,4650,male,2007
Adelie,Dream,36.5,18,182,3150,female,2007
Adelie,Dream,40.8,18.4,195,3900,male,2007
Adelie,Dream,36,18.5,186,3100,female,2007
Adelie,Dream,44.1,19.7,196,4400,male,2007
Adelie,Dream,37,16.9,185,3000,female,2007
Adelie,Dream,39.6,18.8,190,4600,male,2007
Adelie,Dream,41.1,19,182,3425,male,2007
Adelie,Dream,37.5,18.9,179,2975,NA,2007
Adelie,Dream,36,17.9,190,3450,female,2007
Adelie,Dream,42.3,21.2,191,4150,male,2007
Adelie,Biscoe,39.6,17.7,186,3500,female,2008
Adelie,Biscoe,40.1,18.9,188,4300,male,2008
Adelie,Biscoe,35,17.9,190,3450,female,2008
Adelie,Biscoe,42,19.5,200,4050,male,2008
Adelie,Biscoe,34.5,18.1,187,2900,female,2008
Adelie,Biscoe,41.4,18.6,191,3700,male,2008
Adelie,Biscoe,39,17.5,186,3550,female,2008
Adelie,Biscoe,40.6,18.8,193,3800,male,2008
Adelie,Biscoe,36.5,16.6,181,2850,female,2008
Adelie,Biscoe,37.6,19.1,194,3750,male,2008
Adelie,Biscoe,35.7,16.9,185,3150,female,2008
Adelie,Biscoe,41.3,21.1,195,4400,male,2008
Adelie,Biscoe,37.6,17,185,3600,female,2008
Adelie,Biscoe,41.1,18.2,192,4050,male,2008
Adelie,Biscoe,36.4,17.1,184,2850,female,2008
Adelie,Biscoe,41.6,18,192,3950,male,2008
Adelie,Biscoe,35.5,16.2,195,3350,female,2008
Adelie,Biscoe,41.1,19.1,188,4100,male,2008
Adelie,Torgersen,35.9,16.6,190,3050,female,2008
Adelie,Torgersen,41.8,19.4,198,4450,male,2008
Adelie,Torgersen,33.5,19,190,3600,female,2008
Adelie,Torgersen,39.7,18.4,190,3900,male,2008
Adelie,Torgersen,39.6,17.2,196,3550,female,2008
Adelie,Torgersen,45.8,18.9,197,4150,male,2008
Adelie,Torgersen,35.5,17.5,190,3700,female,2008
Adelie,Torgersen,42.8,18.5,195,4250,male,2008
Adelie,Torgersen,40.9,16.8,191,3700,female,2008
Adelie,Torgersen,37.2,19.4,184,3900,male,2008
Adelie,Torgersen,36.2,16.1,187,3550,female,2008
Adelie,Torgersen,42.1,19.1,195,4000,male,2008
Adelie,Torgersen,34.6,17.2,189,3200,female,2008
Adelie,Torgersen,42.9,17.6,196,4700,male,2008
Adelie,Torgersen,36.7,18.8,187,3800,female,2008
Adelie,Torgersen,35.1,19.4,193,4200,male,2008
Adelie,Dream,37.3,17.8,191,3350,female,2008
Adelie,Dream,41.3,20.3,194,3550,male,2008
Adelie,Dream,36.3,19.5,190,3800,male,2008
Adelie,Dream,36.9,18.6,189,3500,female,2008
Adelie,Dream,38.3,19.2,189,3950,male,2008
Adelie,Dream,38.9,18.8,190,3600,female,2008
Adelie,Dream,35.7,18,202,3550,female,2008
Adelie,Dream,41.1,18.1,205,4300,male,2008
Adelie,Dream,34,17.1,185,3400,female,2008
Adelie,Dream,39.6,18.1,186,4450,male,2008
Adelie,Dream,36.2,17.3,187,3300,female,2008
Adelie,Dream,40.8,18.9,208,4300,male,2008
Adelie,Dream,38.1,18.6,190,3700,female,2008
Adelie,Dream,40.3,18.5,196,4350,male,2008
Adelie,Dream,33.1,16.1,178,2900,female,2008
Adelie,Dream,43.2,18.5,192,4100,male,2008
Adelie,Biscoe,35,17.9,192,3725,female,2009
Adelie,Biscoe,41,20,203,4725,male,2009
Adelie,Biscoe,37.7,16,183,3075,female,2009
Adelie,Biscoe,37.8,20,190,4250,male,2009
Adelie,Biscoe,37.9,18.6,193,2925,female,2009
Adelie,Biscoe,39.7,18.9,184,3550,male,2009
Adelie,Biscoe,38.6,17.2,199,3750,female,2009
Adelie,Biscoe,38.2,20,190,3900,male,2009
Adelie,Biscoe,38.1,17,181,3175,female,2009
Adelie,Biscoe,43.2,19,197,4775,male,2009
Adelie,Biscoe,38.1,16.5,198,3825,female,2009
Adelie,Biscoe,45.6,20.3,191,4600,male,2009
Adelie,Biscoe,39.7,17.7,193,3200,female,2009
Adelie,Biscoe,42.2,19.5,197,4275,male,2009
Adelie,Biscoe,39.6,20.7,191,3900,female,2009
Adelie,Biscoe,42.7,18.3,196,4075,male,2009
Adelie,Torgersen,38.6,17,188,2900,female,2009
Adelie,Torgersen,37.3,20.5,199,3775,male,2009
Adelie,Torgersen,35.7,17,189,3350,female,2009
Adelie,Torgersen,41.1,18.6,189,3325,male,2009
Adelie,Torgersen,36.2,17.2,187,3150,female,2009
Adelie,Torgersen,37.7,19.8,198,3500,male,2009
Adelie,Torgersen,40.2,17,176,3450,female,2009
Adelie,Torgersen,41.4,18.5,202,3875,male,2009
Adelie,Torgersen,35.2,15.9,186,3050,female,2009
Adelie,Torgersen,40.6,19,199,4000,male,2009
Adelie,Torgersen,38.8,17.6,191,3275,female,2009
Adelie,Torgersen,41.5,18.3,195,4300,male,2009
Adelie,Torgersen,39,17.1,191,3050,female,2009
Adelie,Torgersen,44.1,18,210,4000,male,2009
Adelie,Torgersen,38.5,17.9,190,3325,female,2009
Adelie,Torgersen,43.1,19.2,197,3500,male,2009
Adelie,Dream,36.8,18.5,193,3500,female,2009
Adelie,Dream,37.5,18.5,199,4475,male,2009
Adelie,Dream,38.1,17.6,187,3425,female,2009
Adelie,Dream,41.1,17.5,190,3900,male,2009
Adelie,Dream,35.6,17.5,191,3175,female,2009
Adelie,Dream,40.2,20.1,200,3975,male,2009
Adelie,Dream,37,16.5,185,3400,female,2009
Adelie,Dream,39.7,17.9,193,4250,male,2009
Adelie,Dream,40.2,17.1,193,3400,female,2009
Adelie,Dream,40.6,17.2,187,3475,male,2009
Adelie,Dream,32.1,15.5,188,3050,female,2009
Adelie,Dream,40.7,17,190,3725,male,2009
Adelie,Dream,37.3,16.8,192,3000,female,2009
Adelie,Dream,39,18.7,185,3650,male,2009
Adelie,Dream,39.2,18.6,190,4250,male,2009
Adelie,Dream,36.6,18.4,184,3475,female,2009
Adelie,Dream,36,17.8,195,3450,female,2009
Adelie,Dream,37.8,18.1,193,3750,male,2009
Adelie,Dream,36,17.1,187,3700,female,2009
Adelie,Dream,41.5,18.5,201,4000,male,2009
Gentoo,Biscoe,46.1,13.2,211,4500,female,2007
Gentoo,Biscoe,50,16.3,230,5700,male,2007
Gentoo,Biscoe,48.7,14.1,210,4450,female,2007
Gentoo,Biscoe,50,15.2,218,5700,male,2007
Gentoo,Biscoe,47.6,14.5,215,5400,male,2007
Gentoo,Biscoe,46.5,13.5,210,4550,female,2007
Gentoo,Biscoe,45.4,14.6,211,4800,female,2007
Gentoo,Biscoe,46.7,15.3,219,5200,male,2007
Gentoo,Biscoe,43.3,13.4,209,4400,female,2007
Gentoo,Biscoe,46.8,15.4,215,5150,male,2007
Gentoo,Biscoe,40.9,13.7,214,4650,female,2007
Gentoo,Biscoe,49,16.1,216,5550,male,2007
Gentoo,Biscoe,45.5,13.7,214,4650,female,2007
Gentoo,Biscoe,48.4,14.6,213,5850,male,2007
Gentoo,Biscoe,45.8,14.6,210,4200,female,2007
Gentoo,Biscoe,49.3,15.7,217,5850,male,2007
Gentoo,Biscoe,42,13.5,210,4150,female,2007
Gentoo,Biscoe,49.2,15.2,221,6300,male,2007
Gentoo,Biscoe,46.2,14.5,209,4800,female,2007
Gentoo,Biscoe,48.7,15.1,222,5350,male,2007
Gentoo,Biscoe,50.2,14.3,218,5700,male,2007
Gentoo,Biscoe,45.1,14.5,215,5000,female,2007
Gentoo,Biscoe,46.5,14.5,213,4400,female,2007
Gentoo,Biscoe,46.3,15.8,215,5050,male,2007
Gentoo,Biscoe,42.9,13.1,215,5000,female,2007
Gentoo,Biscoe,46.1,15.1,215,5100,male,2007
Gentoo,Biscoe,44.5,14.3,216,4100,NA,2007
Gentoo,Biscoe,47.8,15,215,5650,male,2007
Gentoo,Biscoe,48.2,14.3,210,4600,female,2007
Gentoo,Biscoe,50,15.3,220,5550,male,2007
Gentoo,Biscoe,47.3,15.3,222,5250,male,2007
Gentoo,Biscoe,42.8,14.2,209,4700,female,2007
Gentoo,Biscoe,45.1,14.5,207,5050,female,2007
Gentoo,Biscoe,59.6,17,230,6050,male,2007
Gentoo,Biscoe,49.1,14.8,220,5150,female,2008
Gentoo,Biscoe,48.4,16.3,220,5400,male,2008
Gentoo,Biscoe,42.6,13.7,213,4950,female,2008
Gentoo,Biscoe,44.4,17.3,219,5250,male,2008
Gentoo,Biscoe,44,13.6,208,4350,female,2008
Gentoo,Biscoe,48.7,15.7,208,5350,male,2008
Gentoo,Biscoe,42.7,13.7,208,3950,female,2008
Gentoo,Biscoe,49.6,16,225,5700,male,2008
Gentoo,Biscoe,45.3,13.7,210,4300,female,2008
Gentoo,Biscoe,49.6,15,216,4750,male,2008
Gentoo,Biscoe,50.5,15.9,222,5550,male,2008
Gentoo,Biscoe,43.6,13.9,217,4900,female,2008
Gentoo,Biscoe,45.5,13.9,210,4200,female,2008
Gentoo,Biscoe,50.5,15.9,225,5400,male,2008
Gentoo,Biscoe,44.9,13.3,213,5100,female,2008
Gentoo,Biscoe,45.2,15.8,215,5300,male,2008
Gentoo,Biscoe,46.6,14.2,210,4850,female,2008
Gentoo,Biscoe,48.5,14.1,220,5300,male,2008
Gentoo,Biscoe,45.1,14.4,210,4400,female,2008
Gentoo,Biscoe,50.1,15,225,5000,male,2008
Gentoo,Biscoe,46.5,14.4,217,4900,female,2008
Gentoo,Biscoe,45,15.4,220,5050,male,2008
Gentoo,Biscoe,43.8,13.9,208,4300,female,2008
Gentoo,Biscoe,45.5,15,220,5000,male,2008
Gentoo,Biscoe,43.2,14.5,208,4450,female,2008
Gentoo,Biscoe,50.4,15.3,224,5550,male,2008
Gentoo,Biscoe,45.3,13.8,208,4200,female,2008
Gentoo,Biscoe,46.2,14.9,221,5300,male,2008
Gentoo,Biscoe,45.7,13.9,214,4400,female,2008
Gentoo,Biscoe,54.3,15.7,231,5650,male,2008
Gentoo,Biscoe,45.8,14.2,219,4700,female,2008
Gentoo,Biscoe,49.8,16.8,230,5700,male,2008
Gentoo,Biscoe,46.2,14.4,214,4650,NA,2008
Gentoo,Biscoe,49.5,16.2,229,5800,male,2008
Gentoo,Biscoe,43.5,14.2,220,4700,female,2008
Gentoo,Biscoe,50.7,15,223,5550,male,2008
Gentoo,Biscoe,47.7,15,216,4750,female,2008
Gentoo,Biscoe,46.4,15.6,221,5000,male,2008
Gentoo,Biscoe,48.2,15.6,221,5100,male,2008
Gentoo,Biscoe,46.5,14.8,217,5200,female,2008
Gentoo,Biscoe,46.4,15,216,4700,female,2008
Gentoo,Biscoe,48.6,16,230,5800,male,2008
Gentoo,Biscoe,47.5,14.2,209,4600,female,2008
Gentoo,Biscoe,51.1,16.3,220,6000,male,2008
Gentoo,Biscoe,45.2,13.8,215,4750,female,2008
Gentoo,Biscoe,45.2,16.4,223,5950,male,2008
Gentoo,Biscoe,49.1,14.5,212,4625,female,2009
Gentoo,Biscoe,52.5,15.6,221,5450,male,2009
Gentoo,Biscoe,47.4,14.6,212,4725,female,2009
Gentoo,Biscoe,50,15.9,224,5350,male,2009
Gentoo,Biscoe,44.9,13.8,212,4750,female,2009
Gentoo,Biscoe,50.8,17.3,228,5600,male,2009
Gentoo,Biscoe,43.4,14.4,218,4600,female,2009
Gentoo,Biscoe,51.3,14.2,218,5300,male,2009
Gentoo,Biscoe,47.5,14,212,4875,female,2009
Gentoo,Biscoe,52.1,17,230,5550,male,2009
Gentoo,Biscoe,47.5,15,218,4950,female,2009
Gentoo,Biscoe,52.2,17.1,228,5400,male,2009
Gentoo,Biscoe,45.5,14.5,212,4750,female,2009
Gentoo,Biscoe,49.5,16.1,224,5650,male,2009
Gentoo,Biscoe,44.5,14.7,214,4850,female,2009
Gentoo,Biscoe,50.8,15.7,226,5200,male,2009
Gentoo,Biscoe,49.4,15.8,216,4925,male,2009
Gentoo,Biscoe,46.9,14.6,222,4875,female,2009
Gentoo,Biscoe,48.4,14.4,203,4625,female,2009
Gentoo,Biscoe,51.1,16.5,225,5250,male,2009
Gentoo,Biscoe,48.5,15,219,4850,female,2009
Gentoo,Biscoe,55.9,17,228,5600,male,2009
Gentoo,Biscoe,47.2,15.5,215,4975,female,2009
Gentoo,Biscoe,49.1,15,228,5500,male,2009
Gentoo,Biscoe,47.3,13.8,216,4725,NA,2009
Gentoo,Biscoe,46.8,16.1,215,5500,male,2009
Gentoo,Biscoe,41.7,14.7,210,4700,female,2009
Gentoo,Biscoe,53.4,15.8,219,5500,male,2009
Gentoo,Biscoe,43.3,14,208,4575,female,2009
Gentoo,Biscoe,48.1,15.1,209,5500,male,2009
Gentoo,Biscoe,50.5,15.2,216,5000,female,2009
Gentoo,Biscoe,49.8,15.9,229,5950,male,2009
Gentoo,Biscoe,43.5,15.2,213,4650,female,2009
Gentoo,Biscoe,51.5,16.3,230,5500,male,2009
Gentoo,Biscoe,46.2,14.1,217,4375,female,2009
Gentoo,Biscoe,55.1,16,230,5850,male,2009
Gentoo,Biscoe,44.5,15.7,217,4875,NA,2009
Gentoo,Biscoe,48.8,16.2,222,6000,male,2009
Gentoo,Biscoe,47.2,13.7,214,4925,female,2009
Gentoo,Biscoe,NA,NA,NA,NA,NA,2009
Gentoo,Biscoe,46.8,14.3,215,4850,female,2009
Gentoo,Biscoe,50.4,15.7,222,5750,male,2009
Gentoo,Biscoe,45.2,14.8,212,5200,female,2009
Gentoo,Biscoe,49.9,16.1,213,5400,male,2009
Chinstrap,Dream,46.5,17.9,192,3500,female,2007
Chinstrap,Dream,50,19.5,196,3900,male,2007
Chinstrap,Dream,51.3,19.2,193,3650,male,2007
Chinstrap,Dream,45.4,18.7,188,3525,female,2007
Chinstrap,Dream,52.7,19.8,197,3725,male,2007
Chinstrap,Dream,45.2,17.8,198,3950,female,2007
Chinstrap,Dream,46.1,18.2,178,3250,female,2007
Chinstrap,Dream,51.3,18.2,197,3750,male,2007
Chinstrap,Dream,46,18.9,195,4150,female,2007
Chinstrap,Dream,51.3,19.9,198,3700,male,2007
Chinstrap,Dream,46.6,17.8,193,3800,female,2007
Chinstrap,Dream,51.7,20.3,194,3775,male,2007
Chinstrap,Dream,47,17.3,185,3700,female,2007
Chinstrap,Dream,52,18.1,201,4050,male,2007
Chinstrap,Dream,45.9,17.1,190,3575,female,2007
Chinstrap,Dream,50.5,19.6,201,4050,male,2007
Chinstrap,Dream,50.3,20,197,3300,male,2007
Chinstrap,Dream,58,17.8,181,3700,female,2007
Chinstrap,Dream,46.4,18.6,190,3450,female,2007
Chinstrap,Dream,49.2,18.2,195,4400,male,2007
Chinstrap,Dream,42.4,17.3,181,3600,female,2007
Chinstrap,Dream,48.5,17.5,191,3400,male,2007
Chinstrap,Dream,43.2,16.6,187,2900,female,2007
Chinstrap,Dream,50.6,19.4,193,3800,male,2007
Chinstrap,Dream,46.7,17.9,195,3300,female,2007
Chinstrap,Dream,52,19,197,4150,male,2007
Chinstrap,Dream,50.5,18.4,200,3400,female,2008
Chinstrap,Dream,49.5,19,200,3800,male,2008
Chinstrap,Dream,46.4,17.8,191,3700,female,2008
Chinstrap,Dream,52.8,20,205,4550,male,2008
Chinstrap,Dream,40.9,16.6,187,3200,female,2008
Chinstrap,Dream,54.2,20.8,201,4300,male,2008
Chinstrap,Dream,42.5,16.7,187,3350,female,2008
Chinstrap,Dream,51,18.8,203,4100,male,2008
Chinstrap,Dream,49.7,18.6,195,3600,male,2008
Chinstrap,Dream,47.5,16.8,199,3900,female,2008
Chinstrap,Dream,47.6,18.3,195,3850,female,2008
Chinstrap,Dream,52,20.7,210,4800,male,2008
Chinstrap,Dream,46.9,16.6,192,2700,female,2008
Chinstrap,Dream,53.5,19.9,205,4500,male,2008
Chinstrap,Dream,49,19.5,210,3950,male,2008
Chinstrap,Dream,46.2,17.5,187,3650,female,2008
Chinstrap,Dream,50.9,19.1,196,3550,male,2008
Chinstrap,Dream,45.5,17,196,3500,female,2008
Chinstrap,Dream,50.9,17.9,196,3675,female,2009
Chinstrap,Dream,50.8,18.5,201,4450,male,2009
Chinstrap,Dream,50.1,17.9,190,3400,female,2009
Chinstrap,Dream,49,19.6,212,4300,male,2009
Chinstrap,Dream,51.5,18.7,187,3250,male,2009
Chinstrap,Dream,49.8,17.3,198,3675,female,2009
Chinstrap,Dream,48.1,16.4,199,3325,female,2009
Chinstrap,Dream,51.4,19,201,3950,male,2009
Chinstrap,Dream,45.7,17.3,193,3600,female,2009
Chinstrap,Dream,50.7,19.7,203,4050,male,2009
Chinstrap,Dream,42.5,17.3,187,3350,female,2009
Chinstrap,Dream,52.2,18.8,197,3450,male,2009
Chinstrap,Dream,45.2,16.6,191,3250,female,2009
Chinstrap,Dream,49.3,19.9,203,4050,male,2009
Chinstrap,Dream,50.2,18.8,202,3800,male,2009
Chinstrap,Dream,45.6,19.4,194,3525,female,2009
Chinstrap,Dream,51.9,19.5,206,3950,male,2009
Chinstrap,Dream,46.8,16.5,189,3650,female,2009
Chinstrap,Dream,45.7,17,195,3650,female,2009
Chinstrap,Dream,55.8,19.8,207,4000,male,2009
Chinstrap,Dream,43.5,18.1,202,3400,female,2009
Chinstrap,Dream,49.6,18.2,193,3775,male,2009
Chinstrap,Dream,50.8,19,210,4100,male,2009
Chinstrap,Dream,50.2,18.7,198,3775,female,2009

## file: plots.py
from plotnine import ggplot, geom_density, aes, theme_light, geom_point, stat_smooth


def dist_plot(df):
    plot = (
        ggplot(df, aes(x="body_mass", fill="species"))
        + geom_density(alpha=0.2)
        + theme_light()
    )
    return plot


def scatter_plot(df, trend_line=False):
    plot = (
        ggplot(
            df,
            aes(
                x="bill_length",
                y="bill_depth",
                color="species",
                group="species",
            ),
        )
        + geom_point()
        + theme_light()
    )

    if trend_line:
        plot = plot + stat_smooth()

    return plot

## file: README
1) Add a second plot output to the apps which shows a scatter plot of Bill Depth to Bill Length, there's a plotting function in `plots.py` which provides one implementation.
2) Add a checkbox which adds a line of best fit to the plot. 

How did Shiny do that?

• We told Shiny what to do
• We didn’t tell Shiny when to do it

How do other frameworks work?

• Streamlit
  • re-render everything everywhere all the time
• Dash/Panel/Gradio
  • Define callback functions

Event driven programming

• You have to do it
• Easy to get wrong
• Hard to tell when you’ve gotten it wrong

What’s a better way?

• Infer the relationships between components
• Build a computation graph

Does that really work?

• You’re not wrong to find this suspicious
• “Does Shiny infer relationships by analyizing the source code?”
  • No – lots of ways that would break down!
• For this to work, the inference has to be 100% reliable

It really works

• We have 10 years of real-world experience with this form of reactivity
• The underlying mechanism is simple, reliable, and intuitive
• Not static analysis, but rather, runtime tracing
• Originally inspired by Meteor.js

Outputs and recipes

from shiny import Inputs, Outputs, Session, App, render, ui

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

def server(input: Inputs, output: Outputs, session: Session):
    @output
    @render.text
    def txt():
        return f"n*2 is {input.n() * 2}"


app = App(app_ui, server)

Recipes and inputs

from shiny import Inputs, Outputs, Session, App, render, ui

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


def server(input: Inputs, output: Outputs, session: Session):
    @output
    @render.text
    def txt():
        return f"n*2 is {input.n() * 2}"


app = App(app_ui, server)

Reactive graph

flowchart TD
  S[Slider] --> R{Recipe}
  R --> Sc((Text))

Reactive graph

flowchart TD
  S[Slider] --> Sc((Text))

Declarative programming

• Tell Shiny how each output should be filled
• Trust that the framework will keep everything up-to-date
• You’re setting the menu, not doing the cooking

Event-driven programming

Reactive programming

Your turn

Draw the graph of this application

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 600
from shiny import App, render, ui
import pandas as pd
from pathlib import Path
from plots import dist_plot, scatter_plot

infile = Path(__file__).parent / "penguins.csv"
penguins = pd.read_csv(infile)

app_ui = ui.page_fluid(
    ui.panel_title("Hello Penguins!"),
    ui.layout_sidebar(
        ui.panel_sidebar(
            ui.input_slider(
                "mass",
                "Mass",
                2000,
                8000,
                6000,
            ),
            ui.input_checkbox("trend", "Add trendline"),
        ),
        ui.panel_main(
            ui.output_plot("scatter"),
            ui.output_data_frame("table"),
            ui.output_plot("dist"),
        ),
    ),
)


def server(input, output, session):
    @output
    @render.data_frame
    def table():
        df = penguins.copy()
        filtered = df.loc[df["body_mass"] < input.mass()]
        summary = (
            filtered.set_index("species")
            .groupby(level="species")
            .agg({"bill_length": "mean", "bill_depth": "mean"})
            .reset_index()
        )
        return summary

    @output
    @render.plot
    def dist():
        df = penguins.copy()
        filtered = df.loc[df["body_mass"] < input.mass()]
        return dist_plot(filtered)

    @output
    @render.plot
    def scatter():
        df = penguins.copy()
        filtered = df.loc[df["body_mass"] < input.mass()]
        return scatter_plot(filtered, input.trend())


app = App(app_ui, server)

## file: penguins.csv
species,island,bill_length,bill_depth,flipper_length,body_mass,sex,year
Adelie,Torgersen,39.1,18.7,181,3750,male,2007
Adelie,Torgersen,39.5,17.4,186,3800,female,2007
Adelie,Torgersen,40.3,18,195,3250,female,2007
Adelie,Torgersen,NA,NA,NA,NA,NA,2007
Adelie,Torgersen,36.7,19.3,193,3450,female,2007
Adelie,Torgersen,39.3,20.6,190,3650,male,2007
Adelie,Torgersen,38.9,17.8,181,3625,female,2007
Adelie,Torgersen,39.2,19.6,195,4675,male,2007
Adelie,Torgersen,34.1,18.1,193,3475,NA,2007
Adelie,Torgersen,42,20.2,190,4250,NA,2007
Adelie,Torgersen,37.8,17.1,186,3300,NA,2007
Adelie,Torgersen,37.8,17.3,180,3700,NA,2007
Adelie,Torgersen,41.1,17.6,182,3200,female,2007
Adelie,Torgersen,38.6,21.2,191,3800,male,2007
Adelie,Torgersen,34.6,21.1,198,4400,male,2007
Adelie,Torgersen,36.6,17.8,185,3700,female,2007
Adelie,Torgersen,38.7,19,195,3450,female,2007
Adelie,Torgersen,42.5,20.7,197,4500,male,2007
Adelie,Torgersen,34.4,18.4,184,3325,female,2007
Adelie,Torgersen,46,21.5,194,4200,male,2007
Adelie,Biscoe,37.8,18.3,174,3400,female,2007
Adelie,Biscoe,37.7,18.7,180,3600,male,2007
Adelie,Biscoe,35.9,19.2,189,3800,female,2007
Adelie,Biscoe,38.2,18.1,185,3950,male,2007
Adelie,Biscoe,38.8,17.2,180,3800,male,2007
Adelie,Biscoe,35.3,18.9,187,3800,female,2007
Adelie,Biscoe,40.6,18.6,183,3550,male,2007
Adelie,Biscoe,40.5,17.9,187,3200,female,2007
Adelie,Biscoe,37.9,18.6,172,3150,female,2007
Adelie,Biscoe,40.5,18.9,180,3950,male,2007
Adelie,Dream,39.5,16.7,178,3250,female,2007
Adelie,Dream,37.2,18.1,178,3900,male,2007
Adelie,Dream,39.5,17.8,188,3300,female,2007
Adelie,Dream,40.9,18.9,184,3900,male,2007
Adelie,Dream,36.4,17,195,3325,female,2007
Adelie,Dream,39.2,21.1,196,4150,male,2007
Adelie,Dream,38.8,20,190,3950,male,2007
Adelie,Dream,42.2,18.5,180,3550,female,2007
Adelie,Dream,37.6,19.3,181,3300,female,2007
Adelie,Dream,39.8,19.1,184,4650,male,2007
Adelie,Dream,36.5,18,182,3150,female,2007
Adelie,Dream,40.8,18.4,195,3900,male,2007
Adelie,Dream,36,18.5,186,3100,female,2007
Adelie,Dream,44.1,19.7,196,4400,male,2007
Adelie,Dream,37,16.9,185,3000,female,2007
Adelie,Dream,39.6,18.8,190,4600,male,2007
Adelie,Dream,41.1,19,182,3425,male,2007
Adelie,Dream,37.5,18.9,179,2975,NA,2007
Adelie,Dream,36,17.9,190,3450,female,2007
Adelie,Dream,42.3,21.2,191,4150,male,2007
Adelie,Biscoe,39.6,17.7,186,3500,female,2008
Adelie,Biscoe,40.1,18.9,188,4300,male,2008
Adelie,Biscoe,35,17.9,190,3450,female,2008
Adelie,Biscoe,42,19.5,200,4050,male,2008
Adelie,Biscoe,34.5,18.1,187,2900,female,2008
Adelie,Biscoe,41.4,18.6,191,3700,male,2008
Adelie,Biscoe,39,17.5,186,3550,female,2008
Adelie,Biscoe,40.6,18.8,193,3800,male,2008
Adelie,Biscoe,36.5,16.6,181,2850,female,2008
Adelie,Biscoe,37.6,19.1,194,3750,male,2008
Adelie,Biscoe,35.7,16.9,185,3150,female,2008
Adelie,Biscoe,41.3,21.1,195,4400,male,2008
Adelie,Biscoe,37.6,17,185,3600,female,2008
Adelie,Biscoe,41.1,18.2,192,4050,male,2008
Adelie,Biscoe,36.4,17.1,184,2850,female,2008
Adelie,Biscoe,41.6,18,192,3950,male,2008
Adelie,Biscoe,35.5,16.2,195,3350,female,2008
Adelie,Biscoe,41.1,19.1,188,4100,male,2008
Adelie,Torgersen,35.9,16.6,190,3050,female,2008
Adelie,Torgersen,41.8,19.4,198,4450,male,2008
Adelie,Torgersen,33.5,19,190,3600,female,2008
Adelie,Torgersen,39.7,18.4,190,3900,male,2008
Adelie,Torgersen,39.6,17.2,196,3550,female,2008
Adelie,Torgersen,45.8,18.9,197,4150,male,2008
Adelie,Torgersen,35.5,17.5,190,3700,female,2008
Adelie,Torgersen,42.8,18.5,195,4250,male,2008
Adelie,Torgersen,40.9,16.8,191,3700,female,2008
Adelie,Torgersen,37.2,19.4,184,3900,male,2008
Adelie,Torgersen,36.2,16.1,187,3550,female,2008
Adelie,Torgersen,42.1,19.1,195,4000,male,2008
Adelie,Torgersen,34.6,17.2,189,3200,female,2008
Adelie,Torgersen,42.9,17.6,196,4700,male,2008
Adelie,Torgersen,36.7,18.8,187,3800,female,2008
Adelie,Torgersen,35.1,19.4,193,4200,male,2008
Adelie,Dream,37.3,17.8,191,3350,female,2008
Adelie,Dream,41.3,20.3,194,3550,male,2008
Adelie,Dream,36.3,19.5,190,3800,male,2008
Adelie,Dream,36.9,18.6,189,3500,female,2008
Adelie,Dream,38.3,19.2,189,3950,male,2008
Adelie,Dream,38.9,18.8,190,3600,female,2008
Adelie,Dream,35.7,18,202,3550,female,2008
Adelie,Dream,41.1,18.1,205,4300,male,2008
Adelie,Dream,34,17.1,185,3400,female,2008
Adelie,Dream,39.6,18.1,186,4450,male,2008
Adelie,Dream,36.2,17.3,187,3300,female,2008
Adelie,Dream,40.8,18.9,208,4300,male,2008
Adelie,Dream,38.1,18.6,190,3700,female,2008
Adelie,Dream,40.3,18.5,196,4350,male,2008
Adelie,Dream,33.1,16.1,178,2900,female,2008
Adelie,Dream,43.2,18.5,192,4100,male,2008
Adelie,Biscoe,35,17.9,192,3725,female,2009
Adelie,Biscoe,41,20,203,4725,male,2009
Adelie,Biscoe,37.7,16,183,3075,female,2009
Adelie,Biscoe,37.8,20,190,4250,male,2009
Adelie,Biscoe,37.9,18.6,193,2925,female,2009
Adelie,Biscoe,39.7,18.9,184,3550,male,2009
Adelie,Biscoe,38.6,17.2,199,3750,female,2009
Adelie,Biscoe,38.2,20,190,3900,male,2009
Adelie,Biscoe,38.1,17,181,3175,female,2009
Adelie,Biscoe,43.2,19,197,4775,male,2009
Adelie,Biscoe,38.1,16.5,198,3825,female,2009
Adelie,Biscoe,45.6,20.3,191,4600,male,2009
Adelie,Biscoe,39.7,17.7,193,3200,female,2009
Adelie,Biscoe,42.2,19.5,197,4275,male,2009
Adelie,Biscoe,39.6,20.7,191,3900,female,2009
Adelie,Biscoe,42.7,18.3,196,4075,male,2009
Adelie,Torgersen,38.6,17,188,2900,female,2009
Adelie,Torgersen,37.3,20.5,199,3775,male,2009
Adelie,Torgersen,35.7,17,189,3350,female,2009
Adelie,Torgersen,41.1,18.6,189,3325,male,2009
Adelie,Torgersen,36.2,17.2,187,3150,female,2009
Adelie,Torgersen,37.7,19.8,198,3500,male,2009
Adelie,Torgersen,40.2,17,176,3450,female,2009
Adelie,Torgersen,41.4,18.5,202,3875,male,2009
Adelie,Torgersen,35.2,15.9,186,3050,female,2009
Adelie,Torgersen,40.6,19,199,4000,male,2009
Adelie,Torgersen,38.8,17.6,191,3275,female,2009
Adelie,Torgersen,41.5,18.3,195,4300,male,2009
Adelie,Torgersen,39,17.1,191,3050,female,2009
Adelie,Torgersen,44.1,18,210,4000,male,2009
Adelie,Torgersen,38.5,17.9,190,3325,female,2009
Adelie,Torgersen,43.1,19.2,197,3500,male,2009
Adelie,Dream,36.8,18.5,193,3500,female,2009
Adelie,Dream,37.5,18.5,199,4475,male,2009
Adelie,Dream,38.1,17.6,187,3425,female,2009
Adelie,Dream,41.1,17.5,190,3900,male,2009
Adelie,Dream,35.6,17.5,191,3175,female,2009
Adelie,Dream,40.2,20.1,200,3975,male,2009
Adelie,Dream,37,16.5,185,3400,female,2009
Adelie,Dream,39.7,17.9,193,4250,male,2009
Adelie,Dream,40.2,17.1,193,3400,female,2009
Adelie,Dream,40.6,17.2,187,3475,male,2009
Adelie,Dream,32.1,15.5,188,3050,female,2009
Adelie,Dream,40.7,17,190,3725,male,2009
Adelie,Dream,37.3,16.8,192,3000,female,2009
Adelie,Dream,39,18.7,185,3650,male,2009
Adelie,Dream,39.2,18.6,190,4250,male,2009
Adelie,Dream,36.6,18.4,184,3475,female,2009
Adelie,Dream,36,17.8,195,3450,female,2009
Adelie,Dream,37.8,18.1,193,3750,male,2009
Adelie,Dream,36,17.1,187,3700,female,2009
Adelie,Dream,41.5,18.5,201,4000,male,2009
Gentoo,Biscoe,46.1,13.2,211,4500,female,2007
Gentoo,Biscoe,50,16.3,230,5700,male,2007
Gentoo,Biscoe,48.7,14.1,210,4450,female,2007
Gentoo,Biscoe,50,15.2,218,5700,male,2007
Gentoo,Biscoe,47.6,14.5,215,5400,male,2007
Gentoo,Biscoe,46.5,13.5,210,4550,female,2007
Gentoo,Biscoe,45.4,14.6,211,4800,female,2007
Gentoo,Biscoe,46.7,15.3,219,5200,male,2007
Gentoo,Biscoe,43.3,13.4,209,4400,female,2007
Gentoo,Biscoe,46.8,15.4,215,5150,male,2007
Gentoo,Biscoe,40.9,13.7,214,4650,female,2007
Gentoo,Biscoe,49,16.1,216,5550,male,2007
Gentoo,Biscoe,45.5,13.7,214,4650,female,2007
Gentoo,Biscoe,48.4,14.6,213,5850,male,2007
Gentoo,Biscoe,45.8,14.6,210,4200,female,2007
Gentoo,Biscoe,49.3,15.7,217,5850,male,2007
Gentoo,Biscoe,42,13.5,210,4150,female,2007
Gentoo,Biscoe,49.2,15.2,221,6300,male,2007
Gentoo,Biscoe,46.2,14.5,209,4800,female,2007
Gentoo,Biscoe,48.7,15.1,222,5350,male,2007
Gentoo,Biscoe,50.2,14.3,218,5700,male,2007
Gentoo,Biscoe,45.1,14.5,215,5000,female,2007
Gentoo,Biscoe,46.5,14.5,213,4400,female,2007
Gentoo,Biscoe,46.3,15.8,215,5050,male,2007
Gentoo,Biscoe,42.9,13.1,215,5000,female,2007
Gentoo,Biscoe,46.1,15.1,215,5100,male,2007
Gentoo,Biscoe,44.5,14.3,216,4100,NA,2007
Gentoo,Biscoe,47.8,15,215,5650,male,2007
Gentoo,Biscoe,48.2,14.3,210,4600,female,2007
Gentoo,Biscoe,50,15.3,220,5550,male,2007
Gentoo,Biscoe,47.3,15.3,222,5250,male,2007
Gentoo,Biscoe,42.8,14.2,209,4700,female,2007
Gentoo,Biscoe,45.1,14.5,207,5050,female,2007
Gentoo,Biscoe,59.6,17,230,6050,male,2007
Gentoo,Biscoe,49.1,14.8,220,5150,female,2008
Gentoo,Biscoe,48.4,16.3,220,5400,male,2008
Gentoo,Biscoe,42.6,13.7,213,4950,female,2008
Gentoo,Biscoe,44.4,17.3,219,5250,male,2008
Gentoo,Biscoe,44,13.6,208,4350,female,2008
Gentoo,Biscoe,48.7,15.7,208,5350,male,2008
Gentoo,Biscoe,42.7,13.7,208,3950,female,2008
Gentoo,Biscoe,49.6,16,225,5700,male,2008
Gentoo,Biscoe,45.3,13.7,210,4300,female,2008
Gentoo,Biscoe,49.6,15,216,4750,male,2008
Gentoo,Biscoe,50.5,15.9,222,5550,male,2008
Gentoo,Biscoe,43.6,13.9,217,4900,female,2008
Gentoo,Biscoe,45.5,13.9,210,4200,female,2008
Gentoo,Biscoe,50.5,15.9,225,5400,male,2008
Gentoo,Biscoe,44.9,13.3,213,5100,female,2008
Gentoo,Biscoe,45.2,15.8,215,5300,male,2008
Gentoo,Biscoe,46.6,14.2,210,4850,female,2008
Gentoo,Biscoe,48.5,14.1,220,5300,male,2008
Gentoo,Biscoe,45.1,14.4,210,4400,female,2008
Gentoo,Biscoe,50.1,15,225,5000,male,2008
Gentoo,Biscoe,46.5,14.4,217,4900,female,2008
Gentoo,Biscoe,45,15.4,220,5050,male,2008
Gentoo,Biscoe,43.8,13.9,208,4300,female,2008
Gentoo,Biscoe,45.5,15,220,5000,male,2008
Gentoo,Biscoe,43.2,14.5,208,4450,female,2008
Gentoo,Biscoe,50.4,15.3,224,5550,male,2008
Gentoo,Biscoe,45.3,13.8,208,4200,female,2008
Gentoo,Biscoe,46.2,14.9,221,5300,male,2008
Gentoo,Biscoe,45.7,13.9,214,4400,female,2008
Gentoo,Biscoe,54.3,15.7,231,5650,male,2008
Gentoo,Biscoe,45.8,14.2,219,4700,female,2008
Gentoo,Biscoe,49.8,16.8,230,5700,male,2008
Gentoo,Biscoe,46.2,14.4,214,4650,NA,2008
Gentoo,Biscoe,49.5,16.2,229,5800,male,2008
Gentoo,Biscoe,43.5,14.2,220,4700,female,2008
Gentoo,Biscoe,50.7,15,223,5550,male,2008
Gentoo,Biscoe,47.7,15,216,4750,female,2008
Gentoo,Biscoe,46.4,15.6,221,5000,male,2008
Gentoo,Biscoe,48.2,15.6,221,5100,male,2008
Gentoo,Biscoe,46.5,14.8,217,5200,female,2008
Gentoo,Biscoe,46.4,15,216,4700,female,2008
Gentoo,Biscoe,48.6,16,230,5800,male,2008
Gentoo,Biscoe,47.5,14.2,209,4600,female,2008
Gentoo,Biscoe,51.1,16.3,220,6000,male,2008
Gentoo,Biscoe,45.2,13.8,215,4750,female,2008
Gentoo,Biscoe,45.2,16.4,223,5950,male,2008
Gentoo,Biscoe,49.1,14.5,212,4625,female,2009
Gentoo,Biscoe,52.5,15.6,221,5450,male,2009
Gentoo,Biscoe,47.4,14.6,212,4725,female,2009
Gentoo,Biscoe,50,15.9,224,5350,male,2009
Gentoo,Biscoe,44.9,13.8,212,4750,female,2009
Gentoo,Biscoe,50.8,17.3,228,5600,male,2009
Gentoo,Biscoe,43.4,14.4,218,4600,female,2009
Gentoo,Biscoe,51.3,14.2,218,5300,male,2009
Gentoo,Biscoe,47.5,14,212,4875,female,2009
Gentoo,Biscoe,52.1,17,230,5550,male,2009
Gentoo,Biscoe,47.5,15,218,4950,female,2009
Gentoo,Biscoe,52.2,17.1,228,5400,male,2009
Gentoo,Biscoe,45.5,14.5,212,4750,female,2009
Gentoo,Biscoe,49.5,16.1,224,5650,male,2009
Gentoo,Biscoe,44.5,14.7,214,4850,female,2009
Gentoo,Biscoe,50.8,15.7,226,5200,male,2009
Gentoo,Biscoe,49.4,15.8,216,4925,male,2009
Gentoo,Biscoe,46.9,14.6,222,4875,female,2009
Gentoo,Biscoe,48.4,14.4,203,4625,female,2009
Gentoo,Biscoe,51.1,16.5,225,5250,male,2009
Gentoo,Biscoe,48.5,15,219,4850,female,2009
Gentoo,Biscoe,55.9,17,228,5600,male,2009
Gentoo,Biscoe,47.2,15.5,215,4975,female,2009
Gentoo,Biscoe,49.1,15,228,5500,male,2009
Gentoo,Biscoe,47.3,13.8,216,4725,NA,2009
Gentoo,Biscoe,46.8,16.1,215,5500,male,2009
Gentoo,Biscoe,41.7,14.7,210,4700,female,2009
Gentoo,Biscoe,53.4,15.8,219,5500,male,2009
Gentoo,Biscoe,43.3,14,208,4575,female,2009
Gentoo,Biscoe,48.1,15.1,209,5500,male,2009
Gentoo,Biscoe,50.5,15.2,216,5000,female,2009
Gentoo,Biscoe,49.8,15.9,229,5950,male,2009
Gentoo,Biscoe,43.5,15.2,213,4650,female,2009
Gentoo,Biscoe,51.5,16.3,230,5500,male,2009
Gentoo,Biscoe,46.2,14.1,217,4375,female,2009
Gentoo,Biscoe,55.1,16,230,5850,male,2009
Gentoo,Biscoe,44.5,15.7,217,4875,NA,2009
Gentoo,Biscoe,48.8,16.2,222,6000,male,2009
Gentoo,Biscoe,47.2,13.7,214,4925,female,2009
Gentoo,Biscoe,NA,NA,NA,NA,NA,2009
Gentoo,Biscoe,46.8,14.3,215,4850,female,2009
Gentoo,Biscoe,50.4,15.7,222,5750,male,2009
Gentoo,Biscoe,45.2,14.8,212,5200,female,2009
Gentoo,Biscoe,49.9,16.1,213,5400,male,2009
Chinstrap,Dream,46.5,17.9,192,3500,female,2007
Chinstrap,Dream,50,19.5,196,3900,male,2007
Chinstrap,Dream,51.3,19.2,193,3650,male,2007
Chinstrap,Dream,45.4,18.7,188,3525,female,2007
Chinstrap,Dream,52.7,19.8,197,3725,male,2007
Chinstrap,Dream,45.2,17.8,198,3950,female,2007
Chinstrap,Dream,46.1,18.2,178,3250,female,2007
Chinstrap,Dream,51.3,18.2,197,3750,male,2007
Chinstrap,Dream,46,18.9,195,4150,female,2007
Chinstrap,Dream,51.3,19.9,198,3700,male,2007
Chinstrap,Dream,46.6,17.8,193,3800,female,2007
Chinstrap,Dream,51.7,20.3,194,3775,male,2007
Chinstrap,Dream,47,17.3,185,3700,female,2007
Chinstrap,Dream,52,18.1,201,4050,male,2007
Chinstrap,Dream,45.9,17.1,190,3575,female,2007
Chinstrap,Dream,50.5,19.6,201,4050,male,2007
Chinstrap,Dream,50.3,20,197,3300,male,2007
Chinstrap,Dream,58,17.8,181,3700,female,2007
Chinstrap,Dream,46.4,18.6,190,3450,female,2007
Chinstrap,Dream,49.2,18.2,195,4400,male,2007
Chinstrap,Dream,42.4,17.3,181,3600,female,2007
Chinstrap,Dream,48.5,17.5,191,3400,male,2007
Chinstrap,Dream,43.2,16.6,187,2900,female,2007
Chinstrap,Dream,50.6,19.4,193,3800,male,2007
Chinstrap,Dream,46.7,17.9,195,3300,female,2007
Chinstrap,Dream,52,19,197,4150,male,2007
Chinstrap,Dream,50.5,18.4,200,3400,female,2008
Chinstrap,Dream,49.5,19,200,3800,male,2008
Chinstrap,Dream,46.4,17.8,191,3700,female,2008
Chinstrap,Dream,52.8,20,205,4550,male,2008
Chinstrap,Dream,40.9,16.6,187,3200,female,2008
Chinstrap,Dream,54.2,20.8,201,4300,male,2008
Chinstrap,Dream,42.5,16.7,187,3350,female,2008
Chinstrap,Dream,51,18.8,203,4100,male,2008
Chinstrap,Dream,49.7,18.6,195,3600,male,2008
Chinstrap,Dream,47.5,16.8,199,3900,female,2008
Chinstrap,Dream,47.6,18.3,195,3850,female,2008
Chinstrap,Dream,52,20.7,210,4800,male,2008
Chinstrap,Dream,46.9,16.6,192,2700,female,2008
Chinstrap,Dream,53.5,19.9,205,4500,male,2008
Chinstrap,Dream,49,19.5,210,3950,male,2008
Chinstrap,Dream,46.2,17.5,187,3650,female,2008
Chinstrap,Dream,50.9,19.1,196,3550,male,2008
Chinstrap,Dream,45.5,17,196,3500,female,2008
Chinstrap,Dream,50.9,17.9,196,3675,female,2009
Chinstrap,Dream,50.8,18.5,201,4450,male,2009
Chinstrap,Dream,50.1,17.9,190,3400,female,2009
Chinstrap,Dream,49,19.6,212,4300,male,2009
Chinstrap,Dream,51.5,18.7,187,3250,male,2009
Chinstrap,Dream,49.8,17.3,198,3675,female,2009
Chinstrap,Dream,48.1,16.4,199,3325,female,2009
Chinstrap,Dream,51.4,19,201,3950,male,2009
Chinstrap,Dream,45.7,17.3,193,3600,female,2009
Chinstrap,Dream,50.7,19.7,203,4050,male,2009
Chinstrap,Dream,42.5,17.3,187,3350,female,2009
Chinstrap,Dream,52.2,18.8,197,3450,male,2009
Chinstrap,Dream,45.2,16.6,191,3250,female,2009
Chinstrap,Dream,49.3,19.9,203,4050,male,2009
Chinstrap,Dream,50.2,18.8,202,3800,male,2009
Chinstrap,Dream,45.6,19.4,194,3525,female,2009
Chinstrap,Dream,51.9,19.5,206,3950,male,2009
Chinstrap,Dream,46.8,16.5,189,3650,female,2009
Chinstrap,Dream,45.7,17,195,3650,female,2009
Chinstrap,Dream,55.8,19.8,207,4000,male,2009
Chinstrap,Dream,43.5,18.1,202,3400,female,2009
Chinstrap,Dream,49.6,18.2,193,3775,male,2009
Chinstrap,Dream,50.8,19,210,4100,male,2009
Chinstrap,Dream,50.2,18.7,198,3775,female,2009

## file: plots.py
from plotnine import ggplot, geom_density, aes, theme_light, geom_point, stat_smooth


def dist_plot(df):
    plot = (
        ggplot(df, aes(x="body_mass", fill="species"))
        + geom_density(alpha=0.2)
        + theme_light()
    )
    return plot


def scatter_plot(df, trend_line=False):
    plot = (
        ggplot(
            df,
            aes(
                x="bill_length",
                y="bill_depth",
                color="species",
                group="species",
            ),
        )
        + geom_point()
        + theme_light()
    )

    if trend_line:
        plot = plot + stat_smooth()

    return plot

## file: README
1) Add a second plot output to the apps which shows a scatter plot of Bill Depth to Bill Length, there's a plotting function in `plots.py` which provides one implementation.
2) Add a checkbox which adds a line of best fit to the plot. 

Initial state

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
    Sl[Slider]  --> Sc 
  Sl --> M((Dist Plot))
  linkStyle 0 display:none
  linkStyle 1 display:none
  linkStyle 2 display:none

Calculate scatter plot

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot)):::changed
    Sl[Slider]  --> Sc 
  Sl --> M((Dist Plot))
  linkStyle 0 display:none
  linkStyle 1 display:none
  linkStyle 2 display:none
  classDef changed fill:#f96

Calculate scatter plot

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot)):::changed
    Sl[Slider]  --> Sc 
  Sl --> M((Dist Plot))
  linkStyle 2 display:none
  classDef changed fill:#f96

Calculate distribution

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
    Sl[Slider]  --> Sc 
  Sl --> M((Dist Plot)):::changed
  linkStyle 2 display:none
  classDef changed fill:#f96

Calculate distribution

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
    Sl[Slider]  --> Sc 
  Sl --> M((Dist Plot)):::changed
  classDef changed fill:#f96

Reactive graph

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
    Sl[Slider]  --> Sc 
  Sl --> M((Dist Plot))

Slider changes

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
  Sl[Slider]:::changed --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96

Invalidated

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot)):::changed
  Sl[Slider]:::changed --> Sc 
  Sl --> M((Dist Plot)):::changed
  
  classDef changed fill:#f96

Forget dependencies

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 1 display:none
  linkStyle 2 display:none

Recalculate

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot)):::changed
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 1 display:none
  linkStyle 2 display:none

Recalculate

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot)):::changed
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96
  linkStyle 2 display:none

Recalculate

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot)):::changed
  
  classDef changed fill:#f96
  linkStyle 2 display:none

Recalculate

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot)):::changed
  
  classDef changed fill:#f96

Updated

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96

Checkbox changes

flowchart TD
  C[Checkbox]:::changed --> Sc((Scatter\nPlot))
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96

Invalidated

flowchart TD
  C[Checkbox]:::changed --> Sc((Scatter\nPlot)):::changed
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96

Forget dependencies

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot)):::changed
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 1 display:none

Recalculate

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot)):::changed
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 1 display:none

Recalculate

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot)):::changed
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96

Updated

flowchart TD
  C[Checkbox] --> Sc((Scatter\nPlot))
  Sl[Slider] --> Sc 
  Sl --> M((Dist Plot))
  
  classDef changed fill:#f96

Reactivity scales

• Every Shiny app uses this pattern
• Works for dynamic UIs
• Shiny is lazy

Reactive calculations

Agenda

• Reactivity overview

• Reactive calculations

• Overriding reactivity

• Side effects

Saving and reusing calculated values

• So far we’ve been working with shallow reactive graphs
• Each input is passed to a rendering function which produces an output
• Input -> Recipe -> Output can produce repetitive, inefficient applications
• @reactive.Calc creates calculations whose results can be used by one or more outputs
• This adds intermediate nodes to the reactive graph

Reactive Calc example

#| standalone: true
#| components: [editor, viewer]
#| layout: horizontal
#| viewerHeight: 800
from shiny import Inputs, Outputs, Session, App, reactive, render, req, ui
import pandas as pd
from plotnine import ggplot, geom_histogram, labs, aes
import numpy as np

app_ui = ui.page_fluid(
    ui.input_slider("n_rows", "Sample rows", 0, 100, 20),
    ui.output_plot("hist"),
    ui.output_table("df"),
)


def server(input: Inputs, output: Outputs, session: Session):
    @output
    @render.table
    def df():
        rand = np.random.rand(input.n_rows(), 1)
        df = pd.DataFrame(rand, columns=["col_1"])
        return df

    @output
    @render.plot
    def hist():
        rand = np.random.rand(input.n_rows(), 1)
        df = pd.DataFrame(rand, columns=["col_1"])
        plot = (
            ggplot(df, aes(x="col_1"))
            + geom_histogram(binwidth=0.1, fill="blue", color="black")
            + labs(x="Random Values", y="Frequency", title="Histogram of Random Data")
        )
        return plot


app = App(app_ui, server)

Identify repetition

    @output
    @render.table
    def df():
        rand = np.random.rand(input.n_rows(), 1)
        df = pd.DataFrame(rand, columns=["col_1"])
        return df

    @output
    @render.plot
    def hist():
        rand = np.random.rand(input.n_rows(), 1)
        df = pd.DataFrame(rand, columns=["col_1"])
        plot = (
            ggplot(df, aes(x="col_1"))
            + geom_histogram(binwidth=0.1, fill="blue", color="black")
            + labs(x="Random Values", y="Frequency", title="Histogram of Random Data")
        )
        return plot

Problems with repetition

1. Code is in multiple places
2. The app is taking the sample twice
3. The table and graph are not using the same sample!

Reactive Calculation to the rescue

    @reactive.Calc
    def sampled_df():
        rand = np.random.rand(input.n_rows(), 1)
        df = pd.DataFrame(rand, columns=["col_1"])

    @output
    @render.table
    def df():
        return sampled_df()

    @output
    @render.plot
    def hist():
        plot = (
            ggplot(sampled_df(), aes(x="col_1"))
            + geom_histogram(binwidth=0.1, fill="blue", color="black")
            + labs(x="Random Values", y="Frequency", title="Histogram of Random Data")
        )
        return plot

Reactive calculations

• Defined with the @reactive.Calc decorator
• Called like other inputs
• Can read inputs, reactive values, or other reactive calculations
• Caches its value, so it’s cheap to call repeatedly
• Adds a node to the reactive graph
  • Discards cached value when upstream nodes invalidate
  • Notifies downstream nodes when it invalidates

Initial state

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 1 display:none
  linkStyle 2 display:none

Calculate table

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]:::changed
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 1 display:none
  linkStyle 2 display:none

Calculate table

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]:::changed
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 2 display:none

Calculate sample

flowchart TD
  Sl[Slider] --> S[Sample]:::changed
  S --> T[Table]:::changed
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 2 display:none

Calculate sample

flowchart TD
  Sl[Slider] --> S[Sample]:::changed
  S --> T[Table]:::changed
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 2 display:none

Calculate plot

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]
  S --> P[Plot]:::changed
  
  classDef changed fill:#f96
  linkStyle 2 display:none

Calculate plot

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]
  S --> P[Plot]:::changed
  
  classDef changed fill:#f96

Deep reactive graph

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]
  S --> P[Plot]
  
  classDef changed fill:#f96

Slider changes

flowchart TD
  Sl[Slider]:::changed --> S[Sample]
  S --> T[Table]
  S --> P[Plot]
  
  classDef changed fill:#f96

Invalidated

flowchart TD
  Sl[Slider]:::changed --> S[Sample]:::changed
  S --> T[Table]
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 0 display:none

Invalidated

flowchart TD
  Sl[Slider]:::changed --> S[Sample]:::changed
  S --> T[Table]:::changed
  S --> P[Plot]:::changed
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 1 display:none
  linkStyle 2 display:none

Recalculate table

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]:::changed
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 1 display:none
  linkStyle 2 display:none

Recalculate table

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]:::changed
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 2 display:none

Recalculate sample

flowchart TD
  Sl[Slider] --> S[Sample]:::changed
  S --> T[Table]:::changed
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 0 display:none
  linkStyle 2 display:none

Recalculate sample

flowchart TD
  Sl[Slider] --> S[Sample]:::changed
  S --> T[Table]:::changed
  S --> P[Plot]
  
  classDef changed fill:#f96
  linkStyle 2 display:none

Recalculate plot

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]
  S --> P[Plot]:::changed
  
  classDef changed fill:#f96
  linkStyle 2 display:none

Recalculate plot

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]
  S --> P[Plot]:::changed
  
  classDef changed fill:#f96

Updated

flowchart TD
  Sl[Slider] --> S[Sample]
  S --> T[Table]
  S --> P[Plot]
  classDef changed fill:#f96

Your turn

Go to exercises/5-reactivity or run apps/problem-sets/2-reactivity/2.2-reactive-calc locally.

Exercise 2.3 answer

flowchart TD
  Sl[Slider] --> S[Sample]
  S[Sample] --> F[Filter]
  F --> T((Table))
  S --> P((Plot))
  F --> Tx((Text))
  classDef changed fill:#f96

Overriding reactivity

Agenda

• Reactivity overview

• Reactive calculations

• Overriding reactivity

• Side effects

Overriding reactivity

• By default, when an input changes, any outputs that use it will recalculate
• This isn’t always the user interaction you want
  • Database queries
  • Expensive modeling
  • Grouping multiple filters together
  • Side effects
• Use reactive.event to explicitly specify what should trigger recalculation for an output or calc

Example

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 500
from shiny import Inputs, Outputs, Session, App, reactive, render, req, ui

app_ui = ui.page_fluid(
    ui.input_text("input_txt", "Enter text"),
    ui.input_action_button("send", "Enter"),
    ui.output_text_verbatim("output_txt"),
)


def server(input, output, session):
    @output
    @render.text
    @reactive.event(input.send)
    def output_txt():
        return input.input_txt()


app = App(app_ui, server)

## file: README
Add an `input_action_button` to the app, and use `@reactive.event` to prevent the text from printing until the user presses the button.

reactive.event

@output
@render.text
@reactive.event(input.my_input)
def txt():
  return "Here is my text"

• @reactive.event overrides the usual implicit dependency detection with an explicit trigger
• It can be applied to rendering functions or to @reactive.Calc
• It tells Shiny to invalidate the object whenever or more inputs change
• @reactive.event is often used with action buttons or action links

Your turn

Go to exercises/6-reactive-event or run apps/problem-sets/2-reactivity/2.3-reactive-event locally.

Side effects

Agenda

• Reactivity overview

• Reactive calculations

• Overriding reactivity

• Side effects

What we’ve learned

• How Shiny re-renders elements
• How Shiny detects dependencies between elements (inputs and outputs)
• How to create reusable calculations with @reactive.Calc
• How to explicitly control reactivity with @reactive.event

Is that enough?

• Shiny has a function ui.show_modal which triggers a modal window.
• Using what you know so far, how would you call this function?

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 500
from shiny import App, Inputs, Outputs, Session, reactive, ui, render

app_ui = ui.page_fluid(
    ui.input_action_button("show", "Show modal dialog"), ui.output_text("txt")
)


def server(input: Inputs, output: Outputs, session: Session):
    @reactive.Effect
    @reactive.event(input.show)
    def show_modal():
        m = ui.modal(
            "This is a somewhat important message.",
            title="Click outside the modal to close",
            easy_close=True,
            footer=None,
        )
        ui.modal_show(m)


app = App(app_ui, server)

Return values vs. side effects

• Inputs, outputs, and calculations all produce values
• When an input value changes, downstream calculations and outputs might need to have their values updated as well
• But sometimes we want to execute some code that doesn’t produce a value
  • Doesn’t fit in the categories of “calculation” or “output”

Reactive Effects

• The @reactive.Effect decorator allows you to react to an input without returning a value
• Usually paired with @reactive.event

@reactive.Effect
@reactive.event(input.show)
def toggle_modal():
    m = ui.modal(
        "This is a somewhat important message.",
        title="Click outside the modal to close",
        easy_close=True,
        footer=None,
    )
    ui.modal_show(m)

The rule

• Code that produces an output: @output + @render.*
• Code that produces an intermediate value: @reactive.Calc
• Code that produces only side effects: @reactive.Effect

• Code that produces a value and a side effect: Don’t do this!
  • The “command-query separation” principle

What’s a side effect?

Test your understanding

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 250
from shiny import App, render, ui, reactive, req
import json
from pathlib import Path

with open(Path(__file__).parent / "questions.json", "r") as file:
    questions = json.load(file)

app_ui = ui.page_fluid(ui.output_ui("question"), ui.output_ui("validation"))


def server(input, output, session):
    q_num = reactive.Value(0)

    question_keys = list(questions.keys())

    @reactive.Calc
    def current_q():
        return questions[question_keys[q_num()]]

    @output
    @render.ui
    def question():
        return ui.div(
            ui.h5(question_keys[q_num()], style="margin-bottom: 20px"),
            ui.input_radio_buttons(
                "question",
                "",
                choices=current_q()["choices"],
                selected="",
            ),
        )

    @output
    @render.ui
    def validation():
        req(input.question())
        if input.question() == current_q()["answer"]:
            if q_num() == len(question_keys) - 1:
                return ui.p("Correct! Quiz complete.")
            else:
                return ui.div(
                    ui.p("Correct!"), ui.input_action_button("next", "Next Question")
                )
        return ui.p("Not quite right, try again")

    @reactive.Effect
    @reactive.event(input.next)
    def next_question():
        q_num.set(q_num.get() + 1)


app = App(app_ui, server)

## file: questions.json
{"Writing a CSV": {"choices": ["value", "side effect"], "answer": "side effect"}, "Querying a database": {"choices": ["value", "side effect"], "answer": "value"}, "Adding two numbers": {"choices": ["value", "side effect"], "answer": "value"}, "A function which prints to the console": {"choices": ["value", "side effect"], "answer": "side effect"}, "Fetching the current temperature from an API": {"choices": ["value", "side effect"], "answer": "value"}, "A function which sorts a list in place": {"choices": ["value", "side effect"], "answer": "side effect"}, "Getting a model score for a set of inputs": {"choices": ["value", "side effect"], "answer": "value"}, "Deploying a model to a hosting service": {"choices": ["value", "side effect"], "answer": "side effect"}}

What’s a side effect?

• Somewhat context dependent
• Multiple strategies can work
• If your solution feels complicated and painful, ask whether you should use the other strategy

Your turn

Go to exercises/7-reactive-effects or run apps/problem-sets/3-reactive-effects/3.1-update-slider locally.