feat: Treat visualization tooltips more like overlay panels #598
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Enhancements to the heatmap selection tooltip to treat it more as an overlay panel than a tooltip.
- Added the ability to close/minimize the tooltip.
- Added a close button to the top right of the tooltip.
- Clicking outside of the tooltip (inside the heatmap container) will also close the tooltip. Note that a body watcher was also considered, but was decided on being too aggresive given the amount of interactive elements on the page.
- Altered the behavior for clicking a selected datum:
- If the tooltip was been dismissed: bring it up again
- If the tooltip is up: deselect the datum
- If the datum is unselected: select it and bring up the tooltip
- Added an instanceId retain a reference to a constructed heatmap when multiple are registered
- Improved the positioning of tooltips which would have overflowed the right of the current viewport.
- Histogram selection tooltip upgraded to an overlay panel with persistent content and a close button; outside-click closes within container; handlers cleaned up on destroy/render. - Bin click behavior standardized: clicking an unselected bin selects + shows panel; clicking the selected bin re-shows panel (datum content if available); clicks don’t deselect; stopPropagation prevents accidental close. - Hover behavior refined: hover shows hover tooltip and hides selection panel; panel only returns on click. - Positioning fixed: tooltip uses bin width for spacing, flips to avoid overflow, and clamps within container bounds; improved vertical placement. - Selection events added: binSelected callback emits on bin selection, datum selection (after resolving bin), and clear to inform external components.
In addition, implements an interface for selecting a bin based on a bins [x0, x1] range. This is useful for keeping bins in sync across histogram instances on the same page.
…m based selection to bin based selection
Base automatically changed from
davereinhart/primevue-upgrade
to
release-2025.5.3
December 18, 2025 00:19
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request implements several improvements to the histogram and heatmap components, focusing on selection synchronization, user interaction enhancements, and code maintainability. The most significant changes include adding selection synchronization between multiple histograms, introducing a lockable selection mode, and enhancing the heatmap tooltip experience with persistent, dismissible tooltips. Additionally, new event APIs and utility methods were added to support these features.
Histogram Selection Synchronization and Locking:
lockSelectionprop and logic toScoreSetHistogram.vueto allow locking the selection, preventing user changes when set. This is used inVariantMeasurementView.vueto keep the focus on a specific variant. [1] [2] [3] [4]selection-changedevent inScoreSetHistogram.vueand corresponding handler logic inScoreSetView.vueto synchronize bin selections across multiple histogram instances. The newsyncSelectBinmethod enables programmatic selection of bins by range. [1] [2] [3] [4] [5]Heatmap Tooltip and Interaction Enhancements:
heatmap.tsto be persistent, dismissible with a close button, and to prevent accidental closure from inside clicks. Tooltip content is now managed inside a persistent container, and outside-click handling is instance-scoped for better reliability. [1] [2] [3] [4] [5]API and Type Improvements:
histogram.tsto include aselectionChangedevent accessor and abinsgetter, facilitating better external control and synchronization. [1] [2] [3]These changes collectively improve the usability and maintainability of histogram and heatmap visualizations, especially in workflows requiring coordinated selection or persistent focus.