Different direction within the graph

[anton164]

Thanks for developing this library, its potential is huge!

I've been playing around with the options, and I'm wondering if it's possible to use multiple directions within the same layout?

I.e. in the following example:

The root level direction (between Chippy.. and Namespace) would ideally be downwards, then the direction within them should be rightwards, this way it'd be evenly spaced out down/rightwards.

The same goes for the edges, i.e. is it possible to have the edge from 'dqw' to 'Method 1' route to the left, so it doesn't have to go all the way around?

Lastly, I was wondering if it's possible to have 'Deb' show up on the same row as 'Method 1' and 'dqw'?

Thanks! My options are:

  var defaultOptions = {
    edgeRouting: 'POLYLINE',
    direction: 'RIGHT',
    crossMin: 'INTERACTIVE',
    nodeLayering: 'INTERACTIVE',
    nodePlace: 'NETWORK_SIMPLEX',
    fixedAlignment: 'BALANCED',
    cycleBreaking: 'INTERACTIVE',
    thoroughness: 2500,
    spacing: 25,
    borderSpacing: 35,
    algorithm: 'de.cau.cs.kieler.klay.layered',
    feedBackEdges: false,
    layoutHierarchy: true
  };

[uruuru]

I'm wondering if it's possible to use multiple directions within the same layout?

You can have a separate layout direction for every hierarchy level. You can add layout options to every node of the graph as well. In the example below, see the properties element of n2.
I'm not completely sure how well the changing of directions works in conjunction edges that cross hierarchies (dqw -> Method1).

is it possible to have the edge from 'dqw' to 'Method 1' route to the left, so it doesn't have to go all the way around?

Usually this can be done using the feedBackEdges option you already use. However, in you example the feedback edge crosses a hierarchy (cqw). Internally, the algorithm is not aware of the full hierarchy at that point at places a dummy to the right of dqw. Without any ports, the algorithm assumes that outgoing edges should leave the node on the right side (with a left-to-right) layout direction. You could specify a port that is fixed to the west side for dqw and a port on the east side of Method1 in this case. However you would have to change it for top-down layout.

Lastly, I was wondering if it's possible to have 'Deb' show up on the same row as 'Method 1' and 'dqw'?

By row you mean to the left of Object 1? You could increase the desired aspect ratio of Namespace 1scqw such that it's placed there, however it will most likely be top-aligned with Object 1.
(Actually this is not working for me, I'll check it)

Some further notes on your specified layout options. There's no need to change thoroughness unless you have many edges. The larger the value the slower the algorithm. Do you specify positions for all the nodes, or why do you use interactive for most of the phases?

{
    id: "root", 
    children: [{
        id: "n1", 
        labels: [ { text: "n1" } ],
        width: 100,
        height: 100
    },{
        id: "n2",
        properties: {
          direction: "DOWN",
          portConstraints: "FIXED_SIDE",
          aspectRatio: .1
        },
        labels: [ { text: "n2" } ],
        width: 100,
        height: 50,
        ports: [{
            id: "n2_p1",
            width: 10,
            height: 10,
            properties: {"de.cau.cs.kieler.portSide": "SOUTH"}
        }],
        children: [{ 
            id: "n3", 
            labels: [ { text: "n3" } ],
            width: 40,
            height: 40
        },{
            id: "n4",
            labels: [ { text: "n4" } ],
            width: 40,
            height: 40
        },{
            id: "n5",
            labels: [ { text: "n5" } ],
            width: 40,
            height: 40
        }
        ],
        edges: [{
            id: "e4", 
            source: "n3",
            target: "n4"
        }]
    }],
    edges: [{
        id: "e1", 
        labels: [ { text: "e1" } ],
        source: "n1",
        target: "n2",
        targetPort: "n2_p1"
    }]
}

[anton164]

Thanks for the quick help @uruuru! I eventually did figure out that the feedbackEdges option did the job within a layer, and cheers for clearing up some of the other options.

I was using interactive, since I was trying to specify the order in which the nodes appear (using incremental X/Y values), but I've landed at a bit of a different configuration now:

  var defaultOptions = {
    edgeRouting: 'POLYLINE',
    direction: 'RIGHT',
    crossMin: 'LAYER_SWEEP',
    nodeLayering: 'NETWORK_SIMPLEX',
    nodePlace: 'BRANDES_KOEPF',
    fixedAlignment: 'BALANCED',
    cycleBreaking: 'GREEDY',
    spacing: 25,
    borderSpacing: 35,
    algorithm: 'de.cau.cs.kieler.klay.layered',
    feedBackEdges: false,
    layoutHierarchy: true
  };

I've come a bit further now, essentially, I'm trying to automatically draw the following diagram:

With Klay, I've been able to draw the following:

One observation I've made, at least for the example above, is that I would like to be able to specify several directions for a given node. Specifically, I'd like edges within the same hierarchy/layer to be routed leftwards/rightwards, while edges between hierarchies would be routed upwards/downwards.

I.e. these should go leftwards:

• Register -> Accept -> Valuate -> Pay

but the ones that cross hierarchies should go upwards/downwards

• Register -> Claim Registration Service
• Accept -> Customer Information Service

Is the only way of achieving this by specifying ports for every edge that crosses hierarchies?

[uruuru]

I'm not completely sure how the hierarchical edges are treated internally if they are not in accordance with the layout direction. Maybe @le-cds can comment on this.

[anton164]

Aight, thanks, here's another, succint example:

Again, the goal would be to have "Some Marketplace" to be placed in the same layer as "Collect all Orders", and have the edge between them drawn vertically. (Same goes for "Import order to ERP System" and "ERP System").

[le-cds]

Sorry, this is quite an old ticket... Anyway, forcing two nodes that are part of different parents to be in the same layer is not possible since each parent has its own layering. The only thing that could perhaps be done here is to set the layout direction to SOUTH in the top-level graph, but that doesn't work with ELK Layered's hierarchical mode, which in turn will cause the hierarchy-crossing edges to not be laid out properly.