Skip to content

Commit 37a654c

Browse files
atharvasatharvas
committed
update
1 parent 1bd2edb commit 37a654c

9 files changed

Lines changed: 242 additions & 66 deletions

File tree

‎src/components/AgentCard.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import ScrollHisto from "$components/ScrollHisto.svelte";
33
import Scatter from "$components/Scatter.svelte";
4-
import { navAgent, agentStats, agentAdvantageByAgent, thresholdAgentNum, thresholdOracleNum } from "$stores/misc.js";
4+
import { navAgent, agentStats, overallAgentAdvantage, thresholdAgentNum, thresholdOracleNum } from "$stores/misc.js";
55
import inView from "$actions/inView.js";
66
import { format } from "d3-format";
77
import { formatAgentDisplayName } from "$utils/benchmarkData.js";
@@ -18,7 +18,7 @@
1818
1919
// Calculate agent statistics
2020
$: stats = $agentStats[agent];
21-
$: agentAdvantageValue = $agentAdvantageByAgent[agent] || 0;
21+
$: agentAdvantageValue = $overallAgentAdvantage?.[agent] ?? 0;
2222
$: summaryBullets = stats ? [
2323
`Median agent speedup: ${(stats.medianAgentNop || 0).toFixed(2)}× (target ${$thresholdAgentNum.toFixed(2)}×)`,
2424
`Median oracle speedup: ${(stats.medianOracleNop || 0).toFixed(2)}× (target ${$thresholdOracleNum.toFixed(2)}×)`,

‎src/components/Filters.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@
226226
bind:selected={selectedLevel}
227227
options={levelOptions}
228228
valType = "level"
229-
placeholder="All levels"
229+
placeholder="None"
230230
maxSelect={1}
231231
ariaLabel="select aggregation level"
232232
>

‎src/components/Footer.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
const relatedWorkText = relatedWorkConfig.text ?? "";
1818
const showRelatedWork = relatedWorkConfig.show !== false && Boolean(relatedWorkText);
1919
20+
// Funding configuration
21+
const fundingConfig = paperFooter.funding || {};
22+
const fundingTitle = fundingConfig.title ?? "Funding";
23+
const fundingDescription = fundingConfig.description ?? "";
24+
const showFunding = fundingConfig.show !== false && Boolean(fundingDescription);
25+
2026
// Acknowledgements configuration
2127
const acknowledgementsConfig = paperFooter.acknowledgements || {};
2228
const acknowledgementsTitle = acknowledgementsConfig.title ?? "Acknowledgements";
@@ -43,6 +49,13 @@
4349
</div>
4450
</section>
4551
{/if}
52+
53+
{#if showFunding && fundingDescription}
54+
<section class="paper-section funding-section">
55+
<h3 class="paper-section-title">{fundingTitle}</h3>
56+
<p class="paper-section-text">{@html fundingDescription}</p>
57+
</section>
58+
{/if}
4659
</div>
4760
4861
<!-- Acknowledgements as footer -->
@@ -155,6 +168,18 @@
155168
text-align: justify;
156169
}
157170
171+
.paper-section-text :global(a) {
172+
color: var(--wine-gold);
173+
text-decoration: none;
174+
font-weight: 600;
175+
}
176+
177+
.paper-section-text :global(a:hover),
178+
.paper-section-text :global(a:focus-visible) {
179+
color: var(--wine-dark-gold);
180+
text-decoration: underline;
181+
}
182+
158183
/* Footer-style Acknowledgements */
159184
.footer-acknowledgements {
160185
margin-top: 3rem;

‎src/components/PaperHeader.svelte‎

Lines changed: 66 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import { getContext } from "svelte";
33
import Icon from "$components/helpers/Icon.svelte";
4+
import leaderboardData from "$data/leaderboard.json";
45
56
const copy = getContext("copy") || {};
67
const headerCopy = copy.paperHeader || {};
@@ -55,8 +56,8 @@
5556
: defaultAbstractParagraphs;
5657
5758
// Hardcoded leaderboard data matching main Leaderboard.svelte structure
58-
const leaderboardTitle = "Leaderboard Snapshot";
59-
const leaderboardDescription = "This leaderboard displays the agent advantage scores by aggregation level. Higher scores indicate better performance relative to the oracle.";
59+
const leaderboardTitle = headerCopy.leaderboard.title;
60+
const leaderboardDescription = headerCopy.leaderboard.description;
6061
6162
// Level display labels - matching main Leaderboard
6263
const LEVEL_DISPLAY_LABELS = {
@@ -71,40 +72,17 @@
7172
const levels = ["param-level", "func-level", "class-level", "module-level"];
7273
7374
// Hardcoded table data - example data, replace with actual values
74-
const tableData = [
75-
{
76-
displayName: "GPT-5",
77-
levels: {
78-
"param-level": 0.15,
79-
"func-level": 0.12,
80-
"class-level": 0.08,
81-
"module-level": 0.05,
82-
},
83-
overall: 0.10
84-
},
85-
{
86-
displayName: "Claude Sonnet 4.0",
87-
levels: {
88-
"param-level": 0.13,
89-
"func-level": 0.10,
90-
"class-level": 0.06,
91-
"module-level": 0.03,
92-
},
93-
overall: 0.08
94-
},
95-
{
96-
displayName: "Oracle (Human)",
97-
levels: {
98-
"param-level": 0.25,
99-
"func-level": 0.22,
100-
"class-level": 0.18,
101-
"module-level": 0.15,
102-
},
103-
overall: 0.20
104-
}
105-
];
75+
const tableData = Array.isArray(leaderboardData?.tableData) ? leaderboardData.tableData : [];
10676
10777
const hero = headerCopy.hero || {};
78+
const heroCommand = typeof hero.command === "string" ? hero.command.trim() : "";
79+
const hasHeroContent = Boolean(
80+
hero?.eyebrow ||
81+
hero?.instructions ||
82+
heroCommand ||
83+
hero?.body ||
84+
(hero?.cta && hero.cta.label)
85+
);
10886
10987
// Helper functions matching main Leaderboard.svelte
11088
function formatAdvantage(value) {
@@ -222,13 +200,20 @@
222200
</div>
223201
{/if}
224202
225-
{#if hero?.title}
203+
{#if hasHeroContent}
226204
<div class="paper-hero">
227205
{#if hero.eyebrow}<p class="hero-eyebrow">{hero.eyebrow}</p>{/if}
228-
<h3>{hero.title}</h3>
229-
{#if hero.body}<p class="hero-body">{hero.body}</p>{/if}
230-
{#if hero.cta?.label}
231-
<a class="hero-cta" href={hero.cta.href ?? "#"}>{hero.cta.label}</a>
206+
{#if hero.instructions}
207+
<p class="hero-instructions">{@html hero.instructions}</p>
208+
{/if}
209+
{#if heroCommand}
210+
<div class="hero-command">
211+
<pre class="hero-command__code" tabindex="0"><code>{heroCommand}</code></pre>
212+
</div>
213+
{/if}
214+
{#if hero.body}<p class="hero-body">{hero.body}</p>{/if}
215+
{#if hero.cta?.label}
216+
<a class="hero-cta" href={hero.cta.href ?? "#"}>{hero.cta.label}</a>
232217
{/if}
233218
</div>
234219
{/if}
@@ -492,6 +477,9 @@
492477
border-radius: 8px;
493478
background: rgba(24, 26, 31, 0.5);
494479
border: 1px solid var(--wine-dark-gray);
480+
display: flex;
481+
flex-direction: column;
482+
gap: 1.25rem;
495483
text-align: center;
496484
}
497485
@@ -500,24 +488,53 @@
500488
font-size: var(--12px);
501489
letter-spacing: 0.08em;
502490
text-transform: uppercase;
503-
margin: 0 0 0.75rem;
491+
margin: 0 auto;
504492
color: var(--wine-dark-tan);
505493
}
506494
507-
.paper-hero h3 {
508-
margin: 0 0 1rem;
509-
font-size: var(--28px);
495+
.hero-instructions {
496+
margin: 0 auto;
510497
color: var(--wine-tan);
498+
font-size: var(--16px);
499+
line-height: 1.6;
500+
max-width: 620px;
511501
}
512502
513503
.hero-body {
514-
margin: 0 auto 1.5rem;
504+
margin: 0 auto;
515505
max-width: 640px;
516506
color: var(--wine-tan);
517507
font-size: var(--18px);
518508
line-height: 1.65;
519509
}
520510
511+
.hero-instructions :global(a) {
512+
color: var(--wine-gold);
513+
text-decoration: none;
514+
font-weight: 600;
515+
}
516+
517+
.hero-instructions :global(a:hover),
518+
.hero-instructions :global(a:focus-visible) {
519+
color: var(--wine-dark-gold);
520+
text-decoration: underline;
521+
}
522+
/* hero instructions > a href color should be gold */
523+
.hero-instructions a {
524+
color: var(--wine-gold);
525+
text-decoration: none;
526+
transition: color 0.2s ease;
527+
}
528+
529+
.hero-command {
530+
background: rgba(5, 5, 5, 0.45);
531+
border: 1px solid rgba(207, 202, 191, 0.2);
532+
border-radius: 10px;
533+
padding: 1.25rem 1.5rem;
534+
font-family: var(--mono);
535+
}
536+
537+
521538
.hero-cta {
522539
display: inline-flex;
523540
align-items: center;
@@ -602,6 +619,11 @@
602619
.paper-hero {
603620
padding: 2rem 1.25rem;
604621
}
622+
623+
.hero-command {
624+
padding: 1.5rem 1rem;
625+
}
626+
605627
}
606628
607629
@media (max-width: 480px) {
@@ -645,10 +667,6 @@
645667
font-size: var(--12px);
646668
}
647669
648-
.paper-hero h3 {
649-
font-size: var(--22px);
650-
}
651-
652670
.hero-body {
653671
font-size: var(--16px);
654672
}

‎src/components/layercake/Scatter.svg.svelte‎

Lines changed: 64 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { getContext, onMount } from "svelte";
3-
import { line } from 'd3-shape';
3+
import { line, area } from 'd3-shape';
44
import { thresholdAgentNum, thresholdOracleNum } from "$stores/misc.js";
55
66
const { data, xGet, yGet, xScale, yScale, width, height, padding, xDomain, yDomain } = getContext("LayerCake");
@@ -57,25 +57,69 @@
5757
return [uniq[0], uniq[uniq.length - 1]];
5858
})();
5959
60+
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
61+
6062
// UPDATED: build the path from the extended endpoints
6163
$: equalLinePath = extendedGuideLine
6264
? line()
6365
.x(d => $xScale(d[0]))
6466
.y(d => $yScale(d[1]))
6567
(extendedGuideLine)
6668
: null;
69+
70+
$: shadedAreaPath = (() => {
71+
if (!$xDomain || !$yDomain) return null;
72+
73+
const [xMin, xMax] = $xDomain;
74+
const [yMin, yMax] = $yDomain;
75+
if (!Number.isFinite(xMin) || !Number.isFinite(xMax) || xMax <= xMin) return null;
76+
if (!Number.isFinite(yMin) || !Number.isFinite(yMax) || yMax <= yMin) return null;
77+
78+
const agentThreshold = Number($thresholdAgentNum);
79+
const oracleThreshold = Number($thresholdOracleNum);
80+
if (!Number.isFinite(agentThreshold) || !Number.isFinite(oracleThreshold)) return null;
81+
82+
const xStart = clamp(agentThreshold, xMin, xMax);
83+
if (xStart >= xMax) return null;
84+
85+
if (Math.abs(agentThreshold) < 1e-6) return null; // vertical red line => undefined "under" region
86+
87+
const slope = oracleThreshold / agentThreshold;
88+
if (!Number.isFinite(slope) || slope < 0) return null;
89+
90+
const steps = 40;
91+
const dx = (xMax - xStart) / steps;
92+
const points = [];
93+
let hasArea = false;
94+
95+
for (let i = 0; i <= steps; i++) {
96+
const xVal = xStart + dx * i;
97+
const rawY = slope * xVal;
98+
const clampedY = clamp(rawY, yMin, yMax);
99+
if (clampedY > yMin + 1e-6) {
100+
hasArea = true;
101+
}
102+
points.push({ x: xVal, y: clampedY });
103+
}
104+
105+
if (!hasArea) return null;
106+
107+
const shadedArea = area()
108+
.x(d => $xScale(d.x))
109+
.y0(() => $yScale(yMin))
110+
.y1(d => $yScale(d.y));
111+
112+
return shadedArea(points);
113+
})();
67114
</script>
68115

69116
<g class="median-markings">
70-
<rect
71-
class="highlight-quadrant"
72-
x={$xScale($thresholdAgentNum)}
73-
y={$yScale($thresholdOracleNum)}
74-
width={$width - $xScale($thresholdAgentNum)}
75-
height={$height - $yScale($thresholdOracleNum)}
76-
fill="#363B45"
77-
opacity=0.3
78-
/>
117+
{#if shadedAreaPath}
118+
<path
119+
class="highlight-region"
120+
d={shadedAreaPath}
121+
/>
122+
{/if}
79123
</g>
80124
<g class="card-benchmark-circle">
81125
{#each $data[0] as d, i}
@@ -104,12 +148,19 @@
104148
}
105149
.equal-advantage-line {
106150
stroke-width: 2;
107-
stroke: var(--wine-red);
151+
stroke: var(--wine-tan);
108152
fill: none;
109153
}
110154
111-
.oracleAVG, .agentAVG {
112-
stroke-width: 2;
155+
.oracleAVG,
156+
.agentAVG {
157+
stroke-width: 1;
113158
stroke: var(--wine-tan);
159+
stroke-dasharray: 4 4;
160+
}
161+
162+
.highlight-region {
163+
fill: #363B45;
164+
opacity: 0.3;
114165
}
115166
</style>

‎src/data/copy.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)