Nodes in LayeredDigraphLayout get reordered when adding a child node

GoJS
1

Hello there,
Please, I am wondering if you can help me in following problem.

I’m using LayeredDigraphLayout from Genogram example to model a family tree.

class GenogramLayout extends go.LayeredDigraphLayout {
  constructor() {
    super();
    this.alignOption = go.LayeredDigraphLayout.AlignAll;
    this.initializeOption = go.LayeredDigraphLayout.InitDepthFirstIn;
  }
  ...
}

The issue I am running into is that when I add a child node to one of the sibling nodes, this sibling is moved all the way to the left.

Before adding a child node:

1
1717×351 15.3 KB

After adding a child node. Notice that Daughter is moved to the left:

2

Is there any way to enforce the order of nodes in LayeredDigraphLayout? I know TreeLayout has sorting and comparer properties that do exactly that, but that is also not an option for me since the family tree I’m modelling doesn’t have a tree structure.

I tried setting LayeredDigraphLayout’s initializeOption to LayeredDigraphLayout.InitDepthFirstOut which fixed this issue, but had more severe side effect in some scenarios (namely flipping left and right sides of the diagram), so that is not an option for me.

I also tried LayeredDigraphLayout.InitDepthFirstOut which also fixes this particular issue, but doesn’t perserve the order of nodes in other scenarios.

Any help is appreciated.
Thank you.

2

How did you add that “Grandson”?

The Genogram sample was designed so that a child must be the product of a mother and a father. Yes, what you say about LayeredDigraphLayout and sorting is true, but first things first – the model has to be structured correctly.

3

In our Use-Case and data model we have to support adding offspring to a single node. So in that case “Grandson” has only one parent - just reference to mother, and the father reference is not filled. So I am wondering. Is it possible to order nodes accordingly without described issues?

4

Here is a sample that includes an OrderedLayeredDigraphLayout:
Minimal GoJS Sample
As always, the complete code is included in the sample page itself.
The basic idea is to override LayeredDigraphLayout.reduceCrossings to be a no-op.

But I am concerned there might be some odd interaction when you add those overridden methods to GenogramLayout. You will need to experiment.

5

Thanks! I spent some time with experiments yesterday.

I did some experiments with overriding reduceCrossing and initializeIndices. I also tried to change initializeOptions(in the end set to InitDepthFirstIn), layeringOption(LayerOptimalLinkLength), alignOption(AlignAll) While it helps in case of propand’s grandchildren it breaks things in other places of the genogram. As you can see on the attached screenshot, the layer of siblings of proband’s parents is somehow “grouped” and not divided anymore. Honestly, I think it introduces more bugs than it solves.

diagram
diagram1317×643 30.9 KB

Unfortunately, I think the way you suggested won’t work in this case.

6

Note that if you override initializeIndices and don’t call the super method, initializeOption will be ignored. LayeredDigraphLayout.initializeIndices is just implemented as a switch on the value of initializeOption.

How are you sorting the nodes within a layer? You will probably want to make sure that you only re-arrange the ordering of siblings, making sure not to insert a child from one family into the list of children of another family.