feat(dashboard): [#305] added axis labels, hover tooltips, and load-in animation to metric graphs - #308
Merged
ApusBerliozi merged 1 commit intoAug 7, 2026
Conversation
ApusBerliozi
approved these changes
Aug 7, 2026
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
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.
Fixes: #305
Changes
renderLineChart()infenn/dashboard/static/app.jsto draw min/max axis tick labels (step on the x-axis, value on the y-axis) as SVG<text>elements, and added a left (value) axis line alongside the existing baseline (step) axis. Runs for every.chart-carduniformly, so both inline session-page cards and the new metric detail page get labeled axes with no per-caller changes.attachChartHover()toapp.js, bindingpointermove/pointerleaveonce per<svg>(guarded by adataset.hoverBoundflag so repeated re-renders from auto-refresh or tab switching don't stack duplicate listeners). On move, it finds the nearest point by step and shows a tooltip with the exact step/value at the pointer.options.animateparameter torenderLineChart(): when set, the polyline draws in via astroke-dasharray/stroke-dashoffsetCSS transition instead of appearing immediately.renderSessionGraphs()now readscard.dataset.animateand passes it through, so only cards explicitly opted in animate.data-animate="true"on the chart card insession_metric_detail.htmlonly — inline session-page cards are left unset, so they render immediately and aren't replayed every 5s by the running-session auto-refresh poll..chart-axis-labeland.chart-tooltipstyles, and a.chart-card-detail .chart-svgheight override for the larger detail-page chart, tofenn/dashboard/static/style.css.