Tabset naming for a shinylive code chunk

[DavidRach]

Bug description

I am working on a Quarto Website/Dashboard and encountered unexpected behavior when working with {.tabset} that also contains a shinylive-R code chunk as one of it's tabs. For the regular R code-chunks within the tabset, I used "#| title:" for naming. When I tried this for the shinylive-R code chunk, after rendering the interactive shiny works as intended but it appears as Tab 5 (in order appearance) rather than the #| title specified name.

Not sure whether this is a Quarto or shinylive behavior, so starting by opening issue here. Ideally, I want to be able to name the tab for the shinylive-r code-chunk.

Thanks on advance for any insight you can shed!

Best-
David

Steps to reproduce

I have saved a scaled-down minimal reproducible example to my github repository under the ReproducibleExample.qmd that contains the overall page layout and the shinylive. The basic idea can be seen below:

---
format:
  dashboard:
    orientation: columns
filters: 
  - shinylive
---

## Second {.tabset}

```{r}
#| title: 3L
print("R chunk")
```

```{r}
#| title: 4L
print("R chunk")
```

```{r}
#| title: 5L
print("R chunk")
```

```{r}
#| title: CS
print("R chunk")
```

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

```{shinylive-r}
#| standalone: true
#| viewerHeight: 450
#| title: Historical

webr::install("dplyr")
webr::install("gt")

library(shiny)
library(dplyr)
library(gt)

ui <- fluidPage(
  fluidRow(
    column(6,
           fluidRow(
             column(12, align = "center",
                    dateInput("date", label = "Select Date:", value = Sys.Date())
             )
           ),
           fluidRow(
             column(12, align = "center",
                    actionButton("btn_3L", label = "3L"),
                    actionButton("btn_4L", label = "4L"),
                    actionButton("btn_5L", label = "5L"),
                    actionButton("btn_CS", label = "CS")
             )
           ),
           fluidRow(
             column(12, align = "center",
                    actionButton("render", label = "Render Output")
             )
           ),
           # Output Section
           fluidRow(
             column(12,
                    tableOutput("qc_table")
             )
           )
    )
  )
)

server <- function(input, output, session) {
  
  data_path <-                                                
    paste(                                                  
      "https://raw.githubusercontent.com",                  
      "UMGCCFCSS", "InstrumentQC",                   
      "main", "data", "HistoricalData.csv",                              
      sep = "/"                                             
    ) 
  
  Data <- read.csv(data_path, check.names = FALSE)
  Data$Date <- as.Date(Data$Date) 
  
  function_path <-                                               
    paste(                                                  
      "https://raw.githubusercontent.com",                  
      "DavidRach", "Luciernaga",                   
      "master", "R", "DashboardHelpers.R",                              
      sep = "/"                                             
    )
  source(function_path)
  
  selected_instrument <- reactiveVal()
  
  observeEvent(input$btn_3L, { selected_instrument("3L") })
  observeEvent(input$btn_4L, { selected_instrument("4L") })
  observeEvent(input$btn_5L, { selected_instrument("5L") })
  observeEvent(input$btn_CS, { selected_instrument("CS") })

  table_data <- eventReactive(input$render, {
    req(input$date, selected_instrument())
    
    InstrumentSubset <- Data %>% filter(Instrument == selected_instrument())
    DateSubset <- InstrumentSubset %>% filter(Date == input$date)
    
    if (nrow(DateSubset) > 0) {
      TableData <- DateSubset %>% select(-Instrument, -Date)
      SmallTable(data = TableData)
    } else {
      NULL
    }
  })

  output$qc_table <- render_gt({
    req(table_data())
    table_data()
  })
}

app <- shinyApp(ui = ui, server = server)
```

Expected behavior

No response

Actual behavior

No response

Your environment

R version 4.4.1 (2024-06-14 ucrt)
Rstudio ‘2024.9.0.375’
Platform: x86_64-w64-mingw32/x64
Running under: Windows 11 x64 (build 26100)

Quarto check output

Quarto 1.5.57
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.5.57

[mcanouil]

Thanks for the report.
Could you update to the latest stable version and confirm you still have the issue?

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

[DavidRach]

@mcanouil Updated to Quarto 1.6.40 and issue persist. Updated within post code blocks (sorry!, missed the ````qmd portion)

[mcanouil]

I believe your issue is related to the secondary discussions in:

• How do I add a valuebox as a tab in a dashboard? #11374 (comment)

[mcanouil]

A Shinylive code cell is not a card so you need explicit header not title currently (see the discussion I've linked)

The issue itselt has, in fact, nothing to do with shinylive.

If you do add an explicit header, you'll end up with the following issue:

• Tabset (with explicit headers) breaks Row layout in dashboards #11387

Input	Output
--- format: dashboard filters: - shinylive --- ## Row ### Column {.tabset} #### Tab 1 {{< lipsum 1 >}} #### Shinylive Tab 1 ```{shinylive-r} #| standalone: true #| viewerHeight: 450 ``` ### Column {{< placeholder >}} ## Row ### Column {.tabset} #### Tab 1 {{< lipsum 1 >}} #### Shinylive Tab 2 ```{shinylive-r} #| standalone: true #| viewerHeight: 450 ``` ### Column {{< placeholder >}}

PS: as your issue is actually not an issue but a question, I am moving this to a discussion. In the future, consider opening a discussions if you want to ask a question and/or are not sure you are reporting a bug.