kuzudb / explorer

Browser-based user interface for Kùzu graph database

https://hub.docker.com/r/kuzudb/explorer

MIT License

29 stars 5 forks source link

Force-directed layout graph for nicer UX #85

Open prrao87 opened 7 months ago

prrao87 commented 7 months ago

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 commented 7 months ago

Actually we have enabled force-directed layout (https://github.com/kuzudb/explorer/blob/a8b7dc6cba1a868215981aa74370cc6b020dc5ef/src/components/ShellView/ResultGraph.vue#L317) 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 commented 6 months ago

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

prrao87 commented 6 months ago

@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 commented 6 months ago

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 commented 6 months ago

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.