From 576793b580b307a2eec368cda610921fe417e03d Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Tue, 12 Dec 2023 17:39:54 -0500 Subject: [PATCH 1/5] docs(layout_columns): Add example app --- shiny/api-examples/layout_columns/app.py | 33 ++++++++++++ .../layout_columns/model_plots.py | 53 +++++++++++++++++++ 2 files changed, 86 insertions(+) create mode 100644 shiny/api-examples/layout_columns/app.py create mode 100644 shiny/api-examples/layout_columns/model_plots.py diff --git a/shiny/api-examples/layout_columns/app.py b/shiny/api-examples/layout_columns/app.py new file mode 100644 index 000000000..bbb5a8fb7 --- /dev/null +++ b/shiny/api-examples/layout_columns/app.py @@ -0,0 +1,33 @@ +from model_plots import * # model plots and cards + +from shiny import App, Inputs, Outputs, Session, reactive, render, ui + +app_ui = ui.page_fluid( + ui.panel_title(ui.h2("Model Dashboard")), + ui.div("Using", ui.code("ui.layout_columns()"), ".", class_="mb-2"), + ui.layout_columns( + card_loss, + card_acc, + card_feat, + col_widths=(5, 7, 12), + # row_heights=(2, 3), + # height="700px", + ), +) + + +def server(input: Inputs, output: Outputs, session: Session): + @render.plot + def loss_over_time(): + return plot_loss_over_time() + + @render.plot + def accuracy_over_time(): + return plot_accuracy_over_time() + + @render.plot + def feature_importance(): + return plot_feature_importance() + + +app = App(app_ui, server) diff --git a/shiny/api-examples/layout_columns/model_plots.py b/shiny/api-examples/layout_columns/model_plots.py new file mode 100644 index 000000000..971a6d338 --- /dev/null +++ b/shiny/api-examples/layout_columns/model_plots.py @@ -0,0 +1,53 @@ +import matplotlib.pyplot as plt +import numpy as np + +from shiny import ui + + +def plot_loss_over_time(): + epochs = np.arange(1, 101) + loss = 1000 / np.sqrt(epochs) + np.random.rand(100) * 25 + + fig = plt.figure(figsize=(10, 6)) + plt.plot(epochs, loss) + plt.xlabel("Epochs") + plt.ylabel("Loss") + return fig + + +def plot_accuracy_over_time(): + epochs = np.arange(1, 101) + accuracy = np.sqrt(epochs) / 12 + np.random.rand(100) * 0.15 + accuracy = [np.min([np.max(accuracy[:i]), 1]) for i in range(1, 101)] + + fig = plt.figure(figsize=(10, 6)) + plt.plot(epochs, accuracy) + plt.xlabel("Epochs") + plt.ylabel("Accuracy") + return fig + + +def plot_feature_importance(): + features = ["Product Category", "Price", "Brand", "Rating", "Number of Reviews"] + importance = np.random.rand(5) + + fig = plt.figure(figsize=(10, 6)) + plt.barh(features, importance) + plt.xlabel("Importance") + return fig + + +card_loss = ui.card( + ui.card_header("Loss Over Time"), + ui.output_plot("loss_over_time"), +) + +card_acc = ui.card( + ui.card_header("Accuracy Over Time"), + ui.output_plot("accuracy_over_time"), +) + +card_feat = ui.card( + ui.card_header("Feature Importance"), + ui.output_plot("feature_importance"), +) From 3872b52b387a7dd7f28b2175deb8485afc3ff5aa Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Tue, 12 Dec 2023 19:56:06 -0500 Subject: [PATCH 2/5] chore: remove unused import --- shiny/api-examples/layout_columns/app.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shiny/api-examples/layout_columns/app.py b/shiny/api-examples/layout_columns/app.py index bbb5a8fb7..90cb02c00 100644 --- a/shiny/api-examples/layout_columns/app.py +++ b/shiny/api-examples/layout_columns/app.py @@ -1,6 +1,6 @@ from model_plots import * # model plots and cards -from shiny import App, Inputs, Outputs, Session, reactive, render, ui +from shiny import App, Inputs, Outputs, Session, render, ui app_ui = ui.page_fluid( ui.panel_title(ui.h2("Model Dashboard")), From 0dc784ac8944fcfd53d1e629575c64dec2a32d8e Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Wed, 13 Dec 2023 11:09:13 -0500 Subject: [PATCH 3/5] enable full_screen in example cards --- shiny/api-examples/layout_columns/model_plots.py | 3 +++ 1 file changed, 3 insertions(+) diff --git a/shiny/api-examples/layout_columns/model_plots.py b/shiny/api-examples/layout_columns/model_plots.py index 971a6d338..951204df9 100644 --- a/shiny/api-examples/layout_columns/model_plots.py +++ b/shiny/api-examples/layout_columns/model_plots.py @@ -40,14 +40,17 @@ def plot_feature_importance(): card_loss = ui.card( ui.card_header("Loss Over Time"), ui.output_plot("loss_over_time"), + full_screen=True, ) card_acc = ui.card( ui.card_header("Accuracy Over Time"), ui.output_plot("accuracy_over_time"), + full_screen=True, ) card_feat = ui.card( ui.card_header("Feature Importance"), ui.output_plot("feature_importance"), + full_screen=True, ) From 9363d9a9035f8236d9ffde4be339a290a963e296 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Wed, 13 Dec 2023 11:09:24 -0500 Subject: [PATCH 4/5] use `ui.markdown()` --- shiny/api-examples/layout_columns/app.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shiny/api-examples/layout_columns/app.py b/shiny/api-examples/layout_columns/app.py index 90cb02c00..cc455c64b 100644 --- a/shiny/api-examples/layout_columns/app.py +++ b/shiny/api-examples/layout_columns/app.py @@ -4,7 +4,7 @@ app_ui = ui.page_fluid( ui.panel_title(ui.h2("Model Dashboard")), - ui.div("Using", ui.code("ui.layout_columns()"), ".", class_="mb-2"), + ui.markdown("Using `ui.layout_columns()` for the layout."), ui.layout_columns( card_loss, card_acc, From efcd7e12afdc93ba38a3017adfcf95387a2a65be Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Thu, 14 Dec 2023 21:22:09 -0500 Subject: [PATCH 5/5] feat: set column widths at "sm" breakpoint So that they effect is visible in the inline preview --- shiny/api-examples/layout_columns/app.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shiny/api-examples/layout_columns/app.py b/shiny/api-examples/layout_columns/app.py index cc455c64b..4691f902c 100644 --- a/shiny/api-examples/layout_columns/app.py +++ b/shiny/api-examples/layout_columns/app.py @@ -9,7 +9,7 @@ card_loss, card_acc, card_feat, - col_widths=(5, 7, 12), + col_widths={"sm": (5, 7, 12)}, # row_heights=(2, 3), # height="700px", ),