Merge pull request #6 from posit-conf-2024/hello-shiny-edits

Hello shiny edits

_extensions/kmasiello/positconfslides/custom.scss

@@ -96,4 +96,12 @@ section div.has-dark-background blockquote {
 
 .largest {
   font-size: 500%;
+}
+
+// tables
+
+.table-striped {
+  > tbody > tr:nth-of-type(even) > * {
+    background-color: #f2f2f2;
+  }
 }

_quarto.yml

@@ -31,23 +31,27 @@ website:
         href: https://discord.gg/AQVJzG2bnN
 
   sidebar:
-    - title: "Hallo, Shiny express!"
+    - title: "Hello, Shiny express!"
       contents:      
         - href: docs/shiny-express.qmd
           text: Slides
         - section: "Exercises"
           contents: 
-          - docs/exercises/express-101-hello-world/index.qmd
-          - docs/exercises/express-102-data-frame/index.qmd
-          - docs/exercises/express-103-debug/index.qmd
-          - docs/exercises/express-104-filter/index.qmd
-          - docs/exercises/express-105-connect-filter/index.qmd
+          - docs/exercises/express-101-run-app/index.qmd
+          - docs/exercises/express-102-ui-module/index.qmd
+          - docs/exercises/express-103-inputs/index.qmd
+          - docs/exercises/express-104-outputs/index.qmd
+          - docs/exercises/express-105-reactivity/index.qmd
           - docs/exercises/express-106-debug/index.qmd
           - docs/exercises/express-107-debug/index.qmd
-          - docs/exercises/express-108-plot/index.qmd
+          - docs/exercises/express-108-debug/index.qmd
+          - docs/exercises/express-109-debug/index.qmd
+          - docs/exercises/express-110-app/index.qmd
         - section: "Apps"
           contents:
-          - docs/apps/000-penguins/index.qmd
+          - docs/apps/101-input/index.qmd
+          - docs/apps/102-output/index.qmd
+          - docs/apps/103-table/index.qmd
 
     - title: "Reactivity"
       contents:

docs/apps/101-input/index.qmd

@@ -0,0 +1,15 @@
+---
+title: "101 Input"
+---
+
+```{python}
+# | echo: false
+# | output: asis
+import sys
+helpers_path = "../../exercises/"
+if helpers_path not in sys.path:
+    sys.path.append(helpers_path)
+from helpers import problem_app_express, getcwd
+
+problem_app_express(getcwd())
+```

docs/apps/101-input/problem/app.py

@@ -0,0 +1,9 @@
+from shiny.express import ui
+
+ui.input_slider(
+    id="n", 
+    label="Choose n", 
+    min=0, 
+    max=100, 
+    value=20
+)

docs/apps/101-input/problem/requirements.txt

@@ -0,0 +1 @@
+shiny==1.0.0

docs/apps/102-output/index.qmd

@@ -0,0 +1,15 @@
+---
+title: "102 Output"
+---
+
+```{python}
+# | echo: false
+# | output: asis
+import sys
+helpers_path = "../../exercises/"
+if helpers_path not in sys.path:
+    sys.path.append(helpers_path)
+from helpers import problem_app_express, getcwd
+
+problem_app_express(getcwd())
+```

docs/apps/102-output/problem/app.py

@@ -0,0 +1,6 @@
+from shiny.express import render
+
+@render.code  
+def text():
+    txt="Some text to display in code format"
+    return txt

docs/apps/102-output/problem/requirements.txt

@@ -0,0 +1 @@
+shiny==1.0.0

docs/apps/103-table/index.qmd

@@ -0,0 +1,15 @@
+---
+title: "103 Table"
+---
+
+```{python}
+# | echo: false
+# | output: asis
+import sys
+helpers_path = "../../exercises/"
+if helpers_path not in sys.path:
+    sys.path.append(helpers_path)
+from helpers import problem_app_express, getcwd
+
+problem_app_express(getcwd())
+```

docs/apps/103-table/problem/app.py

@@ -0,0 +1,22 @@
+from shiny.express import ui
+
+ui.input_select(
+    id="account",
+    label="Account",
+    choices=[
+    "Berge & Berge",
+    "Fritsch & Fritsch",
+    "Hintz & Hintz",
+    "Mosciski and Sons",
+    "Wolff Ltd",
+]
+)
+
+ui.input_radio_buttons(
+    "variable",
+    "Select a variable to plot",
+    choices={
+        "prod_score": "Product Score", 
+        "training_score": "Training Score"
+    }
+)

docs/exercises/express-105-connect-filter/problem/data_import.py → docs/apps/103-table/problem/data_import.py

@@ -1,8 +1,7 @@
 from pathlib import Path
 import pandas as pd
-import numpy as np
 
 file_path = Path(__file__).parent / "simulated-data.csv"
-
 df = pd.read_csv(file_path, dtype={"sub_account": str})
 df["date"] = pd.to_datetime(df["date"], errors="coerce")
+df = df.drop(columns=["text"])

docs/apps/103-table/problem/plots.py

@@ -0,0 +1,7 @@
+import plotly.express as px
+from pandas import DataFrame
+
+def plot_var_distribution(df: DataFrame, var="prod_score"):
+    fig = px.histogram(df, x=var, nbins=50, title="Model scores")
+    fig.update_layout(xaxis_title="Score", yaxis_title="Density")
+    return fig

docs/exercises/express-105-connect-filter/problem/requirements.txt → docs/apps/103-table/problem/requirements.txt

@@ -1,2 +1,3 @@
-pandas
+shiny==1.0.0
+pandas
 plotly

docs/exercises/express-108-plot/index.qmd → docs/exercises/express-101-run-app/index.qmd

@@ -1,5 +1,5 @@
 ---
-title: "108 Add plot"
+title: "101 Run app"
 ---
 
 ```{python}

docs/exercises/express-101-run-app/problem/README

@@ -0,0 +1 @@
+Can you run a Shiny app? Navigate to the problem tab. Then click the play button to run your first app.

docs/exercises/express-101-run-app/problem/app-solution.py

@@ -0,0 +1,7 @@
+from shiny.express import ui, render, input
+
+ui.input_text("name", "Type a name", value="world")
+
+@render.text
+def greeting():
+  return f"Hello {input.name()}!"

docs/exercises/express-101-run-app/problem/app.py

@@ -0,0 +1,9 @@
+from shiny.express import ui, render, input
+
+ui.input_text("name", "Type a name", value="world")
+
+@render.text
+def greeting():
+  return f"Hello {input.name()}!"
+
+

docs/exercises/express-105-connect-filter/index.qmd → docs/exercises/express-102-ui-module/index.qmd

@@ -1,5 +1,5 @@
 ---
-title: "105 Connect input"
+title: "102 The ui module"
 ---
 
 ```{python}

docs/exercises/express-102-ui-module/problem/README

@@ -0,0 +1 @@
+Add markdown syntax highlighting in combination with the `markdown()` function from the `ui` submodule to create this (not very reactive) app.

docs/exercises/express-102-ui-module/problem/app-solution.py

@@ -0,0 +1,15 @@
+from shiny.express import ui
+
+ui.markdown(
+    """
+    ## Why Shiny for Python? 
+
+    Shiny lets you make pure Python web apps quickly, without worrying about: 
+
+    - cache 
+    - state
+    - callbacks 
+
+    ...or even HTML, CSS, and JavaScript.
+    """
+)

docs/exercises/express-102-ui-module/problem/app.py

@@ -0,0 +1,13 @@
+from shiny.express import ui
+
+"""
+Why Shiny for Python? 
+
+Shiny lets you make pure Python web apps quickly, without worrying about: 
+
+cache 
+state
+callbacks 
+
+...or even HTML, CSS, and JavaScript.
+"""