height of htmlwidget in Jupyter notebook

[nick-youngblut]

I'm trying to display some examples from the htmlwidgets gallery (http://www.htmlwidgets.org/showcase_rglwidget.html) in an R kernel in a Jupyter Notebook (eg., the networkD3 and d3heatmap examples). The htmlwidgets are being displayed in the notebook, but the height of the widget is <1 mm. I can barely see the widget, but I can tell that I'm selecting/moving something if I click carefully. How do I increase the size of the plot?

I've attached a couple of screen shots to show the networkD3 example (it's hard to see because it's height is almost 0).

Session Info:

R version 3.4.1 (2017-06-30)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 16.04.3 LTS

Matrix products: default
BLAS: /ebio/abt3_projects/Georg_animal_feces/anaconda3/envs/py3_ley0.4/lib/R/lib/libRblas.so
LAPACK: /ebio/abt3_projects/Georg_animal_feces/anaconda3/envs/py3_ley0.4/lib/R/lib/libRlapack.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] d3heatmap_0.6.1.1 networkD3_0.4     data.tree_0.7.0   ggplot2_2.2.1    
[5] tidyr_0.7.0       dplyr_0.7.2      

loaded via a namespace (and not attached):
 [1] pbdZMQ_0.2-6       Rook_1.1-1         repr_0.12.0        purrr_0.2.3       
 [5] colorspace_1.3-2   htmltools_0.3.6    viridisLite_0.2.0  yaml_2.1.14       
 [9] base64enc_0.1-3    XML_3.98-1.9       rlang_0.1.2        glue_1.1.1        
[13] RColorBrewer_1.1-2 bindrcpp_0.2       uuid_0.1-2         bindr_0.1         
[17] plyr_1.8.4         stringr_1.2.0      munsell_0.4.3      gtable_0.2.0      
[21] visNetwork_2.0.1   htmlwidgets_0.9    evaluate_0.10.1    DiagrammeR_0.9.1  
[25] IRdisplay_0.4.4    Rcpp_0.12.12       readr_1.1.1        scales_0.4.1      
[29] IRkernel_0.7.1     jsonlite_1.5       rgexf_0.15.3       gridExtra_2.2.1   
[33] brew_1.0-6         hms_0.3            png_0.1-7          digest_0.6.12     
[37] stringi_1.1.5      grid_3.4.1         influenceR_0.1.0   tools_3.4.1       
[41] magrittr_1.5       lazyeval_0.2.0     tibble_1.3.3       crayon_1.3.2      
[45] pkgconfig_2.0.1    downloader_0.4     assertthat_0.2.0   rstudioapi_0.6    
[49] viridis_0.4.0      R6_2.2.2           igraph_1.1.2       compiler_3.4.1    

[janbucher]

• 1

It seems that this is still a problem. This seems to be distributed to other packages using htmlwidgets as well, for example DiagrammeR..

[janxkoci]

I've seen this in firefox, but it works okay in other browsers.

[gzagatti]

The short answer to this issue is that it is not currently possible to adjust the height of the widget in Jupyter based on evidence that I gathered while searching a solution for this topic.

The long answer is as following:

1. htmlwidgets uses the function toHTML to display widgets in Jupyter which then uses the IRdisplay library. This function will basically produce an htmltools HTML browsable object.
2. the IRdisplay library uses the display method to display objects according to its mimetype. This function will call repr::mime2repr to convert the widget to HTML. After the conversion, it will then request the IRkernel library to display the content by calling send_response
3. IRkernel communicates with the Jupyter kernel via zmq messages. In the present case it sends a message of type display_data
4. messages contain data and metadata. The metadata is used by Jupyter to configure the output. For instance it is possible to adjust the size of an image. However, metadata options are very limited at the moment and there is no configuration options for iframes which is the HTML element used to display htmlwidgets

At the moment, I have considered the following alternatives:

1. to avoid iframes (ie htmlwidgets) and use a different mimetype for the output that plays better with Jupyter such as svg. This is my preferred approach as it also avoids bloating the notebook with unnecessary iframes. In some cases, a library will try to wrap its svg element on an iframe. Therefore, one needs to figure how to extract that element from the generated HTML code.
2. to figure how to change CSS styles for iframe outputs in Jupyter. If it is just a one off, you can manually tweak the .jp-mode-isolated CSS class in the developer tab of your webbrowser which will affect all displayed widgets. However, I do not think this is the cleanest solution.