rich-iannone / DiagrammeR

Graph and network visualization using tabular data in R
https://rich-iannone.github.io/DiagrammeR/
Other
1.7k stars 247 forks source link

use snapper to save to png? #392

Open vnijs opened 4 years ago

vnijs commented 4 years ago

In case you haven't seen it yet, snapper looks like a really cool package that creates png screenshots of shiny-apps and, hopefully, Diagrammer plots (incl. mermaid). It doesn't quit seem to be working correctly with SVG but perhaps you have some suggestions?

cc-ing @yonicd

image

yonicd commented 4 years ago

It may be that the layers of svg are getting ignored. I had a similar issue when snapping leaflets. This was my solution there:

snapper::preview_button(
    ui = '#myMap',
    opts = snapper::config(
      allowTaint = TRUE,
      useCORS = TRUE)
)

https://github.com/yonicd/snapper/blob/c2483e180f61bb1510f7a0771a133df9444fa8ba/vignettes/htmlwidgets.Rmd#L28_L33

yonicd commented 4 years ago

this works fine for me

library(shiny)
library(DiagrammeR)
library(snapper)

ui = fluidPage(
  snapper::load_snapper(),
  snapper::preview_button(
    ui = '#diagram',
    opts = snapper::config(scale = 1)
  ),
  grVizOutput('diagram'),
  snapper::snapper_div()
  )

server = function(input, output) {
  output$diagram <- renderGrViz({
    grViz("digraph {A;}")
  })
}

shinyApp(ui, server)

ui2 <- fluidPage(
  snapper::load_snapper(),
  snapper::preview_button(ui = '#dg',opts = snapper::config(scale = 1)),
  grVizOutput("dg"),
  verbatimTextOutput("print"),
  snapper::snapper_div()
)

server2 <- function(input, output, session) {
  output$dg <- renderGrViz({
    grViz("
digraph a_nice_graph {

# node definitions with substituted label text
node [fontname = Helvetica]
a [label = '@@1']
b [label = '@@2-1']
c [label = '@@2-2']
d [label = '@@2-3']
e [label = '@@2-4']
f [label = '@@2-5']
g [label = '@@2-6']
h [label = '@@2-7']
i [label = '@@2-8']
j [label = '@@2-9']

# edge definitions with the node IDs
a -> {b c d e f g h i j}
}

[1]: 'top'
[2]: 10:20
")
  })
  txt <- reactive({
    req(input$dg_click)
    nodeval <- input$dg_click$nodeValues[[1]]
    return(paste(nodeval, " is clicked"))
  })
  output$print <- renderPrint({
    txt()
  })
}

shinyApp(ui2, server2)
vnijs commented 4 years ago

Thanks @yonicd! I mainly use the mermaid interface in Diagrammer and have trouble there.

image

library(shiny)
library(DiagrammeR)
library(snapper)

ui = fluidPage(
  snapper::load_snapper(),
  snapper::preview_button(
    ui = '#diagram',
    opts = snapper::config(scale = 1)
  ),
  DiagrammeROutput('diagram'),
  snapper::snapper_div()
)

server = function(input, output) {
  output$diagram <- renderDiagrammeR({
    mermaid("graph LR; A-->B; A-->C; C-->E; B-->D; C-->D; D-->F; E-->F")
  })
}

shinyApp(ui, server)
yonicd commented 4 years ago

these look like similar issues

https://github.com/niklasvh/html2canvas/issues/1311

https://github.com/niklasvh/html2canvas/issues/95