Искажение дерева в блестящем модале

Question

Экземпляр collapsibleTreeSummary () искажается, поскольку он отображается более одного раза в одном и том же modelDialog () в приложении Shiny. Дерево сжимается после того, как модал и дерево визуализируются более одного раза, что затрудняет его понимание.

Например, этот код отображает горизонтальное дерево, представляющее численность искусственной компании по подразделению.

Изменено

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)

1-й раз при визуализации

В следующий раз при визуализации

Я ценю, если кто-нибудь может мне помочь.

Answer 1

Я не уверен, почему это происходит, но правильный способ отображения пользовательского интерфейса (кроме текста) внутри modalDialog() заключается в создании функции для запуска modalUI, как упоминалось здесь .

Поэтому я просто переместил ваши collapsibleTreeOutput и renderCollapsibleTree за пределы события наблюдения кнопки и включил plotModal() в событие наблюдения кнопки.
Эта функция сгенерирует соответствующий пользовательский интерфейс.

Вот модифицированный код

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)

Надеюсь, это поможет! PS Я до сих пор не уверен, почему пользовательский интерфейс отображается сверху при нажатии> 1 раз

Answer 2

Проблема устранена, когда я рендерил дерево данных в блестящей функции renderUI({}) вместо fluidPage():

 plotModal <- function(failed = FALSE) {
    modalDialog(
      title = NULL,
      size="l",
      easyClose=T,
      # Display the tree
      renderUI(collapsibleTreeOutput("tree"))

    )
  }