search

thechiselgroup / biomixer

BioMixer
http://bio-mixer.appspot.com/
16 stars 13 forks source link

Layout Initializations, Refresh #420

Closed everbeek closed 9 years ago

everbeek commented 9 years ago

Layouts need to be initialized such that edges and nodes are always attached. For as long as I can remember, I have seen crazy disconnections between arcs and nodes on various layouts when they start. It has to do with animation settings or functions.

Also, when layouts are refreshed, they should probably all have a timer to prevent over-frequent refreshes. I added a refresh when edges are added to the graph and immediately saw sluggish behavior. This means that all layouts need to be wrapped so that there is a cooling period, and probably also a check to make sure there's actually new data since the last call. This can do in the runCurrentLayout() method, rather than being baked into individual layouts.

everbeek commented 9 years ago

I have implemented the timer, as well as used a time stamp on graph change to reduce calls when the graph hasn't actually changed. It has went down from 56 calls on load to 6 calls, for a 6 node 5 arc graph. It is visibly improved, and loads the default tree layout properly now.

I still need to initialize the arc endpoints. I think I need to anchor them to the current node position, and that they are currently anchored to the desired node positions, since I can see the arcs "waiting" for nodes to arrive at their existing endpoints.

everbeek commented 9 years ago

This endpoint problem is a pain. It doesn't appear you can have correlated transitions in D3 (have the nodes animate via transition, and have the arcs move the same way. Nor does SVG have a way for a non-container oriented binding of coordinates. I am poking more, since I feel like it isn't just me who would need it, and I am just googling incorrectly.

I did find Cola.js which could nullify this issue.

I need to be able to define basic properties (coordinates, or distances) as functions, but SVG doesn't have that either...

everbeek commented 9 years ago

Hint: I stashed some experiments to move on to a more pressing issue, and a breakpoint in the browser was still present (at "var xDist = offset * targetOrthVectorX;" in computePolyLineLinkPointsFunc() ). Hitting this breakpoint for...longer than a split second, perhaps as long as a full second, resolved the disconnections between the arcs and nodes. I should play with transition durations, breakpoints...

Oh! It could be that the initial setting of the breakpoints is getting caught up in the transition. if so, I don't know how to fix that and still have transitions for arcs.

This points me more firmly at DOM Mutation observers, to watch node coordinates and update arcs based on those changes:

http://addyosmani.com/blog/mutation-observers/ https://github.com/Polymer/MutationObservers https://github.com/kapetan/jquery-observe http://weblog.west-wind.com/posts/2011/Feb/22/A-jQuery-Plugin-to-monitor-Html-Element-CSS-Changes

http://stackoverflow.com/questions/1882224/is-there-an-alternative-to-domattrmodified-that-will-work-in-webkit http://www.w3.org/TR/SVG/interact.html

everbeek commented 9 years ago

I think this is resolved, since initialization and changes work well. There might be underlying problems that will require mutation observers, but I don't see the arc-node disconnect happening like I used to. It may have been resolved when I merged with #330.