Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Investigate options for reducing clutter of edges #559

Closed
keyserj opened this issue Nov 4, 2024 · 1 comment · Fixed by #569
Closed

Investigate options for reducing clutter of edges #559

keyserj opened this issue Nov 4, 2024 · 1 comment · Fixed by #569
Assignees
Labels
clarity makes something easier to understand enhancement New feature or request for large topics helps to better understand, use, build a topic that has a large number of nodes learn app helps people learn how to use Ameliorate needs tech design Technical solution should be figured out before implementing needs ux design User experience should be solidified before implementing
Milestone

Comments

@keyserj
Copy link
Collaborator

keyserj commented Nov 4, 2024

Describe your issue

Edges seem to add a lot of clutter when there are more than a few of them:

  • edge boxes overlap often
  • edge boxes have text and indicators in them

Solution you'd like

Not entirely sure what's best. Potentially

  • text and indicators could conditionally be shown e.g. via Options to reduce diagram clutter #478
  • by default only text could show
    • with the box and its background? without?
  • edge label placement could be improved to avoid other labels

Alternatives you've considered

No response

Additional context

No response

Technical ideas and questions

@keyserj keyserj added enhancement New feature or request needs tech design Technical solution should be figured out before implementing needs ux design User experience should be solidified before implementing clarity makes something easier to understand for large topics helps to better understand, use, build a topic that has a large number of nodes learn app helps people learn how to use Ameliorate labels Nov 4, 2024
@keyserj keyserj added this to the update #5 milestone Nov 4, 2024
@keyserj keyserj self-assigned this Nov 5, 2024
@github-project-automation github-project-automation bot moved this to ✅ Done in ameliorate Nov 24, 2024
@keyserj
Copy link
Collaborator Author

keyserj commented Nov 24, 2024

Unfortunately I spent a ton of time trying to get edges and their labels to avoid overlapping, in order to reduce the feeling of clutter from edges. I couldn't get through all of the issues, and I didn't think it was worth spending more time on this right now (spent more than I should have), so I've added two separate config options to enable the functionality that might benefit some situations but not all situations:
image

The first config is "Draw simple edge paths". It defaults to true (which is the current-prod behavior), but when set to false, edge paths are drawn based on the output from the layout algorithm, so they do a better job of avoiding each other.

  • The main problem with this (and the reason the config exists) is that the layout output does not result in vertical slopes at the start and end points of each path. These vertical slopes often seem desirable, because they go with the top-down flow of the diagram, and without them, the edges can look a little haphazard. Created Make spline edges end in vertical slopes #568 to address this.

The second config is "Avoid edge label overlap". It defaults to false (which is the current-prod behavior), but when set to true, edge labels are included in the layout algorithm, which results in them trying to avoid overlapping with each other.

Note: closing this ticket because the layout investigation was the bulk of the effort. Still plan to handle reducing the clutter of edge label boxes via #478

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
clarity makes something easier to understand enhancement New feature or request for large topics helps to better understand, use, build a topic that has a large number of nodes learn app helps people learn how to use Ameliorate needs tech design Technical solution should be figured out before implementing needs ux design User experience should be solidified before implementing
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

1 participant