I am using react-flow with dagrejs for the layout, and facing a challenge I'm stuck with.
Each node in my graph has in it's 'data' object a key of 'datetime'(timestamp).
I need to add to the layout logic, that nodes will also be positioned relatively by this 'datetime'.
So nodes with earlier date will be positioned higher in the graph.
I'm reading about the concept of 'ranks'/'layers'/'hierarchy' but so far didn't find any solution.
As my understanding so far, dagrejs doesn't support custom nodes ranking...<br
I tried to play around with elkjs but it's very unclear how to achieve this.
Any idea/suggestion will be appreciated.
with elkjs I tried this (just for testing):
const graph = {
id: 'root',
layoutOptions: options,
children: nodes.map((node) => ({
...node,
"layoutOptions": {
"elk.layered.layering.layerChoiceConstraint": 3 // doesn't do anything
},
layoutOptions: { 'elk.position': '(3,0)' }, // doesn't do anything also
// Adjust the target and source handle positions based on the layout
// direction.
targetPosition: isHorizontal ? 'left' : 'top',
sourcePosition: isHorizontal ? 'right' : 'bottom',
// Hardcode a width and height for elk to use when layouting.
width: 150,
height: 50,
})),
edges: edges,
};