aws / graph-explorer

React-based web application that enables users to visualize both property graph and RDF data and explore connections between data without having to write graph queries.
https://github.com/aws/graph-explorer
Apache License 2.0
314 stars 46 forks source link

[Feature Request] Double click to expand only works if the node has <= 10 adjacent ones. Confusing UX #318

Closed krlawrence closed 2 months ago

krlawrence commented 4 months ago

Community Note

Graph Explorer Version (and Graph Database and Version used if applicable) 1.6.0 Is your feature request related to a problem? Please describe. This is in many ways as much a bug as it is a feature request.

Double clicking on a node will cause its adjacent nodes and incident edges to be added to the canvas, but only if there are ten or less of them. This is a confusing user experience. To a user it feels more as if the double-click randomly works sometimes. The user experience here should be revisited.

kmcginnes commented 4 months ago

Here are some ideas of potential solutions:

  1. Expand 10 nodes on every double click, so double click 3 times to load 30 neighbors
  2. Leave current behavior, but add subtle animation to sidebar to draw the user's eye (I'm imagining a pulse animation or something similar)
  3. Leave current behavior, but increase the upper limit of expansion to something like 25 or 50
  4. Expand all nodes on double click, but show a spinner while the query is running

I think I'm leaning toward option one. But to do paging well we will need to define a sort order for the queries so that when we load more pages we will get consistent results. Perhaps sorting by ID is the safest general approach since all nodes will have that attribute. However, if the ID is a UUID then sorting can be expensive.

Option 4 is also a solid choice. We'd have to build a proof of concept to see how to feels to use. As long as the app remains interactive while the progress is being shown and/or the action can be cancelled this could be a great option.