Tree Distortion in Shiny Modal

[dalekube]

An instance of collapsibleTreeSummary() becomes distorted as it's rendered more than once in the same modelDialog() within a Shiny app. The tree is compressed after the modal and tree are rendered more than once, making it difficult to comprehend.

For example, this code displays a horizontal tree, representing an artificial company's headcount by division.

library(shiny)
library(collapsibleTree)

df = data.frame(
  V1 = c(rep("Corporate",3),"Sales"),
  V2 = c("Finance","Marketing","HR","Sales"),
  V3 = c(110,43,12,243)
)

ui <- fluidPage(
  
  mainPanel(
    br(),
    actionButton("mainButton","Click me")
  )
      
)

server <- function(input,output,session){
  
  observeEvent(input$mainButton,{
    
    output$tree = renderCollapsibleTree({
      
      collapsibleTreeSummary(
        df,
        root="Fake Corporation",
        hierarchy=c("V1","V2"),
        zoomable=T,
        attribute="V3",
        nodeSize="V3",
        tooltip=T,
        linkLength=250,
        fontSize=12
      )
      
    })
    
    showModal(
      session=session,
      modalDialog(
        size="l",
        easyClose=T,
        
        # Display the tree
        collapsibleTreeOutput("tree")
        
      )
    )
    
  })
  
}

shinyApp(ui,server)

1st time being rendered

Subsequent times being rendered

[ImSanjayChintha]

Issue has been resolved when I render the data tree piece of code in renderUI() function :

showModal(
      session=session,
      modalDialog(
        size="l",
        easyClose=T,
        
        # Display the tree
        renderUI({
        collapsibleTreeOutput("tree")
        })
      )
    )

[dalekube]

Thanks, @ImSanjayChintha. This is a suitable, temporary fix.