HTMLWidgets and xmlSVG not rendering

[osker130]

Hello,

I love the potential of this package. However, I notice that many of the examples are not rendering in the official readme: https://metrumresearchgroup.github.io/slickR/. I ran the code on my own machine and reproduced the problem. Any ideas?

J

[yonicd]

Thank you for pointing that out. I didnt notice that those examples broke.

[yonicd]

can you paste the sessioninfo::session_info() into the issue.

I can render the sliders in the rstudio IDE the plots, there seems to be a problem with the standalone output for the xmlSVG and how it is rendered in the browser (in my case chrome).

[osker130]

I tried to run with regular plots and a ggplot. Neither one renders.

library(svglite)
library(ggplot2)
library(dplyr)
library(slickR)

plotsToSVG=list(
  #Standard Plot
  xmlSVG({plot(1:10)},standalone=TRUE),
  #ggplot
  xmlSVG({show(ggplot(iris,aes(x=Sepal.Length,y=Sepal.Width,colour=Species))+
                 geom_point())},standalone=TRUE) 
)

#make the plot self contained SVG to pass into slickR 
s.in=sapply(plotsToSVG,function(sv){paste0("data:image/svg+xml;utf8,",as.character(sv))})

slickR(s.in,slideId = 'ex4',slickOpts = list(dots=T), height = 200,width = '100%')`

sessionInfo()
R version 3.5.2 (2018-12-20)
Platform: x86_64-redhat-linux-gnu (64-bit)
Running under: Red Hat Enterprise Linux

Matrix products: default
BLAS/LAPACK: /usr/lib64/R/lib/libRblas.so

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C              
 [3] LC_TIME=en_US.UTF-8        LC_COLLATE=en_US.UTF-8    
 [5] LC_MONETARY=en_US.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=en_US.UTF-8       LC_NAME=C                 
 [9] 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] gdtools_0.1.7 slickR_0.2.4  dplyr_0.7.8   ggplot2_3.1.0 svglite_1.2.1

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.1       rstudioapi_0.9.0 xml2_1.2.0       bindr_0.1.1     
 [5] magrittr_1.5     tidyselect_0.2.5 munsell_0.5.0    cowplot_0.9.4   
 [9] colorspace_1.4-0 R6_2.4.0         rlang_0.3.1      plyr_1.8.4      
[13] tools_3.5.2      grid_3.5.2       gtable_0.2.0     withr_2.1.2     
[17] htmltools_0.3.6  digest_0.6.18    yaml_2.2.0       lazyeval_0.2.1  
[21] assertthat_0.2.0 tibble_2.0.1     crayon_1.3.4     bindrcpp_0.2.2  
[25] purrr_0.2.5      base64enc_0.1-3  htmlwidgets_1.3  glue_1.3.0      
[29] labeling_0.3     compiler_3.5.2   pillar_1.3.1     scales_1.0.0    
[33] jsonlite_1.6     pkgconfig_2.0.2 

[yonicd]

Hi

You are running slickr v0.2.4, can you update to the GH master (slickR v0.4) and try again please.

remotes::install_github('metrumresearchgroup/slickR')

Thanks

[yonicd]

Also what browser/version are you using to open the rendered file on?

I see that there is a problem on

• chrome 75.0.3745.4 (Official Build) dev (64-bit)
• firefox 6.0.1 (64-bit)

but not on

• safari 12.0.3 (14606.4.5)

[yonicd]

cc @timelyportfolio @lionel- any ideas why the standalone svg+xml from {svglite} would be having problems on those browsers?

[lionel-]

Are the SVGs included inline? We had problems with inline SVGs in vdiffr before this fix: https://github.com/r-lib/vdiffr/pull/51

I'm not knowledgeable in the matter unfortunately.

[yonicd]

Yes they are inline. thanks for the link

[yonicd]

@osker130 this should work for you. I'll update the html link that is with the package.

library(svglite)
library(ggplot2)
library(slickR)

plotsToSVG=list(
  #Standard Plot
  xmlSVG({plot(1:10)},standalone=TRUE),
  #ggplot
  xmlSVG({show(ggplot(iris,aes(x=Sepal.Length,y=Sepal.Width,colour=Species))+
                 geom_point())},standalone=TRUE) 
)

hash_encode_url <- function(url){
  gsub("#", "%23", url)
}

#make the plot self contained SVG to pass into slickR 
s.in=sapply(plotsToSVG,function(sv){
  hash_encode_url(paste0("data:image/svg+xml;utf8,",as.character(sv)))
  })

slickR(s.in,slideId = 'ex4',slickOpts = list(dots=T), height = 200,width = '100%')

[osker130]

@yonicd @lionel- thank you both! @yonicd your solution works well. The svgs now render fine. Any thoughts on the HTML widgets? I tried the slickR v0.4 update yesterday when I was having problems and then reverted after concluding that the update wasn't the solution. My goal is to use these in an Rshiny application. Most users will be accessing with google chrome as their default browser.

[yonicd]

which html widget didn't work? i have those examples working on my side.

[osker130]

This one wont render in RStudio. I'm left with grey boxes for leaflet and white boxes for plottly. The widgets work fine as standalones.

suppressMessages({
  library(leaflet)
  library(plotly)
})

l <- leaflet() %>% addTiles()
htmlwidgets::saveWidget(l,'leaflet.html')

p <- iris%>%ggplot(aes(x=Sepal.Length,y=Sepal.Width))+geom_point()
pL= ggplotly(p)
htmlwidgets::saveWidget(pL,'ggplotly.html')

slickR(c(rep(paste0(readLines('leaflet.html'),collapse='\n'),4),
         rep(paste0(readLines('ggplotly.html'),collapse='\n'),4)),
       slideId = c('leaf','plot'),
       slideIdx = list(1:4,5:8),
       slideType = rep('iframe',2),
       slickOpts = list(list(dots=T,slidesToShow=2,slidesToScroll=2),
                        list(dots=T,slidesToShow=2,slidesToScroll=2)),
       height='400px',width='100%')

[yonicd]

It’s a known problem that Iframes don’t in render in the rstudio viewer, only in the browser

[osker130]

Got it thank you!

On Wed, Aug 28, 2019 at 11:07 AM yonicd notifications@github.com wrote:

Closed #20 https://github.com/metrumresearchgroup/slickR/issues/20.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/metrumresearchgroup/slickR/issues/20?email_source=notifications&email_token=ACQ5BKUEDUNY7XUQ7ZL5Q3DQG2IC7A5CNFSM4HBRANCKYY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOTJW75KI#event-2590899881, or mute the thread https://github.com/notifications/unsubscribe-auth/ACQ5BKR3ZFNZM5BLM3H5MB3QG2IC7ANCNFSM4HBRANCA .