02-basic_ui.Rmd

# Basic UI

**The Shiny *User Interface* consists of 3 components**

1. **Inputs**   
    + Text, Numeric variables, Dates, Radio buttons/Check boxes, File uploads, Buttons  

2. **Outputs**   
    + Text, Tables, Plots, Downloads  

3. **Layout functions**   
    + Pages with sidebar(s) & mainPanel(s), Bootstrap, Tabsets, Themes, CSS grid

## FYI 

1. Mastering Shiny online book:
    - [https://mastering-shiny.org](https://mastering-shiny.org)  

2. Mastering Shiny Github-repo:
    - [https://github.com/hadley/mastering-shiny](https://github.com/hadley/mastering-shiny)  
    - By using Github, *YOU* can contribute too.    

3. DSLC book club Github-repo:
    - [https://github.com/r4ds/bookclub-mshiny](https://github.com/r4ds/bookclub-mshiny)

4. Shiny Cheat Sheet    
    - [https://shiny.rstudio.com/articles/cheatsheet.html](https://shiny.rstudio.com/articles/cheatsheet.html)

## The Shiny Basic User Interface (ui)

- Recall, the simplest *Shiny* application has 2 components, **ui & server**

- `user interface` contains nested R functions that assist in assembling the HTML.
```
library(shiny)

user_interface <- fluidPage( **inputId** ) ## WE'LL FOCUS HERE FIRST

server <- function(input, output, session) { } ## FOCUS HERE SECONDARILY

shinyApp(ui = user_interface, server = server)
```

##### Naming; `inputId` has 2 constraints {-} 

1. `inputId` contain **Only Letters, Numbers, and Underscores** 
    + NO `/    -.!@#$%^&*;:`
    + *NO slashes, dashes, Nor special characters*,  
  
2. `inputID` **must be unique**. 

## What Can One INPUT?

1. Text strings
1. Numeric variables
1. Dates
1. Limited choices; Radio buttons/Check boxes/Select-dropdown menus
1. File uploads
1. Action buttons
                
```
## General Command Form
#----------------------
Input-Command(inputId = "string1",  ## Don't forget tab completion & F1.
              label = "string2", 
              
              ### Situation Dependent Variables ###
              value = # Initial value 
              min = 0, max = 100,
              width = '400px', height = '100%',
              cols = 2, rows = 5, # Number of cols or rows to display
              placeholder = "A word giving the user a hint",
              resize # Resize to fill/contract span
              )
```

## Input 1 - Text & Numeric 

#### Every **output** (in the UI) is coupled with a **render** (in the server). {-}

```
ui <- fluidPage(
        ## Text Input ##
        textInput(inputId = "f_name", label = "First name?"),
        textInput(inputId = "name", placeholder = "What's your name?"),
        passwordInput(inputId = "password", label = "What's your password?"),
        textAreaInput(inputId = "story", 
                      label = "Tell me about yourself", 
                      rows = 3)

        ## Numeric inputs ##
        numericInput(inputId = "x",
                     label = "Dependent Variable", 
                     value = 10),
                    
        sliderInput(inputID = "y_range", 
                    label =  "Range of Y:", 
                    value = c(10, 20), 
                    min = 0, 
                    max = 100)
)
```

#### But wait there's more! {-}

## Inputs 2 - Dates, Limited choices, File uploads, Action buttons

```
ui <- fluidPage(
  # DATES
  dateInput("dob", "When were you born?"),
  dateRangeInput("holiday", "Give start and end of Holiday season?"),

  # LIMITED CHOICES
  animals <- c("cat", "dog", "porpoise") ## Placed above UI
  radioButtons("animal", "What's your favourite animal?", animals)
  
  state_name <- c("AL", "AK", ..., "WY") ## Placed above UI
  selectInput("state", "What's your favourite state?", state_name),
 
  # FILE UPLOADS
  fileInput("upload", NULL)

  # ACTION BUTTONS
  actionButton("click", "Click me!"),
  actionButton("calc_boolean", "Calculate!", icon = icon("computer"))
)
```

## What can one OUTPUT?

1. Text
1. Tables
1. Plots
1. Downloads

### Text {-}

#### Every **output** (in the UI) is coupled with a **render** (in the server). {-}

Note that there are two render functions which behave slightly differently:

1. **renderText()** <-> **textOutput()**
2. **renderPrint()**  <-> **verbatimTextOutput()**

```
## User Interface
#----------------
ui <- fluidPage(
    # Static TEXT
    textOutput("Hello Friend"),
    verbatimTextOutput("SSN")
    )

## Server Section
#----------------
server <- function(input, output, session) {
    # Varible TEXT
    output$text <- renderText( animals ),
    output$code <- renderPrint({     ## Curly brackets needed IF 
        state_name                   ## commands require multiple lines,
        print("OK")
        }),
}
```

## Outputs 2 - Tables
    
#### NOTE: There are two options for displaying data frames in tables: {-}

1. **tableOutput()** <-> **renderTable()** for static tables, 
2. **dataTableOutput()** <-> **renderDataTable()** for dynamic tables

```
# In UI section
tableOutput(df_static),
dataTableOutput(df_dynamic),
    
# In SERVER section
renderTable(df_static)
renderDataTable(df_dynamic)
```

## Outputs 3 - Plots, Downloads

1. **plotOutput()** <-> **renderPlot()**

```
# PLOTS
# In UI section
plotOutput("plot", width = "400px")

# In SERVER section
output$plot <- renderPlot(plot(1:5), res = 96),

# DOWNLOADS
# downloadButton("downloadData", "Download")
# Download button;
# requires new techniques in the server function, 
# so we’ll come back to that in Chapter 9.
```

## Layouts 

Consider Using:  
1. [Bootstrap](https://getbootstrap.com),  
2. Page(s) with **sidebar**(s) & **mainPanel**(s)  
3. CSS Grid (12 columns)   
4. Tabsets   
5. Themes   

#### Example of Sidepanel and Mainpanel {-}
```
fluidPage(
  titlePanel("Hello Shiny!"),
  sidebarLayout(
    sidebarPanel(    ## sidebar
      sliderInput("obs", 
                  "Observations:", 
                  min = 0, 
                  max = 1000, 
                  value = 500)
    ),
    mainPanel(      ## mainPanel
      plotOutput("distPlot")
    )
  )
)
```

## Under the hood

Use **HTML** or **CSS** to get the job done!
```
<div class="container-fluid">
  <div class="form-group shiny-input-container">
    <label for="name">What's your name?</label>
    <input id="name" type="text" class="form-control" value=""/>
  </div>
</div>
```

## Other tools & material

1. [awesome-shiny-extensions](https://github.com/nanxstats/awesome-shiny-extensions.) 
    - listing by *Nan Xiao*
1. [shinyWidgets](https://appsilon.github.io/shiny.semantic/)
1. [shiny.semantic](https://github.com/RinteRface/shinyMobile)
1. [shinyMobile](https://github.com/RinteRface/shinyMobile) 
1. [shinymaterial](https://ericrayanderson.github.io/shinymaterial/)
1. [shinydashboard](https://rstudio.github.io/shinydashboard/)

*NOTE: Some tools may need devtools to install from GitHub repos.*

Books:

1. [Engineering Production-Grade Shiny Apps](https://engineering-shiny.org/)
1. [Outstanding User Interfaces with Shiny](https://unleash-shiny.rinterface.com/)

## Summary

Chapter 3: *Basic UI* introduces the 3 components of user interface for Shiny

1. **Inputs**; 
    + Text, Numeric variables, Dates, Limited choices, Radio buttons/Check boxes, File uploads, Buttons
    + **renderText()** <-> **textOutput()**
    + **renderPrint()**  <-> **verbatimTextOutput()**

2. **Outputs**; 
    + Text, Tables, Plots, Downloads
    + **tableOutput()** <-> **renderTable()** for static tables
    + **dataTableOutput()** <-> **renderDataTable()** for dynamic tables
    + **plotOutput()** <-> **renderPlot()**

3. **Layout functions**; 
    + Pages with sidebar(s) & mainPanel(s), Bootstrap, Tabsets, Themes, CSS

## Meeting Videos

### Cohort 1

`r knitr::include_url("https://www.youtube.com/embed/ytbhB3-SOBc")`

<details>
  <summary> Meeting chat log </summary>
  
```
00:05:13	mattc:	Greetings all.
00:08:43	Robert Overman:	So this is a cameras on meeting then
00:08:51	Russ Hyde:	Hi
00:09:20	matt curcio:	Greetings all
00:09:32	Anne Hoffrichter:	Hello :)
00:11:25	Jessica Mukiri:	Hi everyone :-)
00:11:34	priyanka gagneja:	hello 
00:18:16	Robert Overman:	Just so I'm not missing it, we can't see Chapter 3 in the Mastering Shiny Book Club site (that Matt is currently going over), correct?
00:19:05	Russ Hyde:	Robert. Matt's file hasn't been uploaded to the book club site yet
00:19:20	Robert Overman:	Thanks
00:19:20	Russ Hyde:	We'll get it up within the next couple of days
00:36:51	shamsuddeen:	Thanks for answering the question
00:40:00	Scott Nestler:	BTW, rainbow parenthesis are now available in RStudio 1.4 without a separate package.  But you have to go to Tools, Global Options, Code, Display to turn them on.  They are off by default.
00:43:47	DJpoTECeV47CcLoYwgAAEAAAAMwJjIDW/OiBd3S3j4ddb9SWUdUic/CK8oEvNdSPXXiO:	Shiny dashboard uses fluidRow and has a good explainer that was helpful for me https://rstudio.github.io/shinydashboard/structure.html#layouts
00:45:33	Jessica Mukiri:	sorry have to leave now, will finish watching this from the recording. Thanks for the presentation. See you next week
00:46:33	Russ Hyde:	Thanks for coming Jessica
00:47:32	Anne Hoffrichter:	I also have to run. Thanks! Have a nice evening!
00:52:17	Arnab Dey (he/him):	New to Shiny
00:53:57	Robert Overman:	I've been using it for the past 4 years
01:00:12	Russ Hyde:	Matt's asking about everyone's background / business
01:00:22	Arnab Dey (he/him):	Research / Public Health
01:00:27	Sarah Rathwell:	Math, healthcare
01:00:27	Scott Nestler:	Operations Research / Statistics / Business Analytics / Government / Higher Education
01:00:37	Russ Hyde:	Bioinformatics (hopefully datascience soon)
01:00:46	Dave:	Life Insurance
01:01:19	Morgan Grovenburg:	Institutional Research
01:08:00	Scott Nestler:	That's where it get really interesting.  (with reactivity)
01:08:23	Russ Hyde:	Bye
```
</details>

### Cohort 2

`r knitr::include_url("https://www.youtube.com/embed/6asgHqYg8WQ")`

<details>
  <summary> Meeting chat log </summary>
  
```
00:37:21	Conor Tompkins:	It is the “sep” argument in sliderInput
00:37:37	Conor Tompkins:	sep = “”
00:37:46	Collin Berke:	Thanks @Conor Tompkins
00:44:36	Ryan Metcalf:	Timevis
00:50:16	Zaynaib Giwa, @zaynaib:	MVC
00:50:23	Zaynaib Giwa, @zaynaib:	Model, View Controller
00:50:58	Zaynaib Giwa, @zaynaib:	Its an old school developer pattern. I don't know if its still used in the industry anymore
00:58:25	Zaynaib Giwa, @zaynaib:	good to know
00:59:03	Collin Berke:	Thanks, Ola
```
</details>

### Cohort 3

`r knitr::include_url("https://www.youtube.com/embed/94zye7iYzPs")`

<details>
  <summary>Meeting chat log</summary>
```
00:11:45	Ryan Metcalf:	https://appsilon.com/shiny-conference/
01:09:37	Njoki Njuki Lucy:	I had the same question 😄
```
</details>


### Cohort 4

`r knitr::include_url("https://www.youtube.com/embed/hBYkhLT9xfo")`

<details>
  <summary>Meeting chat log</summary>
```
00:04:27	Lydia:	Hello
00:43:01	Trevin:	https://glin.github.io/reactable/index.html
00:54:52	Lydia Gibson:	Not at the moment. Thank you Trevin
00:54:57	Lucio:	No questions. Great talk
00:55:32	Lydia Gibson:	I wont be able to for the next 3 weeks or so
00:55:40	Lydia Gibson:	Finishing up my fall semester
00:56:14	Trevin:	I can do 4 or 5
00:57:23	Lydia Gibson:	Thanks everyone
00:57:33	Lucio:	thanks, bye
```
</details>


### Cohort 5

`r knitr::include_url("https://www.youtube.com/embed/4WD-6mC8vnk")`