D3 plots are buggy and don't behave well when customized

[armish]

From @dphansti:

The D3 plots (circle and force) are a bit buggy. The force network tends to freak out when you make too many changes to the settings. This may just be how it is. I am not sure if there is a clear 'fix' for it.

[armish]

After playing with the plots a bit, it does look like they sometimes reload prematurely and unintentionally reset some of the attributes. As far as I can tell, the main issue is async messaging between the Shiny server and the client, which interferes with the event firing that happens when you customize something. Another issue is that the graphs are relatively big so they make use of significant memory (which is fine) hence some JS code can get executed with delay.

The way to solve this is to introduce some sort of promise library and make sure all the JS events behave well and don't override one another; but the question is: does it worth it the rewrite? I would say no if you have limited time and don't want to invest too much energy as although the app is somewhat buggy, in general it works nice and there is minimal risk of losing heavy setup/data due to these bugs.

Having said that, if you list some of the specific issues that you think might annoy the people the most (e.g. made-up issue: colors are not applied to the nodes even if you configure it specifically), we can knock them out and make sure the core functionality almost always works.

[dphansti]

Thanks Armish. I can definitely live with the stuttering. Shiny is all about real time updating (reactive plots). And the force network is large/memory intensive. It is understandable to see it chug a bit. With that being said, I should reorganize the reactive code a little bit because sometimes the plot reloads when it really doesn't need to.

But, it would be nice if we could eliminate the 'black node bug'. If you are looking at the force network and you make a change that should alter the colors, a lot of the time the nodes turn black. This can be corrected by making a change that does not change node colors (e.g. choose advanced setting and click 'labels'). I have downloaded svg files for plots with the black node effect and after making a change that colors them correctly. And it looks like there is an extra circle and text plotted on top of the correctly colored circle. I have no idea why this is happening. Here is an example for them bad and good svgs.

<g class="node" transform="translate(430.3076512697267,220.26785363016538)"><circle r="7.5" stroke-width="1" opacity="1" stroke="#3f9ffc" style="fill: rgb(63, 159, 252);"></circle><text dy=".35em" font-family="Helvetica" text-anchor="middle" font-size="7px">  eEF2K</text><circle r="7.5"></circle><text dy=".35em" font-family="Helvetica" text-anchor="middle" font-size="7px">  eEF2K</text></g>

# correctly colored nodes 
<g class="node" transform="translate(654.4225605756126,706.5184192173509)" ><circle r="7.5" stroke-width="1" opacity="1" stroke="#3f9ffc" style="fill: rgb(63, 159, 252);"></circle><text dy=".35em" font-family="Helvetica" text-anchor="middle" font-size="7px">  eEF2K</text></g>```

[dphansti]

FWIW, I have checked the json files that are created for the black and non black plots and they are identical.

[dphansti]

On my students' computers (2016 imacs) things run pretty smoothly. They rarely get the black boxes. My comp (2010 mac pro) gets black boxes almost every time I try to change the node colors. This also seems to differ between browsers. Are you experiencing it a lot? or at all?

[armish]

I was also getting the black node issue pretty frequently on my mac pro (2017). Unfortunately, this is the part of the Web that sucks the most: browser incompatibility and covering all the bases.

11 fixed the black node issue for me but it would be great if others can test it so we know I haven't fixed it only for myself ;)

[dphansti]

Thanks Arman. That seemed to fix the issue.