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

Highlight related nodes and relationships #99

Closed bigluck closed 6 months ago

bigluck commented 6 months ago

When exploring a new graph, it can sometimes be helpful to run a very generic query like MATCH (a)—[r]—(b) RETURN a, r, b and examine the relationships between the different nodes on the graph.

When I select a Node in the graph, the node properties panel is shown on the right, and the node itself is highlighted; but it does not help me to understand the relationships the selected node has with other nodes, especially if the graph is complex (and the UI overlap some relationships).

I'd love if all the other objects on the graph become opaque once a node is selected, except for the direct relationships and nodes linked to the selected node.

I think it will make it easier to visually analyze a graph.

bigluck commented 6 months ago

G6 seems to have built-in support for it: http://g6-v3-2.antv.vision/en/examples/interaction/highlight

mewim commented 6 months ago

It seems that other graph visualization software such as Neo4j Browser and NebulaGraph Studio does not do that by default. I'll let @prrao87 and @semihsalihoglu-uw comment if this should be enabled by default or activated via a button / settings option.

prrao87 commented 6 months ago

Hmm, I'm not sure that should be the default behaviour as a lot of users won't want to visually explore the graph this way (for example, they may just want to observe larger substructures). I'm pretty sure the reason that this isn't default behaviour in other packages is because visual graph exploration is treated as a specific use case and that the more general use case is a smooth UX that renders the nodes and edges efficiently (no lags) while allowing users to see how their data is connected at a high level.

Maybe what @mewim mentioned makes sense: Have a button with an "i" logo that's named "interactive highlight" that can enable/disable this behaviour, but I'd suggest that we avoid making this default behaviour.

mewim commented 6 months ago

@bigluck I implemented this:

Screenshot 2024-03-18 at 10 52 49 PM
bigluck commented 6 months ago

Thanks @mewim