---

#### Theory lessons <br>

| Marta Coronado Zamora | Jose F. Sánchez | 
|:-:|:-:|
| <a href="mailto:Marta.coronado@uab.cat"><i class="fa fa-paper-plane fa-fw"></i> marta.coronado@uab.cat</a> | <a href="mailto:JoseFrancisco.Sanchez@uab.cat"><i class="fa fa-paper-plane fa-fw"></i>&nbsp; josefrancisco.sanchez@uab.cat</a> | 
| <a href="https://bsky.app/profile/geneticament.bsky.social"><i class="fab fa-bluesky fa-fw"></i>&nbsp; @geneticament</a> |                 <a href="https://twitter.com/JFSanchezBioinf"><i class="fab fa-twitter fa-fw"></i>&nbsp; @JFSanchezBioinf</a> |
| <a href="https://portalrecerca.uab.cat/es/organisations/grup-de-gen%C3%B2mica-bioinform%C3%A0tica-i-biologia-evolutiva-gbbe/"><i class="fa fa-map-marker fa-fw"></i>&nbsp; Universitat Autònoma de Barcelona </a> |    <a href="http://www.germanstrias.org/technology-services/genomica-bioinformatica/"> <i class="fa fa-map-marker fa-fw"></i>Germans Trias i Pujol Research Institute (IGTP)</a> |

#### Practical lessons <br>

| Miriam Merenciano |
|:-:|
| <a href="mailto:miriam.merenciano@uab.cat"><i class="fa fa-paper-plane fa-fw"></i> miriam.merenciano@uab.cat </a> | 
|  <a href="https://portalrecerca.uab.cat/es/organisations/grup-de-gen%C3%B2mica-bioinform%C3%A0tica-i-biologia-evolutiva-gbbe/"><i class="fa fa-map-marker fa-fw"></i>&nbsp; Universitat Autònoma de Barcelona </a> |

---
layout: true
class: animated, fadeIn

---

# Session content

- Interactive plots in Shiny:
  + Interactive controls with `*Input` widgets
  + `htmlwidgets` as `*Output`
  + Built-in interactive visualization `plotOutput` options: `click`, `hover`, `brush`, `nearPoints`, `brushedPoints`
- Sharing your apps and reports
  + shinyapps.io
  + GitHub pages

---
layout: false
class: left, bottom, inverse, animated, bounceInDown

# Get started!
## Interactive plots in `shiny`

---
layout: true
class: animated, fadeIn

---
### Interactive controls with `*Input` widgets

``` r
library(shiny)
    ui = fluidPage(
        # Select variables
        selectInput(inputId = "x_input", label = "Choose x variable", 
                    choices = c("mpg", "disp", "hp", "wt", "qsec")),
        radioButtons(inputId = "y_input", label = "Choose y variable",
                     choices = c("mpg", "disp", "hp", "wt", "qsec")),
        # Plot
        plotOutput("mtcars_plot")
    )
    server = function(input, output){
        library(ggplot2)
        # Plot using the chosen variables
        output$mtcars_plot <- renderPlot({
           #ggplot(mtcars, aes_string(input$x_input, input$y_input)) +
            ggplot(mtcars, aes(.data[[input$x_input]], .data[[input$y_input]])) +
                geom_point()
        })
    }

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

<div style="width: 100% ; height: 400px ; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" class="muted well">Shiny applications not supported in static R Markdown documents</div>

---

### `htmlwidgets` in `*Output`

``` r
library(shiny)
library(plotly)

ui = fluidPage(
        # Plotly!
        plotlyOutput("mtcars_plot")
    )
server = function(input, output){
        library(ggplot2)
        library(plotly)
        # Plotly
        output$mtcars_plot <- renderPlotly({
            p <- ggplot(mtcars, aes(mpg, hp)) +
                geom_point()
            ggplotly(p)
        })
    }

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

---

### `htmlwidgets` in `*Output`

We have the output function `plotlyOutput` and its companion reactive function `renderPlotly` to add a plotly graph to a `shiny app`. What if we want to add some others?

