Lab 9 Creating a Simple Shiny Application

Package(s)

Schedule

Learning Materials

Please prepare the following materials

  • Book: Mastering Shiny by Hadley Wickham – Read Chapter 1 (Chapter 2 and 3 are good to read as well, if you want).
  • Book: Engineering Production-Grade Shiny Apps – Read Chapter 2 - 5 (they are fairly short, but if you don’t find Shiny Apps super cool, feel free to skip Chapter 3 and 5 and Sections 2.2.2 and 4.2.3 - 4.2.4), the rest are quite important for the exercises.
  • Cheatsheet: Shiny – This cheatsheet is a bit cluttered, but useful
  • Cheatsheet: Golem – Look through this after reading the chapters in “Engineering Production-Grade Shiny Apps” - the exercises will remind you to look at the cheatsheet as well.

Note: The following are suggested learning materials, i.e., do not go over everything, but poke around. You will use these materials as a point of reference for the group exercises

Learning Objectives

A student who has met the objectives of the session will be able to:

  • Prepare a simple shiny application
  • Using relevant online resources to autonomously identify and obtain new and expand on existing knowledge of R

Exercises

Introduction

In today’s lab, you will use the package you developed last time as basis for a Shiny App.

Do not worry if you didn’t finish it, you will be able to install a backup. But please do try to use your own package first.

You will be using the golem production-grade app development framework, which has a bit of a learning curve, but it is a solid starting point. Please hang tight, as I walk you through how to get started.

When building a Shiny App with golem, you need everything you learned about creating an R package, because a golem Shiny App is a package, and all the same rules apply.

TASKS

Task 1 - Setting up the Shiny App

As last week, the first tasks are only done by one team member, until instructed otherwise. Let the other team members follow along with what you are doing and do the following:

Task 1.1 - Create the App

  1. Go to R for Bio Data Science RStudio Server and login.
  2. Create a folder in home called ShinyApps - You need this for the server to find your app.
  3. Run golem::create_golem("~/ShinyApps/YOUR_APP_NAME") in the console, putting in a name of your own choosing.
  • As last week, the theme is the central dogma of molecular biology. Let that inspire you
  • Look up naming rules here
  • The most important rule: _, -, and ' are not allowed.
  1. Run usethis::use_git() to ensure git is initialized.

Task 1.2 - Make a GitHub repository for your group’s app

  1. Go to https://github.com/rforbiodatascience23
  2. Click the green New-button
  3. Create a new repository called group_X_shiny. Remember to replace the X
  4. Select rforbiodatascience23 as owner
  5. Make the repository Public
  6. Click the green Create repository-button
  7. In this new repository, click the settings tab
  8. Click Collaborators and Team
  9. Click the green Add people-button
  10. Invite the remaining group members
  11. All other team members should now have access to the repository, but do not create your own project yet.

Task 1.3 - Connect your RStudio Project to the GitHub Repository

Still only the first team member

  1. Find your PAT key or create a new
    How to create a new one
    • Type in the console usethis::create_github_token(). You’re going to be redirected to GitHub website.
    • In case you do it manually, remember to give permission to access your repositories.
    • You need to type your password. Don’t change the default settings of creating the token except for the description – set ‘RStudio Server’ or something similar. Then hit Generate token.
    • Copy the generated token (should start with ghp_) and store it securely (e.g. in password manager). Do not keep it in a plain file.
  2. Go back to the RStudio Server project.
  3. Type in the console gitcreds::gitcreds_set() and paste the PAT key.
  4. If there are files in the git window, stage them by ticking all boxes under Staged.
  5. Still in the console, run the following commands. Replace your group number and use your GitHub username and email. You run these to link your project to the GitHub repository you created. Remember to replace the X.
usethis::use_git_remote(name = "origin", "https://github.com/rforbiodatascience23/group_X_shiny.git", overwrite = TRUE)
usethis::use_git_config(user.name = "USERNAME", user.email = "USEREMAIL@EXAMPLE.ORG")
gert::git_commit_all("App setup") # Only run if there were files to stage
gert::git_push("origin")

All other team members

