Expand Plotly output in Quarto HTML document to full screen

Question

I would like to make plotly output from a chunk in a Quarto HTML document expandable to a full screen view.

bslib seems to offer such a solution via card(full_screen = TRUE,...) which is documented at https://rstudio.github.io/bslib/articles/cards.html#filling-outputs

This is the full contents of my test quarto document:

---
title: "Zoom Plotly?"
format: html
---

```{r}
#| warn: false
#| message: false

suppressPackageStartupMessages({
  library(bslib)
  library(shiny)
  library(htmltools)
  library(plotly)
})   
    
card(title = "",
     full_screen = TRUE,
     plot_ly(x = diamonds$cut))

```

When I render, two things are different than expected about the layout:

Clicking the "expand" button only expands the plot to the size of the quarto output
The "expand" button is rendered as a black bar at the bottom of the graphic instead of the aesthetically pleasing arrows that only appear when the user hovers over the card.

How can I make the expanded view match the behavior of expanded cards in the bslib examples?

From a solution standpoint, I would prefer something that could be contributed as a patch to either quarto-cli or the bslib package so that bslib::card() "just works" for quarto users.

Output of sessionInfo()

R version 4.2.2 (2022-10-31)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 20.04.5 LTS

Matrix products: default
BLAS/LAPACK: /usr/lib/x86_64-linux-gnu/libmkl_rt.so

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=en_US.UTF-8        LC_COLLATE=en_US.UTF-8     LC_MONETARY=en_US.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=en_US.UTF-8       LC_NAME=C                  LC_ADDRESS=C               LC_TELEPHONE=C             LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] bsicons_0.1       shiny_1.7.4       plotly_4.10.1     ggplot2_3.4.2     bslib_0.5.0       htmlwidgets_1.6.2

loaded via a namespace (and not attached):
 [1] tidyselect_1.2.0   xfun_0.35          purrr_1.0.1        lattice_0.20-45    colorspace_2.0-3   vctrs_0.6.2        generics_0.1.3     htmltools_0.5.4    viridisLite_0.4.1 
[10] yaml_2.3.6         utf8_1.2.2         rlang_1.1.1        jquerylib_0.1.4    pillar_1.9.0       later_1.3.0        glue_1.6.2         withr_2.5.0        bit64_4.0.5       
[19] sp_1.5-1           uuid_1.1-0         lifecycle_1.0.3    measurements_1.4.0 munsell_0.5.0      gtable_0.3.1       arrow_10.0.1       knitr_1.41         fastmap_1.1.0     
[28] httpuv_1.6.6       crosstalk_1.2.0    fansi_1.0.3        Rcpp_1.0.9         xtable_1.8-4       scales_1.2.1       promises_1.2.0.1   cachem_1.0.6       jsonlite_1.8.4    
[37] bit_4.0.5          mime_0.12          fs_1.5.2           digest_0.6.31      dplyr_1.1.2        grid_4.2.2         cli_3.6.1          tools_4.2.2        magrittr_2.0.3    
[46] sass_0.4.4         lazyeval_0.2.2     tibble_3.2.1       tidyr_1.3.0        pkgconfig_2.0.3    ellipsis_0.3.2     MASS_7.3-58.1      RODBC_1.3-20       data.table_1.14.6 
[55] assertthat_0.2.1   httr_1.4.4         rstudioapi_0.14    R6_2.5.1           compiler_4.2.2

Output of quarto check

[✓] Checking Quarto installation......OK
      Version: 1.2.280
      Path: /opt/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.9.16
      Path: /opt/python/3.9.16/bin/python3
      Jupyter: 5.1.0
      Kernels: dash-testing-3.9.16, testvenv, python3, py3.10.9, py3.9.16

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.2.2
      Path: /opt/R/4.2.2/lib/R
      LibPaths:
        - /home/username/R/x86_64-pc-linux-gnu-library/4.2
        - /opt/R/4.2.2/lib/R/library
      rmarkdown: 2.18

[✓] Checking Knitr engine render......OK

Cross posted as issue to quarto-cli here: https://github.com/quarto-dev/quarto-cli/issues/6081

Quarto is overwriting the dependencies that you need for this to work properly. (For example, Quarto uses Bootstrap 5.1; `bslib` uses Bootstrap 5.2) I'm still messing around with trying to find a workaround for you, but even when I add in the Quarto-eradicated css, it still doesn't work right. Quarto seems to overwrite all of the JS & css/scss dependencies with generic names, so it requires diving into the JS & css/scss to find the versions (at least they didn't erase that part...sigh). — Kat, Jul 04 '23 at 00:06
@StéphaneLaurent - I only see a couple [forum posts](https://discuss.streamlit.io/t/how-to-make-the-view-fullscreen-button-visible-by-default/9900) and [streamlit issues](https://github.com/streamlit/streamlit/issues/5644) indicating this might be a beta feature exposed through `plotly.py` or `plotly.js`? If you could provide an answer with an example using the `r` `plotly` package and rendering with the `quarto` `knir` engine I'd love to see if there is a simple solution! — Matt Summersgill, Jul 10 '23 at 19:51

Matt Summersgill · Accepted Answer · 2023-08-14T13:39:49.670

Big shout-out to @cpsievert - this behavior is now resolved in version 5.1, now available on CRAN.

For future reference, if you are having trouble with this, confirm you are using bslib v5.1+ and quarto-cli v1.3.433+

The original example proposed now renders exactly as desired.

---
title: "Zoom Plotly?"
format: html
---

```{r}
#| warn: false
#| message: false

suppressPackageStartupMessages({
  library(bslib)
  library(plotly)
})

plot_ly(x = diamonds$cut) |> 
  bslib::card(full_screen = TRUE)

```

Expand Plotly output in Quarto HTML document to full screen

1 Answers1