Edges are drawn at the wrong location in deeply nested graphs

[C0DK]

trafficstars

Hey again. I'm back with weird edge-cases that breaks your otherwise lovely framework! Sorry about that, hahha.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

At times when rendering a graph with nodes inside nodes, you'll get edges that are placed at the wrong location like this:

Expected behavior

The edges to be attached to the correct nodes.

Minimal reproduction of the problem with instructions

See this commit, which replicated it in the examples: https://github.com/C0DK/reaflow/commit/185e2ec4949bc9542fc709275bcdbd9b7b2458a1 which creates this graph:

Where the red arrows point to where the edge is as well as where I ought to be.

Whether this is based on you or ELKJS is not something I know for sure (yet!)

Environment

I'm testing it on master on storybook and can replicate it, so yeah. there is that :smile:

Libs:
- react version: X.Y.Z
- realayers version: X.Y.Z

[amcdnl]

Went back through revision history and think it might be related to framer-motion upgrade. I have no idea why though.

[mingfang]

@amcdnl Can I downgrade frame-motion locally to workaround this problem? If so, do you know to which version? Thanks

[amcdnl]

@mingfang - can u try on latest version? Seems like it works now.

[mingfang]

The problem only shows up when the graph starts with a parent. For example, change the nodes in the Nested-Simple story to look like this. Note I added a node 0 that is the parent of node 1 and 2 and you will need the edge in the wrong position.

      nodes={[
        {
          id: '0',
          text: '0'
        },
        {
          id: '1',
          text: '1',
          parent: '0'
        },
        {
          id: '2',
          parent: '0'
        },
        {
          id: '2-1-1',
          text: '2 > 2.1',
          parent: '2'
        },
        {
          id: '3',
          text: '3'
        }
      ]}

[mingfang]

also in this example, the edge to node 3 does not even show up. The fix is to add 'org.eclipse.elk.hierarchyHandling': 'INCLUDE_CHILDREN' to the defaultLayoutOptions in elkLayout

[mingfang]

Oh nvm, I see you already covered that in the NestEdges story.

[mingfang]

I found the cause of this problem. It looks like the edge parent is not automatically set correctly. If I manually set the edge parent, to '0' in this case, then the edge will be drawn correctly.

[C0DK]

I see that it isn't entirely fixed (As I've played around with the framework again in another context). Your fix does fix it, however would that work when the edges are across different "levels"?