After your teammate has pushed to GitHub.

  1. You also need to create a ShinyApps folder.
  2. In the RStudio Server, create a new project based on the GitHub Repository just created by your teammate.
    • Click Create a project in the top left.
    • Choose Version Control and then Git.
    • Paste in the repository URL: https://github.com/rforbiodatascience23/group_X_shiny.git. Remember to replace the X.
    • Make sure to put it in the ShinyApps folder.
    • Give the directory a fitting name and click Create Project.
  3. Find your PAT key or create a new
    How to create a new one
    • Type in the console usethis::create_github_token(). You’re going to be redirected to GitHub website.
    • In case you did it manually, remember to give permission to access your repositories.
    • You need to type your password. Don’t change the default settings of creating the token except for the description – set ‘RStudio Server’ or something similar. Then hit Generate token.
    • Copy the generated token (should start with ghp_) and store it securely (e.g. in password manager). Do not keep it in a plain file.
  4. Go back to the RStudio Server project
  5. Type in the console gitcreds::gitcreds_set() and paste the PAT key
  6. Still in the console, run the following commands. Replace your GitHub username and email.
usethis::use_git_config(user.name = "USERNAME", user.email = "USEREMAIL@EXAMPLE.ORG")

If RStudio at any point asks you to log in to GitHub, redo step 6 and 7.

Task 2 - Create a production-grade Shiny app

It may seem daunting, but golem holds your hand much of the way.

Task 2.1 - The dev folder

golem creates a dev folder in your project. The files there are extremely helpful and you should make yourself familiar with the content. Read this short chapter to get a feeling for what each helper function does. Also take a look at the golem cheatsheet.

  1. Go through dev/01_start.R and run the setup functions you think will be useful. Not everything is.
    • Run them in order. Don’t run line 36, and if you are prompted to install packages, please decline.
    • Everything on and above line 42 is recommended, everything else is optional. Feel free to see what they do. None of them should cause problems.
    • After running the function for modifying the DESCRIPTION file, add more authors to the DESCRIPTION-file using this layout:
Authors@R:
  c(person(given = "firstname",
           family = "lastname",
           role = c("aut", "cre"), # There must be a "cre", but there can only be one
           email = "your@email.com"), 
    person(given = "firstname",
           family = "lastname",
           role = "aut",
           email = "your@email.com"))
  1. Go through dev/02_dev.R to get an idea of what helper functions are available. You will likely use some of these functions quite frequently.
  2. Look through dev/03_deploy.R to get an idea of how to deploy your app either in shinapps.io, as the app I showed in class, or on CRAN.
  • Because we are operating on a server, we cannot run the app directly in our R session. Therefore, we should prepare the app for deployment. This will allow the shiny server hosted on the Health Tech Server to launch your apps.
  • Run line 32 in dev/03_deploy.R, i.e., golem::add_shinyserver_file()
  1. Look through dev/run_dev.R and run the first four commands. If you were not on a server, you could launch your app by running the last command run_app(). However, we are on a server, so we have implemented a small trick.
  • When you ran line 32 previously, an app.R file was created. This allows the Health Tech Server to run your Shiny app from this url: https://teaching.healthtech.dtu.dk/shiny/username/app_name/ - Edit username and app_name appropriately.
  • You should see an empty app with your title. Now you just need to put stuff in it.
  • OBS Sometimes, for unknown reasons, the browser removes the “shiny” part of the url. If you get a “Not Found” error, check the url.
  • Another OBS For changes to take effect, you will have to close the app session, which means either closing the tab or removing the app name from the url. The latter will list all apps you have created - likely just this one so far. The url would then look like: https://teaching.healthtech.dtu.dk/shiny/username/.

The R folder

golem sets up a framework for your Shiny app. This framework is probably a little different from what you normally see when reading/watching guides on Shiny Apps. It may look overly complicated, and perhaps it is for this exercise. But it is a robust framework that makes maintaining even large apps easy(ier). Building a small app is very easy as well.

You are welcome to ignore the R/run_app.R (a wrapper function for shiny::shinyApp(), which runs the app) and R/app_config.R (some golem configuration) for now.

