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.

Sign up for GitHub

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

Jump to bottom

Visualisation: tooltip and table improvement #83

Draft
wants to merge 11 commits into
base: main
Choose a base branch
from
Draft

Visualisation: tooltip and table improvement #83

wants to merge 11 commits into from

Conversation

cpelley
Copy link
Collaborator

@cpelley cpelley commented Feb 12, 2025 •
edited
Loading

  • Tooltips now show:
    • Only collapsed properties where we collapse the graph.
    • Node data where we don't collapse the graph.
  • Improved formatting of tooltip.
  • Table now adds an explicit collapsed column as distinct from the data.
  • Nodes are click-able, scrolling the table to the corresponding row and highlighting it.
  • Table rows are click-able, highlighting that row.
  • Now turned into a web component (using jsdelivr to make this possible).
    • We can now support visualisation without people having javascript hardcoded in theirs files.

image

Issues

TODO (future PR):

  • Dark mode theme toggle.
  • Make tooltip and info configurable (via callback??).
  • Replace UTF-8 symbols with svg symbols (UTF-8 symbols are font+browser+platform sensitive).
  • Toggle button between '
    ' render as newline VS '; '.

@cpelley cpelley self-assigned this Feb 12, 2025
@cpelley
Copy link
Collaborator Author

cpelley commented Feb 12, 2025

This isn't polished yet, but @SamGriffithsMO, this might be of use to you 🤷

It's been clear that when collapsing over properties, that listing all relevant node data in the tooltip is not terrible useful or readable. The approach taken here is a stronger reliance on the lookup table. I will likely make this configurable using a callback on polishing this up.

@cpelley
Copy link
Collaborator Author

cpelley commented Feb 12, 2025 •
edited
Loading

I'll add a change that makes the mermaid nodes clickable. On clicking a node, it will take you to the corresponding table row and highlight it.
Done

Base automatically changed from visual_ui_polish to main February 17, 2025 15:27
@cpelley cpelley force-pushed the visual_tooltip_table branch from 4a2cbf7 to dc41c36 Compare February 20, 2025 16:49
@cpelley cpelley force-pushed the visual_tooltip_table branch from dc41c36 to d073d1a Compare February 20, 2025 16:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@cpelley cpelley

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

graph node and table row click go-to support Turn the DAG visualisation capability into a Web Component
1 participant
@cpelley