dateInput and dateRangeInput stop working when a Sankey Network is rendered #214

octaviancorlade · 2017-09-07T22:48:56Z

I don't know whether it's a problem in networkD3 or in Shiny.
When first loading the page, no Sankey Network, the dateInput works. As soon as the Sankey Network (the simple one from the help example) is rendered, the dateInput stops working properly:

library(shiny)
library(networkD3)

ui <- fluidPage(
   
   sidebarLayout(
      sidebarPanel(
         dateInput("date", "Date: "),
         actionButton("showSankey", "Show Sankey")
      ),
      
      mainPanel(
        sankeyNetworkOutput("plotSankeyGraph")
      )
   )
)

server <- function(input, output) {
   
  observeEvent(input$showSankey, {
    
    output$plotSankeyGraph <- renderSankeyNetwork({
       URL <- paste0('https://cdn.rawgit.com/christophergandrud/networkD3/',
                     'master/JSONdata/energy.json')
       energy <- jsonlite::fromJSON(URL)
       
       sankeyNetwork(Links = energy$links, Nodes = energy$nodes, Source = 'source',
                     Target = 'target', Value = 'value', NodeID = 'name',
                     units = 'TWh', fontSize = 12, nodeWidth = 30)
     })
    
  })
}

shinyApp(ui = ui, server = server)

Using networkD3 0.4 and Shiny 1.0.5 (R 3.4.1).

The text was updated successfully, but these errors were encountered:

cjyetman · 2017-09-08T12:25:01Z

Thanks for the reproducible example!

I can confirm that there seems to be some conflict between specifically networkD3's sankeyNetwork() plot and shiny's dateInput. For instance, the dateInput seems to work as expected when included on the same page as a forceNetwork() plot...

library(shiny)
library(networkD3)

ui <- fluidPage(
  mainPanel(
    dateInput("date", "Date: "),
    forceNetworkOutput("plotForceGraph")
  )
)

server <- function(input, output) {
  output$plotForceGraph <- renderForceNetwork({
    data(MisLinks)
    data(MisNodes)
    forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source",
                 Target = "target", Value = "value", NodeID = "name",
                 Group = "group", opacity = 0.4, zoom = TRUE)
  })
}

shinyApp(ui = ui, server = server)

but does not function as expected when included on a page with a sankeyNetwork() plot...

library(shiny)
library(networkD3)

ui <- fluidPage(
  mainPanel(
    dateInput("date", "Date: "),
    sankeyNetworkOutput("plotSankeyGraph")
  )
)

server <- function(input, output) {
  output$plotSankeyGraph <- renderSankeyNetwork({
    URL <- paste0('https://cdn.rawgit.com/christophergandrud/networkD3/',
                  'master/JSONdata/energy.json')
    energy <- jsonlite::fromJSON(URL)
    sankeyNetwork(Links = energy$links, Nodes = energy$nodes, Source = 'source',
                  Target = 'target', Value = 'value', NodeID = 'name',
                  units = 'TWh', fontSize = 12, nodeWidth = 30)
  })
}

shinyApp(ui = ui, server = server)

I suspect there's some JavaScript and/or CSS conflict between the two, but that will take some effort to track down exactly.

cjyetman · 2017-09-09T04:12:59Z

I narrowed this down to the sankeyNetwork.js script adding a <body> tag within the <foreignObject>, which conflicts with what bootstrap-datepicker is doing. It creates a <foreignObject> tag inside the <title> tag to enable tooltips with multiple lines. I'm not sure what the consequences would be of not adding the <body> tag, and it would have to be tested under numerous browser/version/os/etc. conditions, but the following minimal-ish examples demonstrate the problem, and avoiding the problem while maintaining the multiple-line-tooltip, at least in my current setup (MacOS_10.12.6/Safari_10.1.2).

demo the problem...

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.min.css'>
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
</head>

<body>

  <input type="text" class="date-picker form-control">
  <br>
  
  <svg width="100px" height="100px">
    <rect height="50" width="50" style="fill: rgb(199, 199, 199); cursor: move;">
    </rect>
  </svg>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js'></script>
  
  <script>$('.date-picker').datepicker({});</script>
  
  <script>
  d3.select("svg rect")
    .append("title")
    .append("foreignObject")
    .append("xhtml:body")
    .html("<pre>\u2192 Wind\n289 TWh</pre>");
  </script>

</body>
</html>

demo avoiding the problem...

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.min.css'>
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
</head>

<body>

  <input type="text" class="date-picker form-control">
  <br>
  
  <svg width="100px" height="100px">
    <rect height="50" width="50" style="fill: rgb(199, 199, 199); cursor: move;">
    </rect>
  </svg>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js'></script>
  
  <script>$('.date-picker').datepicker({});</script>
  
  <script>
  d3.select("svg rect")
    .append("title")
    .append("foreignObject")
    .html("<pre>\u2192 Wind\n289 TWh</pre>");
  </script>

</body>
</html>

PR #180 is when this was implemented, and issue #175 (particularly this comment) has some background on how/why this was implemented, but I don't see anything that says explicitly why the <body> tag is necessary. Anyone know more about this than me? Definitely need to test on IE versions... IE tends to be the most picky about these type of things.