The first places you want to look are R/app_ui.R and R/app_server.R. They are responsible for the user interface and the app back end, respectively. You will not be working here directly as much, although you could. But it is strongly recommended to work in Shiny modules - created with golem::add_module( name = "module_name" ), as you saw in class.

Shiny Modules

Shiny modules may appear to make your life more complicated at first, but they will save you a lot of time down the road - especially from bug-fixing and GitHub merging issues.

After creating a module, its ui and server functions should be copied into the app_ui.R and app_server.R scripts, as you will be reminded in the bottom of the module scripts. There, you can control how the module should interact with the main app - should each module have their own tab in the app or should they be called depending on which button the user clicks on.

Another useful feature of Shiny modules is that you can test them independently from the main app. I suggest, each time you create a module, to copy something like the following in the bottom of the created module script (renaming the relevant parts to fit the module). This way you always have a quick test environment at hand. But bear in mind the layout will be different from your main app, as it will not transfer the layout from app_ui.R.

if(FALSE){ # Testing
  golem::detach_all_attached()
  golem::document_and_reload()
  ui <- mod_NAME_ui("NAME_ui_1") # replace NAME here
  server <- function( input,output,session){
    mod_NAME_server("NAME_ui_1") # and here
  }
  shiny::shinyApp(ui, server)
}

If you want to learn how to make the modules share information, please read here. I personally prefer approach B.

This is not necessary for the exercises, but I wanted to make you aware that it is possible. Feel free to use it in the Group Assignment.

Task 3 - Populate your Shiny App

Last week, you created a package that simulates the central dogma of molecular biology. Today, you will use that package to create an app around it.

Please work together on these tasks.

Task 3.1 - Install the package you created last week

  1. devtools::install_github("rforbiodatascience23/group_X_package"). Remember to replace the X
Install backup

Please only use this if your own package does not work!

Install it with: devtools::install_github("r4bds/centralDogma")

The function names are as follows:

  • Function one: centralDogma::random_dna()
  • Function two: centralDogma::transcribe()
  • Function three: centralDogma::codon_split()
  • Function four: centralDogma::translate()
  • Function five: centralDogma::plot_abundance()

You have already done the initial setup steps, so let’s get started with building the app!

Task 3.2 - Design your primary layout

Feel free to use your imagination. Otherwise, follow my suggestion for a tabsetPanel-layout:

If you make your own layout, make space for the two modules, as I did with the two tabPanels with temporary titles and module names below.

  1. Add a tabsetPanel with 2 panels in the fluidPage() function within the app_ui function definition in R/app_ui.R. The tabsetPanel should be inserted after the header (written as h1(“header”) ), separated by a comma.
tabsetPanel(
  tabPanel(title = "panel1",
           "module1"),
  tabPanel(title = "panel2",
           "module2")
)

I have added placeholder names, you should replace these with relevant module functions as the app is build.

You will start by implementing the plotting module (“module2”) because it is a lot simpler, with only a single text input and a plot.

Task 3.3 - Create the plotting shiny module

Your plotting module should take in a peptide sequence and plot the relative absolute abundance of each amino acid.

  1. Go to dev/02_dev.R and find the function to add a module. For now, set with_test = FALSE - you will not be creating tests for the app in this exercise, unless you want to. Remember to name the module something sensible related to the description above instead of just “module2”. Run the function.
  2. Scroll to the bottom of the module and copy the commented out server function and add it to R/app_server.R inside the app_server function.
  3. Redo step 2, but for the ui function. Importantly, place it in the second tabPanel in R/app_ui.R, instead of the “module2”. Give it a sensible title. If you made your own layout, place the module where you imagine it should go.
  4. Go back to the module script. Use my suggested module layout below. If you want, you are more than welcome to design it yourself. See the layout guide here or cheat sheet for inspiration.
    • Fill your desired layout in the tagsList of the ui function in the module.
If you want, draw inspiration for the layout I chose 
sidebarLayout(
      sidebarPanel(
        "peptide_sequence"
      ),
      mainPanel(
        "plot"
      )
    )
