stla / jsTreeR

A wrapper of the jQuery plugin `jsTree`.
Other
44 stars 2 forks source link

jsTreeR affects other htmlwidgets' styling #32

Open datatenk opened 2 months ago

datatenk commented 2 months ago

After switching from shinyTree to jsTreeR, all other htmlwidgets appear to have their styling set to those of jsTree when they are rendered through renderUI.

As exemplified below, a shinyWidgets::radioGroupButtons element is used:

1) when using shinyTree, the following rendering is obtained (desirable): Screenshot 2024-05-05 215821

2) after switching to jsTreeR, the following rendering is obtained (undesirable): Screenshot 2024-05-05 215745

Below is a reprex, firstly using shinyTree, where the renderings are good in both "shinyTree" and "shinyTree uiOutput" tabs:

library(shiny)
library(bslib)
library(shinyWidgets)
library(shinyTree)
library(jsTreeR)

# using shinyTree
nodes_shinyTree<-list(foo=list(bar=list()))

shinyTree_ui<-card(
  shinyTree('shinyTree_tree_ui'),
  radioGroupButtons('rgb1',choices=c('A','B'),size='sm'))

ui_shinyTree<-page_navbar(
  title='shinyTree',

  nav_panel(
    title='shinyTree',
    card(
      shinyTree('shinyTree_tree'),
      radioGroupButtons('rgb',choices=c('A','B'),size='sm')
    )
  ),

  nav_panel(
    title='shinyTree uiOutput',
    uiOutput('shinyTree_ui')
  )

)

server_shinyTree<-function(input,output,session){
  output$shinyTree_tree<-renderTree(nodes_shinyTree)

  output$shinyTree_tree_ui<-renderTree(nodes_shinyTree)
  output$shinyTree_ui<-renderUI(shinyTree_ui)

}

shinyApp(ui_shinyTree,server_shinyTree)

Same example, now using jsTreeR instead of shinyTree; notice the problem in the "jsTreeR uiOutput" tab:

library(shiny)
library(bslib)
library(shinyWidgets)
library(shinyTree)
library(jsTreeR)

# using jsTreeR
nodes_jsTreeR<-list(list(text='foo',children=list(list(text='bar'))))

jsTreeR_ui<-card(
    jstreeOutput('jstree_tree_ui'),
    radioGroupButtons('rgb1',choices=c('A','B'),size='sm'))

ui_jsTreeR<-page_navbar(
  title='jsTreeR',

  nav_panel(
    title='jsTreeR',
    card(
      jstreeOutput('jstree_tree'),
      radioGroupButtons('rgb',choices=c('A','B'),size='sm')
    )
  ),

  nav_panel(
    title='jsTreeR uiOutput',
    uiOutput('jsTreeR_ui')
  )
)

server_jsTreeR<-function(input,output,session){
  output$jstree_tree<-renderJstree(jstree(nodes_jsTreeR))

  output$jsTreeR_ui<-renderUI(jsTreeR_ui)
  output$jstree_tree_ui<-renderJstree(jstree(nodes_jsTreeR))

}

shinyApp(ui_jsTreeR,server_jsTreeR)
stla commented 2 months ago

Hello,

Thanks for the report. That is very strange. This is not due to the jsTreeR contained in the renderUI: if you remove it, you get the same strange behavior. I inspected the HTML code and I observed that the code for the button groups is different. In the first tab, there are only input type="radio" elements, while in the second tab, there are some button elements in addition. I have really no idea where are they from.

datatenk commented 2 months ago

If by "removing jsTreeR" could restore the radioGroupButtons to its original rendering, that has been tried and shown in my Reprex in which I used renderUI with shinyTree to achieve the correct rendering of radioGroupButton. However, it highlights the points that once renderUI is paired with jsTree, the radioGroupButton rendering breaks. There are actually 2 separately formed shinyApps in my reprex, one for each wrapper. The only difference between the 2 apps in my reprex is which jsTree wrapper is being used, shinyTree vs jsTreeR.