How to use Quarto with shiny without plot flickering?

[sbacelar]

Description

I am using Quarto version 1.5.56 on Mac and Windows.
I want to be able to choose between plotting multiple line graphs with raw data and the same with smooth data. I am using Quarto with Plotly and Shiny, but the plots I get keep flickering without stopping. What can I do to overcome this?

---
title: "Not Cars Plot Explorer"
author: "Your Name"
format: dashboard
server: shiny
---

```{r}
#| context: setup
library(ggplot2)
library(plotly)
library(shiny)

# Create a small example dataset
dados <- data.frame(
  Year = rep(2004:2010, 3),
  Value = c(50, 60, 55, 70, 75, 80, 85, 
            20, 30, 40, 50, 45, 55, 65,
            90, 85, 80, 75, 65, 60, 50),
  Category = rep(c("A", "B", "C"), each = 7)
)
# Sample dataset
dataset <- dados
```

# {.sidebar}

```{r}
# Dropdown menu to choose between Raw Plot and Smoothed Plot
selectInput('plot_type', 'Select Plot Type:', 
            choices = c("Raw Plot", "Smoothed Plot"))
```

# Plot
```{r}
plotlyOutput('plot')
```

# Data
```{r}
tableOutput('data')
```
```{r}
#| context: server

# Reactive function to return the dataset
dataset <- reactive({
  dados
})

# Render the plot based on user selection
output$plot <- renderPlotly({
  # Base plot
  p <- ggplot(dataset(), aes(
    x = Year,
    y = Value,
    color = Category,
    group = Category
  )) +
    geom_line() +
    geom_point() +
    labs(title = "Multi-Line Chart", x = "Year", y = "No.") +
    theme_minimal()
  
  # Conditionally add smoothing based on user input
  if (input$plot_type == "Smoothed Plot") {
    p <- ggplot(dataset(), aes(
      x = Year,
      y = Value,
      color = Category,
      group = Category
    )) +
      geom_smooth(method = "loess", se = FALSE) +  # Apply loess smoothing
      labs(title = "Multi-Line Chart with Loess Smoothing", x = "Year", y = "No.") +
      theme_minimal()
  }
  
  # Convert ggplot to plotly for interactivity
  ggplotly(p)
})

# Render the data table
output$data <- renderTable({
  dataset()
})
```

[mcanouil]

@gadenbuie Sorry to ping you here. I figured you might know or have some insights here.

[gadenbuie]

The problem is in this section of the markup.

# Plot
```{r}
plotlyOutput('plot')
```

# Data
```{r}
tableOutput('data')
```

It's not clear from the markup alone, but Quarto uses the page title # Plot and # Data as the id for the page controls (notice data-bs-target="#plot" in the snippet for the navbar Plot button.

<a id="tab-plot" class="nav-link active" data-bs-toggle="tab" role="tab" data-bs-target="#plot" data-scrolling="false" href="#plot" aria-controls="plot" aria-selected="true"><span class="nav-link-text">Plot</span></a>

The content associated with those buttons is later in the HTML (I've taken a lot of the content out) have id="plot" and id="data".

<div class="tab-content">
    <div id="plot" class="dashboard-page tab-pane" data-orientation="rows" aria-labelledby="tab-plot" role="tabpanel"></div>
    <div id="data" class="dashboard-page tab-pane" data-orientation="rows" aria-labelledby="tab-data" role="tabpanel"></div>
</div>

These IDs overlap with the IDs used by Shiny. In short, you can't (currently) have both

1. A Quarto page with id plot
2. And a Shiny output with id plot

So this code will work

# Plot {#page-plot}
```{r}
plotlyOutput('plot')
```

# Data {#page-data}
```{r}
tableOutput('data')
```

To the Quarto team: in Shiny we use generated ids for matching tab controls to tab panels for this reason. In your case, you could maybe use an ID that involves a hash of the page contents or something that's more stable across renders. That said, this could also be considered a documented issue that users need to avoid.

[mcanouil]

Thanks Garrick!

cc @cscheid