Shiny App-showModal does not pop up with renderSankeyNetwork

1.8k views Asked by At

I am developing a Shiny application which has two components Sankey Diagram and one action button which pop up "SaveMsg" dialog box on click of button .

I am seeing unexpected behavior where, If I user actionbutton and Sankeyvisualization in one dashboard, on click of action button, dashboard screen greyed out.

however If I comment Sankey code and keep only Action button on UI, Action button works as expected by showing pop up message of "save successfull". If I comment action button code and keep only Sankey code in UI, I am able to see sankey output on dashboard.

Sankey code and action button both are working as expected separately, however if I place both in one dashboard action button greyed outscreen dashboard screen.

I have also attached sample code-

library(shiny)
library(networkD3)
library(shinydashboard)
value <-  c(12,21,41,12,81)
source <- c(4,1,5,2,1)
target <- c(0,0,1,3,3)
edges2 <- data.frame(cbind(value,source,target))

names(edges2) <- c("value","source","target")
indx  <- c(0,1,2,3,4,5)
ID    <- c('CITY_1','CITY_2','CITY_3','CITY_4','CITY_5','CITY_6')
nodes <-data.frame(cbind(ID,indx))

ui <- dashboardPage(
  dashboardHeader(
  ),
  dashboardSidebar(disable = TRUE),
  dashboardBody(
    fluidPage(
      actionLink("savebtn", "Save button")
      ,sankeyNetworkOutput("simple")
    )
  )
)

server <- function(input, output,session) {

  # Show modal when button is clicked.
  observeEvent(input$savebtn, {
    showModal(modalDialog(
      title = "Save successful"))
  })

  output$simple <- renderSankeyNetwork({
    sankeyNetwork(Links = edges2, Nodes = nodes,
                  Source = "source", Target = "target",
                  Value = "value",  NodeID = "ID" 
                  ,units = "SSN" )
  })
}

shinyApp(ui = ui, server = server)
2

There are 2 answers

2
DeanAttali On

I haven't dug into the problem so I'm not sure why that's happening. But in case the modal you want to show is just some text (doesn't contain shiny elements), you can use shinyalert which also does modals (not on CRAN yet, haven't published it yet). Here's your code using shinyalert. Hope that helps

library(shiny)
library(networkD3)
library(shinyalert)
value <-  c(12,21,41,12,81)
source <- c(4,1,5,2,1)
target <- c(0,0,1,3,3)
edges2 <- data.frame(cbind(value,source,target))

names(edges2) <- c("value","source","target")
indx  <- c(0,1,2,3,4,5)
ID    <- c('CITY_1','CITY_2','CITY_3','CITY_4','CITY_5','CITY_6')
nodes <-data.frame(cbind(ID,indx))

ui <- dashboardPage(
  dashboardHeader(
  ),
  dashboardSidebar(disable = TRUE),
  dashboardBody(
    fluidPage(
      useShinyalert()
      ,actionLink("savebtn", "Save button")
      ,sankeyNetworkOutput("simple")
    )
  )
)

server <- function(input, output,session) {

  # Show modal when button is clicked.
  observeEvent(input$savebtn, {
    shinyalert("Save successful")
  })

  output$simple <- renderSankeyNetwork({
    sankeyNetwork(Links = edges2, Nodes = nodes,
                  Source = "source", Target = "target",
                  Value = "value",  NodeID = "ID" 
                  ,units = "SSN" )
  })
}

shinyApp(ui = ui, server = server)
0
CJ Yetman On

UPDATE (2019.05.20)

This issue has been resolved with the dev version of shiny and should be released on CRAN soon as shiny v1.3.3.


This issue has already been reported here, and I believe it's similar to what was reported here. The JavaScript used by sankeyNetwork() adds a <foreignObject><xhtml:body>... to wrap the SVG titles to facilitate multi-line titles in older versions of IE. That structure apparently conflicts with what bootstrap-datepicker does, and after a little bit of testing, I can verify that this seems to be at the root of what is happening here as well. There is a pull request already that should fix this on the networkD3 end, but it has not been vetted and merged yet. Once it has, installing and using the dev version of networkD3 should resolve this problem. I think this should also be fixed upstream since the <foreignObject><xhtml:body>... structure seems to be valid HTML/SVG.