No matching runtimes.
@@ -213,7 +217,7 @@ function renderDashboard(data: Dataset) { const maximum = Math.max(...rows.map(entry => entry.values[metricId]), 0) element('#results-body').innerHTML = rows.length ? rows.map((entry, index) => { const percentage = maximum > 0 ? entry.values[metricId] / maximum * 100 : 0 - return `${escapeHtml(tooltip.footer.join(' '))}
` + popup.innerHTML = `${escapeHtml(tooltip.title.join(' '))}${escapeHtml(tooltip.footer.join(' '))}
` popup.hidden = false popup.style.left = `${Math.max(0, Math.min(tooltip.caretX + 12, currentChart.width - popup.offsetWidth))}px` popup.style.top = `${Math.max(0, Math.min(tooltip.caretY, currentChart.height - popup.offsetHeight))}px` diff --git a/src/style.css b/src/style.css index ad702bb..f9cd2ed 100644 --- a/src/style.css +++ b/src/style.css @@ -9,7 +9,9 @@ .eyebrow,.count,.control-label,legend,.lifecycle-control p,.platform-options small,.metrics button:not([aria-selected=true]),.chart-heading p,.chart-caption,.chart-legend,.snapshot-heading p,th,.rank,.platform-badge,.methodology,footer{color:var(--muted)} input[type=search]::placeholder{color:var(--muted);opacity:1} .relative-bar{display:grid;grid-template-columns:minmax(70px,1fr) 48px;gap:8px;align-items:center}.bar-percentage{font:10px 'IBM Plex Mono';text-align:right}.bar-track{position:relative;height:14px;border-left:1px solid #cbd5ce;border-right:1px solid #cbd5ce}.bar-track:before{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:1px solid #cbd5ce}.bar-track .value-bar{position:relative;top:4px}.relative-scale{position:relative;height:12px;margin:8px 56px 0 0;font:9px 'IBM Plex Mono'}.relative-scale span{position:absolute;top:0}.relative-scale span:first-child{left:0}.relative-scale span:nth-child(2){left:50%;transform:translateX(-50%)}.relative-scale span:last-child{right:0} -.runtime-group:not(:has([data-runtime]:not([hidden]))){display:none}.runtime-group:has([data-runtime]:not([hidden]))~.runtime-group{border-top:1px solid #e4eae5;margin-top:8px;padding-top:8px} +.runtime-group:not(:has([data-runtime]:not([hidden]))){display:none}.runtime-group:has([data-runtime]:not([hidden]))~.runtime-group{margin-top:8px} +.runtime-group-heading{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0 4px;font-size:11px;font-weight:400;color:var(--muted)}.runtime-group-heading:after{content:'';flex:1;border-top:1px solid #e4eae5} +.runtime-swatch[data-shape]{border-radius:0}.runtime-swatch[data-shape=circle]{border-radius:50%}.runtime-swatch[data-shape=triangle]{clip-path:polygon(50% 0,100% 100%,0 100%)}.runtime-swatch[data-shape=diamond]{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} @media(max-width:720px){.runtime-group{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1600px){.chart-wrap{height:390px}} @media(max-width:1100px){main{padding:28px 24px 0}.site-header{padding:0 24px}.workspace{grid-template-columns:226px minmax(0,1fr)}.results{padding-left:22px}.runtime-panel{padding-right:16px}.controls{flex-direction:column}.platform-options label{min-width:92px}.metrics{gap:18px}.chart-heading{flex-wrap:wrap}.chart-wrap{height:310px}} From b18d7a28f50371271a3928a65b141484fce2ad61 Mon Sep 17 00:00:00 2001 From: Ludvig Liljenberg <4257730+ludfjig@users.noreply.github.com> Date: Wed, 16 Sep 2026 13:39:29 -0700 Subject: [PATCH 2/7] Add ranked and grouped tooltip views Group the legend by runtime family and shorten variant labels. Add a persistent tooltip ordering control with mouse and keyboard support. Signed-off-by: Ludvig Liljenberg <4257730+ludfjig@users.noreply.github.com> --- src/main.ts | 63 +++++++++++++++++++++++++++++++++++++++++++++++---- src/style.css | 2 ++ 2 files changed, 61 insertions(+), 4 deletions(-) diff --git a/src/main.ts b/src/main.ts index a3e0974..d50844b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -58,6 +58,12 @@ function renderDashboard(data: Dataset) { const selectedPlatforms = new Set${escapeHtml(tooltip.footer.join(' '))}
` + if (!popup.hidden && popup.matches(':hover, :has(:focus-visible)')) return + const dataPoints = [...tooltip.dataPoints] + renderTooltipContents = () => { + const renderPoint = (point: typeof dataPoints[number], ranked: boolean) => { + const entry = series[point.datasetIndex]! + const family = groupedSeries.find(group => group.entries.includes(entry))!.label + return `${escapeHtml(tooltip.footer.join(' '))}
` + renderTooltipContents() popup.hidden = false popup.style.left = `${Math.max(0, Math.min(tooltip.caretX + 12, currentChart.width - popup.offsetWidth))}px` popup.style.top = `${Math.max(0, Math.min(tooltip.caretY, currentChart.height - popup.offsetHeight))}px` @@ -303,7 +341,24 @@ function renderDashboard(data: Dataset) { input.checked ? selectedRuntimes.add(input.value) : selectedRuntimes.delete(input.value) update() }) - element('.chart-wrap').addEventListener('pointerleave', () => element('#chart-tooltip').hidden = true) + element('.chart-wrap').addEventListener('pointerleave', () => { + if (!element('#chart-tooltip').matches(':has(:focus-visible)')) element('#chart-tooltip').hidden = true + }) + element('#chart-tooltip').addEventListener('click', event => { + const button = (event.target as HTMLElement).closest| Rank | Runtime | Platform | % of largest selected value |
|---|
| Rank | Runtime | 1 ? '' : 'hidden'}>Platform | % of largest selected value |
|---|
| Runtime assignments | Platform | CPU | vCPUs | Cores | Azure VM SKU | Operating system | Memory (GiB) | Runner pool | Region | Runners |
|---|
| Runtime | 1 ? '' : 'hidden'}>Platform | CPU | Azure VM SKU |
|---|
| Variant | ${snapshotPlatforms.map(platform => sortHeader(platform.id, `${showSnapshotPlatform ? platform.label : currentMetric.label} (${currentMetric.unit})`)).join('')}|
|---|---|
| ${escapeHtml(group.label)} | |
| ${runtimeMarker(runtime.id, color(runtime.id))}${escapeHtml(shortRuntimeName(runtime.id))} | ${snapshotPlatforms.map(platform => { + const value = snapshotValue(runtime.id, platform.id) + return `${value == null ? '-' : format(value)} | ` + }).join('')}
| No measurements selected. |
${escapeHtml(tooltip.footer.join(' '))}
` renderTooltipContents() @@ -337,6 +416,26 @@ function renderDashboard(data: Dataset) { updateSnapshot() } + element('.snapshot-section').addEventListener('click', event => { + const button = (event.target as Element).closest| Variant | ${snapshotPlatforms.map(platform => sortHeader(platform.id, `${showSnapshotPlatform ? platform.label : currentMetric.label} (${currentMetric.unit})`)).join('')}
|---|