#### <i class="fas fa-pencil-alt"></i> **Exercise** | Make a quick search to find the corresponding output function and render function for the following `htmlwidgets`:
- [leaflet](http://rstudio.github.io/leaflet/)
- [dygraphs](http://rstudio.github.io/dygraphs/)
- [networkD3](http://christophergandrud.github.io/networkD3/)

<div style="background-color:#F0F0F0">
&emsp;<i class="fas fa-comment-dots"></i>
Answer:
&emsp;
</div>

---
## Built-in interactive visualization

Shiny has built-in support for interacting with static plots generated with `ggplot2`.

This makes it easy to add features like **selecting points** and **regions**, as well as **zooming in** and **out of images**.

---

## Built-in interactive visualization

``` r
library(shiny)

ui <- basicPage(
  plotOutput("plot1", click = "plot_click"),
  verbatimTextOutput("info")
)

server <- function(input, output) {
  output$plot1 <- renderPlot({
    #plot(mtcars$wt, mtcars$mpg)
    ggplot(mtcars, aes(wt,mpg)) + geom_point()
  })

output$info <- renderText({
    paste0("x=", input$plot_click$x, "\ny=", input$plot_click$y)
  })
}

shinyApp(ui, server)
```

---
## Built-in interactive visualization

Other types of interactions:
- Double-clicking (`dblclick`)
- Hovering (`hover`)
- Brushing (brushing is clicking and dragging a selection box, `brush`)

---
## Built-in interactive visualization

``` r
library(shiny)

ui <- basicPage(
  plotOutput("plot1",
    click = "plot_click",
    dblclick = "plot_dblclick",
    hover = "plot_hover",
    brush = "plot_brush"
  ),
  verbatimTextOutput("info")
)

server <- function(input, output) {
  output$plot1 <- renderPlot({
    #plot(mtcars$wt, mtcars$mpg)
    ggplot(mtcars, aes(wt,mpg)) + geom_point()
  })

output$info <- renderText({
    xy_str <- function(e) {
      if(is.null(e)) return("NULL\n")
      paste0("x=", round(e$x, 1), " y=", round(e$y, 1), "\n")
    }
    xy_range_str <- function(e) {
      if(is.null(e)) return("NULL\n")
      paste0("xmin=", round(e$xmin, 1), " xmax=", round(e$xmax, 1), 
             " ymin=", round(e$ymin, 1), " ymax=", round(e$ymax, 1))
    }

paste0(
      "click: ", xy_str(input$plot_click),
      "dblclick: ", xy_str(input$plot_dblclick),
      "hover: ", xy_str(input$plot_hover),
      "brush: ", xy_range_str(input$plot_brush)
    )
  })
}

shinyApp(ui, server)
```

## Built-in interactive visualization

What if we want to select rows of data, and not a point in the plot?

Shiny provides two convenience functions for selecting rows of data:

- `nearPoints()`: uses the `x` and `y` value from the interaction data, to be used with `click`, `dblclick` and `hover`

- `brushedPoints()`: uses the `xmin`, `xmax`, `ymin`, and `ymax` values from the interaction data; to be used with `brush`.

---
## Built-in interactive visualization

``` r
# Basic example of near points
library(shiny)

ui <- basicPage(
  plotOutput("plot1", click = "plot_click"),
  verbatimTextOutput("info")
)

server <- function(input, output) {
  output$plot1 <- renderPlot({
    #plot(mtcars$wt, mtcars$mpg)
    ggplot(mtcars, aes(wt,mpg)) + geom_point()
  })

output$info <- renderPrint({
    # With base graphics, need to tell it what the x and y variables are.
    nearPoints(mtcars, input$plot_click, xvar = "wt", yvar = "mpg")
    # nearPoints() also works with hover and dblclick events
  })
}

shinyApp(ui, server)
```

---

## Built-in interactive visualization

- By default, `nearPoints()` will return all rows of data that are within 5 pixels of the mouse event, and they will be sorted by distance, with the nearest first

- The radius can be customized with `threshold`

- The number of rows returned can be customized with `maxpoints`

---
## Built-in interactive visualization

``` r
# Basic example of brushed points

library(shiny)

ui <- basicPage(
  plotOutput("plot1", brush = "plot_brush"),
  verbatimTextOutput("info")
)

server <- function(input, output) {
  output$plot1 <- renderPlot({
    #plot(mtcars$wt, mtcars$mpg)
    ggplot(mtcars, aes(wt,mpg)) + geom_point()
  })

output$info <- renderPrint({
    # With base graphics, need to tell it what the x and y variables are.
    brushedPoints(mtcars, input$plot_brush, xvar = "wt", yvar = "mpg")
  })
}

shinyApp(ui, server)
```

---
layout: false
class: left, bottom, inverse, animated, bounceInDown

# Sharing `Shiny` apps

---
layout: true
class: animated, fadeIn

---

## Sharing `Shiny` apps

Shiny apps are easy to share, and there are several options to choose from.

Two basic ways to do it:

1. Share your Shiny app as two files: `server.R` and `ui.R` (or `app.R`).
  + Simplest way to share an app
  + Only works if your users have R on their own computer (and know how to use it)

Shiny provides three built-in commands that make it easy to use files that are hosted online: `runUrl`, `runGitHub`, and `runGist`. 
--

2. Share your Shiny app as a web page. 
  +  Most user friendly way to share a Shiny app
  +  Users can navigate to your app through the internet with a web browser: app is fully rendered, up to date, and ready to go
  
---
### Sharing `Shiny` apps as a web page

RStudio offers three ways to host your Shiny app as a web page:

- Shinyapps.io
- Shiny Server
- Shiny Server Pro

---

### Shinyapps.io

RStudio’s hosting service for Shiny apps: [shinyapps.io](shinyapps.io) lets you upload your app straight from your R session to a server hosted by RStudio.
<center>
<img src="img/shinyapp1.png" width=85%>

---

### Share a `Shiny` app as a web site

The RStudio hosting service for Shiny apps: [shinyapps.io](https://shinyapps.io) allows you to upload your app directly from your R session to a server hosted by Posit. The webpage provides the steps to follow:

**Step 1** - Install `rsconnect` library

``` r
install.packages('rsconnect')
```

---
class: animated, fadeIn

### Share a `Shiny` app as a web site

**Step 2** - Authorize account

``` r
# the site already gives you the command (show the secret token!)
rsconnect::setAccountInfo(name='jyyx9e-marta-coronado0zamora',
			  token='ECF7378F49D676A84683F180FB9F9A0C', secret='<SECRET>')
```

---
class: animated, fadeIn

### Share a `Shiny` app as a web site

If you run the following function pointing to the folder where your `shiny` app is located, containing the `app.R` file, a link will be automatically generated that you can share:

The [link](https://jyyx9e-marta-coronado0zamora.shinyapps.io/cars/) to your `shiny` app webpage will automatically open.

---
class: animated, fadeIn

### Share a `Shiny` app as a web site

You can freely host **5** public `shiny` apps per user.

If you want more features on this platform, such as restricting access to your `shiny` apps with a username and password, the service becomes paid.

---

## `GitHub` pages to share a report (`Rmd`)

`GitHub` Pages allow you to publish and share your `R Markdown` reports online for free.

---

## `GitHub` pages to share a report (`Rmd`)

The steps are:

1. Create a GitHub account: https://github.com/signup
2. Make a repository, and initialize it with a README 
<center>
<img src="img/github1.png" width=25%></center>
</center>

3. Upload an HTML (you can use [this one](https://raw.githubusercontent.com/marta-coronado/data_visualization/refs/heads/main/T/4/test.html) as a test)
3. Activate GitHub Pages

---

## `GitHub` pages to share a report (`Rmd`)

Go to Settings → Pages.

- Under Source, select the branch (e.g., main) and folder (/root or /docs if you created one).
  - Save.
  
---

## `GitHub` pages to share a report (`Rmd`)

Access your report:

- GitHub will provide a URL like https://username.github.io/repository-name/your-report.html.

- Open it in your browser to check it works!

---

# Optional exercise

To practice, you can:
- Share a **GitHub link** to a practical done in class (from P1-P3) 
- Share, for example, your `Cars` shiny app using [shinyapps.io](https://www.shinyapps.io)

## Home assignment: bonus points

Groups that submit their home assignments using the recommended platforms will earn **+1 point per assignment**:

- **Home assignment 1 (A + B):** submit the HTML report using **GitHub pages**
- **Home assignment 2 (C):** submit the **Shiny app** via [shinyapps.io](https://www.shinyapps.io)