The names in the example are not actual shiny stuff, just names I put in as a placeholder. Feel free to use them as your inputIDs and outputIDs or come up with your own.


  1. Run the app to see what it looks like (by refreshing the app url you created on Task 2.1).
  • Remember if you get a “Not Found” error, the “/shiny/” might be missing from the url.
  1. Add an input field for the peptide_sequence, replace the string with the input you are adding. Please try it out first.
  • Remember ns() around input/output IDs
Possible solution 
textAreaInput(
          inputId = ns("peptide"),
          label = "Peptide sequence",
          width = 300,
          height = 100,
          placeholder = "Insert peptide sequence"
        )


  1. Add an output field for the plot, replacing the placeholder string. Please try it out first.
Possible solution 
plotOutput(
          outputId = ns("abundance")
          )
Full possible solution 
mod_abundance_ui <- function(id){
  ns <- NS(id)
  tagList(
    shiny::sidebarLayout(
      shiny::sidebarPanel(
        shiny::textAreaInput(
          inputId = ns("peptide"),
          label = "Peptide sequence",
          width = 300,
          height = 100,
          placeholder = "Insert peptide sequence"
        )
      ),
      shiny::mainPanel(
        shiny::plotOutput(
          outputId = ns("abundance")
          )

      )
    )
  )
}

Task 3.4 - Plotting module server logic

There are several ways to solve this task, but keep in mind that if an empty string is given to function_five, it will give an error and the app will crash. Prevent that. Please try to make the server logic on your own. Also feel free to add an additional button to control when the plotting is happening (see my slide on reactivity for inspiration).

  1. Go the the module server function. Make the server logic for handling the text input and render a plot using function_five from your package, remember to rename the function call appropriately (yourpackage::function_five).
  • Ensure the IDs match.
  • It does not matter where in the module server function you put it, as long as you put it inside the function.
Possible solution 
output$abundance <- renderPlot({
      if(input$peptide == ""){
        NULL
      } else{
        input$peptide |>
          yourpackage::function_five() +
          ggplot2::theme(legend.position = "none")
        }
    })


  1. Discuss in your group what is going on in my solution. Why does it work, and what other ways could you get to the same solution (check my slide on reactivity for inspiration). As a small note, I chose to hide the legend, as that looked better in the app.

  2. Add @importFrom ggplot2 theme and @import yourpackage to the module server function description.

  3. Go to dev/02_dev.R and run the first function to add ggplot2 and yourpackage to your package dependencies: attachment::att_amend_desc(). Or add it to the DESCRIPTION manually.

  4. Run every line but the last in dev/run_dev.R and reopen your app to see that it works (You can just type in random amino acids in the field).

  • If you run the last line, a popup will tell you the connection is refused - it would work locally, but doesn’t on the server.
  • Remember if you get a “Not Found” error, the “/shiny/” might be missing from the url.
  • If no changes appear, close the tab for a minute and try again.

Task 3.5 - Create shiny “module1”

The “module1” module (please pick a sensible name) should take in a DNA strand and convert it into a peptide sequence. There should also be an option to create a random DNA strand, in case the user does not have one of their own.

  1. Go to dev/02_dev.R and find the function to add a module. Again, set with_test = FALSE. Remember to name the module something sensible related to the description above. Run the function.
  2. In the created module file, scroll to the bottom of the module and copy the commented out module server function and add it to R/app_server.R in the app_server function.
  3. Do the same for the ui function. Importantly, place it in the first tabPanel in R/app_ui.R, replacing the “module1” string. Give it a sensible title. If you made your own layout, place the module where you imagine it should go.
  4. Go back to the module script. Use my suggested module layout below. If you want, you are more than welcome to design it yourself. See the layout guide here or cheat sheet for inspiration.
    • Fill your desired layout in the tagsList of the ui function in the module.
fluidRow(
  column(8, "DNA_sequence"),
  column(4, "random_dna_length", "generate_dna_button")
),
"peptide_sequence"

