diff --git a/.github/workflows/benchmark-policy.yml b/.github/workflows/benchmark-policy.yml index 7d472b7..82a3abc 100644 --- a/.github/workflows/benchmark-policy.yml +++ b/.github/workflows/benchmark-policy.yml @@ -11,16 +11,12 @@ permissions: issues: read concurrency: - group: >- - benchmark-policy-${{ github.event.pull_request.number }}-${{ ((github.event.action == 'labeled' || github.event.action == 'unlabeled') && github.event.label.name != 'benchmarks: skip' || github.event.action == 'edited' && !github.event.changes.base) && github.run_id || 'current' }} + group: benchmark-policy-${{ github.event.pull_request.number }} cancel-in-progress: true jobs: policy: - name: >- - ${{ ((github.event.action == 'labeled' || github.event.action == 'unlabeled') && github.event.label.name != 'benchmarks: skip' || github.event.action == 'edited' && !github.event.changes.base) && 'Ignored policy event' || 'Benchmark Policy' }} - if: >- - ${{ (!(github.event.action == 'labeled' || github.event.action == 'unlabeled') || github.event.label.name == 'benchmarks: skip') && (github.event.action != 'edited' || github.event.changes.base) }} + name: Benchmark Policy runs-on: ubuntu-latest timeout-minutes: 10 steps: diff --git a/.github/workflows/benchmark.yml b/.github/workflows/benchmark.yml index 00244db..7575ec8 100644 --- a/.github/workflows/benchmark.yml +++ b/.github/workflows/benchmark.yml @@ -13,8 +13,7 @@ permissions: issues: read concurrency: - group: >- - benchmark-${{ github.event.pull_request.number || github.ref }}-${{ ((github.event.action == 'labeled' || github.event.action == 'unlabeled') && github.event.label.name != 'benchmarks: skip' || github.event.action == 'edited' && !github.event.changes.base) && github.run_id || 'current' }} + group: benchmark-${{ github.event.pull_request.number || github.ref }} cancel-in-progress: true env: @@ -22,8 +21,7 @@ env: jobs: eligibility: - if: >- - github.event_name == 'pull_request' && (!(github.event.action == 'labeled' || github.event.action == 'unlabeled') || github.event.label.name == 'benchmarks: skip') && (github.event.action != 'edited' || github.event.changes.base) + if: github.event_name == 'pull_request' runs-on: ubuntu-latest timeout-minutes: 10 outputs: @@ -256,8 +254,8 @@ jobs: # Provide one required check that also reports failed, skipped, or cancelled stages. benchmark-status: - name: ${{ needs.eligibility.result != 'skipped' && 'Benchmark Status' || 'Ignored benchmark event' }} - if: ${{ always() && github.event_name == 'pull_request' && needs.eligibility.result != 'skipped' }} + name: Benchmark Status + if: ${{ always() && github.event_name == 'pull_request' }} needs: [eligibility, configure, producer, prepare, measure, collect] runs-on: ubuntu-latest timeout-minutes: 5 diff --git a/docs/README.md b/docs/README.md index f23d62b..b1ffccc 100644 --- a/docs/README.md +++ b/docs/README.md @@ -96,6 +96,7 @@ The preview URL then returns 404. ## CI Rules * `benchmarks: skip` skips measurement and result publication. Dependabot applies it automatically. +* Required checks evaluate the current PR policy on every subscribed event. Label and description edits restart the benchmark workflow. Measurements run unless `benchmarks: skip` is present. * Each of the 36 measurement jobs runs all three strategies sequentially with a fresh server process for each. Retrying a job repeats its three strategies. * Preview builds run independently of benchmarks. Draft and Dependabot PRs have no preview. * Production uses published history. Previews include matching pending results when available. diff --git a/src/main.ts b/src/main.ts index 6f98ed2..391f50e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,7 +4,7 @@ import '@fontsource/ibm-plex-sans/600.css' import '@fontsource/ibm-plex-mono/400.css' import './style.css' import { Chart, registerables } from 'chart.js' -import { createIcons, Download, Link, ArrowUpRight, AlertTriangle, RotateCcw, ChevronRight } from 'lucide' +import { createIcons, Download, Link, ArrowUpRight, AlertTriangle, RotateCcw, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } from 'lucide' import { loadDataset } from './data' import { catalog } from '../shared/catalog.ts' import { runSelectionSchema } from '../shared/results.ts' @@ -15,7 +15,7 @@ Chart.defaults.font.family = 'IBM Plex Sans' Chart.defaults.color = '#626b66' const palette = ['#65736a', '#93663c', '#2f66cb', '#e06b2f', '#968526', '#148c87', '#a34764', '#7159b5', '#438333', '#bf4961', '#427992'] -const icons = { Download, Link, ArrowUpRight, AlertTriangle, RotateCcw, ChevronRight } +const icons = { Download, Link, ArrowUpRight, AlertTriangle, RotateCcw, ChevronRight, ArrowUp, ArrowDown, ArrowUpDown } const strategyDescriptions: Record = { reload: 'Restore the sandbox for each request.', reuse: 'Keep the sandbox as-is across requests.', @@ -56,14 +56,49 @@ function renderDashboard(data: Dataset) { let range = params.get('range') === '7' ? 7 : 14 const selectedRuntimes = new Set((params.has('runtimes') ? params.get('runtimes')!.split(',') : defaultRuntimes).filter(id => data.runtimes.some(runtime => runtime.id === id))) const selectedPlatforms = new Set((params.has('platforms') ? params.get('platforms')!.split(',') : [defaultPlatform]).filter(id => data.platforms.some(platform => platform.id === id)) as PlatformId[]) + const hardwareColors = (values: (string | null | undefined)[], tints: string[]) => new Map( + [...new Set(values.filter((value): value is string => typeof value === 'string' && value.length > 0))].sort() + .map((value, index) => [value, tints[index % tints.length]!]), + ) + const cpuColors = hardwareColors(data.runs.flatMap(run => run.runners.map(runner => runner.cpu.model)), ['#e3edf9', '#e6f1e7', '#dcf0ef']) + const skuColors = hardwareColors(data.runs.flatMap(run => run.runners.map(runner => runner.sku)), ['#f8ead5', '#f2e5ef', '#f8e3df']) let selectedRunId = data.runs.find(run => run.id === params.get('run'))?.id ?? data.runs.at(-1)?.id ?? '' let chart: Chart<'line'> | undefined + let tooltipMode = 'ranked' + let snapshotMode = 'ranked' + let snapshotSort: { platformId: string, bestFirst: boolean } | undefined + let comparisonSort: { platformId: string, bestFirst: boolean } | undefined + try { + if (localStorage.getItem('benchmark-tooltip-mode') === 'grouped') tooltipMode = 'grouped' + } catch {} + let renderTooltipContents = () => {} + let tooltipHideTimer: ReturnType | undefined + const dummyOrder: Record = { + dummy: 0, + 'hyperlight-dummy': 1, + 'hyperlight-wasm-dummy': 2, + 'hyperlight-wasm-pulley-dummy': 3, + 'wasmtime-dummy': 4, + 'wasmtime-aot-dummy': 5, + 'wasmtime-pulley-dummy': 6, + } const runtimeGroups = [ - { label: 'Hyperlight JS', runtimes: data.runtimes.filter(runtime => runtime.id === 'hyperlight-js') }, - { label: 'Hyperlight Wasm', runtimes: data.runtimes.filter(runtime => runtime.id.startsWith('hyperlight-wasm-') && !runtime.id.endsWith('-dummy')) }, - { label: 'Wasmtime', runtimes: data.runtimes.filter(runtime => runtime.id.startsWith('wasmtime-') && !runtime.id.endsWith('-dummy')) }, - { label: 'Dummy', runtimes: data.runtimes.filter(runtime => runtime.id === 'dummy' || runtime.id.endsWith('-dummy')) }, + { label: 'Hyperlight JS', shape: 'circle', runtimes: data.runtimes.filter(runtime => runtime.id === 'hyperlight-js') }, + { label: 'Hyperlight Wasm', shape: 'square', runtimes: data.runtimes.filter(runtime => runtime.id.startsWith('hyperlight-wasm-') && !runtime.id.endsWith('-dummy')).sort((first, second) => Number(first.id.includes('-pulley')) - Number(second.id.includes('-pulley'))) }, + { label: 'Wasmtime', shape: 'diamond', runtimes: data.runtimes.filter(runtime => runtime.id.startsWith('wasmtime-') && !runtime.id.endsWith('-dummy')) }, + { label: 'Dummy', shape: 'triangle', runtimes: data.runtimes.filter(runtime => runtime.id === 'dummy' || runtime.id.endsWith('-dummy')).sort((first, second) => (dummyOrder[first.id] ?? Number.MAX_SAFE_INTEGER) - (dummyOrder[second.id] ?? Number.MAX_SAFE_INTEGER)) }, ] + const runtimeMarker = (runtimeId: string, markerColor: string) => { + const shape = runtimeGroups.find(group => group.runtimes.some(runtime => runtime.id === runtimeId))?.shape ?? 'square' + return `` + } + const shortRuntimeName = (runtimeId: string) => { + if (runtimeId === 'hyperlight-js') return 'QuickJS' + const name = runtimeId === 'dummy' ? 'native' : runtimeId.endsWith('-dummy') + ? runtimeId.slice(0, -6) : runtimeId.replace(/^(hyperlight-wasm|wasmtime)-/, '') + const words: Record = { native: 'Native', hyperlight: 'Hyperlight', wasm: 'Wasm', wasmtime: 'Wasmtime', aot: 'AOT', jco: 'JCO', qjs: 'QuickJS', pulley: 'Pulley' } + return name.split('-').map(word => words[word] ?? word).join(' ') + } app.innerHTML = `
@@ -78,12 +113,12 @@ function renderDashboard(data: Dataset) {

Runtimes

-
${runtimeGroups.map(group => `
${group.runtimes.map(runtime => { +
${runtimeGroups.map(group => `

${group.label}

${group.runtimes.map(runtime => { const index = data.runtimes.indexOf(runtime) return ` ` }).join('')}
`).join('')}
@@ -104,9 +139,11 @@ function renderDashboard(data: Dataset) {
COMMIT SNAPSHOT

-
RankRuntimePlatform% of largest selected value
+
+
RankRuntime 1 ? '' : 'hidden'}>Platform% of largest selected value
+
-
Runner specifications
PlatformCPUvCPUsCoresAzure VM SKUOperating systemMemory (GiB)Runner poolRegionRunners
+
Runner specifications
Runtime 1 ? '' : 'hidden'}>PlatformCPUAzure VM SKU
${data.source === 'synthetic' ? 'Demo data. Synthetic measurements.' : 'Hyperlight HTTP Benchmarks'}
@@ -129,8 +166,8 @@ function renderDashboard(data: Dataset) { element('#run').innerHTML = '' element('#snapshot-title').textContent = 'No run selected' element('#value-heading').textContent = data.metrics.find(metric => metric.id === metricId)!.label - element('#results-body').innerHTML = 'No measurements available.' - element('#runner-details').innerHTML = 'No runner data available.' + element('#results-body').innerHTML = `No measurements available.` + element('#runner-details').innerHTML = `No runner data available.` element('.chart-heading p:last-child').hidden = true element('.separator').hidden = true createIcons({ icons, attrs: { 'stroke-width': 1.7, 'aria-hidden': 'true' } }) @@ -166,55 +203,91 @@ function renderDashboard(data: Dataset) { prLink.href = `https://github.com/${pr.repository}/pull/${pr.number}` } const rows = rowsFor(selectedRunId) - const groups = new Map, runtimes: Set }>() - const groupCounts = new Map() - for (const platform of data.platforms.filter(platform => selectedPlatforms.has(platform.id))) { - for (const runner of run.runners.filter(runner => runner.platformId === platform.id)) { - const measurements = rows.filter(row => row.runnerId === runner.id) - if (!measurements.length) continue - const cells = [platform.label, runner.cpu.model, runner.cpu.logicalProcessors, runner.cpu.cores, runner.sku, [runner.os.name, runner.os.version, runner.os.architecture].filter(Boolean).join(' '), (runner.memoryBytes / 1024 ** 3).toFixed(1), runner.pool, runner.region] - const key = JSON.stringify([platform.id, runner.os.name, runner.os.version, runner.os.architecture, ...cells]) - const group = groups.get(key) - if (group) { - group.names.add(runner.name) - for (const measurement of measurements) group.runtimes.add(measurement.runtimeId) - } - else { - groups.set(key, { - platformId: platform.id, - cells, - names: new Set([runner.name]), - runtimes: new Set(measurements.map(measurement => measurement.runtimeId)), - }) - groupCounts.set(platform.id, (groupCounts.get(platform.id) ?? 0) + 1) - } + const platformRunners = data.platforms.map(platform => ({ + platform, + runners: run.runners.filter(runner => runner.platformId === platform.id && rows.some(row => row.runnerId === runner.id)), + })).filter(entry => entry.runners.length) + const configurationKey = (runner: typeof run.runners[number]) => + JSON.stringify([runner.cpu, (runner.memoryBytes / 1024 ** 3).toFixed(1), runner.os, runner.sku, runner.pool, runner.region]) + const showRuntimeAssignments = platformRunners.some(({ runners }) => new Set(runners.map(configurationKey)).size > 1) + element('.methodology .table-scroll').hidden = !showRuntimeAssignments && platformRunners.length > 0 + element('#runner-runtime-heading').hidden = !showRuntimeAssignments + const showRunnerPlatform = selectedPlatforms.size > 1 + element('#runner-platform-heading').hidden = !showRunnerPlatform + const columnCount = 2 + Number(showRuntimeAssignments) + Number(showRunnerPlatform) + const renderRunner = (platform: Dataset['platforms'][number], runners: typeof run.runners, runtimeId?: string) => { + const runner = runners[0]! + return `${runtimeId ? `${runtimeMarker(runtimeId, color(runtimeId))}${escapeHtml(shortRuntimeName(runtimeId))}` : ''}${showRunnerPlatform ? `${escapeHtml(platform.label)}` : ''}${escapeHtml(runner.cpu.model || 'Unknown CPU')}${escapeHtml(runner.sku ?? '-')}` + } + element('#runner-details').innerHTML = (showRuntimeAssignments ? runtimeGroups.map(family => { + const assignments = family.runtimes.map(runtime => platformRunners.map(({ platform, runners }) => { + const runnerIds = new Set(rows.filter(row => row.runtimeId === runtime.id && row.platformId === platform.id).map(row => row.runnerId)) + return runners.filter(runner => runnerIds.has(runner.id)).map(runner => renderRunner(platform, [runner], runtime.id)).join('') + }).join('')).join('') + return assignments ? `${escapeHtml(family.label)}${assignments}` : '' + }).join('') : platformRunners.map(({ platform, runners }) => renderRunner(platform, runners)).join('')) + || `No measurements selected.` + const configurations = new Map }>() + for (const { platform, runners } of platformRunners) { + for (const runner of runners) { + const key = configurationKey(runner) + const configuration = configurations.get(key) + if (configuration) configuration.platforms.add(platform.label) + else configurations.set(key, { runner, platforms: new Set([platform.label]) }) } } - const showRuntimeAssignments = [...groupCounts.values()].some(count => count > 1) - element('#runner-expand-heading').hidden = !showRuntimeAssignments - element('#runner-details').innerHTML = groups.size ? [...groups.values()].map((group, index) => { - const cells = [...group.cells, group.names.size] - const expandable = (groupCounts.get(group.platformId) ?? 0) > 1 - const detailId = `runner-assignments-${index}` - const label = escapeHtml(`Runtimes for ${group.cells[0]}, ${group.cells[1] || 'Unknown CPU'}`) - const toggle = expandable ? `` : '' - const assignments = expandable ? `
Runtimes (${group.runtimes.size})
    ${[...group.runtimes].sort().map(runtime => `
  • ${escapeHtml(runtime)}
    • `).join('')}
` : '' - return `${showRuntimeAssignments ? `${toggle}` : ''}${cells.map(value => `${escapeHtml(String(value ?? '-'))}`).join('')}${assignments}` - }).join('') : 'No measurements selected.' - element('#runner-details').querySelectorAll('.runner-toggle').forEach(button => { - button.addEventListener('click', () => { - const expanded = button.getAttribute('aria-expanded') !== 'true' - button.setAttribute('aria-expanded', String(expanded)) - element(`#${button.getAttribute('aria-controls')}`).hidden = !expanded - }) - }) - createIcons({ icons, attrs: { 'stroke-width': 1.7, 'aria-hidden': 'true' } }) - element('#value-heading').textContent = `${metric().label} (${metric().unit})` + element('#runner-configurations').innerHTML = [...configurations.values()].map(({ runner, platforms }, index) => { + const specs = [ + ...(showRunnerPlatform ? [['Platform', [...platforms].join(', ')]] : []), + ['vCPUs', runner.cpu.logicalProcessors], ['Cores', runner.cpu.cores], + ['Memory (GiB)', (runner.memoryBytes / 1024 ** 3).toFixed(1)], + ['Operating system', [runner.os.name, runner.os.version, runner.os.architecture].filter(Boolean).join(' ')], + ['Runner pool', runner.pool], ['Region', runner.region], + ] + return `

${escapeHtml(runner.cpu.model || 'Unknown CPU')}${escapeHtml(runner.sku ?? '-')}

${specs.map(([name, value]) => `
${name}
${escapeHtml(String(value ?? '-'))}
`).join('')}
` + }).join('') + const currentMetric = metric() + const snapshotPlatforms = data.platforms.filter(platform => selectedPlatforms.has(platform.id)) + const sort = snapshotSort && (snapshotSort.platformId === '*' || selectedPlatforms.has(snapshotSort.platformId as PlatformId)) ? snapshotSort : undefined + const ascending = sort ? (currentMetric.direction === 'lower') === sort.bestFirst : currentMetric.direction === 'lower' + const sortHeader = (platformId: string, label: string) => { + const active = sort?.platformId === platformId + const direction = active ? ascending ? 'ascending' : 'descending' : 'none' + return `` + } + const valueHeading = element('#value-heading') + valueHeading.innerHTML = `` + valueHeading.setAttribute('aria-sort', ascending ? 'ascending' : 'descending') + element('#snapshot-ranked').hidden = snapshotMode !== 'ranked' + element('#snapshot-grouped').hidden = snapshotMode !== 'grouped' + element('.snapshot-controls').querySelectorAll('[data-snapshot-mode]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.snapshotMode === snapshotMode))) + const showSnapshotPlatform = selectedPlatforms.size > 1 + element('#snapshot-platform-heading').hidden = !showSnapshotPlatform const maximum = Math.max(...rows.map(entry => entry.values[metricId]), 0) - element('#results-body').innerHTML = rows.length ? rows.map((entry, index) => { + const rankedRows = sort?.platformId === '*' && !sort.bestFirst ? [...rows].reverse() : rows + element('#results-body').innerHTML = rows.length ? rankedRows.map(entry => { const percentage = maximum > 0 ? entry.values[metricId] / maximum * 100 : 0 - return `${String(index + 1).padStart(2, '0')}${entry.runtimeId}${escapeHtml(data.platforms.find(platform => platform.id === entry.platformId)!.label)}${format(entry.values[metricId])}
${percentage.toFixed(1)}%
` - }).join('') : 'No measurements selected.' + const family = runtimeGroups.find(group => group.runtimes.some(runtime => runtime.id === entry.runtimeId))!.label + return `${String(rows.indexOf(entry) + 1).padStart(2, '0')}${runtimeMarker(entry.runtimeId, color(entry.runtimeId))}${escapeHtml(family)}${escapeHtml(shortRuntimeName(entry.runtimeId))}${showSnapshotPlatform ? `${escapeHtml(data.platforms.find(platform => platform.id === entry.platformId)!.label)}` : ''}${format(entry.values[metricId])}
${percentage.toFixed(1)}%
` + }).join('') : `No measurements selected.` + const snapshotValue = (runtimeId: string, platformId: string) => rows.find(row => row.runtimeId === runtimeId && row.platformId === platformId)?.values[metricId] + element('#snapshot-grouped').innerHTML = `${snapshotPlatforms.map(platform => sortHeader(platform.id, `${showSnapshotPlatform ? platform.label : currentMetric.label} (${currentMetric.unit})`)).join('')}${runtimeGroups.map(group => { + const runtimes = group.runtimes.filter(runtime => rows.some(row => row.runtimeId === runtime.id)) + const sortPlatform = sort?.platformId ?? (snapshotPlatforms.length === 1 ? snapshotPlatforms[0]!.id : undefined) + if (sortPlatform) runtimes.sort((first, second) => { + const firstValue = snapshotValue(first.id, sortPlatform) + const secondValue = snapshotValue(second.id, sortPlatform) + if (firstValue == null) return secondValue == null ? 0 : 1 + if (secondValue == null) return -1 + return ascending ? firstValue - secondValue : secondValue - firstValue + }) + if (!runtimes.length) return '' + return `${runtimes.map(runtime => `${snapshotPlatforms.map(platform => { + const value = snapshotValue(runtime.id, platform.id) + return `` + }).join('')}`).join('')}` + }).join('') || ``}
Variant
${escapeHtml(group.label)}
${runtimeMarker(runtime.id, color(runtime.id))}${escapeHtml(shortRuntimeName(runtime.id))}${value == null ? '-' : format(value)}
No measurements selected.
` + createIcons({ icons, attrs: { 'stroke-width': 1.7, 'aria-hidden': 'true' } }) saveView() } @@ -238,7 +311,10 @@ function renderDashboard(data: Dataset) { element('#run').innerHTML = runs.map(run => ``).join('') element('#chart-period').textContent = `${runs[0]!.date.slice(0, 10)} / ${runs.at(-1)!.date.slice(0, 10)}` const series = data.runtimes.filter(runtime => selectedRuntimes.has(runtime.id)).flatMap(runtime => data.platforms.filter(platform => selectedPlatforms.has(platform.id)).map(platform => ({ + runtimeId: runtime.id, + platformId: platform.id, label: `${runtime.id}${selectedPlatforms.size > 1 ? ` / ${platform.label}` : ''}`, + shortLabel: `${shortRuntimeName(runtime.id)}${selectedPlatforms.size > 1 ? ` / ${platform.label}` : ''}`, data: runs.map(run => data.measurements.find(entry => entry.runId === run.id && entry.runtimeId === runtime.id && entry.platformId === platform.id && entry.strategy === strategy)?.values[metricId] ?? null), borderColor: color(runtime.id), backgroundColor: color(runtime.id), borderWidth: 2, borderDash: platform.id === 'kvm' ? [6, 4] : [], @@ -246,7 +322,11 @@ function renderDashboard(data: Dataset) { }))) element('#series-count').textContent = `${series.length} series` element('#empty-chart').hidden = series.length > 0 - element('#chart-legend').innerHTML = series.map(entry => `${escapeHtml(entry.label)}`).join('') + const groupedSeries = runtimeGroups.map(group => ({ + ...group, + entries: group.runtimes.flatMap(runtime => series.filter(entry => runtime.id === entry.runtimeId)), + })).filter(group => group.entries.length) + element('#chart-legend').innerHTML = groupedSeries.map(group => `

${escapeHtml(group.label)}

${group.entries.map(entry => `${runtimeMarker(entry.runtimeId, entry.borderColor)}${escapeHtml(entry.shortLabel)}`).join('')}
`).join('') element('#chart-tooltip').hidden = true chart?.destroy() chart = new Chart(element('#chart'), { @@ -265,11 +345,63 @@ function renderDashboard(data: Dataset) { enabled: false, external: ({ chart: currentChart, tooltip }) => { const popup = element('#chart-tooltip') + clearTimeout(tooltipHideTimer) if (!tooltip.opacity) { - if (!popup.matches(':hover')) popup.hidden = true + tooltipHideTimer = setTimeout(() => { + if (!popup.matches(':hover, :has(:focus-visible)')) popup.hidden = true + }, 200) return } - popup.innerHTML = `${escapeHtml(tooltip.title.join(' '))}
${tooltip.dataPoints.map(point => `
${escapeHtml(point.dataset.label!)}${format(point.parsed.y!)} ${escapeHtml(currentMetric.unit)}
`).join('')}

${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 `
${runtimeMarker(entry.runtimeId, entry.borderColor)}${ranked ? `${escapeHtml(family)}` : ''}${escapeHtml(entry.shortLabel)}${format(point.parsed.y!)} ${escapeHtml(currentMetric.unit)}
` + } + popup.querySelector('.tooltip-values')!.dataset.mode = tooltipMode + const comparisonPlatforms = data.platforms.filter(platform => selectedPlatforms.has(platform.id)) + const sort = comparisonPlatforms.some(platform => platform.id === comparisonSort?.platformId) ? comparisonSort : undefined + const ascending = sort ? (currentMetric.direction === 'lower') === sort.bestFirst : false + const comparisonValue = (runtimeId: string, platformId: string) => dataPoints.find(point => { + const entry = series[point.datasetIndex]! + return entry.runtimeId === runtimeId && entry.platformId === platformId + })?.parsed.y + const renderComparison = () => `
Variant (${escapeHtml(currentMetric.unit)})${comparisonPlatforms.map(platform => { + const active = sort?.platformId === platform.id + const direction = active ? ascending ? 'ascending' : 'descending' : 'none' + return `` + }).join('')}
${groupedSeries.map(group => { + const runtimes = group.runtimes.filter(runtime => dataPoints.some(point => series[point.datasetIndex]!.runtimeId === runtime.id)) + if (sort) runtimes.sort((first, second) => { + const firstValue = comparisonValue(first.id, sort.platformId) + const secondValue = comparisonValue(second.id, sort.platformId) + if (firstValue == null) return secondValue == null ? 0 : 1 + if (secondValue == null) return -1 + return ascending ? firstValue - secondValue : secondValue - firstValue + }) + if (!runtimes.length) return '' + return `

${escapeHtml(group.label)}

${runtimes.map(runtime => `
${runtimeMarker(runtime.id, color(runtime.id))}${escapeHtml(shortRuntimeName(runtime.id))}${comparisonPlatforms.map(platform => { + const point = dataPoints.find(point => { + const entry = series[point.datasetIndex]! + return entry.runtimeId === runtime.id && entry.platformId === platform.id + }) + return `${point ? format(point.parsed.y!) : '-'}` + }).join('')}
`).join('')}
` + }).join('')}
` + popup.querySelector('.tooltip-values')!.innerHTML = tooltipMode === 'ranked' + ? dataPoints.map(point => renderPoint(point, true)).join('') + : comparisonPlatforms.length > 1 ? renderComparison() + : groupedSeries.map(group => { + const points = dataPoints.filter(point => group.entries.includes(series[point.datasetIndex]!)) + return points.length ? `

${escapeHtml(group.label)}

${points.map(point => renderPoint(point, false)).join('')}` : '' + }).join('') + popup.querySelectorAll('[data-tooltip-mode]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.tooltipMode === tooltipMode))) + createIcons({ icons, attrs: { 'stroke-width': 1.7, 'aria-hidden': 'true' } }) + } + popup.innerHTML = `${escapeHtml(tooltip.title.join(' '))}

${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` @@ -293,12 +425,67 @@ function renderDashboard(data: Dataset) { updateSnapshot() } + element('.snapshot-section').addEventListener('click', event => { + const button = (event.target as Element).closest('[data-snapshot-mode], [data-snapshot-sort]') + if (!button) return + const platformId = button.dataset.snapshotSort + const keyboardFocus = button.matches(':focus-visible') + if (platformId) { + snapshotSort = snapshotSort?.platformId !== platformId + ? { platformId, bestFirst: true } + : snapshotSort.bestFirst ? { platformId, bestFirst: false } : undefined + } else { + snapshotMode = button.dataset.snapshotMode! + snapshotSort = undefined + } + updateSnapshot() + if (keyboardFocus && platformId) { + element('.snapshot-section').querySelectorAll('[data-snapshot-sort]').forEach(control => { + if (control.dataset.snapshotSort === platformId) control.focus({ preventScroll: true }) + }) + } + }) element('#runtime-list').addEventListener('change', event => { const input = event.target as HTMLInputElement 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 sortButton = (event.target as Element).closest('[data-tooltip-sort]') + if (sortButton) { + const platformId = sortButton.dataset.tooltipSort! + const keyboardFocus = sortButton.matches(':focus-visible') + const values = element('.tooltip-values') + const scrollTop = values.scrollTop + comparisonSort = comparisonSort?.platformId !== platformId + ? { platformId, bestFirst: true } + : comparisonSort.bestFirst ? { platformId, bestFirst: false } : undefined + renderTooltipContents() + if (keyboardFocus) { + element('#chart-tooltip').querySelectorAll('[data-tooltip-sort]').forEach(button => { + if (button.dataset.tooltipSort === platformId) button.focus({ preventScroll: true }) + }) + } + values.scrollTop = scrollTop + return + } + const button = (event.target as HTMLElement).closest('[data-tooltip-mode]') + if (!button) return + tooltipMode = button.dataset.tooltipMode! + try { + localStorage.setItem('benchmark-tooltip-mode', tooltipMode) + } catch {} + renderTooltipContents() + }) + element('#chart-tooltip').addEventListener('keydown', event => { + if (event.key === 'Escape') { + element('#chart-tooltip').querySelector(':focus')?.blur() + element('#chart-tooltip').hidden = true + } + }) element('#runtime-search').addEventListener('input', event => { const query = (event.target as HTMLInputElement).value.toLowerCase() let visible = 0 diff --git a/src/style.css b/src/style.css index ad702bb..45d8a6c 100644 --- a/src/style.css +++ b/src/style.css @@ -1,15 +1,25 @@ +.tooltip-comparison-header button{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;min-height:28px;width:100%;padding:2px 0;font-size:10px}.tooltip-comparison-header button svg{width:12px;height:12px}.tooltip-comparison-header [aria-sort=ascending] button,.tooltip-comparison-header [aria-sort=descending] button{color:var(--green);font-weight:600}.tooltip-comparison-header button:focus-visible{outline-offset:-2px} +.tooltip-comparison{display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--platform-count),minmax(60px,max-content));column-gap:12px}.tooltip-comparison-header,.tooltip-comparison-group,.tooltip-comparison-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid}.tooltip-comparison-header{position:sticky;top:0;background:#f7f9f7;padding:4px 0 6px;border-bottom:1px solid var(--border);font-size:10px;font-weight:500;z-index:1}.tooltip-comparison-header>span:not(:first-child),.tooltip-comparison-row>b{text-align:right}.tooltip-comparison-group h4{grid-column:1/-1}.tooltip-comparison-row{align-items:center;padding:4px 0}.tooltip-comparison-variant{display:flex;align-items:center;gap:7px;min-width:0;overflow-wrap:anywhere}.tooltip-comparison-variant .runtime-swatch{flex-shrink:0}.tooltip-comparison-row>b{white-space:nowrap} +.tooltip-values[data-mode=ranked]{display:grid;grid-template-columns:8px max-content minmax(0,1fr) max-content;column-gap:7px}.tooltip-values[data-mode=ranked]>div{grid-column:1/-1;grid-template-columns:subgrid}.tooltip-variant{min-width:0;overflow-wrap:anywhere}.tooltip-values[data-mode=ranked] b{text-align:right;white-space:nowrap} +@media(max-width:720px){.tooltip-values[data-mode=ranked]{grid-template-columns:8px minmax(0,1fr) max-content}.tooltip-values[data-mode=ranked] .runtime-swatch{grid-column:1;grid-row:1/3}.tooltip-values[data-mode=ranked] .tooltip-family{grid-column:2;grid-row:1}.tooltip-values[data-mode=ranked] .tooltip-variant{grid-column:2;grid-row:2}.tooltip-values[data-mode=ranked] b{grid-column:3;grid-row:1/3}} :root{font-family:'IBM Plex Sans',sans-serif;color:#23342a;background:#f7f9f7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;letter-spacing:0;--green:#287d49;--border:#dce4de;--muted:#59685e} *{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,select,summary{cursor:pointer}button{color:inherit}button:disabled{cursor:default}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}button{border:0;background:transparent}button:hover{background:#edf3ee}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #277849;outline-offset:3px}[hidden]{display:none!important}svg{width:18px;height:18px;flex-shrink:0}h1,h2,p{margin:0}h2{font-size:17px;font-weight:600}input[type=checkbox]{width:15px;height:15px;flex-shrink:0;margin:0;accent-color:var(--green)}select{background:#fff;border:1px solid var(--border);border-radius:4px;padding:8px 30px 8px 10px;max-width:100%;font-size:12px;color:#405046}input[type=search]{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:4px;background:#fff;font-size:13px}fieldset{min-width:0;border:0;padding:0;margin:0}legend{padding:0}.site-header{height:66px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px}.site-header nav a{font-size:13px;display:flex;align-items:center;gap:6px;color:#526358}main{max-width:1536px;margin:auto;padding:32px 40px 0}.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0;color:#738176;font-weight:400}h1{font-size:32px;line-height:1.15;font-weight:500}.workspace{display:grid;grid-template-columns:258px minmax(0,1fr);border-top:1px solid var(--border)}.runtime-panel{padding:24px 20px 24px 0;border-right:1px solid var(--border)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.panel-heading h2{font-size:14px}.count{margin-left:6px;font:11px 'IBM Plex Mono';color:#87948a}.icon-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:4px;background:#fff;color:#576b5d;flex-shrink:0}.icon-button:hover{border-color:#92ae9a}.search-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.selection-actions{display:flex;justify-content:space-between;padding:8px 0 12px}.selection-actions button{font-size:11px;color:var(--green);padding:4px}.runtime-option{display:flex;align-items:center;gap:9px;padding:9px 5px;border-radius:4px;cursor:pointer;min-height:48px}.runtime-option:hover{background:#ecf2ed}.runtime-swatch{height:8px;width:8px;border-radius:2px;flex-shrink:0}.runtime-text{min-width:0;display:flex;flex-direction:column;gap:3px}.runtime-text>span{font-size:12px;font-weight:500;overflow-wrap:anywhere}.runtime-text small{font-size:10px;color:var(--muted)}.results{min-width:0;padding:24px 0 0 28px}.controls{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:24px}.control-label,legend{display:block;font-size:11px;color:#69786e;margin-bottom:8px}.segments{display:inline-flex;border:1px solid var(--border);border-radius:5px;padding:3px;gap:3px;background:#eef2ef}.segments button{padding:7px 19px;border-radius:3px;min-width:82px;font-size:12px}.segments button[aria-pressed=true]{background:var(--green);color:white;box-shadow:0 1px 3px #1f48291a}.lifecycle-control p{font-size:11px;color:#7d887f;margin-top:9px}.platform-options{display:flex;gap:8px}.platform-options label{display:grid;grid-template-columns:15px auto;gap:3px 7px;align-items:center;padding:8px 10px;border:1px solid var(--border);background:#fff;border-radius:4px;font-size:12px;cursor:pointer;min-width:80px}.platform-options label:has(input:checked){border-color:#83ad8c;background:#f0f7f1}.platform-options input{grid-row:span 2}.platform-options small{font-size:9px;color:#78877c}.hardware-warning{display:flex;gap:10px;background:#fbf4e5;border-left:2px solid #ba8d35;padding:12px 14px;margin:0 0 20px;color:#7c622a;font-size:12px}.metrics{display:flex;gap:22px;border-bottom:1px solid var(--border);overflow-x:auto}.metrics button{flex-shrink:0;padding:12px 0;border-bottom:2px solid transparent;font-size:12px;color:#738077}.metrics button[aria-selected=true]{border-color:var(--green);color:var(--green);font-weight:600}.chart-section{padding:24px 0 20px}.chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.chart-heading h2{font-size:18px}.chart-heading p{font-size:11px;color:#7a857d;margin-top:7px}.separator{padding:0 8px;color:#afb7b1}.chart-actions{display:flex;gap:7px;align-items:center}.chart-wrap{position:relative;height:340px;margin-top:18px;width:100%}#chart{width:100%;height:100%}#empty-chart{position:absolute;inset:0;display:grid;place-content:center;background:#f7f9f7e8;color:var(--muted);font-size:13px;text-align:center}.chart-caption{display:flex;justify-content:space-between;font-size:10px;color:#929d95;margin-top:11px;font-family:'IBM Plex Mono',monospace}.chart-legend{display:flex;flex-wrap:wrap;gap:10px 19px;margin-top:22px;font-size:10px;color:#68796d;line-height:1.5}.chart-legend>span{display:flex;align-items:center;gap:7px;overflow-wrap:anywhere;min-width:0}.legend-line{display:inline-block;width:17px;border-top:2px solid;flex-shrink:0}.snapshot-section{margin-top:5px;border-top:1px solid var(--border);padding-top:22px}.snapshot-heading{display:flex;justify-content:space-between;gap:14px;margin-bottom:18px;align-items:center}.snapshot-heading h2{font:13px 'IBM Plex Mono';margin-top:8px}.snapshot-heading p{font-size:12px;color:#849087;margin-top:5px}.snapshot-heading>div:last-child{display:flex;gap:10px;align-items:center}.snapshot-heading a{font-size:11px;white-space:nowrap}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;font-size:12px}thead{background:#edf2ee}th{font-size:10px;font-weight:500;color:#758379;padding:10px 13px;white-space:nowrap}td{padding:13px;border-bottom:1px solid #e4eae5;white-space:nowrap}tbody tr:hover{background:#eff5f0}.rank{font:11px 'IBM Plex Mono';color:#97a399;width:45px}.table-runtime{display:flex;align-items:center;gap:10px;font-weight:500}.number{font:12px 'IBM Plex Mono';text-align:right}#value-heading{text-align:right}.platform-badge{font:9px 'IBM Plex Mono';color:#6c8072;background:#edf2ef;border-radius:3px;padding:4px 6px}.bar-cell{width:22%;min-width:110px}.value-bar{display:block;height:5px;opacity:.7;border-radius:1px}.empty-table{text-align:center;padding:32px;color:var(--muted)}.methodology{border-top:1px solid var(--border);margin-top:28px;padding:17px 0;color:#697b6e}.methodology summary{font-size:12px;font-weight:500}.methodology table{font-size:11px}footer{border-top:1px solid var(--border);padding:20px 0;display:flex;justify-content:space-between;font-size:10px;color:#909b93;margin-top:20px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#263f2e;color:#fff;border-radius:5px;padding:12px 20px;font-size:13px;box-shadow:0 4px 20px #0002;z-index:10;max-width:90%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.initial-state{padding:60px;text-align:center}.initial-state button{margin-top:20px;padding:10px 20px;border:1px solid var(--border)}#search-empty{font-size:12px;color:var(--muted);padding:15px 0} .chart-tooltip{position:absolute;z-index:2;width:max-content;max-width:100%;background:#f7f9f7;color:#23342a;border:1px solid var(--border);border-radius:5px;padding:12px;font-size:11px;box-shadow:0 3px 12px #23342a14}.chart-tooltip strong{font:11px 'IBM Plex Mono';display:block;margin-bottom:9px;color:var(--green)}.tooltip-values{max-height:190px;overflow-y:auto;overscroll-behavior:contain}.tooltip-values>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:7px;align-items:center;padding:4px 2px}.tooltip-values>div>span:nth-child(2){overflow-wrap:anywhere}.tooltip-values b{font-weight:400;font-family:'IBM Plex Mono';font-size:10px}.chart-tooltip p{font-size:11px;margin-top:9px;overflow-wrap:anywhere;color:var(--muted)} @media(max-width:720px){.methodology th:last-child{display:table-cell}} .site-heading{margin:0;font-size:14px;font-weight:500;line-height:1.2}.site-title{font-size:14px;font-weight:500}.site-header .repository-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px}.site-header{gap:16px;height:58px} .dashboard-main{padding-top:0}.dashboard-main>.workspace{border-top:0} -.methodology .runner-expand-cell{width:42px;padding:4px}.runner-toggle[aria-expanded=true] svg{transform:rotate(90deg)}.methodology .runner-assignments td{white-space:normal;background:#edf3ee;padding:14px 16px}.runner-assignment-content strong{font-size:12px;font-weight:500}.runner-assignment-content ul{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:10px 0 0;padding:0}.runner-assignment-content li{font:11px 'IBM Plex Mono',monospace;overflow-wrap:anywhere;min-width:0} +#snapshot-ranked td[data-platform=kvm] .platform-badge{background:#eaf0f8}#snapshot-ranked td[data-platform=mshv3] .platform-badge{background:#eaf3ec} +.snapshot-controls{display:flex;gap:2px;width:max-content;padding:2px;border:1px solid var(--border);border-radius:4px;margin:0 0 12px}.snapshot-controls button{border:0;background:transparent;padding:5px 12px;font-size:12px}.snapshot-controls button[aria-pressed=true]{background:#e5eee7;color:var(--green)}.snapshot-sort{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;border:0;background:transparent;color:inherit;padding:0;font:inherit;text-align:inherit}.snapshot-sort svg{width:14px;height:14px;flex:none}.snapshot-sort:focus-visible{outline:2px solid var(--green);outline-offset:4px}.snapshot-runtime{display:grid;gap:2px}.snapshot-runtime strong{font-size:11px;font-weight:600}.snapshot-runtime>span{font-size:11px;color:var(--muted)}#snapshot-grouped th:not(:first-child){text-align:right}#snapshot-grouped th:last-child{display:table-cell}#snapshot-grouped .snapshot-family th{text-align:left;background:#edf3ee;color:#23342a;font-size:11px;font-weight:600;text-transform:none}#snapshot-grouped td{white-space:normal}#snapshot-grouped .table-runtime{overflow-wrap:anywhere} +.methodology{container-type:inline-size}.runner-table{min-width:640px}.methodology .runner-family-row th{padding:10px 12px;background:#edf3ee;font-size:11px;font-weight:600;color:#23342a;text-transform:none}.methodology .runner-runtime-row td{padding-top:8px;padding-bottom:8px}.runner-configuration{padding:16px 0;border-top:1px solid var(--border)}.runner-configuration h3{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;font-size:12px;font-weight:600}.runner-configuration h3 span{padding:5px 8px;overflow-wrap:anywhere;max-width:100%}.runner-configuration dl{display:flex;flex-wrap:wrap;gap:14px 24px;margin:0}.runner-configuration dl>div{flex:0 1 auto;min-width:0;max-width:min(260px,100%)}.runner-configuration dt{font-size:10px;color:var(--muted);margin-bottom:3px}.runner-configuration dd{margin:0;font-size:11px;overflow-wrap:anywhere} .preview-status{padding:12px 0;color:var(--green);font-size:13px;overflow-wrap:anywhere;border-bottom:1px solid var(--border)} .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} +.chart-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));align-items:start}.legend-group{min-width:0}.legend-group h3,.tooltip-values h4{font-size:11px;font-weight:600;color:#23342a;margin:0 0 7px}.legend-group>div{display:flex;flex-wrap:wrap;gap:6px 14px}.legend-group>div>span{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}.tooltip-values h4{display:flex;align-items:center;gap:8px;margin:8px 0 4px}.tooltip-values h4:after{content:'';flex:1;border-top:1px solid var(--border)}.tooltip-values h4:first-child{margin-top:0} +.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%)} +.chart-tooltip{width:420px}.tooltip-modes{display:inline-flex;border:1px solid var(--border);border-radius:4px;margin-bottom:10px;overflow:hidden}.tooltip-modes button{min-width:74px;min-height:30px;padding:4px 10px;font-size:11px}.tooltip-modes button+button{border-left:1px solid var(--border)}.tooltip-modes button[aria-pressed=true]{background:#dfece2;color:#23342a;font-weight:600}.tooltip-modes button:focus-visible{outline-offset:-3px}.tooltip-family{font-weight:600} @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}}