Force-directed layout graph for nicer UX

[prrao87]

Is there a reason we aren't implementing the force-directed layout by default? G6 has this feature. Computationally speaking, can't we force-limit the number of nodes displayed (say 100) and have the UI dynamically update the layout using the force-directed algorithm?

Pretty much every other graph visualizer does this and it really does look nice from a user perspective as they're studying the graph structure.

[mewim]

Actually we have enabled force-directed layout (

explorer/src/components/ShellView/ResultGraph.vue

Line 317 in a8b7dc6

layout: {

) and it indeed prevents nodes overlapping when the graph is initially rendered, but I think your request is to have the force-directed layout dynamically recomputed when a node is dragged around. This does not seem to be G6's default behavior but I think there should be a way to implement that.

[mewim]

#86 Enable dynamic re-layout on drag, but it is not very smooth... it might need additional tweaking later.

[prrao87]

@mewim I think it's really smooth and wonderful! Is there anything in particular you noticed that isn't smooth? I see it working great on my end.

[prrao87]

Actually, now that I test it some more, it doesn't do the layout as clean as it maybe could. There are some edges/nodes that are still overlapping once the layout is computed. No worries, this is still a great step up in how it looks, imo.

[mewim]

It seems to have something to do with the parameter settings for the force-direct layout algorithm. I tweaked it a bit but have not got an optimal outcome yet.