search

hafen / trelliscopejs

TrelliscopeJS R Package
https://hafen.github.io/trelliscopejs
Other
262 stars 36 forks source link

facet_trelliscope() does not work in tabset tabs in flexdashboard #88

Open jaredlander opened 4 years ago

jaredlander commented 4 years ago

When using a tabset row in {flexdashboard}, a ggplot faceted with facet_trelliscope() will only render in the first tab. This example shows a situation where the plot is in the second tab but will not render. Moving this plot to the first tab makes it render.

I originally thought this was an issue with having multiple trellis charts, but I further narrowed it down to tabsets. I'm sure there is some JavaScript collision.

Also, I'm not sure these charts have an elementId which I have seen cause issues for other htmlwidgets like sweetalertR and rthreejs.

---
title: "Template"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    self_contained: true
    lib_dir: trelli
---

```{r data}
library(ggplot2)
library(trelliscopejs)
library(magrittr)
diamonds <- diamonds %>% 
  dplyr::sample_frac(size=.05)

Scopes

{.tabset}

Trellis 1

Placeholder here

Trellis 2

ggplot(diamonds, aes(x=carat, y=price, color=cut)) + 
  geom_point() + 
  facet_trelliscope(~ cut, nrow=2, ncol=2, as_plotly=TRUE, jsonp=FALSE, path='trelli/trelli_two', name='trell2')

Here is my session info.

R version 3.6.1 (2019-07-05) Platform: x86_64-pc-linux-gnu (64-bit) Running under: Ubuntu 18.04.3 LTS

Matrix products: default BLAS: /usr/lib/x86_64-linux-gnu/openblas/libblas.so.3 LAPACK: /usr/lib/x86_64-linux-gnu/libopenblasp-r0.2.20.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
[6] LC_MESSAGES=en_US.UTF-8 LC_PAPER=en_US.UTF-8 LC_NAME=C LC_ADDRESS=C LC_TELEPHONE=C
[11] LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C

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

other attached packages: [1] trelliscopejs_0.2.4 RPostgres_1.1.3 threejs_0.3.2.0.0.0.1576794289 igraph_1.2.4.2
[5] ggraph_2.0.0 tidygraph_1.1.2 fable_0.1.1 feasts_0.1.1
[9] fabletools_0.1.1 recipes_0.1.7 sf_0.8-0 dbscan_1.1-5
[13] htmltools_0.4.0 manipulateWidget_0.10.0 colourvalues_0.3.1 leafgl_0.1.1.0.0.0.1577533177 [17] leaflet.minicharts_0.6.0 leaflet_2.0.3 furrr_0.1.0 purrr_0.3.3
[21] tidyr_1.0.0 dplyr_0.8.3 lutz_0.3.1 gganimate_1.0.4
[25] ggplot2_3.3.0 lubridate_1.7.4 future_1.15.1 tsibble_0.8.5
[29] magrittr_1.5

loaded via a namespace (and not attached): [1] backports_1.1.5 plyr_1.8.5 lazyeval_0.2.2
[4] sp_1.3-2 splines_3.6.1 tippy_0.0.1
[7] crosstalk_1.0.0 listenv_0.8.0 digest_0.6.23
[10] flexdashboard_0.5.1.1 useful_1.2.6 rsconnect_0.8.15
[13] viridis_0.5.1 leaflet.providers_1.9.0 fansi_0.4.0
[16] checkmate_1.9.4 config_0.3 globals_0.12.5
[19] graphlayouts_0.5.0 gower_0.2.1 xts_0.11-2
[22] anytime_0.3.6 prettyunits_1.0.2 colorspace_1.4-1
[25] blob_1.2.0 ggrepel_0.8.1 xfun_0.11
[28] leafem_0.0.1 callr_3.4.0 crayon_1.3.4
[31] jsonlite_1.6 zeallot_0.1.0 survival_2.44-1.1
[34] zoo_1.8-6 sweetalertR_0.2.0.0.0.0.1576714160 glue_1.3.1
[37] polyclip_1.10-0 gtable_0.3.0 ipred_0.9-9
[40] webshot_0.5.2 scales_1.1.0 DBI_1.1.0
[43] miniUI_0.1.1.1 Rcpp_1.0.3 viridisLite_0.3.0
[46] xtable_1.8-4 progress_1.2.2 units_0.6-5
[49] mclust_5.4.5 bit_1.1-14 lava_1.6.6
[52] prodlim_2019.11.13 DT_0.10 htmlwidgets_1.5.1
[55] httr_1.4.1 ellipsis_0.3.0 pkgconfig_2.0.3
[58] farver_2.0.1 nnet_7.3-12 utf8_1.1.4
[61] here_0.1 labeling_0.3 tidyselect_0.2.5
[64] rlang_0.4.2 later_1.0.0 munsell_0.5.0
[67] tools_3.6.1 cli_1.1.0 generics_0.0.2
[70] gifski_0.8.6 evaluate_0.14 stringr_1.4.0
[73] fastmap_1.0.1 yaml_2.2.0 processx_3.4.1
[76] knitr_1.26 bit64_0.9-7 packrat_0.5.0
[79] mime_0.7 compiler_3.6.1 rstudioapi_0.10
[82] plotly_4.9.1 png_0.1-7 e1071_1.7-3
[85] tibble_2.1.3 tweenr_1.0.1 stringi_1.4.3
[88] ps_1.3.0 forcats_0.4.0 lattice_0.20-38
[91] Matrix_1.2-17 classInt_0.4-2 vctrs_0.2.1
[94] pillar_1.4.2 lifecycle_0.1.0 data.table_1.12.8
[97] raster_3.0-7 httpuv_1.5.2 R6_2.4.1
[100] promises_1.1.0 renv_0.8.3 KernSmooth_2.23-15
[103] gridExtra_2.3 codetools_0.2-16 MASS_7.3-51.4
[106] assertthat_0.2.1 fontawesome_0.1.0.0.0.0.1567434535 rprojroot_1.3-2
[109] withr_2.1.2 autocogs_0.1.2 parallel_3.6.1
[112] hms_0.5.2 grid_3.6.1 rpart_4.1-15
[115] timeDate_3043.102 class_7.3-15 rmarkdown_1.18
[118] DistributionUtils_0.6-0 ggforce_0.3.1 shiny_1.4.0
[121] base64enc_0.1-3 leaflet.extras_1.0.0 dygraphs_1.1.1.6

hafen commented 4 years ago

This is interesting.

The display loads and is there, it's just placed inside a div that is 0x0 pixels!

When a trelliscope display is embedded inside a document, it determines its size based on the size of its parent element. Here, the display loads immediately on page load, so when it's placed in the second tab, it thinks its dimensions are 0x0. I'll have to give this one some thought.

jaredlander commented 4 years ago

Totally makes sense, but obviously not desired.

What if the size is determined whenever it becomes visible? Saying that, I'm now thinking that it's "visible" the whole time, just in a 0x0 visible display.