jsTree htmlwidget

Installation

#CRAN
install.packages('jsTree')

#Github
devtools::install_github('metrumresearchgroup/jsTree')

The motivation for the package came from the shinyTree by Jeff Allen, which has an early version of the JavaScript library hardcoded into a Shiny application.

The input for the htmlwidget is a character vector and the heirarchy is set by the ‘/’, as to mimic the delimiter of a file path.

The main purpose of this package is vizualize folder hierarchy, much like in the Files tab in RStudio. But, instead of looking in local directories it will be used for remote repositories, such as github, bitbucket and svn repositories. This is implemented in the vcs package and a future post will show utility that package gives.

To show the basic functionality of jsTree we will use a dataset that contains all superfund sites from the EPA. You can access the tibble here. The data

library(htmlTable)
library(jsTree)
library(widgetframe)
# Read in the data
superfundsite <- readRDS('../../data/superfundsite.Rds')

htmlTable::htmlTable(head(superfundsite),rnames=FALSE)

Basic Usage

# collapse columns to be delimited by '/'
myx <- apply(superfundsite,1,function(x) paste(x,collapse = '/'))

# call jsTree
j0 <- jsTree(obj = myx)

# place widget in iframe to use in blog post 
# (not needed in regular usage)
frameWidget(j0)

Initialize tree with checked boxes

nodestate1 <- superfundsite$State=='California'

j1 <- jsTree(myx,nodestate=nodestate1)

frameWidget(j1)

Tooltips

# Use the zipcode as a tooltip on the county name

myx2 <- apply(superfundsite[,-c(5)],1,paste,collapse='/')

zipcode_label <- superfundsite$`Zip Code`
names(zipcode_label) <- superfundsite$County

j2 <- jsTree(myx2,tooltips = zipcode_label)

frameWidget(j2)

Shiny

jsTree can be used in Shiny applications and supplies observers so the Shiny can react to the tree.

ui <- shiny::fluidPage(
  
  shiny::column(width=4,jsTree::jsTreeOutput('tree')),
  
  shiny::column(width=8,shiny::uiOutput('chosen'))
  
)

server <- function(input, output,session) {
  
  network <- shiny::reactiveValues()
  
  shiny::observeEvent(input$tree_update,{
    
    current_selection <- input$tree_update$.current_tree
    if(!is.null(current_selection)) 
      network$tree <- jsonlite::fromJSON(current_selection)
    
  })
  
  shiny::observeEvent(network$tree,{
    
    output$results <- shiny::renderPrint({
      
      str.out <- ''
      
      if(length(network$tree)>0)
        str.out=network$tree
      
      return(str.out)
    })    
  })
  
  output$chosen <- shiny::renderUI({
    
    list(shiny::h3('Selected Items'),
         
    shiny::verbatimTextOutput(outputId = "results"))
    
  })
  
  output$tree <- jsTree::renderJsTree({
    
    nested_string <- myx
    
    jsTree(nested_string)
    
  })
  
}

shinyApp(ui, server)