Dynamic node size

[pbrzosko]

Hi,

we are showing steps of a workflow in our software in form of a dag rendered with sugiyama algorithm. Graph is layered horizontal, but some of the steps has some nodes, that are not related to the whole flow, but step itself. They are rendered in vertical layout as a sort of sub-tree, and you can expand and collapse them.

Is it possible that this library would support dynamic size of a node? So that when it has those sub-nodes, we can calculate its size, that is different than the default one. And then, when user expands this sub-tree, size is recalculated and graph layout is redone? Of course we can call layout method again, that shouldn't be an issue, but the algorithm would need to be able to accept a different size per node?

Regards

[erikbrinkman]

I'm not sure I'm entirely following what you're trying to do, but is there a reason that .nodeSize() doesn't work as intended? You can pass in either a static node size .nodeSize([width, height]) or a dynamic one .nodeSize(node => [width, height]).

Admittedly, the fact that you can do this isn't well documented...

[pbrzosko]

Yes, a dynamic one but always the same for all the nodes. What I would like is to be able to specify a different value per node, so for example all nodes have the same size but only one of them should be twice the size.

[erikbrinkman]

the API I referenced above does that. For example, if you wanted to make specialNode twice the size you could do:

const specialNode = ...
const width = ...
const height = ...
const layout = sugiyama().nodeSize(node => node === specialNode ? [width * 2, height * 2] : [width, height]);

[pbrzosko]

That's great. I think I misunderstood this API... Will try that.

[pbrzosko]

@erikbrinkman one additional question - is it possible to have sort of a node offset? What I mean is that the algorithm is probably calculating node position of its center. Can we somehow shift the node, so that its coordinates will be calculated for example for top left corner?
I have a node that can be expanded collapsed more or less like that:

Since nodes can expand and collapse, I will properly calculate their size depending on their state. So couple of questions:

1. Can I somehow alter the layout algorithm to return coordinates of the red dots of those special nodes, instead of the center of the node, which will be the green box? At the moment I am thinking about altering the code that draws vertices to update coordinates for special nodes.
2. Is it possible that other nodes are adjusting to the top left corner of those special nodes? So that nodes on the same layer are aligned to the left and on the same horizontal line to the top?
3. When the node size is changed, is it enough to just call layout method again to get all the nodes positions updated?

Thank you!

[erikbrinkman]

Yes, you're correct, it does do it from the center.

1. You can, although I wouldn't say it's easy. The relevant step is the coordinate assignment step. If you're using the default algorithm, then you're using the simplex coordinate assignment. Essentially you should just have to "rewrite" it to handle to handle an offset. The easiest way to do this would probably be to copy the source code and modify it. and just pass in your custom coordinate operator. One way to do it would be to just treat the calculated x coordinate as an offset. For that to work you'd probably just have to tweak the separation constraint
   

   d3-dag/src/sugiyama/coord/simplex.ts

   Line 212 in 88d1f09

   const separ = sep(left, right);

   
   and then the final assignment
   

   d3-dag/src/sugiyama/coord/simplex.ts

   Line 250 in 88d1f09

   node.x = assignment[id] ?? 0;

   
   it might be a little tricky, but that should be the gist of it.

   I'm happy to accept PRs of you have a good api around an offset, but I don't reasonably have time to implement and test this myself.

2. The vertical (in your layout, but horizontal otherwise) layout should be possible to adjust as above. The other dimension is more difficult. At one point I tried to implement a version with dynamic node sizes that would all for custom layouts, but it ultimately didn't prove that fruitful. If you just want to to left (top) align all nodes in a "layer"then you should just need to tweak this piece of code:
   

   d3-dag/src/sugiyama/sugify.ts

   Lines 199 to 214 in 88d1f09

   	// assign ys
   	let height = -gap;
   	for (const layer of layers) {
   	height += gap;
   	const layerHeight = Math.max(
   	-gap, // in case all dummy nodes
   	...map(layer, ({ data }) =>
   	data.role === "node" ? nodeHeight(data.node) : -Infinity,
   	),
   	);
   	const y = height + layerHeight / 2;
   	for (const sugi of layer) {
   	sugi.y = y;
   	}
   	height += layerHeight;
   	}

   
   unfortunately that isn't exported for control, so if you want to weak you, you'll have to run the sugify function "manually". fortunately it's not very complexy (by design) so that's an option if that's what you're after.

3. Yes! You should just need to do something like:

   const layout = sugiyama()...
   layout(dag);
   // do stuff
   layout.nodeSode(newNodeSizeFunction)(dag)

   unfortunately there's no guarantee of stability right now. I considered adding it, but it really needed a use case first, so try that and see if you run into any wonky behavior.

[pbrzosko]

@erikbrinkman I started to work on that and I think, If I get you correctly, that the only solution to implement that is to copy the whole code and modify it which is a no go for me. But I came up with a better solution, so that I will create an artificial node with all the sub-nodes in it. This will allow for the graph to automatically align properly for the y axis spacing. For x it will be a little wider on the left than it should, but I can accept that.
When I try to implement it, I have assigned the same group to a parent and one of the child nodes, to check whether I can have one child displayed along the layer. And then the code always fails with information about too strict groups constraint. Why is that? Can't I have one child displayed on the same layer as parent and then all the other children in a layer below?

I can also add this artificial node as a child of the parent's parent and then magically display an artificial connection between those. But what is the guarantee that they will be always rendered next to each other?

[pbrzosko]

Alright, nevermind. I have fixed it with a custom tweak, so that I don't have to copy and change all the code. It can produce not ideal layouts, if multiple expandable nodes would connect to one, but this is not the case in our app, so I don't mind that. The pseudocode for the tweak looks more or less like that:

loop through the nodes and for each node
  - take its x coordinate
  - if it is not in cache then
    - calculate maximum additional space needed on the right
    - shift all nodes with higher x to the right of calculated offset
    - increaset calculated layout width
    - put x into the cache
  - else do nothing
  - repeat the same for y axis

This way nodes are shifted bottom and right for maximum space needed for one row / column. Seems to work so far.
Thank you for your help.