Again, the names in the example are not actual shiny stuff, just names I put in as a placeholder. Feel free to use them as your inputIDs and outputIDs or come up with your own.

  1. Before we continue, try to run the app: Run every line but the last in dev/run_dev.R and reopen your app.
  • Remember if you get a “Not Found” error, the “/shiny/” might be missing from the url.
  • If no changes appear, close the tab for a minute and try again.
  1. Discuss in your group which parts of the UI needs to be reactive (updateable) and which don’t. Of course, when you type a letter, the letter should appear where you typed it - that part happens automatically. But what needs to update when a button is clicked or an input changes?
  2. Let’s add some inputs (buttons, text, etc.):
    • Go here for inspiration for inputs.
    • Look at the shiny cheat sheet for inspiration for input and output.
    • Remember to wrap your input/output IDs with ns() (required in modules).
Hint for DNA_sequence For the DNA input, I wanted the sequence to be updated when the user clicks the “generate_dna_button” button. The simplest way to make UI inputs reactive is with an uiOutput(). My “DNA_sequence” look like: uiOutput(ns("DNA")). The content of the field will be defined in the server.
Hint for random_dna_length and generate_dna_button

I chose a numeric input for the “random_dna_length” and an actionButton for the “generate_dna_button”. They look like:

numericInput(
    inputId = ns("dna_length"),
    value = 6000,
    min = 3,
    max = 100000,
    step = 3,
    label = "Random DNA length"
  ),
actionButton(
    inputId = ns("generate_dna"),
    label = "Generate random DNA", style = "margin-top: 18px;"
  )
I added the style to adjust the position of the button. That is in no way required.
Hint for peptide_sequence

For “peptide_sequence”, I chose a verbatimTextOutput. You may not have seen it before; it is in the shiny cheat sheet, but it simply allows for long-form text output in a grey box. The tagAppendAttributes allow you to add CSS tags (you don’t need to know what that means). In this case, I wanted the text to wrap. By googling a bit, I found the solution seen below (feel free to see how it looks with and without it - but remember you will first see something, when you have made the server logic in the next task).

verbatimTextOutput(outputId = ns("peptide")) |> 
  tagAppendAttributes(style = "white-space: pre-wrap;")
Full possible solution 
mod_dna_expression_ui <- function(id){
  ns <- NS(id)
  tagList(
    fluidRow(
      column(8, shiny::uiOutput(ns("DNA"))),
      column(4, shiny::numericInput(
        inputId = ns("dna_length"),
        value = 6000,
        min = 3,
        max = 100000,
        step = 3,
        label = "Random DNA length"
      ),
      shiny::actionButton(
        inputId = ns("generate_dna"),
        label = "Generate random DNA", style = "margin-top: 18px;"
      ))
    ),
    shiny::verbatimTextOutput(outputId = ns("peptide")) |> 
      shiny::tagAppendAttributes(style = "white-space: pre-wrap;")

  )
}


  1. Reopen your app to see what it looks like. Remember, all output stuff will not appear before the server outputs something to it.

Task 3.6 - Adding server logic

This task might seem a bit confusing, but hang tight! Let me take you through this one step at a time.

  1. First, the DNA sequence should be an object that reacts to user input. Therefore, it should be a reactive value.
    • As the first line to add in the server function in your module, write dna <- reactiveVal().
    • Read more about reactive values here if you like. The important thing to have in mind is that every time you want to get the value run dna(), and when you update it run dna(new_value) with your new value - you will see an example of this in a minute.
  2. If you, like me, wanted your DNA input strand to be updateable in the input field, add the following somewhere in the server:
output$DNA <- renderUI({
      textAreaInput(
        inputId = ns("DNA"),
        label = "DNA sequence",
        placeholder = "Insert DNA sequence",
        value = dna(),
        height = 100,
        width = 600
        )
    })
  • Make sure the IDs match.
  • Discuss in the group what is going on there.
Answer

The output$DNA informs shiny to update the output with DNA as ID from the UI. In this case the uiOutput you added earlier. The renderUI creates a UI field. This function is complementary to the uiOutput. textAreaInput is a large text input field - suitable for large text inputs, such as DNA. The ns() should always be called when adding input/output fields in modules. Note that it is not necessary when assigning to outputs, such as output$DNA. The dna() adds the DNA strand as the value in the field, this ensures that the updated DNA value is displayed in the input field, when it is generated with the ‘random DNA’ function.

