Solution comments

Gordon Shotwell · Gordon Shotwell · commit 5c8419d59ae8 · 2024-04-16T09:53:34.000-03:00
diff --git a/apps/problem-sets/1-getting-started/1.0-hello-world/README b/apps/problem-sets/1-getting-started/1.0-hello-world/README
@@ -1 +1,2 @@
-Modify the app to add "Hello World" to the main heading.
+Modify the app to add "Hello World!" to the main heading. 
+Click the play button to run the app.
diff --git a/apps/problem-sets/1-getting-started/1.1-data-frame/app-solution.py b/apps/problem-sets/1-getting-started/1.1-data-frame/app-solution.py
@@ -6,6 +6,8 @@
 df = pd.read_csv(infile)
 df = df.drop(columns=["text"])
 
+# The render.data_frame decorator is used to display dataframes.
+
 
 @render.data_frame
 def penguins_df():
diff --git a/apps/problem-sets/1-getting-started/1.2-debug/app-solution.py b/apps/problem-sets/1-getting-started/1.2-debug/app-solution.py
@@ -7,6 +7,9 @@
 df = df.drop(columns=["text"])
 
 
+# It's important that you use the right decorator for your funciton's return value
+# in this case since the function is returning a dataframe we need to use the
+# `@render.data_frame` decorator.
 @render.data_frame
 def penguins_df():
     return df
diff --git a/apps/problem-sets/1-getting-started/1.3-filter-input/app-solution.py b/apps/problem-sets/1-getting-started/1.3-filter-input/app-solution.py
@@ -3,9 +3,13 @@
 from pathlib import Path
 from data_import import df
 
