neuron-technologies/neuron
2
0
Fork 0
Code Issues 44 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(stats): improve page speed

Browse Source
This commit is contained in:
Adam
2026-08-05 15:54:35 -05:00
parent b1f8cc04af
commit 146720e197
5 changed files with 45 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stats/app/src/entry-server.tsx
+11 -1
View File
@@ -1,7 +1,10 @@
// @refresh reload // @refresh reload
import type { Asset, PageEvent } from "@solidjs/start"
import { createHandler, StartServer } from "@solidjs/start/server" import { createHandler, StartServer } from "@solidjs/start/server"
import ibmPlexMonoMediumLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Medium-Latin1.woff2?url"
import { getRequestEvent } from "solid-js/web" import { getRequestEvent } from "solid-js/web"
import { dir, localeFromRequest, tag } from "./lib/language" import { dir, localeFromRequest, tag } from "./lib/language"
import statsStylesheetUrl from "./routes/index.css?url"
const statsThemePreloadScript = `;(function () { const statsThemePreloadScript = `;(function () {
var preference = "system" var preference = "system"
@@ -18,8 +21,13 @@ export default createHandler(
() => ( () => (
<StartServer <StartServer
document={({ assets, children, scripts }) => { document={({ assets, children, scripts }) => {
const event = getRequestEvent() const event = getRequestEvent() as PageEvent | undefined
const locale = event ? localeFromRequest(event.request) : "en" const locale = event ? localeFromRequest(event.request) : "en"
const stylesheet = (event?.assets as Asset[] | undefined)?.find(
(asset): asset is Extract<Asset, { tag: "link" }> =>
asset.tag === "link" && asset.attrs.rel === "stylesheet",
)
const stylesheetHref = import.meta.env.DEV ? statsStylesheetUrl : stylesheet?.attrs.href
return ( return (
<html lang={tag(locale)} dir={dir(locale)} data-locale={locale}> <html lang={tag(locale)} dir={dir(locale)} data-locale={locale}>
@@ -27,6 +35,8 @@ export default createHandler(
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<script id="stats-theme-preload-script">{statsThemePreloadScript}</script> <script id="stats-theme-preload-script">{statsThemePreloadScript}</script>
<link rel="preload" href={ibmPlexMonoMediumLatin1} as="font" type="font/woff2" crossorigin="anonymous" />
{stylesheetHref ? <link rel="stylesheet" href={stylesheetHref} /> : null}
{assets} {assets}
</head> </head>
<body> <body>
packages/stats/app/src/routes/compare-cards.tsx
-1
View File
@@ -86,7 +86,6 @@ function FeaturedComparisonCard(props: { pair: ComparisonPair }) {
<a <a
data-component="compare-home-card" data-component="compare-home-card"
href={canonicalComparisonHref(props.pair.first, props.pair.second)} href={canonicalComparisonHref(props.pair.first, props.pair.second)}
aria-label={`${props.pair.detail}: ${props.pair.first.name} vs ${props.pair.second.name}`}
> >
<span data-slot="compare-home-card-head"> <span data-slot="compare-home-card-head">
<span> <span>
packages/stats/app/src/routes/index.css
+25 -11
View File
@@ -55,7 +55,7 @@ body {
--color-background-strong: #161616; --color-background-strong: #161616;
--color-background-strong-hover: #242424; --color-background-strong-hover: #242424;
--color-text: #5c5c5c; --color-text: #5c5c5c;
--color-text-weak: #808080; --color-text-weak: #707070;
--color-text-strong: #161616; --color-text-strong: #161616;
--color-text-inverted: #ffffff; --color-text-inverted: #ffffff;
--color-border-weak: #0000001a; --color-border-weak: #0000001a;
@@ -66,10 +66,10 @@ body {
--stats-line-strong: #00000033; --stats-line-strong: #00000033;
--stats-text: #161616; --stats-text: #161616;
--stats-muted: #5c5c5c; --stats-muted: #5c5c5c;
--stats-faint: #808080; --stats-faint: #707070;
--stats-theme-icon-active: #3a3a3a; --stats-theme-icon-active: #3a3a3a;
--stats-accent: #3b5cf6; --stats-accent: #3b5cf6;
--stats-accent-text: #6c7dff; --stats-accent-text: #3b5cf6;
--stats-bar-idle: #d4d4d4; --stats-bar-idle: #d4d4d4;
--stats-dot: #d4d4d4; --stats-dot: #d4d4d4;
--stats-hero-muted: #5c5c5c; --stats-hero-muted: #5c5c5c;
@@ -92,6 +92,18 @@ body {
display: none !important; display: none !important;
} }
[data-page="stats"] [data-slot="visually-hidden"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
[data-page="stats"][data-layout="compare-detail"] { [data-page="stats"][data-layout="compare-detail"] {
/* The table contains its own wide rows; keep the page itself out of the horizontal scroll chain. */ /* The table contains its own wide rows; keep the page itself out of the horizontal scroll chain. */
overflow-x: visible; overflow-x: visible;
@@ -7079,7 +7091,7 @@ body {
--color-background-strong: #ffffff; --color-background-strong: #ffffff;
--color-background-strong-hover: #eeeeee; --color-background-strong-hover: #eeeeee;
--color-text: #d4d4d4; --color-text: #d4d4d4;
--color-text-weak: #808080; --color-text-weak: #a3a3a3;
--color-text-strong: #ffffff; --color-text-strong: #ffffff;
--color-text-inverted: #161616; --color-text-inverted: #161616;
--color-border-weak: #ffffff1a; --color-border-weak: #ffffff1a;
@@ -7090,11 +7102,12 @@ body {
--stats-line-strong: #ffffff33; --stats-line-strong: #ffffff33;
--stats-text: #ffffff; --stats-text: #ffffff;
--stats-muted: #d4d4d4; --stats-muted: #d4d4d4;
--stats-faint: #808080; --stats-faint: #a3a3a3;
--stats-accent-text: #8190ff;
--stats-theme-icon-active: #fafafa; --stats-theme-icon-active: #fafafa;
--stats-bar-idle: #303030; --stats-bar-idle: #303030;
--stats-dot: #303030; --stats-dot: #303030;
--stats-hero-muted: #808080; --stats-hero-muted: #a3a3a3;
--stats-hero-pattern: #303030; --stats-hero-pattern: #303030;
--stats-logo-bg: #f1ecec; --stats-logo-bg: #f1ecec;
--stats-logo-fill: #b7b1b1; --stats-logo-fill: #b7b1b1;
@@ -7254,7 +7267,7 @@ body {
--color-background-strong: #ffffff; --color-background-strong: #ffffff;
--color-background-strong-hover: #eeeeee; --color-background-strong-hover: #eeeeee;
--color-text: #d4d4d4; --color-text: #d4d4d4;
--color-text-weak: #808080; --color-text-weak: #a3a3a3;
--color-text-strong: #ffffff; --color-text-strong: #ffffff;
--color-text-inverted: #161616; --color-text-inverted: #161616;
--color-border-weak: #ffffff1a; --color-border-weak: #ffffff1a;
@@ -7265,11 +7278,12 @@ body {
--stats-line-strong: #ffffff33; --stats-line-strong: #ffffff33;
--stats-text: #ffffff; --stats-text: #ffffff;
--stats-muted: #d4d4d4; --stats-muted: #d4d4d4;
--stats-faint: #808080; --stats-faint: #a3a3a3;
--stats-accent-text: #8190ff;
--stats-theme-icon-active: #fafafa; --stats-theme-icon-active: #fafafa;
--stats-bar-idle: #303030; --stats-bar-idle: #303030;
--stats-dot: #303030; --stats-dot: #303030;
--stats-hero-muted: #808080; --stats-hero-muted: #a3a3a3;
--stats-hero-pattern: #303030; --stats-hero-pattern: #303030;
--stats-logo-bg: #f1ecec; --stats-logo-bg: #f1ecec;
--stats-logo-fill: #b7b1b1; --stats-logo-fill: #b7b1b1;
@@ -8393,7 +8407,7 @@ body {
} }
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] { [data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] {
--top-models-mobile-bar-width: 12px; --top-models-mobile-bar-width: 18px;
} }
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="top-models-axis"], [data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="top-models-axis"],
@@ -8402,7 +8416,7 @@ body {
} }
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] { [data-page="stats"] [data-component="market-share"][data-dense-labels="true"] {
--market-mobile-bar-width: 12px; --market-mobile-bar-width: 18px;
} }
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-labels"], [data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-labels"],
packages/stats/app/src/routes/index.tsx
+7 -23
View File
@@ -1,11 +1,7 @@
import { Link, Meta, Title } from "@solidjs/meta" import { Meta, Title } from "@solidjs/meta"
import { ProviderIcon } from "@opencode-ai/ui/provider-icon" import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
import { scaleSqrt } from "d3-scale" import { scaleSqrt } from "d3-scale"
import countryCodesSource from "i18n-iso-countries/codes.json?raw" import countryCodesSource from "i18n-iso-countries/codes.json?raw"
import ibmPlexMonoRegularLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2?url"
import ibmPlexMonoMediumLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Medium-Latin1.woff2?url"
import ibmPlexMonoSemiBoldLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2?url"
import ibmPlexMonoBoldLatin1 from "@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Bold-Latin1.woff2?url"
import { import {
getStatsHomeData, getStatsHomeData,
type CacheRatioEntry, type CacheRatioEntry,
@@ -142,10 +138,6 @@ export default function StatsHome() {
<Meta name="twitter:description" content={i18n.t("app.description")} /> <Meta name="twitter:description" content={i18n.t("app.description")} />
<Meta name="twitter:image" content={statsUnfurlUrl} /> <Meta name="twitter:image" content={statsUnfurlUrl} />
<Meta name="twitter:image:alt" content={i18n.t("app.unfurlAlt")} /> <Meta name="twitter:image:alt" content={i18n.t("app.unfurlAlt")} />
<Link rel="preload" href={ibmPlexMonoRegularLatin1} as="font" type="font/woff2" crossorigin="anonymous" />
<Link rel="preload" href={ibmPlexMonoMediumLatin1} as="font" type="font/woff2" crossorigin="anonymous" />
<Link rel="preload" href={ibmPlexMonoSemiBoldLatin1} as="font" type="font/woff2" crossorigin="anonymous" />
<Link rel="preload" href={ibmPlexMonoBoldLatin1} as="font" type="font/woff2" crossorigin="anonymous" />
<Header githubStars={githubStars() ?? githubLink.fallbackStars} /> <Header githubStars={githubStars() ?? githubLink.fallbackStars} />
<div data-component="container"> <div data-component="container">
<div data-component="content"> <div data-component="content">
@@ -227,7 +219,8 @@ function Hero(props: { updatedAt: string | null }) {
return ( return (
<section data-section="hero"> <section data-section="hero">
<p data-slot="hero-meta" aria-live="polite" aria-atomic="true" aria-label={currentUpdatedLabel()}> <p data-slot="hero-meta" role="status" aria-atomic="true">
<span data-slot="visually-hidden">{currentUpdatedLabel()}</span>
<svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16"> <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
<path <path
fill-rule="evenodd" fill-rule="evenodd"
@@ -696,7 +689,7 @@ function isDenseColumnRange(range: UsageRange) {
function scrollDenseChartToEnd(element: HTMLDivElement | undefined, range: UsageRange, count: number) { function scrollDenseChartToEnd(element: HTMLDivElement | undefined, range: UsageRange, count: number) {
if (!element || count <= 0 || !isDenseColumnRange(range) || typeof window === "undefined") return if (!element || count <= 0 || !isDenseColumnRange(range) || typeof window === "undefined") return
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
element.scrollLeft = element.scrollWidth - element.clientWidth element.scrollLeft = Number.MAX_SAFE_INTEGER
}) })
} }
@@ -735,12 +728,11 @@ function Leaderboard(props: {
activeModel: string | undefined activeModel: string | undefined
onActiveModelChange: (model: string | undefined) => void onActiveModelChange: (model: string | undefined) => void
}) { }) {
const i18n = useI18n()
const featured = createMemo(() => props.data.slice(0, 3)) const featured = createMemo(() => props.data.slice(0, 3))
const compact = createMemo(() => props.data.slice(3)) const compact = createMemo(() => props.data.slice(3))
return ( return (
<div id="leaderboard" data-component="leaderboard" role="list" aria-label={i18n.t("chart.leaderboardAria")}> <div id="leaderboard" data-component="leaderboard">
<div data-slot="leaderboard-featured"> <div data-slot="leaderboard-featured">
<For each={featured()}> <For each={featured()}>
{(entry) => ( {(entry) => (
@@ -766,7 +758,7 @@ function Leaderboard(props: {
)} )}
</For> </For>
</div> </div>
<div data-slot="leaderboard-mobile" aria-label={i18n.t("chart.scrollableLeaderboardAria")}> <div data-slot="leaderboard-mobile">
<For each={props.data}> <For each={props.data}>
{(entry) => ( {(entry) => (
<LeaderboardCard <LeaderboardCard
@@ -798,9 +790,6 @@ function LeaderboardCard(props: {
href={language.route( href={language.route(
`${import.meta.env.BASE_URL}${modelSlug(props.entry.provider)}/${modelSlug(props.entry.model)}`, `${import.meta.env.BASE_URL}${modelSlug(props.entry.provider)}/${modelSlug(props.entry.model)}`,
)} )}
role="listitem"
tabIndex={0}
aria-label={`${String(props.entry.rank).padStart(2, "0")} ${props.entry.model} ${i18n.t("chart.byAuthor", { author: props.entry.author })}`}
onPointerEnter={() => props.onActiveModelChange(props.entry.model)} onPointerEnter={() => props.onActiveModelChange(props.entry.model)}
onPointerLeave={(event) => { onPointerLeave={(event) => {
if (event.pointerType === "touch") return if (event.pointerType === "touch") return
@@ -956,6 +945,7 @@ function MarketShare(props: {
{(day, index) => ( {(day, index) => (
<button <button
type="button" type="button"
aria-label={`${day.date} ${formatTrillions(day.total)}`}
data-active={props.inspecting && props.activeIndex === index() ? "true" : undefined} data-active={props.inspecting && props.activeIndex === index() ? "true" : undefined}
data-label-hidden={isColumnLabelHidden(index(), props.data.length) ? "true" : undefined} data-label-hidden={isColumnLabelHidden(index(), props.data.length) ? "true" : undefined}
data-mobile-hidden={isMarketMobileLabelHidden(index(), props.data.length) ? "true" : undefined} data-mobile-hidden={isMarketMobileLabelHidden(index(), props.data.length) ? "true" : undefined}
@@ -1031,14 +1021,11 @@ function MarketShareList(props: {
activeAuthor: string | undefined activeAuthor: string | undefined
onActiveAuthorChange: (author: string) => void onActiveAuthorChange: (author: string) => void
}) { }) {
const i18n = useI18n()
const language = useLanguage() const language = useLanguage()
return ( return (
<ol data-component="market-share-list"> <ol data-component="market-share-list">
<For each={props.data}> <For each={props.data}>
{(item, index) => { {(item, index) => {
const label = () =>
`${item.author} ${formatTrillions(item.tokens)} ${item.share.toFixed(1)} ${i18n.t("chart.percent")}`
const content = () => ( const content = () => (
<> <>
<span>{String(index() + 1).padStart(2, "0")}</span> <span>{String(index() + 1).padStart(2, "0")}</span>
@@ -1060,7 +1047,6 @@ function MarketShareList(props: {
fallback={ fallback={
<button <button
type="button" type="button"
aria-label={label()}
onClick={() => props.onActiveAuthorChange(item.author)} onClick={() => props.onActiveAuthorChange(item.author)}
onFocus={() => props.onActiveAuthorChange(item.author)} onFocus={() => props.onActiveAuthorChange(item.author)}
> >
@@ -1071,7 +1057,6 @@ function MarketShareList(props: {
{(href) => ( {(href) => (
<a <a
href={href()} href={href()}
aria-label={label()}
onClick={() => props.onActiveAuthorChange(item.author)} onClick={() => props.onActiveAuthorChange(item.author)}
onFocus={() => props.onActiveAuthorChange(item.author)} onFocus={() => props.onActiveAuthorChange(item.author)}
> >
@@ -1259,7 +1244,6 @@ function GeoCountryList(props: {
type="button" type="button"
data-active={props.activeCountry === country.country ? "true" : undefined} data-active={props.activeCountry === country.country ? "true" : undefined}
style={{ "--geo-row-opacity": String(opacityScale()(country.tokens)) } as JSX.CSSProperties} style={{ "--geo-row-opacity": String(opacityScale()(country.tokens)) } as JSX.CSSProperties}
aria-label={`${formatCountryName(country.country, language.tag(language.locale()), i18n.t("home.unknown"))} ${formatGeoTokens(country.tokens)} ${formatGeoShare(country.share)}`}
onClick={() => props.onActiveCountryChange(country.country)} onClick={() => props.onActiveCountryChange(country.country)}
onPointerEnter={() => props.onActiveCountryChange(country.country)} onPointerEnter={() => props.onActiveCountryChange(country.country)}
onFocus={() => props.onActiveCountryChange(country.country)} onFocus={() => props.onActiveCountryChange(country.country)}
packages/stats/app/vite.config.ts
+2 -1
View File
@@ -18,6 +18,7 @@ export default defineConfig({
allowedHosts: true, allowedHosts: true,
}, },
build: { build: {
minify: false, minify: "esbuild",
cssMinify: true,
}, },
}) })