Interactive dashboard with shinylive in R

[ManuelSpinola]

Description

Is there any examples of building an interactive dashboard with shinylive in R?

[mcanouil]

The format or R/Python does not really matter. I'm not sure what you are looking for exactly.

• https://shiny.posit.co/
• https://quarto.org/docs/dashboards/
• https://quarto.org/docs/dashboards/interactivity/shiny-r.html
• https://quarto-ext.github.io/shinylive/

Please do pay attention to shinylive note in the documentation of the extension, especially the very last part which might be what you are actually after:

Note that the code block currently must have #| standalone: true, which indicates that the code represents a complete Shiny application, as opposed to one which has parts spread throughout the document (which will be supported in the future).

Use shinylive-r as documented as a replacement of your regular code cells:

---
title: Demo ShinyLive
format: dashboard
filters: 
  - shinylive
---

# Page

## ShinyLive

::: {.card}
{{< lipsum 1 >}}
:::

## Code

```{r}
#| echo: false
#| include: false
library(shinylive)
```

```{shinylive-r}
#| standalone: true
#| viewerHeight: 450
library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "My dashboard",
  sidebar = sidebar(
    title = "Settings",
    sliderInput("n", "Observations", 1, 100, 50, ticks = FALSE),
    sliderInput("bins", "Bins", 1, 10, 5, step = 1, ticks = FALSE),
  ),
  plotOutput("plot")
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(rnorm(input$n), breaks = input$bins, col = "#007bc2")
  })
}

shinyApp(ui, server)
```

[ManuelSpinola]

Thank you. I structured my dashboard in the following way. Without shinylive is working fine but no with shiny live.

---
title: "Explorador de distribución de especies en Costa Rica"
format: dashboard
filters:
  - shinylive
---

```{r}
#| context: setup
# Load required packages
library(shiny)
library(shinylive)
library(bslib)
library(tidyverse)
library(rsconnect)
library(scales)
library(knitr)
library(readxl)
library(leaflet)
library(mapview)
library(tmap)
library(sf)
library(dplyr)
library(spmodel)
library(Cairo)
library(rvest)
library(httr)
library(rollama)
library(jsonlite)
library(paisaje)
library(crgeo)


# Load covariate data
covariates6 <- read_excel("covariates/covariates6.xlsx")
covariates7 <- read_excel("covariates/covariates7.xlsx")
covariates8 <- read_excel("covariates/covariates8.xlsx")

source("functions/function_splmrf.R")

```

## Row

###  {.sidebar}

```{r}
#| panel: sidebar
textInput("species_name", "Nombre de la especie (ej., Panthera onca)", "")
selectInput("resolution", "Resolución", choices = c("6", "7", "8"))
actionButton("run_analysis", "Modelar la distribución")
```

### Column

```{r}
# Map of Hexagonal Distribution
plotOutput("hex_map", height = "400px")
```

### Column

```{r}
# Predicted Species Distribution
plotOutput("predicted_map", height = "400px")
```

## Row

### Column

```{r}
# Model summary
textOutput("model_summary")
```

### Column

```{r}
#| eval: false
# species info
htmlOutput("species_info")
```

## Code

```{shinylive-r}
#| standalone: true
#| context: server

  output$species_info <- renderUI({
  req(input$species_name)  # Ensure species name is provided
  
  info <- get_species_info(input$species_name)
  
  HTML(markdown::markdownToHTML(text = info))  # Render as HTML with markdown formatting
})

# Reactive expression for covariate data
  covariate_data <- reactive({
    switch(input$resolution,
           "6" = covariates6,
           "7" = covariates7,
           "8" = covariates8)
  })

  # Reactive expression for the analysis results
  results <- eventReactive(input$run_analysis, {
    req(input$species_name)  # Ensure species name is provided

    # Call your prediction function
    species_predictions <- predict_species_distribution(input$species_name, as.numeric(input$resolution))
    
    # Ensure this returns the expected structure
    return(species_predictions)  
  })

  # Render hexagonal distribution map
output$hex_map <- renderPlot({
  req(results())  # Ensure results are available

  # Use results() directly for your hexagonal map
  hex_data_to_map <- results()

  # Create your ggplot visualization
  ggplot(data = hex_data_to_map) +
    geom_sf(aes(fill = factor(response_variable)), 
            color = "grey",   # Border color
            size = 0.8) +    # Border thickness
    scale_fill_manual(values = c("lightgrey", "darkred"), 
                      name = "Detección de la Especies", 
                      labels = c("No detectada", "Detectada")) +
    theme_minimal() +
    theme(legend.position = "right") +
    labs(title = "Detección de la especie") +
    theme(plot.title = element_text(size = 24))
})

  # Render predicted map
output$predicted_map <- renderPlot({
  req(results())  # Ensure results are available

  # Use the predictions directly
  predicted_data_to_map <- results()

  # Create your ggplot visualization for predictions
  ggplot(data = predicted_data_to_map) +
    geom_sf(aes(fill = predictions), 
            color = "transparent",
            size = 0.1) +  # No border
    scale_fill_viridis_c(name = "Predicción", option = "B") +  # Use viridis for color scale
    theme_minimal() +
    theme(legend.position = "right") +
    labs(title = "Distribución de la especie") +
    theme(plot.title = element_text(size = 24))
})
```

