dynamic_modules.Rmd

---
title: "Dynamically adding and removing Shiny modules"
author: "Jonas Hagenberg"
institute: "Appsilon Shiny Conference"
date: "27.04.2022"
output:
  xaringan::moon_reader:
    css: xaringan-themer.css
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      ratio: "16:9"
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

```{r xaringan-themer, include=FALSE, warning=FALSE}
library(xaringanthemer)
style_duo_accent(
  primary_color = "#1a5f96",
  secondary_color = "#03A696",
  code_inline_background_color = "#f8f8f8"
)
```

# Code availability
Find the code on github:
https://github.com/jonas-hag/dynamic_shiny_modules

---
# Dynamic modules
- modules are either called when initialising the Shiny app or dynamically
--

- dynamic modules can be useful when:
  - something has to be repeated based on user input
  - e.g. show several plots or tables
  - a set of UI elements
--

- can become complex easily -> use it with care!
  
???
- set of UI elements: e.g. additional layers in plots that can be controlled
- how to get from static modules to dynamically added modules? -> livecoding

---
# Selectors
- used in `jQuery`, the JavaScript framework used by Shiny
- based on CSS selectors
- can select e.g. element types
- for us relevant: select elements by `id`

---
# Adding modules
When adding a module:
- call the module `server` function
- insert the module UI elements with `insertUI`
- use an appropriate `selector` where to insert the UI - one can use an empty `div`
with an `id`
- use a different `id` for every added module instance

---
# How to remove a module
- remove UI part with `removeUI`
- needs to provide a selector
- works well for one UI element but not for several in module UI
- wrap UI elements with `div` with module `id` instead of `tagList`

```{r, eval = FALSE}
module_UI <- function(id) {
  ns <- NS(id)
  div( #<<
    id = id,
    # your UI elements here
  )
}
```

???
- the selector is based on the id of the UI elements
- in our case the id of the module

---
# Recap: remove UI of a module
- use `removeUI`
- create a selector with `#` and the module `id`
- use a unique `id` for every module

???
- this removes the contents of the module on the client side

---
# How to remove the server part
- so far, only UI elements were removed
- `input`s, `reactive`s and `observeEvent`s of the module are still in
the server part
- can negatively influence the performance
- therefore also remove these

---
# Remove `input`s
- `input`s are still stored on the serve side and consume memory

--

```{r, eval = FALSE}
remove_shiny_inputs <- function(id, .input) {
  invisible(
    lapply(grep(id, names(.input), value = TRUE), function(i) {
      .subset2(.input, "impl")$.values$remove(i) #<<
    })
  )
}
```

By [Thomas Roh](https://roh.engineering/posts/2020/02/shiny-add/removing-modules-dynamically/), CC BY-NC 4.0

???
- pass the `id` of the module that should be removed (`id`), the different inputs
are matched automatically
- pass the list (here: `input`) where the inputs are stored
- for every module input, call the `remove` method
- rather hacky method, not Shiny official
- currently don't know a way to remove `reactive` expressions

---
# Destroy `observeEvent`s
- you can also destroy `observeEvent`s  from removed modules
- please check out the additional information section of the repository
- check out the [Appsilon Blog Post](https://appsilon.com/how-to-safely-remove-a-dynamic-shiny-module/)


---
# Summary
- use `insertUI`/`removeUI` for the module UI
- remove inputs and destroy `observeEvent`s to clean up the server side and
avoid performance issues
- use unique `id`s to avoid problems
- use dynamic addition/removal only sparingly