The Tree Layout Secret

A recurring problem when developing a graphical modeler is providing the right layout. The advantage with Sirius is it provides you with a default algorithm that performs an automatic layout of all the elements on a diagram.

To illustrate the Sirius’ layout capabilities imagine that we want to visualize the hierarchy of characters in the US TV series House Of Cards. To do this we define the following metamodel:

First, we used Sirius to create a diagram representing the Persons.

Each person is represented by a white square with his or her name on it.

By default Sirius lays out nodes from left to right and what we now have is a flat diagram, with each person on exactly the same level.

However what we want to see is the White House organizational hierarchy so we need to represent the subordination link. This link is modeled using the dependsOn reference in the metamodel.
Second we define a new relation based edge mapping. This edge will connect Persons, and to find the subordinate we just use the dependsOn reference.

The default layout will automatically present an ordered tree diagram of the White House hierarchy with president Garrett Walker at the top of the diagram and Congressman Peter Russo at the bottom. When you define a relation based edge, Sirius then automatically lays out the elements as an ordered tree diagram by using the dependsOn reference to find the children.

That looks all very well and good. However, supposing that now we want to retain and be able to view our subordination link but also order our nodes according to a different relation. In our metamodel we add another reference influences that represents the influence one person can exert over another. We need to create another kind of diagram with the most influencial person at the top and the most influenced person at the bottom whilst still retaining the former subordination links between the persons.

Great news! This is really easy to implement with Sirius!
If the Sirius default algorithm does not fit your particular needs, you can configure some of the parameters or request alternative algorithms directly within the Sirius specification editor.
You can define either of:

  • A Composite Layout : this must be used to show containment relations. It enables you to specify padding between the different elements and the direction for the default algorithm.
  • An Ordered Tree Layout : this must be used so as to lay nodes as an ordered tree.

These layout algorithms manage only nodes connected by edges, other nodes are lay out from left to right as usual.

The Ordered Tree Layout is what we need for our case.
We defined a new Influence diagram with a Person mapping and a DependsOn mapping. These mappings are exactly the same as with the Hierarchy diagram. The only difference being that we have produced an Ordered Tree Layout.

The Children Expression is used to specify how to retrieve children for each node. In our example we use the influences reference to progress through the model.

Your Node Mapping must specify the mapping that the tree order algorithm is to operate on. In our example we want the algorithm to operate on Person.

Note: the ordered tree layout only works if you have only defined a single kind of node mapping in your diagram specification.

And… Ta-daaah! By defining this new layout you can see the person influencing every other player in the White House is… Frank Underwood, but Shh! That’s a secret ;)

Finally, if you need to go further, you can also provide your own layout algorithm programmatically.

The sample code from this example is available on github : https://github.com/mbats/sirius-blog/tree/master/tree-layout

4 thoughts on “The Tree Layout Secret

  1. What about when you have different objects in your tree – how can you then specify the children for the tree? This is more complex because you will then need to specify a different feature name. Is there anything special to take care of that?

  2. Hello
    Blog is very useful, I have one doubt
    I need to create my own layout, is there any example ?
    or any step by step guide to acheive that?

    BR
    Ramukumar M

Leave a Reply to admin Cancel reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>