octaviancorlade · 2017-09-10T16:05:26Z

Hopefully this will fix.

Thank you for the prompt responses!

It wasn't working on IE11 (and maybe others) without the xhtml:body tag, but replacing

with xhtml:pre did the job.

cjyetman · 2017-09-16T09:07:57Z

It would be good to submit this issue upstream to bootstrap-datepicker also, since the structure...

<foreignObject>
    <xhtml:body>
        <pre>
        </pre>
    </xhtml:body>
</foreignObject>

inside an SVG is technically valid HTML/SVG as far as I can tell.

octaviancorlade · 2017-09-27T11:05:29Z

It looks like bootstrap-datepicker is supporting such structure, while the problem is that d3.js is not appending the xhtml namespace to the body tag:

https://jsfiddle.net/9w31r03x/

This makes my PR #215 to fix the issue technically not correct because d3.selection.append() is also replacing <xhtml:pre> with <pre>, therefore not explicitly using the correct namespace (though it still seems to be working on a variety of browsers/OS)

cjyetman · 2017-09-27T12:10:12Z

I still think just removing the body tag altogether is the way to go... the xhtml prefix doesn't seem to make any difference in my testing.

cjyetman · 2017-09-27T12:21:05Z

For instance, if you simply comment out line 7 in the JS of your example, .append("xhtml:body"), it works as expected for me (macOS 10.12.6/Safari 11.0).

octaviancorlade · 2017-09-27T15:56:25Z

Yes and that's what PR #215 basically does, though currently in the wrong way.

For completeness, I said it's "technically" not correct because in SVG 1.1 the foreignObject would need a way to know what type of markup is in it, and from the SVG 2 draft:

The HTML parser treats elements inside the ‘foreignObject’ equivalent to elements inside an HTML document fragment.

cjyetman · 2017-09-27T16:32:06Z

Sorry, somehow I must have misread PR #215 before... I thought it removed the <pre> tag. I give it a 👍

balintba · 2018-11-02T08:48:13Z

Dear All,

I see that this issue is known for quite some time now. I wanted to use the Sankey network in my application, but I also have several dateInputs which break down upon loading the Sankey plot. What do you think, can I expect a solution in the forseeable future. As I see the pull request has not been accepted yet. Thanks in advance!

cjyetman · 2019-03-25T12:15:57Z

Looks like this is/will be finally fixed upstream with rstudio/shiny@3d11780

will close this issue once I have verified it

cjyetman · 2019-04-09T12:27:26Z

This problem appears to be resolved in the upstream fix in shiny which is in the current release version on CRAN (v1.3.0). Closing issue

cjyetman added bug sankeyNetwork labels Sep 8, 2017

octaviancorlade mentioned this issue Sep 10, 2017

Sankey: explicit <xhtml:pre> instead of <xhtml:body> for bootstrap-datepicker compatibility #215

Open

cjyetman mentioned this issue Sep 18, 2017

showModal does not pop up with renderSankeyNetwork in Shiny App. #216

Closed

cjyetman mentioned this issue Feb 15, 2019

Shiny progress bars not working properly with networkD3 #250

Closed

cjyetman mentioned this issue Mar 22, 2019

networkD3 package and progress bars rstudio/shiny#2329

Closed

This was referenced Mar 25, 2019

Fix #2348, #2329, #1817: bugs triggered by networkD3 sankey plot rstudio/shiny#2359

Closed

Fix #2348, #2329, #1817: bugs triggered by networkD3 sankey plot rstudio/shiny#2361

Merged

cjyetman closed this as completed Apr 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dateInput and dateRangeInput stop working when a Sankey Network is rendered #214

dateInput and dateRangeInput stop working when a Sankey Network is rendered #214

octaviancorlade commented Sep 7, 2017

cjyetman commented Sep 8, 2017

cjyetman commented Sep 9, 2017

octaviancorlade commented Sep 10, 2017

cjyetman commented Sep 16, 2017

octaviancorlade commented Sep 27, 2017 •

edited

Loading

cjyetman commented Sep 27, 2017

cjyetman commented Sep 27, 2017

octaviancorlade commented Sep 27, 2017

cjyetman commented Sep 27, 2017

balintba commented Nov 2, 2018

cjyetman commented Mar 25, 2019

cjyetman commented Apr 9, 2019

dateInput and dateRangeInput stop working when a Sankey Network is rendered #214

dateInput and dateRangeInput stop working when a Sankey Network is rendered #214

Comments

octaviancorlade commented Sep 7, 2017

cjyetman commented Sep 8, 2017

cjyetman commented Sep 9, 2017

octaviancorlade commented Sep 10, 2017

cjyetman commented Sep 16, 2017

octaviancorlade commented Sep 27, 2017 • edited Loading

cjyetman commented Sep 27, 2017

cjyetman commented Sep 27, 2017

octaviancorlade commented Sep 27, 2017

cjyetman commented Sep 27, 2017

balintba commented Nov 2, 2018

cjyetman commented Mar 25, 2019

cjyetman commented Apr 9, 2019

octaviancorlade commented Sep 27, 2017 •

edited

Loading