Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

networkD3 package and progress bars #2329

Closed
ghost opened this issue Feb 15, 2019 · 3 comments
Closed

networkD3 package and progress bars #2329

ghost opened this issue Feb 15, 2019 · 3 comments

Comments

@ghost
Copy link

ghost commented Feb 15, 2019

Hi,
I have some issues with progress bars in Shiny and the package networkD3. If I try to use a progress bar and the networkD3 package, the bar shows up once but not in subsequent calls. But each time the slider is used the progess bar should appear, which is the case without the sankey diagram.
I tested in Chrome.
Here is a minimum example code:

require(shinyjs)
require(shiny)
require(networkD3)
require(jsonlite)
require(shinydashboard)

ui <- function(){
  fluidPage(
    fluidRow(
      column(width = 12, style = "margin: 0px; padding: 0px;",
             box(title = "Flow Diagram", status = "primary", solidHeader = F, width = 7,
                 sankeyNetworkOutput("sankeyFlow", width = "100%", height = "500px")
             )
      ), 
      sliderInput("numLanes", label = "Number of Top Lanes", min = 0, max = 30, value = 10)
    )
  )
}

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

  observeEvent(c(input$numLanes), {
    withProgress(message = "Wait...", value = NULL, {
      Sys.sleep(1.0)
    })
  })

  output$sankeyFlow <- renderSankeyNetwork({
    print("sankey")

    withProgress(message = "Updating flow diagram...", value = NULL, {

      # Load energy projection data
      URL <- "https://cdn.rawgit.com/christophergandrud/networkD3/master/JSONdata/energy.json"
      Energy <- jsonlite::fromJSON(URL)

      nLanes <- input$numLanes

      plot <- sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
                                  Target = "target", Value = "value", NodeID = "name",
                                  units = "TWh", fontSize = 12, nodeWidth = 30)
      return(plot)
    })
  })
}

shinyApp(ui = ui, server = server)

In my use case I use several progress bars and none are displayed if I include the flow diagram.

Thanks, Christian

@alandipert alandipert self-assigned this Mar 22, 2019
alandipert added a commit that referenced this issue Mar 22, 2019
* All of these were caused by the presence of multiple body tags on the
page, which happened because networkD3's sankey plot generates SVGs
containing body tags via SVG's foreignObject tag
* In various places, the 'body' jQuery selector string is used under the
assumption there is only one 'body' tag on the page. The presence of
multiple 'body' tags breaks reliant code in strange ways.
* The fix in all cases was to make the body selector more specific:
'body:first' does the job.
@alandipert
Copy link
Contributor

@baczychris thank you for the report, I think I was able to identify a fix.

@alandipert alandipert added this to the 1.2.1 milestone Mar 22, 2019
@alandipert alandipert modified the milestones: 1.2.1, 1.3 Mar 22, 2019
alandipert added a commit that referenced this issue Mar 22, 2019
* All of these were caused by the presence of multiple body tags on the
page, which happened because networkD3's sankey plot generates SVGs
containing body tags via SVG's foreignObject tag
* In various places, the 'body' jQuery selector string is used under the
assumption there is only one 'body' tag on the page. The presence of
multiple 'body' tags breaks reliant code in strange ways.
* The fix was to use document.body or 'body:first' instead of 'body'.
@cjyetman
Copy link

I think we found a workaround for this on our end (see christophergandrud/networkD3#214), but I believe a fix here would be preferable... interested to see what fix you came up with.

alandipert added a commit that referenced this issue Mar 27, 2019
* All of these were caused by the presence of multiple body tags on the
page, which happened because networkD3's sankey plot generates SVGs
containing body tags via SVG's foreignObject tag
* In various places, the 'body' jQuery selector string is used under the
assumption there is only one 'body' tag on the page. The presence of
multiple 'body' tags breaks reliant code in strange ways.
* The fix was to use document.body or 'body:first' instead of 'body'.
alandipert added a commit that referenced this issue Mar 27, 2019
* All of these were caused by the presence of multiple body tags on the
page, which happened because networkD3's sankey plot generates SVGs
containing body tags via SVG's foreignObject tag
* In various places, the 'body' jQuery selector string is used under the
assumption there is only one 'body' tag on the page. The presence of
multiple 'body' tags breaks reliant code in strange ways.
* The fix was to use document.body or 'body:first' instead of 'body'.
alandipert added a commit that referenced this issue Mar 27, 2019
* All of these were caused by the presence of multiple body tags on the
page, which happened because networkD3's sankey plot generates SVGs
containing body tags via SVG's foreignObject tag
* In various places, the 'body' jQuery selector string is used under the
assumption there is only one 'body' tag on the page. The presence of
multiple 'body' tags breaks reliant code in strange ways.
* The fix was to use document.body or 'body:first' instead of 'body'.
alandipert added a commit that referenced this issue Mar 27, 2019
* All of these were caused by the presence of multiple body tags on the
page, which happened because networkD3's sankey plot generates SVGs
containing body tags via SVG's foreignObject tag
* In various places, the 'body' jQuery selector string is used under the
assumption there is only one 'body' tag on the page. The presence of
multiple 'body' tags breaks reliant code in strange ways.
* The fix was to use document.body or 'body:first' instead of 'body'.
alandipert added a commit that referenced this issue Mar 27, 2019
* All of these were caused by the presence of multiple body tags on the
page, which happened because networkD3's sankey plot generates SVGs
containing body tags via SVG's foreignObject tag
* In various places, the 'body' jQuery selector string is used under the
assumption there is only one 'body' tag on the page. The presence of
multiple 'body' tags breaks reliant code in strange ways.
* The fix was to use document.body or 'body:first' instead of 'body'.
alandipert added a commit that referenced this issue Mar 27, 2019
* All of these were caused by the presence of multiple body tags on the
page, which happened because networkD3's sankey plot generates SVGs
containing body tags via SVG's foreignObject tag
* In various places, the 'body' jQuery selector string is used under the
assumption there is only one 'body' tag on the page. The presence of
multiple 'body' tags breaks reliant code in strange ways.
* The fix was to use document.body or 'body:first' instead of 'body'.
wch added a commit that referenced this issue Mar 27, 2019
Fix #2348, #2329, #1817: bugs triggered by networkD3 sankey plot
schloerke added a commit that referenced this issue Mar 27, 2019
* rc-v1.3.0:
  Remove reactlog from Remotes
  Fix #2349, #2329, #1817: bugs triggered by networkD3 sankey plot
  Improve bootstrap-datepicker update tools, add docs
  Add 'Fix datepicker DST bug' as patch
  Improve bootstrap-datepicker update script
  Re-import bootstrap-datepicker 1.6.4
  Remove httpuv and reactlog from remotes
  Restore intuitive bookmarking behavior (#2360)
@jcheng5 jcheng5 modified the milestones: 1.3, 1.4 Apr 16, 2019
alandipert added a commit that referenced this issue May 8, 2019
@alandipert
Copy link
Contributor

This is finally fixed on master and should be available in the next Shiny release. Sorry for the delay.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants