├── .gitignore ├── 01_templates ├── overview_templates.md ├── template_1.R ├── template_2.R └── template_3.R ├── 02_solutions ├── solution_1.R ├── solution_2.R └── solution_3.R ├── 03_additional_information ├── example_destroy_observeevent.R └── explanation_destroy_observeevents.Rmd ├── LICENSE ├── README.md ├── dynamic_modules.Rmd ├── dynamic_modules.html ├── dynamic_shiny_modules.Rproj ├── libs └── header-attrs │ └── header-attrs.js └── xaringan-themer.css /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | .Ruserdata 5 | overview_live_coding.Rmd 6 | notes_presentation.Rmd -------------------------------------------------------------------------------- /01_templates/overview_templates.md: -------------------------------------------------------------------------------- 1 | # Overview about the programming examples 2 | The templates are used during the tutorial as the starting points for the following examples: 3 | 4 | - [Dynamically add modules](template_1.R) 5 | - [Remove the module UI](template_2.R) 6 | - [Remove the `input`s of removed modules](template_3.R) -------------------------------------------------------------------------------- /01_templates/template_1.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(ggplot2) 3 | 4 | graph_UI <- function(id) { 5 | ns <- NS(id) 6 | 7 | tagList( 8 | selectInput( 9 | inputId = ns("plottype"), 10 | label = "plot type", 11 | choices = c("boxplot", "histogram") 12 | ), 13 | plotOutput( 14 | outputId = ns("plot_1") 15 | ) 16 | ) 17 | } 18 | 19 | graph_server <- function(id) { 20 | moduleServer( 21 | id, 22 | function(input, output, session) { 23 | output$plot_1 <- renderPlot({ 24 | p <- ggplot(mtcars, aes(x = mpg)) 25 | 26 | if (input$plottype == "boxplot") { 27 | p <- p + geom_boxplot() 28 | } else { 29 | p <- p + geom_histogram() 30 | } 31 | 32 | p 33 | 34 | }) 35 | } 36 | ) 37 | } 38 | 39 | ui <- fluidPage( 40 | graph_UI("my_module") 41 | ) 42 | 43 | server <- function(input, output, session) { 44 | graph_server("my_module") 45 | } 46 | 47 | shinyApp(ui, server) -------------------------------------------------------------------------------- /01_templates/template_2.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(ggplot2) 3 | 4 | graph_UI <- function(id) { 5 | ns <- NS(id) 6 | 7 | tagList( 8 | selectInput( 9 | inputId = ns("plottype"), 10 | label = "plot type", 11 | choices = c("boxplot", "histogram") 12 | ), 13 | plotOutput( 14 | outputId = ns("plot_1") 15 | ) 16 | ) 17 | } 18 | 19 | graph_server <- function(id) { 20 | moduleServer( 21 | id, 22 | function(input, output, session) { 23 | output$plot_1 <- renderPlot({ 24 | p <- ggplot(mtcars, aes(x = mpg)) 25 | 26 | if (input$plottype == "boxplot") { 27 | p <- p + geom_boxplot() 28 | } else { 29 | p <- p + geom_histogram() 30 | } 31 | 32 | p 33 | 34 | }) 35 | } 36 | ) 37 | } 38 | 39 | ui <- fluidPage( 40 | actionButton( 41 | inputId = "add_module", 42 | label = "Add a module" 43 | ), 44 | div( 45 | id = "add_here" 46 | ) 47 | ) 48 | 49 | server <- function(input, output, session) { 50 | observeEvent(input$add_module, { 51 | graph_server( 52 | id = paste0("id_", input$add_module) 53 | ) 54 | 55 | insertUI( 56 | selector = "#add_here", 57 | ui = graph_UI(id = paste0("id_", input$add_module)) 58 | ) 59 | }) 60 | } 61 | 62 | shinyApp(ui, server) -------------------------------------------------------------------------------- /01_templates/template_3.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(ggplot2) 3 | 4 | graph_UI <- function(id) { 5 | ns <- NS(id) 6 | 7 | div( 8 | id = id, 9 | selectInput( 10 | inputId = ns("plottype"), 11 | label = "plot type", 12 | choices = c("boxplot", "histogram") 13 | ), 14 | plotOutput( 15 | outputId = ns("plot_1") 16 | ) 17 | ) 18 | } 19 | 20 | graph_server <- function(id) { 21 | moduleServer( 22 | id, 23 | function(input, output, session) { 24 | output$plot_1 <- renderPlot({ 25 | p <- ggplot(mtcars, aes(x = mpg)) 26 | 27 | if (input$plottype == "boxplot") { 28 | p <- p + geom_boxplot() 29 | } else { 30 | p <- p + geom_histogram() 31 | } 32 | 33 | p 34 | 35 | }) 36 | } 37 | ) 38 | } 39 | 40 | ui <- fluidPage( 41 | actionButton( 42 | inputId = "add_module", 43 | label = "Add a module" 44 | ), 45 | actionButton( 46 | inputId = "remove_module", 47 | label = "Remove a module" 48 | ), 49 | div( 50 | id = "add_here" 51 | ) 52 | ) 53 | 54 | server <- function(input, output, session) { 55 | 56 | active_modules <- reactiveVal(value = NULL) 57 | 58 | observeEvent(input$add_module, { 59 | # update the list of currently shown modules 60 | current_id <- paste0("id_", input$add_module) 61 | active_modules(c(current_id, active_modules())) 62 | 63 | graph_server( 64 | id = current_id 65 | ) 66 | 67 | insertUI( 68 | selector = "#add_here", 69 | ui = graph_UI(id = current_id) 70 | ) 71 | }) 72 | 73 | observeEvent(input$remove_module, { 74 | 75 | # only remove a module if there is at least one module shown 76 | if (length(active_modules()) > 0) { 77 | current_id <- active_modules()[1] 78 | removeUI( 79 | selector = paste0("#", current_id) 80 | ) 81 | 82 | # update the list of currently shown modules 83 | active_modules(active_modules()[-1]) 84 | } 85 | }) 86 | } 87 | 88 | shinyApp(ui, server) -------------------------------------------------------------------------------- /02_solutions/solution_1.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(ggplot2) 3 | 4 | graph_UI <- function(id) { 5 | ns <- NS(id) 6 | 7 | tagList( 8 | selectInput( 9 | inputId = ns("plottype"), 10 | label = "plot type", 11 | choices = c("boxplot", "histogram") 12 | ), 13 | plotOutput( 14 | outputId = ns("plot_1") 15 | ) 16 | ) 17 | } 18 | 19 | graph_server <- function(id) { 20 | moduleServer( 21 | id, 22 | function(input, output, session) { 23 | output$plot_1 <- renderPlot({ 24 | p <- ggplot(mtcars, aes(x = mpg)) 25 | 26 | if (input$plottype == "boxplot") { 27 | p <- p + geom_boxplot() 28 | } else { 29 | p <- p + geom_histogram() 30 | } 31 | 32 | p 33 | 34 | }) 35 | } 36 | ) 37 | } 38 | 39 | ui <- fluidPage( 40 | actionButton( 41 | inputId = "add_module", 42 | label = "Add a module" 43 | ), 44 | div( 45 | id = "add_here" 46 | ) 47 | ) 48 | 49 | server <- function(input, output, session) { 50 | observeEvent(input$add_module, { 51 | graph_server( 52 | id = paste0("id_", input$add_module) 53 | ) 54 | 55 | insertUI( 56 | selector = "#add_here", 57 | ui = graph_UI(id = paste0("id_", input$add_module)) 58 | ) 59 | }) 60 | } 61 | 62 | shinyApp(ui, server) -------------------------------------------------------------------------------- /02_solutions/solution_2.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(ggplot2) 3 | 4 | graph_UI <- function(id) { 5 | ns <- NS(id) 6 | 7 | div( 8 | id = id, 9 | selectInput( 10 | inputId = ns("plottype"), 11 | label = "plot type", 12 | choices = c("boxplot", "histogram") 13 | ), 14 | plotOutput( 15 | outputId = ns("plot_1") 16 | ) 17 | ) 18 | } 19 | 20 | graph_server <- function(id) { 21 | moduleServer( 22 | id, 23 | function(input, output, session) { 24 | output$plot_1 <- renderPlot({ 25 | p <- ggplot(mtcars, aes(x = mpg)) 26 | 27 | if (input$plottype == "boxplot") { 28 | p <- p + geom_boxplot() 29 | } else { 30 | p <- p + geom_histogram() 31 | } 32 | 33 | p 34 | 35 | }) 36 | } 37 | ) 38 | } 39 | 40 | ui <- fluidPage( 41 | actionButton( 42 | inputId = "add_module", 43 | label = "Add a module" 44 | ), 45 | actionButton( 46 | inputId = "remove_module", 47 | label = "Remove a module" 48 | ), 49 | div( 50 | id = "add_here" 51 | ) 52 | ) 53 | 54 | server <- function(input, output, session) { 55 | 56 | active_modules <- reactiveVal(value = NULL) 57 | 58 | observeEvent(input$add_module, { 59 | # update the list of currently shown modules 60 | current_id <- paste0("id_", input$add_module) 61 | active_modules(c(current_id, active_modules())) 62 | 63 | graph_server( 64 | id = current_id 65 | ) 66 | 67 | insertUI( 68 | selector = "#add_here", 69 | ui = graph_UI(id = current_id) 70 | ) 71 | }) 72 | 73 | observeEvent(input$remove_module, { 74 | 75 | # only remove a module if there is at least one module shown 76 | if (length(active_modules()) > 0) { 77 | current_id <- active_modules()[1] 78 | removeUI( 79 | selector = paste0("#", current_id) 80 | ) 81 | 82 | # update the list of currently shown modules 83 | active_modules(active_modules()[-1]) 84 | } 85 | }) 86 | } 87 | 88 | shinyApp(ui, server) -------------------------------------------------------------------------------- /02_solutions/solution_3.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(ggplot2) 3 | 4 | graph_UI <- function(id) { 5 | ns <- NS(id) 6 | 7 | div( 8 | id = id, 9 | selectInput( 10 | inputId = ns("plottype"), 11 | label = "plot type", 12 | choices = c("boxplot", "histogram") 13 | ), 14 | plotOutput( 15 | outputId = ns("plot_1") 16 | ) 17 | ) 18 | } 19 | 20 | graph_server <- function(id) { 21 | moduleServer( 22 | id, 23 | function(input, output, session) { 24 | output$plot_1 <- renderPlot({ 25 | p <- ggplot(mtcars, aes(x = mpg)) 26 | 27 | if (input$plottype == "boxplot") { 28 | p <- p + geom_boxplot() 29 | } else { 30 | p <- p + geom_histogram() 31 | } 32 | 33 | p 34 | 35 | }) 36 | } 37 | ) 38 | } 39 | 40 | remove_shiny_inputs <- function(id, .input) { 41 | invisible( 42 | lapply(grep(id, names(.input), value = TRUE), function(i) { 43 | .subset2(.input, "impl")$.values$remove(i) 44 | }) 45 | ) 46 | } 47 | 48 | ui <- fluidPage( 49 | actionButton( 50 | inputId = "add_module", 51 | label = "Add a module" 52 | ), 53 | actionButton( 54 | inputId = "remove_module", 55 | label = "Remove a module" 56 | ), 57 | div( 58 | id = "add_here" 59 | ) 60 | ) 61 | 62 | server <- function(input, output, session) { 63 | 64 | active_modules <- reactiveVal(value = NULL) 65 | 66 | observeEvent(input$add_module, { 67 | # update the list of currently shown modules 68 | current_id <- paste0("id_", input$add_module) 69 | active_modules(c(current_id, active_modules())) 70 | 71 | graph_server( 72 | id = current_id 73 | ) 74 | 75 | insertUI( 76 | selector = "#add_here", 77 | ui = graph_UI(id = current_id) 78 | ) 79 | }) 80 | 81 | observeEvent(input$remove_module, { 82 | 83 | # only remove a module if there is at least one module shown 84 | if (length(active_modules()) > 0) { 85 | current_id <- active_modules()[1] 86 | removeUI( 87 | selector = paste0("#", current_id) 88 | ) 89 | 90 | # remove the inputs 91 | remove_shiny_inputs( 92 | id = current_id, 93 | .input = input 94 | ) 95 | 96 | # update the list of currently shown modules 97 | active_modules(active_modules()[-1]) 98 | } 99 | }) 100 | } 101 | 102 | shinyApp(ui, server) -------------------------------------------------------------------------------- /03_additional_information/example_destroy_observeevent.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(ggplot2) 3 | 4 | graph_UI <- function(id) { 5 | ns <- NS(id) 6 | 7 | div( 8 | id = id, 9 | selectInput( 10 | inputId = ns("plottype"), 11 | label = "plot type", 12 | choices = c("boxplot", "histogram") 13 | ), 14 | actionButton( 15 | inputId = ns("change_colour"), 16 | label = "change colour" 17 | ), 18 | plotOutput( 19 | outputId = ns("plot_1") 20 | ) 21 | ) 22 | } 23 | 24 | graph_server <- function(id) { 25 | moduleServer( 26 | id, 27 | function(input, output, session) { 28 | plot_colour <- reactiveVal(value = "black") 29 | default_colours <- c("black", "red", "green", "blue") 30 | 31 | session$userData[[paste0(id, "_observer_", "1")]] <- 32 | observeEvent(input$change_colour, { 33 | colour_index <- input$change_colour %% 4 + 1 34 | new_colour <- default_colours[colour_index] 35 | plot_colour(new_colour) 36 | }) 37 | 38 | output$plot_1 <- renderPlot({ 39 | p <- ggplot(mtcars, aes(x = mpg)) 40 | 41 | if (input$plottype == "boxplot") { 42 | p <- p + geom_boxplot(fill = plot_colour()) 43 | } else { 44 | p <- p + geom_histogram(fill = plot_colour()) 45 | } 46 | 47 | p 48 | 49 | }) 50 | } 51 | ) 52 | } 53 | 54 | remove_shiny_inputs <- function(id, .input) { 55 | invisible( 56 | lapply(grep(id, names(.input), value = TRUE), function(i) { 57 | .subset2(.input, "impl")$.values$remove(i) 58 | }) 59 | ) 60 | } 61 | 62 | remove_observers <- function(id, .session) { 63 | invisible( 64 | lapply(grep(paste0(id, "_observer"), names(.session$userData), value = TRUE), 65 | function(i) { 66 | .subset2(.session$userData, i)$destroy() 67 | }) 68 | ) 69 | } 70 | 71 | ui <- fluidPage( 72 | actionButton( 73 | inputId = "add_module", 74 | label = "Add a module" 75 | ), 76 | actionButton( 77 | inputId = "remove_module", 78 | label = "Remove a module" 79 | ), 80 | div( 81 | id = "add_here" 82 | ) 83 | ) 84 | 85 | server <- function(input, output, session) { 86 | 87 | active_modules <- reactiveVal(value = NULL) 88 | max_module_used <- reactiveVal(value = 0) 89 | 90 | observeEvent(input$add_module, { 91 | # update the number of currently shown modules 92 | max_module_used(max_module_used() + 1) 93 | active_modules(c(max_module_used(), active_modules())) 94 | current_id <- paste0("id_", max_module_used()) 95 | 96 | graph_server( 97 | id = current_id 98 | ) 99 | 100 | insertUI( 101 | selector = "#add_here", 102 | ui = graph_UI(id = current_id) 103 | ) 104 | }) 105 | 106 | observeEvent(input$remove_module, { 107 | 108 | # only remove a module if there is at least one module shown 109 | if (length(active_modules()) > 0) { 110 | current_id <- paste0("id_", active_modules()[1]) 111 | removeUI( 112 | selector = paste0("#", current_id) 113 | ) 114 | 115 | # remove the inputs 116 | remove_shiny_inputs( 117 | id = current_id, 118 | .input = input 119 | ) 120 | 121 | # remove the observers 122 | remove_observers( 123 | id = current_id, 124 | .session = session 125 | ) 126 | 127 | # update the number of currently shown modules 128 | active_modules(active_modules()[-1]) 129 | } 130 | }) 131 | } 132 | 133 | shinyApp(ui, server) -------------------------------------------------------------------------------- /03_additional_information/explanation_destroy_observeevents.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Destroy `observeEvent`s" 3 | author: "Jonas Hagenberg" 4 | output: html_document 5 | --- 6 | 7 | ```{r setup, include=FALSE} 8 | knitr::opts_chunk$set(echo = TRUE) 9 | ``` 10 | 11 | # Rationale 12 | - `observeEvent`s stay registered and are duplicated when a module with the 13 | same `id` is added again 14 | - many registered `observeEvent`s can negatively impact the performance 15 | 16 | # Solution 17 | - use the `destroy` method of an `observeEvent` 18 | - in order to access the `destroy` method of an `observeEvent`, 19 | store the `observeEvent` to `session$userData` 20 | - check out [Appsilon's blog post](https://appsilon.com/how-to-safely-remove-a-dynamic-shiny-module/) on this topic 21 | 22 | ## Utility function 23 | If you follow the naming convention of `{module id}_observer_{observe name}` for the `observeEvent`s, you can use the following function to destroy the `observeEvent`s when you delete a module. `id` is the module `id` and for `.session` you pass the `session` object. 24 | 25 | Please look at `example_destroy_observeevent.R` for a working example. 26 | 27 | ```{r, eval = FALSE} 28 | remove_observers <- function(id, .session) { 29 | invisible( 30 | lapply(grep(paste0(id, "_observer"), names(.session$userData), value = TRUE), 31 | function(i) { 32 | .subset2(.session$userData, i)$destroy() 33 | }) 34 | ) 35 | } 36 | ``` -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Attribution-NonCommercial-ShareAlike 4.0 International 2 | 3 | ======================================================================= 4 | 5 | Creative Commons Corporation ("Creative Commons") is not a law firm and 6 | does not provide legal services or legal advice. Distribution of 7 | Creative Commons public licenses does not create a lawyer-client or 8 | other relationship. Creative Commons makes its licenses and related 9 | information available on an "as-is" basis. Creative Commons gives no 10 | warranties regarding its licenses, any material licensed under their 11 | terms and conditions, or any related information. Creative Commons 12 | disclaims all liability for damages resulting from their use to the 13 | fullest extent possible. 14 | 15 | Using Creative Commons Public Licenses 16 | 17 | Creative Commons public licenses provide a standard set of terms and 18 | conditions that creators and other rights holders may use to share 19 | original works of authorship and other material subject to copyright 20 | and certain other rights specified in the public license below. The 21 | following considerations are for informational purposes only, are not 22 | exhaustive, and do not form part of our licenses. 23 | 24 | Considerations for licensors: Our public licenses are 25 | intended for use by those authorized to give the public 26 | permission to use material in ways otherwise restricted by 27 | copyright and certain other rights. Our licenses are 28 | irrevocable. Licensors should read and understand the terms 29 | and conditions of the license they choose before applying it. 30 | Licensors should also secure all rights necessary before 31 | applying our licenses so that the public can reuse the 32 | material as expected. Licensors should clearly mark any 33 | material not subject to the license. This includes other CC- 34 | licensed material, or material used under an exception or 35 | limitation to copyright. More considerations for licensors: 36 | wiki.creativecommons.org/Considerations_for_licensors 37 | 38 | Considerations for the public: By using one of our public 39 | licenses, a licensor grants the public permission to use the 40 | licensed material under specified terms and conditions. If 41 | the licensor's permission is not necessary for any reason--for 42 | example, because of any applicable exception or limitation to 43 | copyright--then that use is not regulated by the license. Our 44 | licenses grant only permissions under copyright and certain 45 | other rights that a licensor has authority to grant. Use of 46 | the licensed material may still be restricted for other 47 | reasons, including because others have copyright or other 48 | rights in the material. A licensor may make special requests, 49 | such as asking that all changes be marked or described. 50 | Although not required by our licenses, you are encouraged to 51 | respect those requests where reasonable. More considerations 52 | for the public: 53 | wiki.creativecommons.org/Considerations_for_licensees 54 | 55 | ======================================================================= 56 | 57 | Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International 58 | Public License 59 | 60 | By exercising the Licensed Rights (defined below), You accept and agree 61 | to be bound by the terms and conditions of this Creative Commons 62 | Attribution-NonCommercial-ShareAlike 4.0 International Public License 63 | ("Public License"). To the extent this Public License may be 64 | interpreted as a contract, You are granted the Licensed Rights in 65 | consideration of Your acceptance of these terms and conditions, and the 66 | Licensor grants You such rights in consideration of benefits the 67 | Licensor receives from making the Licensed Material available under 68 | these terms and conditions. 69 | 70 | 71 | Section 1 -- Definitions. 72 | 73 | a. Adapted Material means material subject to Copyright and Similar 74 | Rights that is derived from or based upon the Licensed Material 75 | and in which the Licensed Material is translated, altered, 76 | arranged, transformed, or otherwise modified in a manner requiring 77 | permission under the Copyright and Similar Rights held by the 78 | Licensor. For purposes of this Public License, where the Licensed 79 | Material is a musical work, performance, or sound recording, 80 | Adapted Material is always produced where the Licensed Material is 81 | synched in timed relation with a moving image. 82 | 83 | b. Adapter's License means the license You apply to Your Copyright 84 | and Similar Rights in Your contributions to Adapted Material in 85 | accordance with the terms and conditions of this Public License. 86 | 87 | c. BY-NC-SA Compatible License means a license listed at 88 | creativecommons.org/compatiblelicenses, approved by Creative 89 | Commons as essentially the equivalent of this Public License. 90 | 91 | d. Copyright and Similar Rights means copyright and/or similar rights 92 | closely related to copyright including, without limitation, 93 | performance, broadcast, sound recording, and Sui Generis Database 94 | Rights, without regard to how the rights are labeled or 95 | categorized. For purposes of this Public License, the rights 96 | specified in Section 2(b)(1)-(2) are not Copyright and Similar 97 | Rights. 98 | 99 | e. Effective Technological Measures means those measures that, in the 100 | absence of proper authority, may not be circumvented under laws 101 | fulfilling obligations under Article 11 of the WIPO Copyright 102 | Treaty adopted on December 20, 1996, and/or similar international 103 | agreements. 104 | 105 | f. Exceptions and Limitations means fair use, fair dealing, and/or 106 | any other exception or limitation to Copyright and Similar Rights 107 | that applies to Your use of the Licensed Material. 108 | 109 | g. License Elements means the license attributes listed in the name 110 | of a Creative Commons Public License. The License Elements of this 111 | Public License are Attribution, NonCommercial, and ShareAlike. 112 | 113 | h. Licensed Material means the artistic or literary work, database, 114 | or other material to which the Licensor applied this Public 115 | License. 116 | 117 | i. Licensed Rights means the rights granted to You subject to the 118 | terms and conditions of this Public License, which are limited to 119 | all Copyright and Similar Rights that apply to Your use of the 120 | Licensed Material and that the Licensor has authority to license. 121 | 122 | j. Licensor means the individual(s) or entity(ies) granting rights 123 | under this Public License. 124 | 125 | k. NonCommercial means not primarily intended for or directed towards 126 | commercial advantage or monetary compensation. For purposes of 127 | this Public License, the exchange of the Licensed Material for 128 | other material subject to Copyright and Similar Rights by digital 129 | file-sharing or similar means is NonCommercial provided there is 130 | no payment of monetary compensation in connection with the 131 | exchange. 132 | 133 | l. Share means to provide material to the public by any means or 134 | process that requires permission under the Licensed Rights, such 135 | as reproduction, public display, public performance, distribution, 136 | dissemination, communication, or importation, and to make material 137 | available to the public including in ways that members of the 138 | public may access the material from a place and at a time 139 | individually chosen by them. 140 | 141 | m. Sui Generis Database Rights means rights other than copyright 142 | resulting from Directive 96/9/EC of the European Parliament and of 143 | the Council of 11 March 1996 on the legal protection of databases, 144 | as amended and/or succeeded, as well as other essentially 145 | equivalent rights anywhere in the world. 146 | 147 | n. You means the individual or entity exercising the Licensed Rights 148 | under this Public License. Your has a corresponding meaning. 149 | 150 | 151 | Section 2 -- Scope. 152 | 153 | a. License grant. 154 | 155 | 1. Subject to the terms and conditions of this Public License, 156 | the Licensor hereby grants You a worldwide, royalty-free, 157 | non-sublicensable, non-exclusive, irrevocable license to 158 | exercise the Licensed Rights in the Licensed Material to: 159 | 160 | a. reproduce and Share the Licensed Material, in whole or 161 | in part, for NonCommercial purposes only; and 162 | 163 | b. produce, reproduce, and Share Adapted Material for 164 | NonCommercial purposes only. 165 | 166 | 2. Exceptions and Limitations. For the avoidance of doubt, where 167 | Exceptions and Limitations apply to Your use, this Public 168 | License does not apply, and You do not need to comply with 169 | its terms and conditions. 170 | 171 | 3. Term. The term of this Public License is specified in Section 172 | 6(a). 173 | 174 | 4. Media and formats; technical modifications allowed. The 175 | Licensor authorizes You to exercise the Licensed Rights in 176 | all media and formats whether now known or hereafter created, 177 | and to make technical modifications necessary to do so. The 178 | Licensor waives and/or agrees not to assert any right or 179 | authority to forbid You from making technical modifications 180 | necessary to exercise the Licensed Rights, including 181 | technical modifications necessary to circumvent Effective 182 | Technological Measures. For purposes of this Public License, 183 | simply making modifications authorized by this Section 2(a) 184 | (4) never produces Adapted Material. 185 | 186 | 5. Downstream recipients. 187 | 188 | a. Offer from the Licensor -- Licensed Material. Every 189 | recipient of the Licensed Material automatically 190 | receives an offer from the Licensor to exercise the 191 | Licensed Rights under the terms and conditions of this 192 | Public License. 193 | 194 | b. Additional offer from the Licensor -- Adapted Material. 195 | Every recipient of Adapted Material from You 196 | automatically receives an offer from the Licensor to 197 | exercise the Licensed Rights in the Adapted Material 198 | under the conditions of the Adapter's License You apply. 199 | 200 | c. No downstream restrictions. You may not offer or impose 201 | any additional or different terms or conditions on, or 202 | apply any Effective Technological Measures to, the 203 | Licensed Material if doing so restricts exercise of the 204 | Licensed Rights by any recipient of the Licensed 205 | Material. 206 | 207 | 6. No endorsement. Nothing in this Public License constitutes or 208 | may be construed as permission to assert or imply that You 209 | are, or that Your use of the Licensed Material is, connected 210 | with, or sponsored, endorsed, or granted official status by, 211 | the Licensor or others designated to receive attribution as 212 | provided in Section 3(a)(1)(A)(i). 213 | 214 | b. Other rights. 215 | 216 | 1. Moral rights, such as the right of integrity, are not 217 | licensed under this Public License, nor are publicity, 218 | privacy, and/or other similar personality rights; however, to 219 | the extent possible, the Licensor waives and/or agrees not to 220 | assert any such rights held by the Licensor to the limited 221 | extent necessary to allow You to exercise the Licensed 222 | Rights, but not otherwise. 223 | 224 | 2. Patent and trademark rights are not licensed under this 225 | Public License. 226 | 227 | 3. To the extent possible, the Licensor waives any right to 228 | collect royalties from You for the exercise of the Licensed 229 | Rights, whether directly or through a collecting society 230 | under any voluntary or waivable statutory or compulsory 231 | licensing scheme. In all other cases the Licensor expressly 232 | reserves any right to collect such royalties, including when 233 | the Licensed Material is used other than for NonCommercial 234 | purposes. 235 | 236 | 237 | Section 3 -- License Conditions. 238 | 239 | Your exercise of the Licensed Rights is expressly made subject to the 240 | following conditions. 241 | 242 | a. Attribution. 243 | 244 | 1. If You Share the Licensed Material (including in modified 245 | form), You must: 246 | 247 | a. retain the following if it is supplied by the Licensor 248 | with the Licensed Material: 249 | 250 | i. identification of the creator(s) of the Licensed 251 | Material and any others designated to receive 252 | attribution, in any reasonable manner requested by 253 | the Licensor (including by pseudonym if 254 | designated); 255 | 256 | ii. a copyright notice; 257 | 258 | iii. a notice that refers to this Public License; 259 | 260 | iv. a notice that refers to the disclaimer of 261 | warranties; 262 | 263 | v. a URI or hyperlink to the Licensed Material to the 264 | extent reasonably practicable; 265 | 266 | b. indicate if You modified the Licensed Material and 267 | retain an indication of any previous modifications; and 268 | 269 | c. indicate the Licensed Material is licensed under this 270 | Public License, and include the text of, or the URI or 271 | hyperlink to, this Public License. 272 | 273 | 2. You may satisfy the conditions in Section 3(a)(1) in any 274 | reasonable manner based on the medium, means, and context in 275 | which You Share the Licensed Material. For example, it may be 276 | reasonable to satisfy the conditions by providing a URI or 277 | hyperlink to a resource that includes the required 278 | information. 279 | 3. If requested by the Licensor, You must remove any of the 280 | information required by Section 3(a)(1)(A) to the extent 281 | reasonably practicable. 282 | 283 | b. ShareAlike. 284 | 285 | In addition to the conditions in Section 3(a), if You Share 286 | Adapted Material You produce, the following conditions also apply. 287 | 288 | 1. The Adapter's License You apply must be a Creative Commons 289 | license with the same License Elements, this version or 290 | later, or a BY-NC-SA Compatible License. 291 | 292 | 2. You must include the text of, or the URI or hyperlink to, the 293 | Adapter's License You apply. You may satisfy this condition 294 | in any reasonable manner based on the medium, means, and 295 | context in which You Share Adapted Material. 296 | 297 | 3. You may not offer or impose any additional or different terms 298 | or conditions on, or apply any Effective Technological 299 | Measures to, Adapted Material that restrict exercise of the 300 | rights granted under the Adapter's License You apply. 301 | 302 | 303 | Section 4 -- Sui Generis Database Rights. 304 | 305 | Where the Licensed Rights include Sui Generis Database Rights that 306 | apply to Your use of the Licensed Material: 307 | 308 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right 309 | to extract, reuse, reproduce, and Share all or a substantial 310 | portion of the contents of the database for NonCommercial purposes 311 | only; 312 | 313 | b. if You include all or a substantial portion of the database 314 | contents in a database in which You have Sui Generis Database 315 | Rights, then the database in which You have Sui Generis Database 316 | Rights (but not its individual contents) is Adapted Material, 317 | including for purposes of Section 3(b); and 318 | 319 | c. You must comply with the conditions in Section 3(a) if You Share 320 | all or a substantial portion of the contents of the database. 321 | 322 | For the avoidance of doubt, this Section 4 supplements and does not 323 | replace Your obligations under this Public License where the Licensed 324 | Rights include other Copyright and Similar Rights. 325 | 326 | 327 | Section 5 -- Disclaimer of Warranties and Limitation of Liability. 328 | 329 | a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE 330 | EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS 331 | AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF 332 | ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, 333 | IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, 334 | WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR 335 | PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, 336 | ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT 337 | KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT 338 | ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. 339 | 340 | b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE 341 | TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, 342 | NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, 343 | INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, 344 | COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR 345 | USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN 346 | ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR 347 | DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR 348 | IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. 349 | 350 | c. The disclaimer of warranties and limitation of liability provided 351 | above shall be interpreted in a manner that, to the extent 352 | possible, most closely approximates an absolute disclaimer and 353 | waiver of all liability. 354 | 355 | 356 | Section 6 -- Term and Termination. 357 | 358 | a. This Public License applies for the term of the Copyright and 359 | Similar Rights licensed here. However, if You fail to comply with 360 | this Public License, then Your rights under this Public License 361 | terminate automatically. 362 | 363 | b. Where Your right to use the Licensed Material has terminated under 364 | Section 6(a), it reinstates: 365 | 366 | 1. automatically as of the date the violation is cured, provided 367 | it is cured within 30 days of Your discovery of the 368 | violation; or 369 | 370 | 2. upon express reinstatement by the Licensor. 371 | 372 | For the avoidance of doubt, this Section 6(b) does not affect any 373 | right the Licensor may have to seek remedies for Your violations 374 | of this Public License. 375 | 376 | c. For the avoidance of doubt, the Licensor may also offer the 377 | Licensed Material under separate terms or conditions or stop 378 | distributing the Licensed Material at any time; however, doing so 379 | will not terminate this Public License. 380 | 381 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public 382 | License. 383 | 384 | 385 | Section 7 -- Other Terms and Conditions. 386 | 387 | a. The Licensor shall not be bound by any additional or different 388 | terms or conditions communicated by You unless expressly agreed. 389 | 390 | b. Any arrangements, understandings, or agreements regarding the 391 | Licensed Material not stated herein are separate from and 392 | independent of the terms and conditions of this Public License. 393 | 394 | 395 | Section 8 -- Interpretation. 396 | 397 | a. For the avoidance of doubt, this Public License does not, and 398 | shall not be interpreted to, reduce, limit, restrict, or impose 399 | conditions on any use of the Licensed Material that could lawfully 400 | be made without permission under this Public License. 401 | 402 | b. To the extent possible, if any provision of this Public License is 403 | deemed unenforceable, it shall be automatically reformed to the 404 | minimum extent necessary to make it enforceable. If the provision 405 | cannot be reformed, it shall be severed from this Public License 406 | without affecting the enforceability of the remaining terms and 407 | conditions. 408 | 409 | c. No term or condition of this Public License will be waived and no 410 | failure to comply consented to unless expressly agreed to by the 411 | Licensor. 412 | 413 | d. Nothing in this Public License constitutes or may be interpreted 414 | as a limitation upon, or waiver of, any privileges and immunities 415 | that apply to the Licensor or You, including from the legal 416 | processes of any jurisdiction or authority. 417 | 418 | ======================================================================= 419 | 420 | Creative Commons is not a party to its public 421 | licenses. Notwithstanding, Creative Commons may elect to apply one of 422 | its public licenses to material it publishes and in those instances 423 | will be considered the “Licensor.” The text of the Creative Commons 424 | public licenses is dedicated to the public domain under the CC0 Public 425 | Domain Dedication. Except for the limited purpose of indicating that 426 | material is shared under a Creative Commons public license or as 427 | otherwise permitted by the Creative Commons policies published at 428 | creativecommons.org/policies, Creative Commons does not authorize the 429 | use of the trademark "Creative Commons" or any other trademark or logo 430 | of Creative Commons without its prior written consent including, 431 | without limitation, in connection with any unauthorized modifications 432 | to any of its public licenses or any other arrangements, 433 | understandings, or agreements concerning use of licensed material. For 434 | the avoidance of doubt, this paragraph does not form part of the 435 | public licenses. 436 | 437 | Creative Commons may be contacted at creativecommons.org. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dynamically adding and removing Shiny modules 2 | [![CC BY-NC-SA 4.0][cc-by-nc-sa-shield]][cc-by-nc-sa] 3 | 4 | This is the teaching material for the tutorial how to dynamically add/remove modules held at the [Appsilon Shiny Conference 2022](https://appsilon.com/2022-appsilon-shiny-conference/). [The recording is available at YouTube.](https://www.youtube.com/watch?v=W7ES6QYvN_c) 5 | 6 | ## Get started 7 | Clone the repository to your local machine and explore the material. To follow along the coding examples, you need the following packages: 8 | 9 | - `shiny >= 1.5.0` 10 | - `ggplot2 >= 3.0.0` 11 | 12 | ## Contents 13 | 14 | - the presentation in HTML and Rmarkdown format (`dynamic_modules`) 15 | - the [templates](01_templates) for the different programming parts of the tutorial, have a look at the [overview](01_templates/overview_templates.md) 16 | - the [solutions](02_solutions) 17 | - [additional information how to destroy `observeEvent`s](03_additional_information) that was not covered during the tutorial 18 | 19 | ## License 20 | 21 | 22 | This work is licensed under a 23 | [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License][cc-by-nc-sa]. 24 | The function `remove_shiny_inputs` is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License][cc-by-nc-sa] by [Thomas Roh](https://roh.engineering/posts/2020/02/shiny-add/removing-modules-dynamically/). 25 | 26 | [![CC BY-NC-SA 4.0][cc-by-nc-sa-image]][cc-by-nc-sa] 27 | 28 | [cc-by-nc-sa]: http://creativecommons.org/licenses/by-nc-sa/4.0/ 29 | [cc-by-nc-sa-image]: https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png 30 | [cc-by-nc-sa-shield]: https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg 31 | -------------------------------------------------------------------------------- /dynamic_modules.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Dynamically adding and removing Shiny modules" 3 | author: "Jonas Hagenberg" 4 | institute: "Appsilon Shiny Conference" 5 | date: "27.04.2022" 6 | output: 7 | xaringan::moon_reader: 8 | css: xaringan-themer.css 9 | lib_dir: libs 10 | nature: 11 | highlightStyle: github 12 | highlightLines: true 13 | countIncrementalSlides: false 14 | ratio: "16:9" 15 | --- 16 | 17 | ```{r setup, include=FALSE} 18 | options(htmltools.dir.version = FALSE) 19 | ``` 20 | 21 | ```{r xaringan-themer, include=FALSE, warning=FALSE} 22 | library(xaringanthemer) 23 | style_duo_accent( 24 | primary_color = "#1a5f96", 25 | secondary_color = "#03A696", 26 | code_inline_background_color = "#f8f8f8" 27 | ) 28 | ``` 29 | 30 | # Code availability 31 | Find the code on github: 32 | https://github.com/jonas-hag/dynamic_shiny_modules 33 | 34 | --- 35 | # Dynamic modules 36 | - modules are either called when initialising the Shiny app or dynamically 37 | -- 38 | 39 | - dynamic modules can be useful when: 40 | - something has to be repeated based on user input 41 | - e.g. show several plots or tables 42 | - a set of UI elements 43 | -- 44 | 45 | - can become complex easily -> use it with care! 46 | 47 | ??? 48 | - set of UI elements: e.g. additional layers in plots that can be controlled 49 | - how to get from static modules to dynamically added modules? -> livecoding 50 | 51 | --- 52 | # Selectors 53 | - used in `jQuery`, the JavaScript framework used by Shiny 54 | - based on CSS selectors 55 | - can select e.g. element types 56 | - for us relevant: select elements by `id` 57 | 58 | --- 59 | # Adding modules 60 | When adding a module: 61 | - call the module `server` function 62 | - insert the module UI elements with `insertUI` 63 | - use an appropriate `selector` where to insert the UI - one can use an empty `div` 64 | with an `id` 65 | - use a different `id` for every added module instance 66 | 67 | --- 68 | # How to remove a module 69 | - remove UI part with `removeUI` 70 | - needs to provide a selector 71 | - works well for one UI element but not for several in module UI 72 | - wrap UI elements with `div` with module `id` instead of `tagList` 73 | 74 | ```{r, eval = FALSE} 75 | module_UI <- function(id) { 76 | ns <- NS(id) 77 | div( #<< 78 | id = id, 79 | # your UI elements here 80 | ) 81 | } 82 | ``` 83 | 84 | ??? 85 | - the selector is based on the id of the UI elements 86 | - in our case the id of the module 87 | 88 | --- 89 | # Recap: remove UI of a module 90 | - use `removeUI` 91 | - create a selector with `#` and the module `id` 92 | - use a unique `id` for every module 93 | 94 | ??? 95 | - this removes the contents of the module on the client side 96 | 97 | --- 98 | # How to remove the server part 99 | - so far, only UI elements were removed 100 | - `input`s, `reactive`s and `observeEvent`s of the module are still in 101 | the server part 102 | - can negatively influence the performance 103 | - therefore also remove these 104 | 105 | --- 106 | # Remove `input`s 107 | - `input`s are still stored on the serve side and consume memory 108 | 109 | -- 110 | 111 | ```{r, eval = FALSE} 112 | remove_shiny_inputs <- function(id, .input) { 113 | invisible( 114 | lapply(grep(id, names(.input), value = TRUE), function(i) { 115 | .subset2(.input, "impl")$.values$remove(i) #<< 116 | }) 117 | ) 118 | } 119 | ``` 120 | 121 | By [Thomas Roh](https://roh.engineering/posts/2020/02/shiny-add/removing-modules-dynamically/), CC BY-NC 4.0 122 | 123 | ??? 124 | - pass the `id` of the module that should be removed (`id`), the different inputs 125 | are matched automatically 126 | - pass the list (here: `input`) where the inputs are stored 127 | - for every module input, call the `remove` method 128 | - rather hacky method, not Shiny official 129 | - currently don't know a way to remove `reactive` expressions 130 | 131 | --- 132 | # Destroy `observeEvent`s 133 | - you can also destroy `observeEvent`s from removed modules 134 | - please check out the additional information section of the repository 135 | - check out the [Appsilon Blog Post](https://appsilon.com/how-to-safely-remove-a-dynamic-shiny-module/) 136 | 137 | 138 | --- 139 | # Summary 140 | - use `insertUI`/`removeUI` for the module UI 141 | - remove inputs and destroy `observeEvent`s to clean up the server side and 142 | avoid performance issues 143 | - use unique `id`s to avoid problems 144 | - use dynamic addition/removal only sparingly -------------------------------------------------------------------------------- /dynamic_modules.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dynamically adding and removing Shiny modules 5 | 6 | 7 | 8 | 9 | 10 | 11 | 144 | 145 | 146 | 234 | 235 | 254 | 255 | 265 | 266 | 267 | -------------------------------------------------------------------------------- /dynamic_shiny_modules.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | -------------------------------------------------------------------------------- /libs/header-attrs/header-attrs.js: -------------------------------------------------------------------------------- 1 | // Pandoc 2.9 adds attributes on both header and div. We remove the former (to 2 | // be compatible with the behavior of Pandoc < 2.8). 3 | document.addEventListener('DOMContentLoaded', function(e) { 4 | var hs = document.querySelectorAll("div.section[class*='level'] > :first-child"); 5 | var i, h, a; 6 | for (i = 0; i < hs.length; i++) { 7 | h = hs[i]; 8 | if (!/^h[1-6]$/i.test(h.tagName)) continue; // it should be a header h1-h6 9 | a = h.attributes; 10 | while (a.length > 0) h.removeAttribute(a[0].name); 11 | } 12 | }); 13 | -------------------------------------------------------------------------------- /xaringan-themer.css: -------------------------------------------------------------------------------- 1 | /* ------------------------------------------------------- 2 | * 3 | * !! This file was generated by xaringanthemer !! 4 | * 5 | * Changes made to this file directly will be overwritten 6 | * if you used xaringanthemer in your xaringan slides Rmd 7 | * 8 | * Issues or likes? 9 | * - https://github.com/gadenbuie/xaringanthemer 10 | * - https://www.garrickadenbuie.com 11 | * 12 | * Need help? Try: 13 | * - vignette(package = "xaringanthemer") 14 | * - ?xaringanthemer::style_xaringan 15 | * - xaringan wiki: https://github.com/yihui/xaringan/wiki 16 | * - remarkjs wiki: https://github.com/gnab/remark/wiki 17 | * 18 | * Version: 0.4.1 19 | * 20 | * ------------------------------------------------------- */ 21 | @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap); 22 | @import url(https://fonts.googleapis.com/css?family=Cabin:600,600i&display=swap); 23 | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700&display=swap); 24 | 25 | 26 | :root { 27 | /* Fonts */ 28 | --text-font-family: 'Noto Sans'; 29 | --text-font-is-google: 1; 30 | --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; 31 | --text-font-base: sans-serif; 32 | --header-font-family: Cabin; 33 | --header-font-is-google: 1; 34 | --header-font-family-fallback: Georgia, serif; 35 | --code-font-family: 'Source Code Pro'; 36 | --code-font-is-google: 1; 37 | --base-font-size: 20px; 38 | --text-font-size: 1rem; 39 | --code-font-size: 0.9rem; 40 | --code-inline-font-size: 1em; 41 | --header-h1-font-size: 2.75rem; 42 | --header-h2-font-size: 2.25rem; 43 | --header-h3-font-size: 1.75rem; 44 | 45 | /* Colors */ 46 | --text-color: #000000; 47 | --header-color: #1a5f96; 48 | --background-color: #FFFFFF; 49 | --link-color: #1a5f96; 50 | --text-bold-color: #1a5f96; 51 | --code-highlight-color: rgba(255,255,0,0.5); 52 | --inverse-text-color: #000000; 53 | --inverse-background-color: #03A696; 54 | --inverse-header-color: #000000; 55 | --inverse-link-color: #1a5f96; 56 | --title-slide-background-color: #1a5f96; 57 | --title-slide-text-color: #FFFFFF; 58 | --header-background-color: #1a5f96; 59 | --header-background-text-color: #FFFFFF; 60 | --primary: #1a5f96; 61 | --secondary: #03A696; 62 | --white: #FFFFFF; 63 | --black: #000000; 64 | } 65 | 66 | html { 67 | font-size: var(--base-font-size); 68 | } 69 | 70 | body { 71 | font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base); 72 | font-weight: normal; 73 | color: var(--text-color); 74 | } 75 | h1, h2, h3 { 76 | font-family: var(--header-font-family), var(--header-font-family-fallback); 77 | font-weight: 600; 78 | color: var(--header-color); 79 | } 80 | .remark-slide-content { 81 | background-color: var(--background-color); 82 | font-size: 1rem; 83 | padding: 16px 64px 16px 64px; 84 | width: 100%; 85 | height: 100%; 86 | } 87 | .remark-slide-content h1 { 88 | font-size: var(--header-h1-font-size); 89 | } 90 | .remark-slide-content h2 { 91 | font-size: var(--header-h2-font-size); 92 | } 93 | .remark-slide-content h3 { 94 | font-size: var(--header-h3-font-size); 95 | } 96 | .remark-code, .remark-inline-code { 97 | font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 98 | } 99 | .remark-code { 100 | font-size: var(--code-font-size); 101 | } 102 | .remark-inline-code { 103 | font-size: var(--code-inline-font-size); 104 | color: #1a5f96; 105 | background-color: #f8f8f8; 106 | padding: 2px; 107 | } 108 | .remark-slide-number { 109 | color: #1a5f96; 110 | opacity: 1; 111 | font-size: 0.9rem; 112 | } 113 | strong { 114 | font-weight: bold; 115 | color: var(--text-bold-color); 116 | } 117 | a, a > code { 118 | color: var(--link-color); 119 | text-decoration: none; 120 | } 121 | .footnote { 122 | position: absolute; 123 | bottom: 60px; 124 | padding-right: 4em; 125 | font-size: 0.9em; 126 | } 127 | .remark-code-line-highlighted { 128 | background-color: var(--code-highlight-color); 129 | } 130 | .inverse { 131 | background-color: var(--inverse-background-color); 132 | color: var(--inverse-text-color); 133 | 134 | } 135 | .inverse h1, .inverse h2, .inverse h3 { 136 | color: var(--inverse-header-color); 137 | } 138 | .inverse a, .inverse a > code { 139 | color: var(--inverse-link-color); 140 | } 141 | .title-slide, .title-slide h1, .title-slide h2, .title-slide h3 { 142 | color: var(--title-slide-text-color); 143 | } 144 | .title-slide { 145 | background-color: var(--title-slide-background-color); 146 | } 147 | .title-slide .remark-slide-number { 148 | display: none; 149 | } 150 | /* Two-column layout */ 151 | .left-column { 152 | width: 20%; 153 | height: 92%; 154 | float: left; 155 | } 156 | .left-column h2, .left-column h3 { 157 | color: #1a5f9699; 158 | } 159 | .left-column h2:last-of-type, .left-column h3:last-child { 160 | color: #1a5f96; 161 | } 162 | .right-column { 163 | width: 75%; 164 | float: right; 165 | padding-top: 1em; 166 | } 167 | .pull-left { 168 | float: left; 169 | width: 47%; 170 | } 171 | .pull-right { 172 | float: right; 173 | width: 47%; 174 | } 175 | .pull-right + * { 176 | clear: both; 177 | } 178 | img, video, iframe { 179 | max-width: 100%; 180 | } 181 | blockquote { 182 | border-left: solid 5px #03A69680; 183 | padding-left: 1em; 184 | } 185 | .remark-slide table { 186 | margin: auto; 187 | border-top: 1px solid #666; 188 | border-bottom: 1px solid #666; 189 | } 190 | .remark-slide table thead th { 191 | border-bottom: 1px solid #ddd; 192 | } 193 | th, td { 194 | padding: 5px; 195 | } 196 | .remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { 197 | background: #CCEDEA; 198 | } 199 | table.dataTable tbody { 200 | background-color: var(--background-color); 201 | color: var(--text-color); 202 | } 203 | table.dataTable.display tbody tr.odd { 204 | background-color: var(--background-color); 205 | } 206 | table.dataTable.display tbody tr.even { 207 | background-color: #CCEDEA; 208 | } 209 | table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { 210 | background-color: rgba(255, 255, 255, 0.5); 211 | } 212 | .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { 213 | color: var(--text-color); 214 | } 215 | .dataTables_wrapper .dataTables_paginate .paginate_button { 216 | color: var(--text-color) !important; 217 | } 218 | 219 | /* Horizontal alignment of code blocks */ 220 | .remark-slide-content.left pre, 221 | .remark-slide-content.center pre, 222 | .remark-slide-content.right pre { 223 | text-align: start; 224 | width: max-content; 225 | max-width: 100%; 226 | } 227 | .remark-slide-content.left pre, 228 | .remark-slide-content.right pre { 229 | min-width: 50%; 230 | min-width: min(40ch, 100%); 231 | } 232 | .remark-slide-content.center pre { 233 | min-width: 66%; 234 | min-width: min(50ch, 100%); 235 | } 236 | .remark-slide-content.left pre { 237 | margin-left: unset; 238 | margin-right: auto; 239 | } 240 | .remark-slide-content.center pre { 241 | margin-left: auto; 242 | margin-right: auto; 243 | } 244 | .remark-slide-content.right pre { 245 | margin-left: auto; 246 | margin-right: unset; 247 | } 248 | 249 | /* Slide Header Background for h1 elements */ 250 | .remark-slide-content.header_background > h1 { 251 | display: block; 252 | position: absolute; 253 | top: 0; 254 | left: 0; 255 | width: 100%; 256 | background: var(--header-background-color); 257 | color: var(--header-background-text-color); 258 | padding: 2rem 64px 1.5rem 64px; 259 | margin-top: 0; 260 | box-sizing: border-box; 261 | } 262 | .remark-slide-content.header_background { 263 | padding-top: 7rem; 264 | } 265 | 266 | @page { margin: 0; } 267 | @media print { 268 | .remark-slide-scaler { 269 | width: 100% !important; 270 | height: 100% !important; 271 | transform: scale(1) !important; 272 | top: 0 !important; 273 | left: 0 !important; 274 | } 275 | } 276 | 277 | .primary { 278 | color: var(--primary); 279 | } 280 | .bg-primary { 281 | background-color: var(--primary); 282 | } 283 | .secondary { 284 | color: var(--secondary); 285 | } 286 | .bg-secondary { 287 | background-color: var(--secondary); 288 | } 289 | .white { 290 | color: var(--white); 291 | } 292 | .bg-white { 293 | background-color: var(--white); 294 | } 295 | .black { 296 | color: var(--black); 297 | } 298 | .bg-black { 299 | background-color: var(--black); 300 | } 301 | 302 | --------------------------------------------------------------------------------