Shiny Modules: Why you might want to use them

class: center, middle, inverse, title-slide

# Shiny Modules: Why you might want to use them
### Ted Laderas
### DNAnexus
### 2021-05-13

---

# Why Modules?

- Motivating example
- Why?
- module code

---
# Motivating Example

- An ui that lets you pass in a dataset
- Lets you select columns from that dataset
- Want multiple plots in the same app

---
<img src="module1.png">

---
# Using Shiny modules

.pull-left.tiny[

## ui

- note that .bg-lightest-blue[`select_hist_ui()`] is a function that takes an `id` argument
- uses an `id` called .bg-gold[`mtcars_module`]
  
]

.pull-right.tiny[

]

---
# Using Shiny modules

.pull-left.tiny[

## ui

]

.pull-right.tiny[

## server

- Note that we have a function .bg-lightest-blue[`select_hist_server()`] 
- Also uses the `id` .bg-gold[`"mtcars_module"`] 
]

---
# Reusing code

.pull-left.tiny[

## ui

- note we have two .bg-lightest-blue[`select_hist_ui()`] functions
- the second one has the `id` of .bg-gold[`penguin_module`]

]

.pull-right.tiny[

]
---

# Reusing code

.pull-left.tiny[

## ui

]

.pull-right.tiny[

## server

<code class ='r hljs remark-code'>server <- function(input, output) { &nbsp;&nbsp;&nbsp;&nbsp;select_hist_server(id="mtcars_module", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data=mtcars) &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;select_hist_server(id="penguin_module", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data=penguins) }</code>

- Note that we have two functions .bg-lightest-blue[`select_hist_server()`] 
- The second one use the `id` .bg-gold[`"penguin_module"`] 
- We can have two different plots/interfaces!
]

---
# Two modules, two datasets

.pull-left[
- dataset is `mtcars`

]
.pull-right[
- dataset is `penguins`

<img src="module2.png" width=400>
]

---
# You may want to use Shiny Modules if:

- You want to reuse your code, especially in the same app
- You are tired of thinking up unique ids for all the elements in your app
- You need to break up a monolithic shiny application into pieces
- Separate presentation from code

---
# Maybe not:

- Your app is a one and done - single version
- It doesn't have that many controls

---
# ui module

<code class ='r hljs remark-code'>select_hist_ui <- function(id, var_choices){ &nbsp;&nbsp;#initialize a namespace ID function - our key to our namespace &nbsp;&nbsp;ns <- NS(id) &nbsp;&nbsp; &nbsp;&nbsp;#return a tagList with our ui elements &nbsp;&nbsp;tagList( &nbsp;&nbsp;&nbsp;&nbsp;#note we have to wrap the input id in our namespace function ns() &nbsp;&nbsp;&nbsp;&nbsp;selectInput(inputId = ns("x_var"), label="Select X Variable", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;choices=var_choices, selected = var_choices[1]), &nbsp;&nbsp;&nbsp;&nbsp;plotOutput(ns("hist_plot")) &nbsp;&nbsp;) }</code>

- Initialize the namespace for `id` using .bg-gold[`NS()`] function
- Need to refer to any controls/plots with ids wrapped in `ns()`, such as .bg-gold[`ns("x_var")`] or
.bg-gold[`ns("hist_plot")`]

---
# Server Module

<code class ='r hljs remark-code'>select_hist_server <- function(id, data) { &nbsp;moduleServer(id, function(input, output, session) { &nbsp;&nbsp;&nbsp;output$hist_plot <- renderPlot({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#notice we don't use ns() here to refer to input objects &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x_var <- input$x_var &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data %>% ggplot(aes_string(x=x_var)) + &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geom_histogram() &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp; }) &nbsp; }</code>

- .bg-gold[`moduleServer()`] encapsulates your server code (in .bg-yellow[yellow])
- be really careful with closing curly brackets and parentheses

---
# Try them out

Install `shiny`, `palmerpenguins`, `tidyverse` first

Clone this repository:

https://github.com/laderast/shiny_module_tutorial/

Open up `shiny_module_tutorial.Rproj`

- Individual apps are in `module_demo_01` and `module_demo_02`

---
# For More Info/Thanks!

- [Mastering Shiny: Modules](https://mastering-shiny.org/scaling-modules.html)
- Slides were done using `xaringan`, `xaringanExtra`, and `flair`