From 89f07c87fe809396545d0c8945026a0ef6797e80 Mon Sep 17 00:00:00 2001 From: Joseph Tran <joseph.tran@inrae.fr> Date: Fri, 22 Mar 2024 11:27:35 +0100 Subject: [PATCH] add a bunch of update to improve slides rendering and animations --- custom.scss | 5 + index.qmd | 266 ++++++++++++++++++++++++++-------------------------- 2 files changed, 139 insertions(+), 132 deletions(-) diff --git a/custom.scss b/custom.scss index a0823ae..d347411 100644 --- a/custom.scss +++ b/custom.scss @@ -21,3 +21,8 @@ outline: 10px solid #FFCC66; outline-offset: 10px; } + +// Custom Callout blocks +.callout.callout-style-default.my-callout .callout-body { + font-size: 0.5rem; +} \ No newline at end of file diff --git a/index.qmd b/index.qmd index 3865368..7e0a6fd 100644 --- a/index.qmd +++ b/index.qmd @@ -54,7 +54,7 @@ hist(x, breaks = nbins, col = "#75AADB", ``` ::: -## Comment communiquer autour de ses résultats R ? +## Comment communiquer autour de ses résultats R ? {.smaller} En R simple, pour changer un paramètre, il faut modifier le code @@ -82,13 +82,13 @@ et sans avoir à modifier le code [Hello Application](https://prose.shinyapps.io/001-hello/) ::: -## Comment communiquer autour de ses résultats R ? +## Comment communiquer autour de ses résultats R ? {.smaller} Shiny amène avec lui la réactivité ```{shinylive-r} #| standalone: true -#| viewerHeight: 600 +#| viewerHeight: 500 library(shiny) # Define UI for app that draws a histogram ---- @@ -152,17 +152,17 @@ shinyApp(ui = ui, server = server) ## Comment communiquer autour de ses résultats R ? -- Niveau 1 : Partager son code brute +- **Niveau 1 : Partager son code brute** - Pas de contexte ou commentaire - Peut être difficile à déchiffrer - Aucune gestion des dépendances -- Niveau 2 : Utiliser un R Markdown +- **Niveau 2 : Utiliser un R Markdown** - Rapport statique retraçant l’analyse - Pas de ré-exécution possible ## Comment communiquer autour de ses résultats R ? -- Niveau 3 : Mettre en place une application Shiny +- **Niveau 3 : Mettre en place une application Shiny** - Interface graphique permettant de ne pas confronter l’utilisateur au code - Paramètres modifiables et code ré-exécutable - Possibilité d’exporter des plots et rapports @@ -170,7 +170,7 @@ shinyApp(ui = ui, server = server) ## Comment communiquer autour de ses résultats R ? -- Niveau 4 : Déployer l’application Shiny sur un serveur +- **Niveau 4 : Déployer l’application Shiny sur un serveur** - L’application tourne sur un serveur dédié - L’utilisateur n’a plus à se préoccuper de l’installation de R et des packages @@ -579,9 +579,23 @@ fluidPage(  -## Shiny Dashboard +## Shiny Dashboard {.smaller} + +::: columns +::: {.column width="75%"} +[shinydashboard](https://rstudio.github.io/shinydashboard/)  +::: +::: {.column width="25%"} +::: {.callout-tip title="Shiny Dashboard alternatives" .smaller} +- [shinydashboardPlus](https://rinterface.github.io/shinydashboardPlus/) +- [shiny.semantic](https://appsilon.github.io/shiny.semantic/) +- [bs4Dash](https://rinterface.github.io/bs4Dash/index.html) +- [bslib](https://rstudio.github.io/bslib/) +::: +::: +::: # Focus sur Shiny et la réactivité @@ -630,70 +644,138 @@ fluidPage( ## Partager son application Shiny -Déploiement local +**Déploiement local** - Partage du code avec l’utilisateur. - via un package R que l’utilisateur installe en local - via un dépôt GitHub (shiny::runGitHub et shiny::runURL) -Inconvénient : nécessite d’installer R/Rstudio et de gérer l'installation des dépendances +::: {.callout-warning title="Inconvénient"} +Nécessite d’installer R/Rstudio et de gérer l'installation des dépendances +::: + +## Partager son application Shiny {.smaller} + +**Application shinylive** + +[R Shiny Live demo in Quarto!](https://joseph.tran.pages.mia.inra.fr/r-shinylive-demo/) + +```{shinylive-r} +#| standalone: true +#| viewerHeight: 500 +library(shiny) +library(bslib) + +# Define UI for app that draws a histogram ---- +ui <- page_sidebar( + sidebar = sidebar(open = "open", + numericInput("n", "Sample count", 100), + checkboxInput("pause", "Pause", FALSE), + ), + plotOutput("plot", height=600, width=700) +) + +server <- function(input, output, session) { + data <- reactive({ + input$resample + if (!isTRUE(input$pause)) { + invalidateLater(1000) + } + rnorm(input$n) + }) + + output$plot <- renderPlot({ + hist(data(), + breaks = 40, + xlim = c(-2, 2), + ylim = c(0, 1), + lty = "blank", + xlab = "value", + freq = FALSE, + main = "" + ) + + x <- seq(from = -2, to = 2, length.out = 500) + y <- dnorm(x) + lines(x, y, lwd=1.5) + + lwd <- 5 + abline(v=0, col="red", lwd=lwd, lty=2) + abline(v=mean(data()), col="blue", lwd=lwd, lty=1) + + legend("topright", legend = c("Normal", "Mean", "Sample mean"), + col = c("black", "red", "blue"), + lty = c(1, 2, 1), + lwd = c(1, lwd, lwd), + cex = 0.6 + ) + }, res=140) +} + +# Create Shiny app ---- +shinyApp(ui = ui, server = server) +``` + +## Partager son application Shiny {.smaller} + +**Application shinylive** + +YouTube video: guide pas à pas pour créer une application Shiny sans serveur + +[](https://www.youtube.com/watch?v=6y2FnAugP8E) ## Partager son application Shiny -::: columns -::: {.column width="50%" style="text-align: center;"} -Shinyapps.io +**[shinyapps.io](https://docs.rstudio.com/shinyapps.io/)** +::: columns +::: {.column width="70%"} +::: {.callout-tip title="Shinyapps.io" .my-callout} - L’application est hébergée sur les serveurs de RStudio. - - formule gratuite : 5 applications Shiny avec un usage total cumulé de 25h/mois - 13$/mois → 25 applications et 100 heures actives -::: -::: {.column width="50%" style="text-align: center;"} - Déploiement en 1 clic - Dashboard de suivi convivial -- Inconvénient : - - Dépendance à RStudio - - Freemium - - Taille de l’appli limité à 1Go (données externes comprises)::: +::: +::: -- [shinyapps.io](https://docs.rstudio.com/shinyapps.io/) +::: {.column width="30%"} +::: {.callout-important title="Inconvénient" .my-callout} +- Dépendance à RStudio +- Freemium +- Taille de l’appli limité à 1Go (données externes comprises) +::: ::: ::: ## Partager son application Shiny -Shiny Server +**Shiny Server** -- Version free - - un processus R / application qui peut servir plusieurs utilisateurs - - Limite : quand beaucoup d’utilisateurs, ils se bloquent les uns les autres. +::: {.callout-tip title="version free"} +- un processus R / application qui peut servir plusieurs utilisateurs +- Limite : quand beaucoup d’utilisateurs, ils se bloquent les uns les autres. +::: +::: {.callout-important title="version payante"} +- plusieurs processus R / application. +- Des utilisateurs concurrents vont être partagés entre plusieurs processus. + - On peut paramétrer le nombre d’utilisateurs / process et le nombre de process est illimité (selon capacité du serveur) +- **Inconvénient** : version pro très chère → 10000 €/ an +::: ## Partager son application Shiny -Shiny Server - -- Version payante - - plusieurs processus R / application. - - Des utilisateurs concurrents vont être partagés entre plusieurs processus. - - On peut paramétrer le nombre d’utilisateurs / process et le nombre de process est illimité (selon capacité du serveur) -- Inconvénient : version pro très chère → 10000 €/ an - -## Partager son application Shiny -Shinyproxy +**[Shinyproxy](https://www.shinyproxy.io/documentation/)**  -[shinyproxy](https://www.shinyproxy.io/documentation/) - - ## Partager son application Shiny {auto-animate="true"} -Déploiement avec SK8 (version kickflip, 2023) +**Déploiement avec SK8 (version kickflip, 2023)** ::: {style="font-size: 0.75em"} -Projet porté par Jean-François Rey puis porté par le CATI IMOTEP et passage en Inter-CATIs (2022). +Projet porté par **Jean-François Rey** puis porté par le CATI IMOTEP et passage en Inter-CATIs (2022). ::: ::: .r-stack @@ -707,7 +789,7 @@ Projet porté par Jean-François Rey puis porté par le CATI IMOTEP et passage e ## Partager son application Shiny {auto-animate="true"} -Déploiement avec SK8 (version kickflip, 2023) +**Déploiement avec SK8 (version kickflip, 2023)** ::: {style="font-size: 0.75em"} Projet porté par Jean-François Rey puis porté par le CATI IMOTEP et passage en Inter-CATIs (2022). @@ -724,7 +806,7 @@ Projet porté par Jean-François Rey puis porté par le CATI IMOTEP et passage e ## Partager son application Shiny -Déploiement avec SK8 (version kickflip, 2023) +**Déploiement avec SK8 (version kickflip, 2023)** ::: {style="font-size: 0.75em"} Infrastructure fonctionnelle, 60+ applications hébergées @@ -734,7 +816,7 @@ Infrastructure fonctionnelle, 60+ applications hébergées ## Partager son application Shiny -Déploiement avec SK8 (version kickflip, 2023) +**Déploiement avec SK8 (version kickflip, 2023)** ::: {style="font-size: 0.75em"} Quelques exemples @INRAE @@ -744,7 +826,7 @@ Quelques exemples @INRAE ## Partager son application Shiny -Déploiement avec SK8 (version kickflip, 2023) +**Déploiement avec SK8 (version kickflip, 2023)** ::: {style="font-size: 0.75em"} Quelques exemples @INRAE @@ -754,7 +836,7 @@ Quelques exemples @INRAE ## Partager son application Shiny -Déploiement avec SK8 (version kickflip, 2023) +**Déploiement avec SK8 (version kickflip, 2023)** ::: {style="font-size: 0.75em"} Quelques exemples @INRAE @@ -764,7 +846,7 @@ Quelques exemples @INRAE ## Partager son application Shiny -Déploiement avec SK8 (version kickflip, 2023) +**Déploiement avec SK8 (version kickflip, 2023)** ::: {style="font-size: 0.75em"} Plus d'information sur le site web [https://sk8.inrae.fr](https://sk8.inrae.fr/) @@ -774,6 +856,7 @@ Plus d'information sur le site web [https://sk8.inrae.fr](https://sk8.inrae.fr/) ## Take Home Message +::: {.callout-tip title="R Shiny"} - R Shiny permet de rendre un script R interactif, facilement - Possibilité d’utiliser des packages R d’analyse et de faire tourner une application web avec @@ -781,12 +864,15 @@ Plus d'information sur le site web [https://sk8.inrae.fr](https://sk8.inrae.fr/) - R Shiny est la solution idéale pour partager des résultats R qui peuvent être explorés - Plusieurs solutions de déploiement existent et fonctionnent bien, selon les besoins +::: ## Take Home Message +::: {.callout-warning title="R Shiny warnings"} - Nécessité de prendre du temps pour optimiser son code. Notamment, il faut optimiser ce que R charge en mémoire, car une application Shiny peut rapidement saturer la RAM d’une VM - Nécessité de pré-calculer au maximum ce qu’on veut représenter (car R peut être lent) +::: ## Sources : Références @@ -812,90 +898,6 @@ Plus d'information sur le site web [https://sk8.inrae.fr](https://sk8.inrae.fr/) [Organisation de l’UI](https://speakerdeck.com/jcheng5/styling-shiny) +## Atelier Shiny - - - -## Application shinylive - -We'll be walking through the process of creating the following R Shinylive application. Please be aware that it may take some time to load. - -```{shinylive-r} -#| standalone: true -#| viewerHeight: 600 -library(shiny) -library(bslib) - -# Define UI for app that draws a histogram ---- -ui <- page_sidebar( - sidebar = sidebar(open = "open", - numericInput("n", "Sample count", 100), - checkboxInput("pause", "Pause", FALSE), - ), - plotOutput("plot", width=1100) -) - -server <- function(input, output, session) { - data <- reactive({ - input$resample - if (!isTRUE(input$pause)) { - invalidateLater(1000) - } - rnorm(input$n) - }) - - output$plot <- renderPlot({ - hist(data(), - breaks = 40, - xlim = c(-2, 2), - ylim = c(0, 1), - lty = "blank", - xlab = "value", - freq = FALSE, - main = "" - ) - - x <- seq(from = -2, to = 2, length.out = 500) - y <- dnorm(x) - lines(x, y, lwd=1.5) - - lwd <- 5 - abline(v=0, col="red", lwd=lwd, lty=2) - abline(v=mean(data()), col="blue", lwd=lwd, lty=1) - - legend(legend = c("Normal", "Mean", "Sample mean"), - col = c("black", "red", "blue"), - lty = c(1, 2, 1), - lwd = c(1, lwd, lwd), - x = 1, - y = 0.9 - ) - }, res=140) -} - -# Create Shiny app ---- -shinyApp(ui = ui, server = server) -``` - -## Video Tutorial - -Prefer a hands-on visual guide? Check out the following YouTube video: - -[](https://www.youtube.com/watch?v=6y2FnAugP8E) - -We'll go through every step and provide some commentary along the way! - -# Using r-shinylive for Serverless Shiny Apps in Quarto Documents - -Are you interested in creating your own Quarto document with embedded static Shiny apps? This tutorial will guide you through the process of using the `r-shinylive` R package to achieve just that. Let's get started! - -## Installation - -**Step 1:** Install the `r-shinylive` R package. It's currently hosted on GitHub and can be obtained from the R console using the following command: - -```r -# Install the 'pak' package manager if you haven't already -install.packages("pak") -# Install 'r-shinylive' using 'pak' -pak::pak("posit-dev/r-shinylive") -``` +[Learnr tutoriel shiny](https://forgemia.inra.fr/joseph.tran/shiny-tutorial) -- GitLab