[mcanouil]

Please read carefully my message, in particular the part starting with "Pay attention".

[cderv]

@ManuelSpinola currently you can't create interative dashboard ShinyApp running with shinylive directly.

The feature we have in Quarto for Dahshboard and Shiny described at https://quarto.org/docs/dashboards/interactivity/shiny-r.html rely on the fact that Quarto will create a classic shiny app from your .qmd and then run it as a shiny app. This is also why there is a special quarto serve command so that Quarto runs a shiny server to serve the app (https://quarto.org/docs/interactive/shiny/running.html)

Maybe this would be possible to take this shiny app produced by quarto and export it as a shinylive application (as I see an export() function https://posit-dev.github.io/r-shinylive/reference/export.html) but I never tried.

The other integration is the one mentioned in other reply above with the use of shinylive Quarto extension
https://quarto-ext.github.io/shinylive/

This will allow to embed some shinyapps inside a Quarto Document, so as example shared above, you can embed a shiny app inside a Dashboard. But your Quarto dashboard won't be a shiny app itself with possibly input on a side bar.

Thanks for bringing the question. This is an interesting topic I keep in mind.

[ManuelSpinola]

Thank you. I have very basic programming skills. I abandoned the idea of doing a dashboard. What about a shiny app in a quarto document.

---
title: "Explorador de distribución de especies en Costa Rica"
format: 
  html:
    grid:
      body-width: 1400px
  
filters:
  - shinylive
---

```{r}
#| echo: false
#| include: false
# Load required packages
library(shiny)
library(shinylive)
library(bslib)
library(tidyverse)
library(rsconnect)
library(scales)
library(knitr)
library(jsonlite)
library(leaflet)
library(mapview)
library(tmap)
library(sf)
library(dplyr)
library(spmodel)
library(Cairo)
library(rvest)
library(httr)
library(rollama)
library(paisaje)
library(crgeo)

# Load preprocessed data (covariates and predictions must be preloaded)
covariates6 <- jsonlite::fromJSON("covariates/covariates6.json")
covariates7 <- jsonlite::fromJSON("covariates/covariates7.json")
covariates8 <- jsonlite::fromJSON("covariates/covariates8.json")

# Source your model function (ensure the function is ready beforehand)
source("functions/function_splmrf.R")
```



```{shinylive-r}
#| standalone: true
#| viewerHeight: 800

library(shiny)
library(shinylive)


# Define the UI layout
ui <- page_sidebar(
  title = "Explorador de distribución de especies en Costa Rica",
  sidebar = sidebar(
    title = "Configuración",
    textInput("species_name", "Nombre de la especie (ej., Panthera onca)", ""),
    selectInput("resolution", "Resolución", choices = c("6", "7", "8")),
    actionButton("run_analysis", "Modelar la distribución")
  ),
  mainPanel(
    plotOutput("hex_map", height = "400px"),
    plotOutput("predicted_map", height = "400px"),
    textOutput("model_summary")
  )
)

# Define the server logic
server <- function(input, output, session) {
  # Static covariate data based on resolution selection
  covariate_data <- switch(input$resolution,
                           "6" = covariates6,
                           "7" = covariates7,
                           "8" = covariates8)

  # Precompute model predictions and maps (must be done before app launch)
  species_predictions <- predict_species_distribution(input$species_name, as.numeric(input$resolution))

  # Render hexagonal map (static)
  output$hex_map <- renderPlot({
    ggplot(data = species_predictions) +
      geom_sf(aes(fill = factor(response_variable)), color = "grey", size = 0.8) +
      scale_fill_manual(values = c("lightgrey", "darkred"),
                        name = "Detección de la Especies",
                        labels = c("No detectada", "Detectada")) +
      theme_minimal() +
      theme(legend.position = "right") +
      labs(title = "Detección de la especie") +
      theme(plot.title = element_text(size = 24))
  })

  # Render predicted map (static)
  output$predicted_map <- renderPlot({
    ggplot(data = species_predictions) +
      geom_sf(aes(fill = predictions), color = "transparent", size = 0.1) +
      scale_fill_viridis_c(name = "Predicción", option = "B") +
      theme_minimal() +
      theme(legend.position = "right") +
      labs(title = "Distribución de la especie") +
      theme(plot.title = element_text(size = 24))
  })

  # Render model summary (static)
  output$model_summary <- renderText({
    paste("Model for", input$species_name, "at resolution", input$resolution)
  })
}

# Run the app
shinyApp(ui, server)
```

[cderv]

As we said, quarto-ext.github.io/shinylive allows you to embed shiny app in a Quarto document. Follows there doc.

And if any specific problem, please do reach out.

Some tips

source("functions/function_splmrf.R")

I don't think you'll be able to source a file from within a shinylive app that will run with no R server, and only with R in the browser.

Please, do learn about how shinylive itself works, then try to make a shinylive app without Quarto, and then embed it into quarto.

[ManuelSpinola]

Thank you. Very helpful.