Identical twins are positioned on the last generation in Genogram

GoJS
1

I’m using genogram layout and the following code to setup identical twins

const T1 = diagram.findNodeForKey(key1);
const T2 = diagram.findNodeForKey(key2);

const TPL1 = T1.findTreeParentLink();
const TPL2 = T2.findTreeParentLink();

const TLN1 = $(go.Node, {
  isLayoutPositioned: true, // setting this to false is making TL disappear
});
TLN1.labeledLink = TPL1;
TLN1.segmentIndex = -2;
TLN1.segmentFraction = 0.5;
diagram.add(TLN1);

const TLN2 = $(go.Node, {
  isLayoutPositioned: true, // setting this to false is making TL disappear
});
TLN2.labeledLink = TPL2;
TLN2.segmentIndex = -2;
TLN2.segmentFraction = 0.5;
diagram.add(TLN2);

const TL = $(
  go.Link,
  {
    isLayoutPositioned: false,
    isTreeLink: false,
  },
  $(go.Shape, {
    strokeWidth: 2,
    stroke: "blue",
  })
);
TL.fromNode = TLN1;
TL.toNode = TLN2;
diagram.add(TL);

The issue I’m facing is that identical twins (Twin A and Twin B) are always positioned on the last generation. I tried setting isLayoutPositioned to false on twin link nodes (TLN1, TLN2) but that just made twin link (TL) disappear. Is there any way I could position them on their respective generation?

image
image855×527 41.2 KB

2

My guess is that you are unintentionally setting up what the GenogramLayout is treating as a “parent” vertex, thereby resulting in the extra generation or layer.

I think what you are doing is different from what the “setup…” functions do in order to convert the given data into a GraphLinksModel that supports GenogramLayout and features such as specialized links for identical twins. Note the differences between what your code is doing and what the setupIdenticalTwins function does.

You don’t have any problems with regular twins, do you?

3

I don’t have any problems with regular twins (see Bill, Claire and Carol).

I’m not sure where can I find the setupIdenticalTwins function you are refering to. The one I used is from this topic which is dealing with the same issue.

4

I see now, you were refering to Genogram twins example. The only difference I see is that I’m adding twin link nodes for anchoring the twin link in the center of the twin-parent links. Is there a way to anchor it without using twin link nodes or a way to make these nodes not to act like parent vertex?

5

In this design, identical twins are (indirectly) connected with a “TwinLink” category Link. I started explaining it but then realized that your app is using code that is different from what is used in that Genogram Twins sample.

In the unsupported sample that we created long ago, the blue link connecting twins connects at the top of the node. In your app, the link appears to connect the middle of the last segment. Or perhaps slightly higher than middle. So I’m not sure what the best advice should be.

6

Does it mean that currently the only solution to this issue is to stick with Genogram Twins sample?

7

I’m confident that a solution can be found with your current environment. But I don’t know what you have.

8

I’ve setup a codepen reproducing the issue: https://codepen.io/mcerven/pen/GRdoKxz
Any help is appreciated.

9

Thanks for the CodePen. The problem is that adding label nodes to parent-child links caused confusion in both setup and GenogramLayout, since it violates the previous assumption that any link with a label node would be a “Marriage” link.

Here’s an updated sample. Note that I have renamed the custom Link class and the additional link template different names, since having both be named “TwinLink” was very confusing.

[EDIT: replaced by Genogram: Twins]

10

That solved it, thank you.