quarto-dev / quarto-cli

Open-source scientific and technical publishing system built on Pandoc.
https://quarto.org
Other
3.61k stars 294 forks source link

Glimma HTML output does not render when embedding via html tag #8978

Open gadepallivs opened 4 months ago

gadepallivs commented 4 months ago

Bug description

I'm trying to embed the outputs in a .qmd file as follows. Note: There are multiple outputs in HTML widgets, so, don't want to overload the quatro document with it by rendering the code within the document. So, though embedding the final HTML outputs would be easier and cleaner.

I would like to include each .HTML output in a specific tab, tried it as follows, but it did not work. I dont' get an error, but the tab 2 does not render the HTML plot or table.

Steps to reproduce

I have output from Glimma as follows

library(Glimma)
library(DESeq2)

dge <- readRDS(system.file("RNAseq123/dge.rds", package = "Glimma"))

dds <- DESeqDataSetFromMatrix(
  countData = dge$counts,
  colData = dge$samples,
  rowData = dge$genes,
  design = ~group
)
dds <- DESeq(dds, quiet=TRUE)

tab1 <- glimmaMA(dds)
tab1_1 <- glimmaVolcano(dds)
# Tab2
tab2 <- glimmaMA(dds)
tab2_2  <- glimmaVolcano(dds)

htmlwidgets::saveWidget(tab1, "tab1.html")
htmlwidgets::saveWidget(tab1_1, "tab1_1.html")
htmlwidgets::saveWidget(tab2, "tab2.html")
htmlwidgets::saveWidget(tab2_2, "tab2_2.html")

Below is my example quatro document.

---
title: "test"
format: html
editor: visual
---

::: {.panel-tabset}
## Tab 1
Tab content