As an added note, notice that the input and output IDs can be the same, as with the ns("DNA") ID for both uiOutput and textAreaInput in this case. I find it handy to name them the same, so I know which input and output interacts. If you find it confusing, you can name them something else.


  1. The next step is to add a reaction when the “generate random DNA” button is clicked.
    • There are a few ways to handle this. My favorite is the following:
observeEvent(input$generate_dna, {
      dna(
        yourpackage::function_one(input$dna_length)
      )
    })
  1. Write the name of your package instead of yourpackage and add the name you gave function one from last week’s exercise.
    • Make sure the input names are the same as for your app (generate_dna and dna_length)
    • Discuss in your group what is going on. Before looking at the answer, consider reading this section.
Answer The observeEvent function observes when a change occurs to the generate_dna input. The reaction to a change then involves updating the dna value to the output of function_one() - or what you chose to call the function.


  1. Lastly, we should address what happens when there is DNA to be translated into a peptide:
    • Feel free to play around with a solution, based on what you have done previously.
    • The challenging part is to make the peptide update automatically without initial loading problems or nuisance for the user (the latter refers to a problem where an observer may deselect the text input field such that the user has to press the field again to continue typing.)
    • Otherwise, use my solution below:
Possible solution

This may not work as intended if you did not choose the uiOutput for the DNA input field. Then you may have to use dna() or add an actionButton. Ask if you run into issues. Please note that I am using input$DNA and not dna(). You will discuss why in a minute, but feel free to try it out both ways and see if you notice the difference.

output$peptide <- renderText({
      # Ensure input is not NULL and is longer than 2 characters
      if(is.null(input$DNA)){
        NULL
      } else if(nchar(input$DNA) < 3){
        NULL
      } else{
        input$DNA |> 
          toupper() |> 
          yourpackage::function_two() |> 
          yourpackage::function_three() |> 
          yourpackage::function_four()
      }
    })


  1. Regardless of wether you used my solution or not, discuss in your group what goes on in my solution
Answer

With a direct renderText on the input$DNA, the output will update whenever the input field changes, without causing the nuisance described above, which would be introduced with an observeEvent without an associated actionButton. Recall input$DNA gets updated when generate_dna is clicked. The first test checks that the input is not NULL, which it is upon loading the app, causing an error message in the console, but doesn’t necessarily crash the app. An output of NULL renders nothing (this fact can be useful when building apps in the future). The second test ensures an output is only generated when there is more than 3 characters to interpret. The toupper() function ensures the input is upper case, which is required for the codon table. renderText does as you would expect and renders some text for the UI. You might have guessed from the row of functions in the renderText, it takes the dna strand and converts it using the package you created last week into a peptide sequence. This peptide sequence is then stored in the peptide output, which links to the verbatimTextOutput you likely have in your ui function


  1. Please make sure all input and output IDs match in the UI and Server functions.
  2. Go to dev/02_dev.R and run the first function to add dependencies: attachment::att_amend_desc() or do it manually.
  3. Reopen the app and see if it acts as expected.
  • Remember if you get a “Not Found” error, the “/shiny/” might be missing from the url.
  • If no changes appear, close the tab for a minute and try again.
  1. Push it to GitHub


Awesomely done! You have now created a fully functional R shiny application that takes in a DNA strand or creates a random one, converts it into a peptide sequence, and then is able to plot the abundance of each amino acid in the sequence.

GROUP ASSIGNMENT

This week’s assignment is a short group discussion (1/4 - 1/2 page). Please cover these topics:

  • What did you find most challenging about creating a shiny app?

  • What do you feel are the benefits and challenges with using golem for app development?

  • Maintaining reproducibility when using shiny apps is a challenge. As an example, some pharma-companies display databases to medical doctors for pointy-clicky data exploration. What are your thoughts on maintaining reproducibility in that scenario? What if the database is updated or the app is updated with new or changed functionality?

  • What other challenges and limitations do you see shiny apps may have? Please elaborate.

  • Hand in a pdf with you discussion points and links to your shiny app GitHub page and the app itself.

As an optional extra challenge, try to expand your shiny app with a third module. You decide what the content of the module should be. Remember to put the shiny module functions somewhere in R/app_ui.R in the app_ui function and R/app_server.R in the app_server function. If you made one, add a brief description of the module in the hand-in.