facet_trelliscope() does not work in tabset tabs in flexdashboard

[jaredlander]

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

```{r t-2,eval=TRUE}
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]

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]

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.