EnterpriseAI/ClosedCode
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases Wiki Activity

fix(stats): polish comparison details

Browse Source
This commit is contained in:
Adam
2026-07-10 12:42:04 -05:00
parent 233f069070
commit 5df822be11
4 changed files with 50 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stats/app/src/routes/compare-cards.tsx
+14 -1
View File
@@ -93,7 +93,7 @@ function FeaturedComparisonCard(props: { pair: ComparisonPair }) {
<strong>{props.pair.detail}</strong>
<em>{props.pair.description ?? `${props.pair.first.name} vs ${props.pair.second.name}`}</em>
</span>
<b aria-hidden="true" />
<ComparisonCardIcon />
</span>
<span data-slot="compare-home-card-divider" aria-hidden="true" />
<span data-slot="compare-home-card-models">
@@ -109,6 +109,19 @@ function FeaturedComparisonCard(props: { pair: ComparisonPair }) {
)
}
function ComparisonCardIcon() {
return (
<b aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.9509 12.9884L14.4069 14.4444M2.44431 2.44434H6.44431V6.44434H2.44431V2.44434ZM2.44431 9.55542H6.44431V13.5554H2.44431V9.55542ZM9.55539 2.44434H13.5554V6.44434H9.55539V2.44434ZM13.5554 11.5554C13.5554 12.66 12.66 13.5554 11.5554 13.5554C10.4508 13.5554 9.55539 12.66 9.55539 11.5554C9.55539 10.4509 10.4508 9.55542 11.5554 9.55542C12.66 9.55542 13.5554 10.4509 13.5554 11.5554Z"
stroke="#808080"
/>
</svg>
</b>
)
}
function ComparisonPanelCard(props: { pair: ComparisonPair }) {
return (
<a data-component="comparison-card" href={canonicalComparisonHref(props.pair.first, props.pair.second)}>
packages/stats/app/src/routes/compare-radar.tsx
+1 -148
View File
@@ -1,4 +1,3 @@
import { Icon } from "@opencode-ai/ui/icon"
import { createMemo, createSignal, For, Show, type JSX } from "solid-js"
import type { ModelCatalogBenchmark, ModelCatalogEntry } from "./model-catalog"
@@ -25,20 +24,12 @@ type RadarAxis = {
score: (model: ModelCatalogEntry) => number | undefined
}
type RadarSeries = {
name: string
labName: string
color: string
scores: (number | undefined)[]
}
type RadarPoint = {
x: number
y: number
}
export function ComparisonRadar(props: ComparisonRadarProps) {
let section: HTMLElement | undefined
const [activeAxis, setActiveAxis] = createSignal<number>()
const axes = createMemo(() => buildRadarAxes(props.catalogModels))
const series = createMemo(() =>
@@ -60,11 +51,9 @@ export function ComparisonRadar(props: ComparisonRadarProps) {
.join(". "),
)
const clearActiveAxis = (index: number) => setActiveAxis((active) => (active === index ? undefined : active))
const download = () => downloadRadarChart(axes(), series())
const open = () => openRadarChart(section, axes(), series())
return (
<section ref={(element) => (section = element)} data-section="compare-radar" aria-label="Model capabilities">
<section data-section="compare-radar" aria-label="Model capabilities">
<ol data-slot="compare-radar-legend">
<For each={series()}>
{(model) => (
@@ -168,14 +157,6 @@ export function ComparisonRadar(props: ComparisonRadarProps) {
</div>
</Show>
</div>
<div data-slot="compare-radar-actions">
<button type="button" aria-label="Download chart" title="Download chart" onClick={download}>
<Icon name="download" size="small" />
</button>
<button type="button" aria-label="View chart full screen" title="View chart full screen" onClick={open}>
<Icon name="square-arrow-top-right" size="small" />
</button>
</div>
<div data-slot="compare-radar-data">
<table>
<caption>Normalized model capability scores</caption>
@@ -408,131 +389,3 @@ function roundRadarCoordinate(value: number) {
function formatRadarScore(score: number | undefined) {
return score === undefined ? "No data" : `${Math.round(score)}/100`
}
function downloadRadarChart(axes: RadarAxis[], series: RadarSeries[]) {
if (typeof document === "undefined") return
const url = radarChartUrl(axes, series)
const link = document.createElement("a")
link.href = url
link.download = `${series.map((model) => fileSlug(model.name)).join("-vs-") || "model-comparison"}.svg`
document.body.append(link)
link.click()
link.remove()
window.setTimeout(() => URL.revokeObjectURL(url), 0)
}
function openRadarChart(section: HTMLElement | undefined, axes: RadarAxis[], series: RadarSeries[]) {
if (typeof document === "undefined") return
if (document.fullscreenElement) {
void document.exitFullscreen()
return
}
if (section?.requestFullscreen) {
void section.requestFullscreen()
return
}
const url = radarChartUrl(axes, series)
window.open(url, "_blank", "noopener,noreferrer")
window.setTimeout(() => URL.revokeObjectURL(url), 60_000)
}
function radarChartUrl(axes: RadarAxis[], series: RadarSeries[]) {
return URL.createObjectURL(new Blob([standaloneRadarChart(axes, series)], { type: "image/svg+xml" }))
}
function standaloneRadarChart(axes: RadarAxis[], series: RadarSeries[]) {
const grid = Array.from({ length: radarRingCount })
.map((_, index) => standalonePolygon(axes.length, ((index + 1) / radarRingCount) * 100))
.map((points) => `<polygon points="${points}"/>`)
.join("")
const spokes = axes
.map((_, index) => standalonePoint(index, axes.length, 100))
.map((point) => `<line x1="640" y1="400" x2="${point.x}" y2="${point.y}"/>`)
.join("")
const labels = axes
.map((axis, index) => {
const point = standalonePoint(index, axes.length, 129)
const horizontal = point.x - 640
const anchor = horizontal > 40 ? "start" : horizontal < -40 ? "end" : "middle"
return `<text x="${point.x}" y="${point.y}" text-anchor="${anchor}" dominant-baseline="middle">${escapeXml(axis.label)}</text>`
})
.join("")
const areas = series
.map((model) => {
const polygon = standaloneSeriesPolygon(model.scores)
const lines = polygon
? `<polygon points="${polygon}" fill="${model.color}" fill-opacity="0.09"/>`
: standaloneSeriesConnections(model.scores)
.map(
(connection) =>
`<line x1="${connection.start.x}" y1="${connection.start.y}" x2="${connection.end.x}" y2="${connection.end.y}"/>`,
)
.join("")
const points = model.scores
.flatMap((score, index) => (score === undefined ? [] : [standalonePoint(index, model.scores.length, score)]))
.map((point) => `<circle cx="${point.x}" cy="${point.y}" r="5"/>`)
.join("")
return `<g stroke="${model.color}" fill="${model.color}" stroke-width="1.5" stroke-linejoin="round">${lines}${points}</g>`
})
.join("")
const legend = series
.map(
(model, index) =>
`<g transform="translate(45 ${50 + index * 52})"><rect width="6" height="6" y="-3" fill="${model.color}"/><text x="17" y="0" dominant-baseline="middle" fill="#161616" font-size="13" font-weight="500">${escapeXml(model.name)}</text><text x="17" y="21" dominant-baseline="middle" fill="#5c5c5c" font-size="13">${escapeXml(model.labName)}</text></g>`,
)
.join("")
return `<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"><rect width="1280" height="800" fill="#ffffff"/><g fill="none" stroke="#0000001a" stroke-width="1">${grid}${spokes}</g><g fill="#161616" font-family="IBM Plex Mono, monospace" font-size="16">${labels}</g>${areas}<g font-family="IBM Plex Mono, monospace">${legend}</g></svg>`
}
function standalonePoint(index: number, count: number, score: number) {
const angle = -Math.PI / 2 + (index * Math.PI * 2) / count
const radius = (Math.max(0, Math.min(129, score)) / 100) * 260
return {
x: roundRadarCoordinate(640 + Math.cos(angle) * radius),
y: roundRadarCoordinate(400 + Math.sin(angle) * radius),
}
}
function standalonePolygon(count: number, score: number) {
return Array.from({ length: count })
.map((_, index) => standalonePoint(index, count, score))
.map((point) => `${point.x},${point.y}`)
.join(" ")
}
function standaloneSeriesPolygon(scores: (number | undefined)[]) {
if (scores.some((score) => score === undefined)) return
return scores
.map((score, index) => standalonePoint(index, scores.length, score ?? 0))
.map((point) => `${point.x},${point.y}`)
.join(" ")
}
function standaloneSeriesConnections(scores: (number | undefined)[]) {
return scores.flatMap((score, index) => {
const nextIndex = (index + 1) % scores.length
const next = scores[nextIndex]
if (score === undefined || next === undefined) return []
return [
{
start: standalonePoint(index, scores.length, score),
end: standalonePoint(nextIndex, scores.length, next),
},
]
})
}
function fileSlug(value: string) {
return value
.toLowerCase()
.replace(/[^a-z0-9]+/g, "-")
.replace(/^-|-$/g, "")
}
function escapeXml(value: string) {
return value.replace(/[&<>"']/g, (character) => {
const entities: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&apos;" }
return entities[character] ?? character
})
}
packages/stats/app/src/routes/index.css
+4 -82
View File
@@ -5857,7 +5857,6 @@
}
[data-page="stats"] [data-slot="compare-home-card-head"] b {
position: relative;
display: grid;
place-items: center;
width: 32px;
@@ -5868,32 +5867,10 @@
box-shadow: 0 1px 1.5px #0000000f;
}
[data-page="stats"] [data-slot="compare-home-card-head"] b::before {
position: absolute;
top: 8px;
left: 8px;
width: 3px;
height: 3px;
content: "";
background: currentColor;
box-shadow:
7px 0 currentColor,
0 7px currentColor;
color: var(--stats-muted);
}
[data-page="stats"] [data-slot="compare-home-card-head"] b::after {
position: absolute;
right: 5px;
bottom: 5px;
width: 12px;
height: 12px;
box-sizing: border-box;
content: "";
background:
radial-gradient(circle at 4px 4px, transparent 2.5px, var(--stats-muted) 2.75px 4px, transparent 4.25px),
linear-gradient(var(--stats-muted) 0 0) 7px 8px / 5px 1.5px no-repeat;
transform: rotate(45deg);
[data-page="stats"] [data-slot="compare-home-card-head"] b svg {
display: block;
width: 16px;
height: 16px;
}
[data-page="stats"] [data-slot="compare-home-card-divider"] {
@@ -6277,42 +6254,6 @@
line-height: 16px;
}
[data-page="stats"] [data-slot="compare-radar-actions"] {
display: flex;
align-self: end;
justify-self: end;
gap: 8px;
padding: 40px;
}
[data-page="stats"] [data-slot="compare-radar-actions"] button {
display: grid;
place-items: center;
width: 32px;
height: 32px;
box-sizing: border-box;
padding: 0;
border: 1px solid var(--stats-line);
border-radius: 0;
color: var(--stats-text);
background: var(--stats-bg);
cursor: pointer;
}
[data-page="stats"] [data-slot="compare-radar-actions"] button:hover,
[data-page="stats"] [data-slot="compare-radar-actions"] button:focus-visible {
border-color: var(--stats-line-strong);
background: var(--stats-layer);
outline: none;
}
[data-page="stats"] [data-slot="compare-radar-actions"] [data-component="icon"],
[data-page="stats"] [data-slot="compare-radar-actions"] svg {
display: block;
width: 16px;
height: 16px;
}
[data-page="stats"] [data-slot="compare-radar-data"] {
position: absolute;
width: 1px;
@@ -6324,13 +6265,6 @@
white-space: nowrap;
}
[data-page="stats"] [data-section="compare-radar"]:fullscreen {
width: 100vw;
height: 100vh;
border: 0;
background: var(--stats-bg);
}
[data-page="stats"] [data-component="compare-detail-table"] {
--compare-detail-label-column: 292px;
--compare-detail-model-column-min: 360px;
@@ -6719,13 +6653,6 @@
aspect-ratio: 1;
}
[data-page="stats"] [data-slot="compare-radar-actions"] {
position: absolute;
right: 0;
bottom: 0;
padding: 32px;
}
[data-page="stats"] [data-component="compare-detail-table"] {
--compare-detail-label-column: 220px;
--compare-detail-model-column-min: 320px;
@@ -6777,11 +6704,6 @@
justify-self: center;
width: min(100%, 720px);
}
[data-page="stats"] [data-slot="compare-radar-actions"] {
position: static;
padding: 16px 0 0;
}
}
@media (max-width: 40rem) {