Group items in hierarchical layouts

[ralequi]

Hello,

I find out that draw.io is very easy to use to generate automatic graphs from CSV and lately use those in other places such as Grafana. However, even layouts have very powerful algorithmics, they do not fit in a classical network representation.

Let me explain... In Networking, we usually have a hierarchical device connection, which commonly looks like a tree with connections between devices at the same level.

(^^ something like this ^^)

However, layouts do not handle correctly when 2 different nodes have to be on the same "level", and I did not find out any way to "configure" such thing and make things like that: (vertical tree/ vertical flow)

I don't know if there is a way to configure or notify the MXgraph to group those elements into the same hierarchical level. I've tried almost everything with no result.

190 seems to have something in common with this issue, but when using left/top positioning, documentation says that layouts would overwrite them

Any help would be much appreciated. Thanks

[davidjgraph]

We don't have a layout that supports this. Both the tree and hierarchical don't allow significant edges between same level vertices. You'd have to know which edges to ignore and indicate to the layout to ignore them.

[ralequi]

Thank you @davidjgraph, much appreciated.

The idea to filter edges sounds great. It shouldn't be difficult to identify such edges and put them in an array in an automated way.

However... I'm reading the code ( https://github.com/jgraph/mxgraph/blob/master/javascript/src/js/layout/hierarchical/mxHierarchicalLayout.js ) and I can not find the property or something like that to ignore a set of edges.

How would be the way to do that? I'm still reading, by the way, other files, but my expertise in JS and the integration with draw.io is low. Any clue would be much appreciated.

Edit: Reading https://github.com/jgraph/mxgraph/blob/master/javascript/src/js/layout/mxGraphLayout.js I have found the method "isEdgeIgnored()". I suppose I have to hide the "problematic" edges, apply the layout, and make them visible again. Am I correct? There is any other more explicit way?

[ralequi]

Hello again.

I've tested the visible property. However, it doesn't work as I would expect.

If I remove the links at the same level, I get with the horizontal/vertical flow almost what I would like to see:

However, if I mark those edges as 'visible="0"', I get the same result as if those edges are visible (but invisible actually):

(same shape with horizontal/vertical)

I attach the diagram with the visible attribute set to 0. I don't know if there is a bug with it or not. testdiagram.zip

According to the code, this change should work but it doesn't. Any ideas? Any other way to ignore edges? Should I add (and test) a PR that handles an attribute called "ignore" that makes this for us?

---

Note: Trees seems to work with invisible edges if there is a (fake) element that is set as root. However the shape/representation of this is not as good as the horizontal/vertical flow can be. The json used to generate that tree was: [ { "layout": "mxCompactTreeLayout", "config": { "horizontal": false, "invert": 0, "resizeParent": true, "maintainParentLocation": false, "moveTree": true, "sortEdges": true, "alignRanks": true } } ]

[ralequi]

Thank you @davidjgraph for your guidance.

I have requested a couple of pull requests on MXGraph2.

I don't know if it is the correct repository to make those pull requests. ¿Should I open them on this repository instead?

Regards.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.