+# All the inputs start with `ui.input_*`, which adds an input to the app.
+# Note that this input doesn't do anything because we haven't connected it
+# to a rendering function.
+
 ui.input_select(
-    "account",
-    "Account",
+    id="account",
+    label="Account",
     choices=[
         "Berge & Berge",
         "Fritsch & Fritsch",
diff --git a/apps/problem-sets/1-getting-started/1.4-filter-connect/app-solution.py b/apps/problem-sets/1-getting-started/1.4-filter-connect/app-solution.py
@@ -4,8 +4,8 @@
 from data_import import df
 
 ui.input_select(
-    "account",
-    "Account",
+    id="account",
+    label="Account",
     choices=[
         "Berge & Berge",
         "Fritsch & Fritsch",
@@ -18,8 +18,13 @@
 
 @render.data_frame
 def table():
+    # When we call the account input with `input.account()` we can use its value
+    # with regular Python code. This will also cause the rendering function
+    # to rerun whenever the user changes the account value.
     account_subset = df[df["account"] == input.account()]
     account_counts = (
-        account_subset.groupby("sub_account").size().reset_index(name="counts")
+        account_subset.groupby(["account", "sub_account"])
+        .size()
+        .reset_index(name="count")
     )
     return account_counts
diff --git a/apps/problem-sets/1-getting-started/1.4-filter-connect/app.py b/apps/problem-sets/1-getting-started/1.4-filter-connect/app.py
@@ -4,8 +4,8 @@
 from data_import import df
 
 ui.input_select(
-    "account",
-    "Account",
+    id="account",
+    label="Account",
     choices=[
         "Berge & Berge",
         "Fritsch & Fritsch",
@@ -20,6 +20,8 @@
 def table():
     account_subset = df
     account_counts = (
-        account_subset.groupby("sub_account").size().reset_index(name="counts")
+        account_subset.groupby(["account", "sub_account"])
+        .size()
+        .reset_index(name="count")
     )
     return account_counts
diff --git a/apps/problem-sets/1-getting-started/1.5-debug/app-solution.py b/apps/problem-sets/1-getting-started/1.5-debug/app-solution.py
@@ -18,6 +18,8 @@
 
 @render.data_frame
 def table():
+    # Remember that inputs are callable values, so whenever you refer to them
+    # in rendering functions you need to call them (`input.account()` not `input.account`)
     account_subset = df[df["account"] == input.account()]
     account_counts = (
         account_subset.groupby("sub_account").size().reset_index(name="counts")
diff --git a/apps/problem-sets/1-getting-started/1.6-debug/app-solution.py b/apps/problem-sets/1-getting-started/1.6-debug/app-solution.py
@@ -18,6 +18,9 @@
 
 @render.data_frame
 def table():
+    # Inputs can only be called within a reactive context, which
+    # means that if you refer to them outside of a rendering function
+    # you'll get an error.
     account_subset = df[df["account"] == input.account()]
     account_counts = (
         account_subset.groupby("sub_account").size().reset_index(name="counts")
diff --git a/apps/problem-sets/1-getting-started/1.7-add-plot/README b/apps/problem-sets/1-getting-started/1.7-add-plot/README
@@ -1 +1 @@
-Add a second plot output to the app which plots the precision-recall curve. Note that you should use the `@render_plotly` decorator.
+Use the `plot_precision_recall_curve` function from the `plots.py` module to add a second plot output to the app. Note that you should use the `@render_plotly` decorator
diff --git a/apps/problem-sets/1-getting-started/1.7-add-plot/app-solution.py b/apps/problem-sets/1-getting-started/1.7-add-plot/app-solution.py
@@ -15,7 +15,9 @@
     ],
 )
 
-
+# It's a good idea to use helper functions for things like drawing plots
+# or displaying data frames because it makes your app more modular and easy to
+# read.
 @render_plotly
 def precision_recall_plot():
     account_subset = df[df["account"] == input.account()]
diff --git a/apps/problem-sets/2-basic-ui/2.1-sidebar/app-solution.py b/apps/problem-sets/2-basic-ui/2.1-sidebar/app-solution.py
@@ -3,6 +3,8 @@
 from plots import plot_auc_curve, plot_precision_recall_curve
 from shinywidgets import render_plotly
 
+# The ui.sidebar can be included anywhere in your app script,
+# but by convention it usually goes near the top.
 with ui.sidebar():
     ui.input_select(
         "account",
diff --git a/apps/problem-sets/2-basic-ui/2.2-cards/app-solution.py b/apps/problem-sets/2-basic-ui/2.2-cards/app-solution.py
@@ -16,6 +16,10 @@
         ],
     )
 
+
+# Adding a ui.card context manager will add a card to the UI.
+# This is useful for grouping related elements together.
+# You can add as many ui elements as you like to the card.
 with ui.card():
 
     @render_plotly
diff --git a/apps/problem-sets/2-basic-ui/2.3-cards-switch/app-solution.py b/apps/problem-sets/2-basic-ui/2.3-cards-switch/app-solution.py
@@ -16,6 +16,7 @@
         ],
     )
 
+# Cards are great for grouping related elements together.
 with ui.card():
     ui.card_header("Model Metrics")
 
diff --git a/apps/problem-sets/2-basic-ui/2.4-layout-columns/app-solution.py b/apps/problem-sets/2-basic-ui/2.4-layout-columns/app-solution.py
@@ -16,6 +16,9 @@
         ],
     )
 
+# `layout_columns` lays child elements out side by side.
+# You can add anything to the layout columns context manager, but it
+# works best with cards and value boxes.
 with ui.layout_columns():
 
     with ui.card():
diff --git a/apps/problem-sets/3-reactivity/3.1-reactive-calc/README b/apps/problem-sets/3-reactivity/3.1-reactive-calc/README
@@ -1,2 +1,2 @@
-Extract the account filtering logic into a reacitve calculation.
+Extract the account filtering logic into a reactive calculation.
 
diff --git a/apps/problem-sets/3-reactivity/3.1-reactive-calc/app-solution.py b/apps/problem-sets/3-reactivity/3.1-reactive-calc/app-solution.py
@@ -5,6 +5,10 @@
 from shinywidgets import render_plotly
 
 
+# You should always extract repeated logic into a reactive.cacl
+# in addition to making your app easier to read it will also
+# make it run faster because the reactive calc is calculated once
+# even if many other rendering functions retrieve its value.
 @reactive.calc
 def account_data():
     return df[df["account"] == input.account()]
@@ -30,6 +34,7 @@ def account_data():
 
         @render_plotly
         def metric():
+            # `account_data` is called similar to an input.
             if input.metric() == "ROC Curve":
                 return plot_auc_curve(
                     account_data(), "is_electronics", "training_score"
@@ -46,4 +51,5 @@ def metric():
 
         @render_plotly
         def score_dist():
+            # `account_data` is called similar to an input.
             return plot_score_distribution(account_data())
diff --git a/apps/problem-sets/3-reactivity/3.2-stacking-reactives/README b/apps/problem-sets/3-reactivity/3.2-stacking-reactives/README
@@ -1,4 +1,4 @@
-We have a second sidebad input which allows the user to filter the dataset by the number of characters in the `text` field.
+We have a second sidebar input which allows the user to filter the dataset by the number of characters in the `text` field.
 Add a second reactive calculation to the app which filters the `account_data()` reactive.
 
 For reference `input.chars()` returns a tuple with the lower and upper range of a value, and you can filter the data frame with:
diff --git a/apps/problem-sets/3-reactivity/3.2-stacking-reactives/app-solution.py b/apps/problem-sets/3-reactivity/3.2-stacking-reactives/app-solution.py
@@ -10,6 +10,9 @@ def account_data():
     return df[df["account"] == input.account()]
 
 
+# You can call reactive calculations from other reactive calculations.
+# This is very useful for performance because the calculation will be
+# minimally rerun.
 @reactive.calc()
 def character_filter():
     return account_data()[account_data()["text"].str.len().between(*input.chars())]
diff --git a/apps/problem-sets/4-dynamic-ui/4.1-render-express/app-solution.py b/apps/problem-sets/4-dynamic-ui/4.1-render-express/app-solution.py
@@ -30,6 +30,8 @@ def character_filter():
         ],
     )
 
