feat: dashboard tradeoff redesign, watermark, ISL/OSL format, UX polish#361
Merged
feat: dashboard tradeoff redesign, watermark, ISL/OSL format, UX polish#361
Conversation
Tradeoff tab: - Per-model-family charts (base + mtp3 variants in same chart) - New: Concurrency Scaling dual Y-axis (Throughput + TPOT vs concurrency) - Hero scatter split by family, log-scale x-axis with actual tick values Visual: - ATOM logo watermark on all charts (Chart.js plugin, 7% opacity) - Global fixed watermark on body (4% opacity, always centered) - Legend hover highlights dataset, fades others via globalAlpha plugin Data formatting: - ISL/OSL compact: 1024/1024 → 1k/1k everywhere (fmtIslOsl utility) - modelFamily/modelVariant utilities for grouping variants UX: - Sticky table header anchored below sticky page header - Deferred chart rendering (requestAnimationFrame) for faster first paint - Hardcoded chart colors extracted to constants (C_TICK, C_LEGEND, etc.) - Improved tooltip: structured multi-line, model/config context in title - Legend auto-hides when >8/10 entries
Contributor
There was a problem hiding this comment.
Pull request overview
Redesigns the benchmark dashboard’s Tradeoff tab to improve per-family comparisons, adds watermarking/legend-focus chart polish, and standardizes ISL/OSL display formatting for readability.
Changes:
- Adds global Chart.js plugins for legend hover focus and chart watermarking; introduces chart color constants.
- Redesigns Tradeoff tab to render per-model-family hero + concurrency scaling charts (dual Y-axis, log-scale concurrency).
- Introduces
fmtIslOsl(),modelFamily(), andmodelVariant()utilities and applies compact ISL/OSL formatting across UI; improves perceived load by deferring chart rendering and fixes sticky table header offset.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
.github/dashboard/index.html
Outdated
Comment on lines
+1024
to
+1027
| const safeId = fam.replace(/[^a-zA-Z0-9]/g, ''); | ||
| const famLabel = familyMap[fam].size > 1 ? fam + ' family' : fam; | ||
| html += `<div class="chart-card half"><h3>${famLabel} — Interactive vs Token Throughput</h3><div class="chart-wrap"><canvas id="hero-${safeId}"></canvas></div></div>`; | ||
| html += `<div class="chart-card half"><h3>${famLabel} — Concurrency Scaling</h3><div class="chart-wrap"><canvas id="scaling-${safeId}"></canvas></div></div>`; |
|
|
||
| // --- Table --- | ||
| html += `<div style="overflow-x:auto"><table class="perf-table"><thead><tr> | ||
| html += `<div class="table-watermark"><table class="perf-table"><thead><tr> |
|
|
||
| function renderDataTable() { | ||
| let html = `<div style="overflow-x:auto"><table class="perf-table"><thead><tr> | ||
| let html = `<div class="table-watermark"><table class="perf-table"><thead><tr> |
.github/dashboard/index.html
Outdated
| 4. UTILITY FUNCTIONS | ||
| ================================================================ */ | ||
| // ISL/OSL compact format: "1024/1024" → "1k/1k", "8192/1024" → "8k/1k" | ||
| function fmtIslOsl(s) { return s.replace(/\d+/g, n => +n >= 1024 ? (+n / 1024) + 'k' : n); } |
.github/dashboard/index.html
Outdated
Comment on lines
+1189
to
+1190
| // Concurrency values for x-axis ticks | ||
| const allConcs = [...new Set(Object.values(byKey).flatMap(s => s.tputPoints.map(p => p.x)))].sort((a, b) => a - b); |
Comment on lines
+887
to
+892
| // Bind table events immediately (fast, no chart rendering) | ||
| _bindPerfTableEvents(container, byModel); | ||
|
|
||
| // Defer chart creation to next frame so table renders first | ||
| requestAnimationFrame(() => _createPerfCharts(byModel, pm)); | ||
| } |
.github/dashboard/index.html
Outdated
Comment on lines
+338
to
+343
| e.native.target.style.cursor = 'pointer'; | ||
| }; | ||
| Chart.defaults.plugins.legend.onLeave = function(e, item, legend) { | ||
| legend.chart._legendFocusIndex = null; | ||
| legend.chart.draw(); | ||
| e.native.target.style.cursor = 'default'; |
…ecks - safeId: prefix with index to prevent collisions (A-B vs AB) - table-watermark: restore overflow-x:auto for narrow viewports - fmtIslOsl: use toPrecision(3) to avoid long decimals (e.g. 1025) - allConcs: include tpotPoints to avoid missing x-axis ticks - RAF: cancel pending frame on rerender, guard canvas existence - Legend hover: defensive e.native?.target check
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.
Summary
Major update to the benchmark dashboard focusing on the Tradeoff tab redesign, visual polish, and data readability.
Tradeoff Tab Redesign
modelFamily()/modelVariant()utilities for automatic variant groupingVisual
globalAlphapluginData Formatting
1024/1024→1k/1keverywhere viafmtIslOsl()utilityUX
--header-hCSS variable)requestAnimationFrame) for faster first paintC_TICK,C_LEGEND, etc.)Files
.github/dashboard/index.html— 1 file, +292 -91 linesTest plan