NetworkD3 plots zoomed in when switching pages

[mcharles]

I'm encountering an issue when I create 2 SankeyNetwork plots and wish to display them on separate pages of a Dashboard.

The first plot loads on the first page with no issue - looking exactly as it should.

However, when I flip to the second page, the second SankeyNetwork plot is tremendously zoomed in - making it unreadable. Clicking 'refresh' automatically fixes the plot - bringing it back to it's correct perspective. Then - when I click back to the first page - that plot is zoomed in in the same manner.

It doesn't appear to matter which plot I place on the first or second pages... Is there some sort of caching setting I need to alter?

[mrjoh3]

I am having the same problem with a different html widget package. The plot on the first page sizes correctly but the second one does not. This is the case even if identical plots are rendered see gist.

[jjallaire]

These problems are almost certainly due to the htmlwidgets not properly
implementing the resize method. I'd start with contacting the widget author
with a minimal reproducible example.

On Sat, Jun 25, 2016 at 3:59 AM, Matt Johnson notifications@github.com
wrote:

I am having the same problem with a different html widget package. The
plot on the first page sizes correctly but the second one does not. This is
the case even if identical plots are rendered see gist
https://gist.github.com/mrjoh3/e4f191bd4259a671d19ba7687a862ffb.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#68 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAGXx2ZWtF4wsy3o4TA6e03SwWj2bqhlks5qPN_tgaJpZM4I-AIB
.

[timelyportfolio]

@mcharles I can confirm sankeyNetwork does not have a resize method (see lines). The importance of resize was not known until tabsets and flexdashboard, so many htmlwidgets lack this method. See this commit timelyportfolio/sunburstR@a26fff3 as an example of adding resize to an existing widget. Here is another for parcoords timelyportfolio/parcoords@4d1f73f. I should have some time to add to sankeyNetwork over the next couple of days.

Many charting libraries provide a resize-like API that can be used, but if not then you can try to implement one yourself or just empty and re-render.

@mrjoh3, if you need help, I can try to help on c3. In this case, it should be easy since http://c3js.org/samples/api_resize.html.

[mrjoh3]

after checking, I had not properly implemented the resize method the c3 widget.

@timelyportfolio, any assistance/advice would be greatly appreciated. I seem to be halfway there using the c3 api chart.resize() and el.getBoundingClientRect().height;.Changes to the width resize as expected but the height of the second page plot is still wrong and only reducing the window height will trigger the resize function.

please see this commit

[mrjoh3]

I have finally tracked the problem but am not sure if it is a problem with flexdashboard or htmlwidgets. When using tabs or storyboards in flexdashboard, the hidden tabs el.getBoundingClientRect().height returns 0. The widget .resize() is also triggered when the page is initially rendered. So any resize based on el.getBoundingClientRect().height will be wrong.

I suspect others are having the same or similar problems (see this networkD3 issue and this SO question.

[jjallaire]

I think there are a couple of ways to go here:

1. Widgets need to defend themselves against being called with zero height/width (i.e. return from renderValue or resize without doing anything).
2. htmlwidgets needs to not call renderValue or resize when height/width is zero. This is a bit tricky because we'd need to then defer the renderValue call until we got a valid height/width.

@jcheng5 Do you have a viewpoint on what the best approach to this issue is? This also recently came up with rbokeh because bokeh itself throws an exception if you try to render it with zero width/height. I'd expect lots of libraries would have the same issue and I'm not sure if it's reasonable for us to ask all the widget authors to check for zero size and return.

[gadenbuie]

This appears to be a problem that htmlwidgets or the networkD3 package should resolve (or have resolved). I don't see any actions in this conversation that flexdashboard should take. Thanks again to everyone for the report and suggestions.