explore.astro (1528B)
1 --- 2 import Base from "../layouts/Base.astro"; 3 import { loadAllRuns, projectRunForIndex } from "../lib/data"; 4 import HeatmapMatrix from "../components/HeatmapMatrix"; 5 import RadarComparison from "../components/RadarComparison"; 6 import BumpChart from "../components/BumpChart"; 7 import ConfigTreemap from "../components/ConfigTreemap"; 8 import EfficiencyFrontier from "../components/EfficiencyFrontier"; 9 import CorrelationMatrix from "../components/CorrelationMatrix"; 10 11 const runs = loadAllRuns(); 12 13 // Project down to the fields these islands actually read, avoiding repeated 14 // serialization of large eval_results payloads into the page HTML. 15 const slimRuns = runs.map(projectRunForIndex); 16 --- 17 18 <Base title="Explore"> 19 <h1 style="margin-bottom: 8px;">Explore</h1> 20 <p style="color: var(--text-muted); margin-bottom: 32px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;"> 21 Interactive visualizations of the experiment space 22 </p> 23 24 <div style="display: flex; flex-direction: column; gap: 32px;"> 25 <CorrelationMatrix client:load runs={slimRuns} /> 26 27 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;"> 28 <EfficiencyFrontier client:load runs={slimRuns} /> 29 <BumpChart client:load runs={slimRuns} /> 30 </div> 31 32 <HeatmapMatrix client:load runs={slimRuns} /> 33 34 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;"> 35 <RadarComparison client:load runs={slimRuns} /> 36 <ConfigTreemap client:load runs={slimRuns} /> 37 </div> 38 </div> 39 </Base>