+    # You shouldn't use return values with `render.express` instead just call the inputs
+    # and rendering funcitons and they will be added to the app.
     @render.express
     def sub_selector():
         # We can't use the account_data reactive here because we are using the
diff --git a/apps/problem-sets/5-reactive-effects/5.1-reactive-event/app-solution.py b/apps/problem-sets/5-reactive-effects/5.1-reactive-event/app-solution.py
@@ -13,6 +13,10 @@ def account_data():
     ]
 
 
+# You can control execution by adding `@reactive.event` to any reactive function.
+# This tells Shiny to only trigger this renderer when a particular input changes.
+# Note that when inputs are used in reactive.events they are not called (input.update not input.update())
+# This is because we are watching the reactive itself for changes, not making use of the current value.
 @reactive.calc()
 @reactive.event(input.update, ignore_init=True)
 def character_filter():
diff --git a/apps/problem-sets/5-reactive-effects/5.2-reactive-effect/app-solution.py b/apps/problem-sets/5-reactive-effects/5.2-reactive-effect/app-solution.py
@@ -17,6 +17,8 @@ def character_filter():
     return account_data()[(account_data()["text"].str.len().between(*input.chars()))]
 
 
+# Reactive effects are used for side effects, not values.
+# They are similar to callback functions in other frameworks.
 @reactive.effect
 @reactive.event(input.reset)
 def reset_slider():

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-Modify the app to add "Hello World" to the main heading.`
	`1`	`+Modify the app to add "Hello World!" to the main heading.`
	`2`	`+Click the play button to run the app.`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-Add a second plot output to the app which plots the precision-recall curve. Note that you should use the `@render_plotly` decorator.
	`1`	+Use the `plot_precision_recall_curve` function from the `plots.py` module to add a second plot output to the app. Note that you should use the `@render_plotly` decorator