Incorrect Port Side Switching in ELKJS with ReactFlow about elkjs HOT 14 CLOSED

@soerendomroes The False/B side's children nodes should be placed on the right side. and the True/A side's children nodes should be placed on the left side.

you can see on the 2nd screenshot the SMS node moved to the left side but it should be on the right.

from elkjs.

I suggest to replicate the issue using elklive.

from elkjs.

@soerendomroes
I'm Sorry, I actually don't know how can I demonstrate elklive based on my project. But I hope you will get the issue. I request you to check the demo https://client-journey.vercel.app/

try to add a condition node then add another node under false port. you will see that the new node is placed on the left side but it shouldn't. It should be placed on the right side. I don't know how can I achieve this, please help me.

I have attached my ELK setup #273 (comment)

Current Behaviour

Expected Behaviour

from elkjs.

Hi, I wanted you to recreate your graph since I want to know the order of nodes and edges in our model as well as additional layout properties.

elk.layered.crossingMinimization.forceNodeModelOrder may be responsible for this but without a model recreated in elklive, I can only guess.

https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html

from elkjs.

Hey @soerendomroes

I have tried to create two elklive.

Example One URL

Here always the Yes Node and Yes Port will place on the left side and the No Node and No Port will place on the right side.

Example Two URL

Here the No_Node and the No_Port will always place on the right side though I don't have any nodes under the condition node of yes port

Here is my current ELKjs Setup with ReactFlow

https://gist.github.com/MuttakinHasib/abf85903a66c655c449c90042725dad2

from elkjs.

@soerendomroes Whenever I add a new edge or delete an edge while creating a node then the nodes are switching the sides

from elkjs.

If Yes and No ports should always be in that order, I suggest to set portConstraints: FIXED_ORDER on them.
The issue in your first model persists since elklive changes its version back to 0.7.1 which does not support all option you are using.

from elkjs.

@soerendomroes Do I need to maintain the edge insertion in an order? Example, I am removing a node and edge and after that, I am adding a new node and edges.

something like edges.push(newEdge) to add a new edge

from elkjs.

If you constrain the port order, you only need to maintain the port order.

If you want to also constrain the node order via forceNodeModelOrder you need to set considerModelOrder.strategy. This would change the edge/port order if it is free to enforce the order of nodes if the initial solution using the given order is not crossing minimal.

from elkjs.

@soerendomroes Which one do you prefer? in this case? I just want the layout not to switch the side

from elkjs.

If you want the port to be in a specific order, I would constrain the ports and not use the model order strategies. If your nodes and edges are ordered based on the time you create them, it does not make sense to use model order.

from elkjs.

@soerendomroes Will you please provide an elklive example to fix this issue? Demo Elk live

from elkjs.

Here is the port constraints option.
And here is the model order option that enforces node model order (remember to switch to 0.8.2).

from elkjs.

Thanks @soerendomroes for your help ❤️
I have implemented this Example and it's looks great.

from elkjs.