Skip to content

Visualisation: web component + tooltip and table improvement + table row highlight #83

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
Merged
merged 12 commits into from
Feb 27, 2025
Merged

Visualisation: web component + tooltip and table improvement + table row highlight #83

merged 12 commits into from
Feb 27, 2025

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 column showing what is shown in the tooltip 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 CDN jsdelivr to make this possible).
    • We can now support visualisation without people having javascript and styles hardcoded in their files.

image

Issues

Sources

TODO (future PR):

  • Dark mode theme toggle (Visual: toggle page light-dark theme #86).
  • Make tooltip and info configurable (via callback??).
  • Replace UTF-8 symbols with svg symbols (UTF-8 symbols are font+browser+platform sensitive).
  • Support table cell items delimited by new line i.e. <br> (right now it's ; ). To do this we would want this new line to be toggleable i.e. <br> <--> ; <!--<br>-->
  • Refactor.

@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
@cpelley cpelley added the enhancement New feature or request label Feb 24, 2025
@cpelley cpelley changed the title Visualisation: tooltip and table improvement Visualisation: web component + tooltip and table improvement + table row highlight Feb 24, 2025
@cpelley cpelley marked this pull request as ready for review February 24, 2025 09:32
@cpelley
Copy link
Collaborator Author

cpelley commented Feb 24, 2025

image 👍

@cpelley cpelley force-pushed the visual_tooltip_table branch from 4f85d68 to 80520b2 Compare February 24, 2025 14:21
cpelley
cpelley commented Feb 24, 2025
View reviewed changes
dagrunner/utils/visualisation.py
Comment on lines +20 to +24
# set web component path to relative local file when running pytest
if os.environ.get("PYTEST_VERSION") is not None:
WEBCOMPONENT_PATH = "../../../visual/mermaid-table-standard.js"
else:
WEBCOMPONENT_PATH = "https://cdn.jsdelivr.net/gh/MetOffice/dagrunner@vvisual_tooltip_table/visual/mermaid-table-standard.js"
Copy link
Collaborator Author

@cpelley cpelley Feb 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that the web component path is relative when running pytest (this means the tests use the web component
from its own checkout).

Otherwise, the web component path is going via free CDN (jsdeliver), pointing to our repository.
Right now, this is pointing to this development branch. After merge, I'll tag a release and update this path, pointing to that new tag.

The condition on running as pytest or not is as per https://docs.pytest.org/en/stable/example/simple.html#detect-if-running-from-within-a-pytest-run

SamGriffithsMO
SamGriffithsMO approved these changes Feb 25, 2025
View reviewed changes
Copy link

@SamGriffithsMO SamGriffithsMO left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@cpelley cpelley merged commit e95a5bb into main Feb 27, 2025
1 check passed
@cpelley cpelley deleted the visual_tooltip_table branch February 27, 2025 14:08
@cpelley cpelley restored the visual_tooltip_table branch February 27, 2025 14:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mo-robert-purvis mo-robert-purvis mo-robert-purvis approved these changes

@SamGriffithsMO SamGriffithsMO SamGriffithsMO approved these changes

Assignees

@cpelley cpelley

Labels
enhancement New feature or request
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
3 participants
@cpelley @mo-robert-purvis @SamGriffithsMO