Tree Distortion in Shiny Modal - r

Question

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.
Modified
library(shiny)
library(collapsibleTree)
choice1_data = data.frame(
V1 = c(rep("Corporate",3),"Sales"),
V2 = c("Finance","Marketing","HR","Sales"),
V3 = c(110,43,12,243)
)
choice2_data = data.frame(
V1 = c(rep("Corporate",3),"Sales","IT"),
V2 = c("Finance","Marketing","HR","Sales","IT"),
V3 = c(110,43,12,243,22)
)
choice3_data = data.frame(
V1 = c(rep("Corporate",3),"Sales","IT","Management"),
V2 = c("Finance","Marketing","HR","Sales","IT","Management"),
V3 = c(110,43,12,243,34,22)
)
ui <- fluidPage(
mainPanel(
br(),
actionButton("mainButton","Click me"),
br(),
uiOutput("jobcodeRadio")
)
)
server <- function(input,output,session){
output$jobcodeRadio = renderUI({
div(
style="display:flex;align-items:top;",
div(
class="jobcodeRadioStyle",
div(
radioButtons(
"JOBCODE",
"Explore a Role of Interest:",
choiceNames=c("choice 1","choice 2","choice 3"),
choiceValues=c("choice_1","choice_2","choice_3")
)
)
)
)
})
output$tree = renderCollapsibleTree({
selected_choice=input$JOBCODE
if(selected_choice=="choice_1")
{
df=choice1_data
}
else if(selected_choice=="choice_2"){
df=choice2_data
}
else{
df=choice3_data
}
collapsibleTreeSummary(
df,
root="Fake Corporation",
hierarchy=c("V1","V2"),
zoomable=T,
attribute="V3",
nodeSize="V3",
tooltip=T,
linkLength=250,
fontSize=12
)
})
plotModal <- function(failed = FALSE) {
modalDialog(
title = NULL,
size="l",
easyClose=T,
# Display the tree
fluidPage(collapsibleTreeOutput("tree"))
)
}
observeEvent(input$mainButton,{
showModal(plotModal())
})
}
shinyApp(ui,server)
1st time being rendered
Subsequent times being rendered
I appreciate if anyone can help me.

Answer 1

I'm not sure why this happens, but the proper way of displaying UI (apart from text) inside a modalDialog() would be to create a function to trigger the modalUI as mentioned here.
So I just moved your collapsibleTreeOutput and renderCollapsibleTree outside the button's observe event and included the plotModal() inside the button's observe event.
This function will generate the proper UI.
Here's the modified code
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){
output$tree = renderCollapsibleTree({
collapsibleTreeSummary(
df,
root="Fake Corporation",
hierarchy=c("V1","V2"),
zoomable=T,
attribute="V3",
nodeSize="V3",
tooltip=T,
linkLength=250,
fontSize=12
)
})
plotModal <- function(failed = FALSE) {
modalDialog(
title = NULL,
size="l",
easyClose=T,
# Display the tree
fluidPage(collapsibleTreeOutput("tree"))
)
}
observeEvent(input$mainButton,{
showModal(plotModal())
})
}
shinyApp(ui,server)
Hope this helpes!
P.S I'm still not sure why the UI is rendered from the top when clicked >1 times

Answer 2

Issue has been resolved when I render data tree in shiny renderUI({}) function instead of in fluidPage() :
plotModal <- function(failed = FALSE) {
modalDialog(
title = NULL,
size="l",
easyClose=T,
# Display the tree
renderUI(collapsibleTreeOutput("tree"))
)
}