Trigger re-layout when node/edge type changes

[keyserj]

Describe your issue

As an attempt to keep things more organized in diagrams, sometimes the layout algorithm places the diagram differently based on which node and edge types are being laid out. For example, when in the same layer, cause nodes will be left of problem nodes which are left of benefit nodes. When I change a Cause to a Benefit, the layout could be affected, but currently we aren't recalculating layout after using the "Change node type" or "Change edge type" features, so I have to refresh the page to see the new layout.

Example of changing node type:

chrome_iqxJEuiPyY.mp4

Example of changing edge type:

chrome_r83Qv9eoqf.mp4

I should be able to see the layout impact as soon as I change a node or edge type.

Solution you'd like

Trigger re-layout after changing the type of a node or edge.

Alternatives you've considered

No response

Additional context

No response

Technical ideas and questions

There are a few ways to trigger re-layout, but triggering based on a change to a node/edge seems like it'd make most sense by including the node.type and edge.label when constructing the diagramHash here:

ameliorate/src/web/topic/hooks/diagramHooks.ts

Lines 28 to 39 in 559ee53

	// re-layout if this changes
	const diagramHash = [...diagram.nodes, ...diagram.edges]
	// not 100% sure that it's worth re-laying out when node text changes, but we can easily remove if it doesn't seem like it
	.map((graphPart) => (isNode(graphPart) ? graphPart.id + graphPart.data.label : graphPart.id))
	.concat(
	String(forceNodesIntoLayers),
	String(layerNodeIslandsTogether),
	String(minimizeEdgeCrossings),
	String(avoidEdgeLabelOverlap),
	String(thoroughness),
	)
	.join();

Note: confusingly, edge.label is the edge "type". There's some tech debt with naming there; edge.type is used for our flowchart library's edge type.

[atmajaa]

@keyserj Can I work on this issue?

[keyserj]

@atmajaa assigned! Let me know if you have any questions.