Dagre control points for drawing more accurate edges

[danielpes]

It would be nice if thie cytoscape-dagre layout could make the edges "points" attribute available for the cytoscape graphs, giving the possibility to draw more accurate edges with segments or unbundled-bezier styles.

[mafar]

see cytoscape.js (cytoscape-dagre) vs dagre-d3.js for same set of data.

• cytoscape : https://jsfiddle.net/bababalcksheep/m40m5mmx/8/
• dagre-d3: http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

How can I make cytoscape.js edges same like dagre ? Any help will be much appreciated.

cytoscape-dagre should be able to pick points from dagre !!! see from example https://jsfiddle.net/bababalcksheep/55cmk117/6/ where after dagre.layout(g); dagre has points in edges data which could be consumed by cytoscape segment edges.

[maxkfranz]

Not easy to do until 2.7 is released with style properties for configuring where the segment-weights start and end: https://github.com/cytoscape/cytoscape.js/issues/1236

[mafar]

@maxkfranz 2.7 is released. Waiting for this feature. Thankx

[maxkfranz]

@djangosdk There are a lot of other tasks for Cytoscape.js that have to take priority. If this feature is important to you, we'll gladly accept a pull request. It should be straightforward to implement in 2.7. The segments property values should go in user specified node.data() fields so the user can map to them in their stylesheet.

[mafar]

@maxkfranz Can you still help with some basic example or point me in right direction. I am in dire need for Dagre control points for Cy. A description of what to do , where to do will also help ( I did not understand fully how to utilize segments property values ) I updated all examples above and they are working now i https://github.com/cytoscape/cytoscape.js-dagre/issues/5#issuecomment-210742510

[newlukai]

I spent some time trying to convert Dagre's control points to Cytoscape's segment edges (distances and weights). Unfortunately, the rendered result is not that beautiful, but maybe it's a start to get this issue done?

Some edges aren't rendered and appear spontaneously when moving a connected node. Additionally the edges don't follow the points of Dagre's layout.

A first version of implementing this issue.

[knownact]

@newlukai I have improved your implementation, make it more beautiful. please check it out.

3bef946c348d419366c8b75b0bd3a2ee3ac28e34

[knownact]

and fix when rankDir is "LR":

af46725944e8d294179fe6f5d344679f7d025694

[yansenlei]

@knownact Is it like this?http://jsfiddle.net/5u9mzfse/47/

[knownact]

Now, the result is like this:

[knownact]

By the way , I think default result is good.

https://jsfiddle.net/knownact/usL3ayxn/3/

[yansenlei]

@knownact If it is drawing a flow chart, Klay shows better. dagre:

klay:

[knownact]

@yansenlei yep, but can you give me the test data? i think dagre is not bad like this:

[yansenlei]

@knownact sure, like this: https://jsfiddle.net/leiys/e2rc66b8/3/

[knownact]

this is what I get:

[yansenlei]

yes, this layout is not like a flowchart.

[knownact]

yep, Klay is better!

[newlukai]

Since I was in the need to find a solution, I switched to mxGraph. It's not as light-weight as cytoscape, but the provided layouts do fine and I'm now able to make very specific changes to the graph.

@knownact : Your changes look good.

Regarding the discussion started shortly: Yes, Klay is better.

[mafar]

can we get this feature ? Been three years now

[maxkfranz]

You're right. It's been about three years. But it's been three years of significant updates to the main library and also to first-party extensions -- all of which the community can freely re-use. The Cytoscape Consortium has to prioritise, and in that prioritisation community feedback is carefully taken into account.

In the spirit of open-source, we welcome pull requests from the community for features like this.

Thanks for your feedback.

[maxkfranz]

Dagre can only inform where the edges should be routed for the node positions that Dagre specifies. As soon as the nodes are moved, Dagre's assumptions are no longer true and the use of Dagre's edge points would give bad results.

For trees -- and probably some types of DAGs as well -- specifying the points from Dagre itself isn't really needed in cytoscape>=3.5. The curve-style:taxi edge style allows for automatic routing of an edge using taxicab geometry. This gives a very similar result as Dagre's edge points, except the native Cytoscape taxi feature works interactively whereas Dagre does not.

See https://github.com/cytoscape/cytoscape.js/issues/2306. The example graph in that issue uses a Dagre layout with taxi edges.

[maxkfranz]

The example graph:

[stale[bot]]

This issue has been automatically marked as stale, because it has not had activity within the past 30 days. It will be closed if no further activity occurs within the next 30 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

[deepanshu11madan]

was anyone able to make the this work? I am facing the similar issue, why doesn't cytoscape.js-dagre follow the dagre layout for edges?

[stale[bot]]

This issue has been automatically marked as stale, because it has not had activity within the past 30 days. It will be closed if no further activity occurs within the next 30 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

[deepanshu11madan]

Is there any future plan to make edges follow dagre layout?

[stale[bot]]

This issue has been automatically marked as stale, because it has not had activity within the past 30 days. It will be closed if no further activity occurs within the next 30 days. If a feature request is important to you, please consider making a pull request. Thank you for your contributions.

[koo5]

hello stale bot, did microsoft send you to break opensource? It's not hard to see how changing the meaning of "closed" is perfectly counterproductive, is it?

[knightswatch3]

I do not understand what the solution to overlapping paths is. Has this been addressed in any of the cytoscape versions ?

[rish1]

this is what I get:

How did u manage to draw an edge saperately in my case difference edges shares one i mean it merges down at some point

[danyel-motif]

Hey, @knownact -- I just wanted to thank you for the hard work you did on https://github.com/cytoscape/cytoscape.js-dagre/issues/5#issuecomment-373244016

It's lovely for my purposes. (And @maxkfranz , thanks for the library!)