```{=html}
<iframe width="780" height="500" src="tab1.html" title="tab1"></iframe>

sub content

<iframe width="780" height="500" src="tab1_1.html" title="tab1_1"></iframe>

Tab 2

Tab content

<iframe width="780" height="500" src="tab2.html" title="tab2"></iframe>

sub content

<iframe width="780" height="500" src="tab2_2.html" title="tab2_2"></iframe>

:::


### Expected behavior

Should show the same output as tab1 

### Actual behavior

Does not display the html widget in 2nd tab. 

### Your environment

R version 4.3.2 (2023-10-31) Platform: aarch64-apple-darwin20 (64-bit) Running under: macOS Sonoma 14.3

Matrix products: default BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib LAPACK: /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/lib/libRlapack.dylib; LAPACK version 3.11.0

locale: [1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

time zone: America/New_York tzcode source: internal

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

other attached packages: [1] DESeq2_1.42.0 SummarizedExperiment_1.32.0 Biobase_2.62.0
[4] MatrixGenerics_1.14.0 matrixStats_1.2.0 GenomicRanges_1.54.1
[7] GenomeInfoDb_1.38.6 IRanges_2.36.0 S4Vectors_0.40.2
[10] BiocGenerics_0.48.1 edgeR_4.0.16 limma_3.58.1
[13] Glimma_2.12.0

loaded via a namespace (and not attached): [1] gtable_0.3.4 xfun_0.42 ggplot2_3.5.0 htmlwidgets_1.6.4
[5] lattice_0.22-5 vctrs_0.6.5 tools_4.3.2 bitops_1.0-7
[9] generics_0.1.3 parallel_4.3.2 tibble_3.2.1 fansi_1.0.6
[13] pkgconfig_2.0.3 Matrix_1.6-5 lifecycle_1.0.4 GenomeInfoDbData_1.2.11 [17] compiler_4.3.2 statmod_1.5.0 munsell_0.5.0 codetools_0.2-19
[21] htmltools_0.5.7 RCurl_1.98-1.14 yaml_2.3.8 pillar_1.9.0
[25] crayon_1.5.2 ellipsis_0.3.2 BiocParallel_1.36.0 DelayedArray_0.28.0
[29] abind_1.4-5 tidyselect_1.2.0 locfit_1.5-9.8 digest_0.6.34
[33] dplyr_1.1.4 fastmap_1.1.1 grid_4.3.2 colorspace_2.1-0
[37] cli_3.6.2 SparseArray_1.2.4 magrittr_2.0.3 S4Arrays_1.2.0
[41] utf8_1.2.4 scales_1.3.0 rmarkdown_2.25 XVector_0.42.0
[45] evaluate_0.23 knitr_1.45 rlang_1.1.3 Rcpp_1.0.12
[49] glue_1.7.0 BiocManager_1.30.22 renv_1.0.5 rstudioapi_0.15.0
[53] jsonlite_1.8.8 R6_2.5.1 zlibbioc_1.48.0


### Quarto check output

[✓] Checking versions of quarto binary dependencies... Pandoc version 3.1.1: OK Dart Sass version 1.55.0: OK [✓] Checking versions of quarto dependencies......OK [✓] Checking Quarto installation......OK Version: 1.3.450 Path: /Applications/RStudio.app/Contents/Resources/app/quarto/bin

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

[✓] Checking Python 3 installation....OK Version: 3.9.6 Path: /Library/Developer/CommandLineTools/usr/bin/python3 Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with python3 -m pip install jupyter

(/) Checking R installation...........Warning message: In chonly && is.symbol(arg) : invalid 'x' type in 'x && y' [✓] Checking R installation...........OK Version: 4.3.2 Path: /Library/Frameworks/R.framework/Resources LibPaths:

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

mcanouil commented 4 months ago

Could you make your example reproducible? Possibly sharing a Git repository.

gadepallivs commented 4 months ago

Sorry if you were not able to reproduce the issue. I tried the above example in a fresh R session and I could reproduce it. The R code provided would generate the HTML inputs for the .qmd. and the .qmd is embedding the HTML.

mcanouil commented 4 months ago

Ok, I got the setup right. Why are you loading edgeR exactly?

Also, what does "overload" means? You are saving the widgets to include them back (but not really as iframe are not "includes"). The following "works" just fine. (same behaviour about the second tab panel, but way less messy than saving widget and using iframes)

---
title: "Quarto Playground"
format: html
---

This is a playground for Quarto.

```{r}
#| include: false
library(Glimma)
library(DESeq2)

dge <- readRDS(system.file("RNAseq123/dge.rds", package = "Glimma"))

dds <- DESeqDataSetFromMatrix(
  countData = dge$counts,
  colData = dge$samples,
  rowData = dge$genes,
  design = ~group
)
dds <- DESeq(dds, quiet=TRUE)

tab1 <- glimmaMA(dds)
tab1_1 <- glimmaVolcano(dds)
# Tab2
tab2 <- glimmaMA(dds)
tab2_2  <- glimmaVolcano(dds)

::: {.panel-tabset}

Tab 1

Tab content

tab1

sub content

tab1_1

Tab 2

Tab content

tab2

sub content

tab2_2

:::

gadepallivs commented 4 months ago

I'm saving the HTML outputs as a .HTML file and using iframe, because we get the .htmls from Collaborator. There are multiple HTML outputs, and it is not possible to add all the code in a quarto document like how you render.

As you noted, even if I render, with your example above, I still have the same issue. When I click on the tab 2, I don't see any plots or tables. Could this be something that needs to be raised with the Glimma package authors? Here is a screenshot of tab2 what I see

Screenshot 2024-03-04 at 6 25 00 PM
cderv commented 4 months ago

This remind me of

where some new resize event needed to be thrown on tab change... So could be related, where htmlwidgets are not recomputed on tab change.

When tabset are created, the content inside is not displayed when loading, and this is known to be problematic for HTML widgets content that compute sizing. When changing tabsets, it only display what has been hidden, but it doesn't reload anything.

So possibly we need more JS on tab change event for this to work. Though the usual even does not seem to apply here... 🤔 unsure what to tweak for now.