Skip to content

feat(perf-spa): Add Overview section with totals per target #1330

@fasterthanlime

Description

@fasterthanlime

Summary

Add an "Overview" tab or section to the perf.facet.rs SPA that displays aggregate totals per target across all benchmarks. Currently, the index page only shows the headline speedup ratio (facet-format+jit vs serde_json), but doesn't provide visibility into:

  • How each facet implementation compares in absolute terms
  • Total instruction counts for all targets (not just the two used in the headline)
  • Breakdown by benchmark group (micro/synthetic/realistic)

Motivation

Users visiting perf.facet.rs want to quickly understand:

  1. "How does facet compare to serde overall?" - answered by current headline
  2. "How do the different facet implementations compare to each other?" - not currently visible
  3. "Which benchmark category contributes most to the totals?" - not currently visible

Proposed Feature

Overview Section Design

Display a summary table/card showing totals for each target:

Target Instructions (deser) vs serde Instructions (ser) vs serde
serde_json 207M 156M
facet-format+jit 690M 0.30×
facet-format ~800M 0.26×
facet-json ~1.2B 0.17× 420M 0.37×

Additional Dimensions (optional)

  • By group: Show subtotals for micro/synthetic/realistic benchmark categories
  • By metric: Allow switching between instructions, time, cycles, etc.
  • Trend: Show how totals changed vs baseline (like commit deltas do now)

Technical Notes

Data Already Available

The index already pre-computes serde_sum and facet_sum in baseline.headline and per-commit summaries. For the full Overview feature:

  1. Option A (backend): Extend index-v2.json to include totals for all targets, not just headline
  2. Option B (frontend): Compute totals client-side from run.json (already has complete data at results.values[benchmark][operation][target][metric])

Key Files

  • /scripts/app.js - SPA source (IndexPage, ReportPage components)
  • /scripts/shared-styles.css - Styling
  • Index generation in cargo xtask bench --index

Related Data Structures

From run.json:

// 4 targets available
catalog.targets: { serde_json, facet_format_jit, facet_format, facet_json }

// Results structure
results.values[benchmark][operation][target][metric] = value
// e.g., results.values["twitter"]["deserialize"]["serde_json"]["instructions"] = 12345678

Alternatives Considered

  1. Just improve existing baseline banner - Less work but doesn't show all targets
  2. Add to individual benchmark views only - Already have per-benchmark comparison, need aggregate view
  3. Separate dashboard page - More complex, Overview section on index page is simpler

Acceptance Criteria

  • Overview section visible on index page (or as a tab)
  • Shows total instructions for all 4 targets
  • Shows ratio vs serde baseline for each facet target
  • Works with existing metric/operation toggle patterns

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions