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(
 
 ![](assets/img/layouts_onglets.png)
 
-## Shiny Dashboard
+## Shiny Dashboard {.smaller}
+
+::: columns
+::: {.column width="75%"}
+[shinydashboard](https://rstudio.github.io/shinydashboard/)
 
 ![](assets/img/shiny_dashboard.png)
+:::
+::: {.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
+
+[![Creating a Serverless Shiny App using Quarto with R Shinylive](https://img.youtube.com/vi/6y2FnAugP8E/0.jpg)](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/)**
 
 ![](assets/img/shinyproxy.png)
 
-[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:
-
-[![Creating a Serverless Shiny App using Quarto with R Shinylive](https://img.youtube.com/vi/6y2FnAugP8E/0.jpg)](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