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

shiny integration #3

Closed
keeganhines opened this Issue Aug 26, 2015 · 12 comments

Comments

Projects
None yet
2 participants
@keeganhines

keeganhines commented Aug 26, 2015

Thanks for this great package @timelyportfolio - Just wondering if you've attempted shiny integration here yet. You've included sunburstOutput() and renderSunburst(), and these work great right off the bat. But I've noticed a strange behavior -

If we try to produce a new result from renderSunburst() in response to any user input, the resulting plot seems to append the relevant data instead of replacing it.

Here's a simple example to demo.

https://github.com/keeganhines/sunburstRshiny

This is most noticeable as the label grows and grows as you interact with the slider. I'm kinda stumped, I can't imagine what aspect of htmlwidgets is appending the data. Do you have any guess?

@timelyportfolio

This comment has been minimized.

Owner

timelyportfolio commented Aug 26, 2015

@keeganhines As I mentioned in the post, I broke some of my rules in putting this together, and the sloppiness is surfacing. I think it is all fixed. Let me know if it is not.

@timelyportfolio

This comment has been minimized.

Owner

timelyportfolio commented Aug 26, 2015

Using the little bit of invalidateLater trick learned from @jcheng5, here is an example.

library(shiny)
library(sunburstR)

sequences <- read.csv(
  system.file("examples/visit-sequences.csv",package="sunburstR")
  ,header=F
  ,stringsAsFactors = FALSE
)


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

  output$sunburst <- renderSunburst({ 
    invalidateLater(1000, session)

    sequences <- sequences[sample(nrow(sequences),1000),]

    sunburst(sequences) 
  })
}


ui<-fluidPage(
  sidebarLayout(
    sidebarPanel(

    ),

    # plot sunburst
    mainPanel(
      sunburstOutput("sunburst")
    )
  )
)

shinyApp(ui = ui, server = server)
@keeganhines

This comment has been minimized.

keeganhines commented Aug 26, 2015

Great, thanks for these changes, the fixes for Shiny definitely work.

In your Shiny example here, do you see the following js console errors (and a blank sunburst plot)?

Error: Invalid negative value for <svg> attribute height="-70"
Error: Invalid negative value for <circle> attribute r="-35"
@timelyportfolio

This comment has been minimized.

Owner

timelyportfolio commented Aug 26, 2015

I don't. Will explore later. For now, can you try providing a height and width for sunburstOutput?

@timelyportfolio

This comment has been minimized.

Owner

timelyportfolio commented Aug 26, 2015

What browser?

@timelyportfolio

This comment has been minimized.

Owner

timelyportfolio commented Aug 26, 2015

Also you might want to devtools::install_github one last time since I was firing away with changes.

@keeganhines

This comment has been minimized.

keeganhines commented Aug 27, 2015

Still seeing the same problem with the latest commit, setting width and height and with Chrome, Firefox, Safari.

A little more on the stack trace for the error:

image

@keeganhines

This comment has been minimized.

keeganhines commented Aug 27, 2015

So I can trace it all back to line 20 of sunburst.js

image

The console error is that the height is being set as -70 and radius as -35, so this implies that el.getBoundingClientRect().height is returning 0.

This problem persists even when I specify the arguments as sunburst(sequences, height=1000, width=1000).

@keeganhines

This comment has been minimized.

keeganhines commented Aug 27, 2015

So it seems that the element with id #sunburst was being given no dimension, so adding this to the ui fixes the problem

tags$head(tags$style("#sunburst {width:500px;height:500px; position:relative;}")),
@timelyportfolio

This comment has been minimized.

Owner

timelyportfolio commented Aug 27, 2015

Oh, I know. Try to devtools::install_github("ramnathv/htmlwidgets"). There was a pull ramnathv/htmlwidgets#148 that I think will fix the problem.

@timelyportfolio

This comment has been minimized.

Owner

timelyportfolio commented Aug 27, 2015

@keeganhines, you can verify by doing this.

> sunburstOutput("sunburst")

and the first line should be

<div class="sunburst html-widget html-widget-output" id="sunburst" style="width:100%; height:400px; position:relative;">

There should be a ; after height:400px.

@keeganhines

This comment has been minimized.

keeganhines commented Aug 27, 2015

yea, that's exactly it, thanks!

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