[claude] benchmarks-website-v3: web UI (landing + chart pages)

_typos.toml

@@ -8,7 +8,7 @@ extend-ignore-re = [
 ]
 
 [files]
-extend-exclude = ["/vortex-bench/**", "/docs/references.bib", "benchmarks/**", "vortex-sqllogictest/slt/**", "encodings/fsst/src/dfa/tests.rs", "encodings/fsst/src/dfa/flat_contains.rs"]
+extend-exclude = ["/vortex-bench/**", "/docs/references.bib", "benchmarks/**", "vortex-sqllogictest/slt/**", "encodings/fsst/src/dfa/tests.rs", "encodings/fsst/src/dfa/flat_contains.rs", "benchmarks-website/server/static/**"]
 
 [type.py]
 extend-ignore-identifiers-re = [

benchmarks-website/server/Cargo.toml

@@ -40,6 +40,7 @@ tracing-subscriber = { workspace = true, features = ["env-filter", "fmt"] }
 twox-hash = "2.1"
 
 [dev-dependencies]
+insta = { workspace = true }
 reqwest = { workspace = true, features = ["json"] }
 tempfile = { workspace = true }
 tokio = { workspace = true, features = ["rt-multi-thread", "macros", "net"] }

benchmarks-website/server/src/api.rs

@@ -131,7 +131,9 @@ fn collect_health(conn: &Connection, db_path: String) -> Result<HealthResponse>
     })
 }
 
-fn collect_groups(conn: &Connection) -> Result<Vec<Group>> {
+/// Collect every group + chart link derivable from the data. Used by both
+/// `GET /api/groups` and the HTML landing page.
+pub(crate) fn collect_groups(conn: &Connection) -> Result<Vec<Group>> {
     let mut groups: Vec<Group> = Vec::new();
 
     let qm_groups = collect_query_groups(conn).context("collect_query_groups")?;
@@ -391,7 +393,9 @@ fn collect_vector_search_groups(conn: &Connection) -> Result<Vec<Group>> {
     Ok(groups)
 }
 
-fn collect_chart(conn: &Connection, key: &ChartKey) -> Result<Option<ChartResponse>> {
+/// Collect the data for one chart by key. Used by both `GET /api/chart/:slug`
+/// and the HTML chart page.
+pub(crate) fn collect_chart(conn: &Connection, key: &ChartKey) -> Result<Option<ChartResponse>> {
     match key {
         ChartKey::QueryMeasurement {
             dataset,

benchmarks-website/server/src/html.rs

@@ -1,47 +1,260 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
-//! HTML routes.
+//! HTML routes for the bench.vortex.dev v3 alpha web UI.
 //!
-//! The web-ui component owns the actual landing-page and chart-page templates.
-//! At alpha this module exposes a single placeholder route so the server can
-//! be exercised end-to-end before web-ui lands; the web-ui PR replaces
-//! [`router`] with the real Maud templates.
+//! Two pages:
+//! - `GET /` — landing page listing every group + chart derived from the
+//!   current data.
+//! - `GET /chart/{slug}` — single Chart.js line chart, payload fetched
+//!   server-side and embedded inline as a JSON `<script>` block so there is
+//!   no client-side round-trip after page load.
+//!
+//! Slugs are opaque strings the server received from `/api/groups`; the
+//! handler echoes them straight into [`crate::slug::ChartKey::from_slug`]
+//! without parsing.
+//!
+//! Static assets (Chart.js + CSS + the small hydration script) are served
+//! from `/static/...` via [`include_bytes!`] so the binary is fully
+//! self-contained.
 
 use axum::Router;
+use axum::extract::Path;
+use axum::extract::State;
+use axum::http::StatusCode;
+use axum::http::header;
+use axum::response::IntoResponse;
+use axum::response::Response;
 use axum::routing::get;
 use maud::DOCTYPE;
 use maud::Markup;
+use maud::PreEscaped;
 use maud::html;
 
+use crate::api;
+use crate::api::ChartResponse;
+use crate::api::Group;
 use crate::app::AppState;
+use crate::db;
+use crate::slug::ChartKey;
 
-/// HTML routes mounted under `/`. Replaced by the web-ui component.
+const CHART_JS: &[u8] = include_bytes!("../static/chart.umd.js");
+const CHART_INIT_JS: &[u8] = include_bytes!("../static/chart-init.js");
+const STYLE_CSS: &[u8] = include_bytes!("../static/style.css");
+
+/// HTML routes mounted under `/`.
 pub fn router() -> Router<AppState> {
-    Router::new().route("/", get(placeholder))
+    Router::new()
+        .route("/", get(landing))
+        .route("/chart/{slug}", get(chart_page))
+        .route("/static/chart.umd.js", get(serve_chart_js))
+        .route("/static/chart-init.js", get(serve_chart_init_js))
+        .route("/static/style.css", get(serve_style_css))
+}
+
+async fn landing(State(state): State<AppState>) -> Response {
+    let groups = match db::run_blocking(&state.db, |conn| api::collect_groups(conn)).await {
+        Ok(g) => g,
+        Err(err) => {
+            tracing::error!(error = ?err, "landing: collect_groups failed");
+            return error_page(StatusCode::INTERNAL_SERVER_ERROR, "internal error").into_response();
+        }
+    };
+    render_page(
+        "bench.vortex.dev",
+        "Vortex benchmarks (v3 alpha)",
+        landing_body(&groups),
+        PageScripts::None,
+    )
+    .into_response()
+}
+
+async fn chart_page(State(state): State<AppState>, Path(slug): Path<String>) -> Response {
+    let key = match ChartKey::from_slug(&slug) {
+        Ok(key) => key,
+        Err(err) => {
+            tracing::warn!(error = ?err, slug, "chart_page: invalid slug");
+            return error_page(StatusCode::NOT_FOUND, "chart not found").into_response();
+        }
+    };
+
+    let result = db::run_blocking(&state.db, move |conn| api::collect_chart(conn, &key)).await;
+    let chart = match result {
+        Ok(Some(c)) => c,
+        Ok(None) => return error_page(StatusCode::NOT_FOUND, "chart not found").into_response(),
+        Err(err) => {
+            tracing::error!(error = ?err, "chart_page: collect_chart failed");
+            return error_page(StatusCode::INTERNAL_SERVER_ERROR, "internal error").into_response();
+        }
+    };
+
+    let payload_json = match serde_json::to_string(&chart) {
+        Ok(s) => s,
+        Err(err) => {
+            tracing::error!(error = ?err, "chart_page: serialize failed");
+            return error_page(StatusCode::INTERNAL_SERVER_ERROR, "internal error").into_response();
+        }
+    };
+
+    let title = format!("{} — bench.vortex.dev", chart.display_name);
+    render_page(
+        &title,
+        &chart.display_name,
+        chart_body(&chart, &payload_json),
+        PageScripts::Chart,
+    )
+    .into_response()
+}
+
+/// Which scripts the page wants pulled in.
+enum PageScripts {
+    None,
+    Chart,
+}
+
+fn render_page(title: &str, header_subtitle: &str, body: Markup, scripts: PageScripts) -> Markup {
+    html! {
+        (DOCTYPE)
+        html lang="en" {
+            head {
+                meta charset="utf-8";
+                meta name="viewport" content="width=device-width, initial-scale=1";
+                title { (title) }
+                link rel="stylesheet" href="/static/style.css";
+            }
+            body {
+                header.page-header {
+                    h1 { a href="/" { "bench.vortex.dev" } }
+                    p.subtitle { (header_subtitle) }
+                }
+                main { (body) }
+                @match scripts {
+                    PageScripts::None => {},
+                    PageScripts::Chart => {
+                        script src="/static/chart.umd.js" defer {}
+                        script src="/static/chart-init.js" defer {}
+                    },
+                }
+            }
+        }
+    }
+}
+
+fn landing_body(groups: &[Group]) -> Markup {
+    html! {
+        @if groups.is_empty() {
+            p.empty { "No data ingested yet." }
+        } @else {
+            @for group in groups {
+                section.group {
+                    h2 { (group.name) }
+                    ul.charts {
+                        @for chart in &group.charts {
+                            li {
+                                a href={ "/chart/" (chart.slug) } { (chart.name) }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
-async fn placeholder() -> Markup {
+fn chart_body(chart: &ChartResponse, payload_json: &str) -> Markup {
+    let series_count = chart.series.len();
+    let commit_count = chart.commits.len();
     html! {
+        p.chart-meta {
+            "unit: " code { (chart.unit) }
+            " · "
+            (series_count) " series · "
+            (commit_count) " commit" @if commit_count != 1 { "s" }
+        }
+        div.chart-wrap {
+            canvas id="chart" {}
+        }
+        // Embedded JSON; rendered as text content so JSON `<` / `>` are HTML-escaped.
+        script id="chart-data" type="application/json" { (PreEscaped(escape_json_for_script(payload_json))) }
+        noscript {
+            p.no-script { "JavaScript is required to render the chart." }
+        }
+    }
+}
+
+/// Make a JSON string safe to embed inside a `<script>` element.
+///
+/// HTML parsers terminate `<script>` early on a literal `</`. Replacing the
+/// `/` with its escaped form keeps the JSON valid while neutering the
+/// terminator. `<!--` is similarly neutralised.
+fn escape_json_for_script(s: &str) -> String {
+    s.replace("</", r"<\/")
+        .replace("<!--", r"<\!--")
+        .replace("<script", r"<\script")
+}
+
+fn error_page(status: StatusCode, message: &str) -> Response {
+    let body = html! {
         (DOCTYPE)
         html lang="en" {
             head {
                 meta charset="utf-8";
-                title { "bench.vortex.dev (v3 alpha)" }
+                title { (status.as_u16()) " — bench.vortex.dev" }
+                link rel="stylesheet" href="/static/style.css";
             }
             body {
-                h1 { "bench.vortex.dev (v3 alpha)" }
-                p {
-                    "Server is up. The landing page and chart page land with "
-                    "the web-ui PR."
+                header.page-header {
+                    h1 { a href="/" { "bench.vortex.dev" } }
+                    p.subtitle { (status.as_u16()) " " (status.canonical_reason().unwrap_or("")) }
                 }
-                ul {
-                    li { code { "GET /api/groups" } }
-                    li { code { "GET /api/chart/{slug}" } }
-                    li { code { "GET /health" } }
-                    li { code { "POST /api/ingest" } " (bearer auth)" }
+                main {
+                    p.empty { (message) }
                 }
             }
         }
+    };
+    (status, body).into_response()
+}
+
+async fn serve_chart_js() -> impl IntoResponse {
+    static_response(CHART_JS, "application/javascript; charset=utf-8")
+}
+
+async fn serve_chart_init_js() -> impl IntoResponse {
+    static_response(CHART_INIT_JS, "application/javascript; charset=utf-8")
+}
+
+async fn serve_style_css() -> impl IntoResponse {
+    static_response(STYLE_CSS, "text/css; charset=utf-8")
+}
+
+fn static_response(bytes: &'static [u8], content_type: &'static str) -> Response {
+    (
+        [
+            (header::CONTENT_TYPE, content_type),
+            (header::CACHE_CONTROL, "public, max-age=3600"),
+        ],
+        bytes,
+    )
+        .into_response()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn escape_json_neutralises_script_terminators() {
+        let input = r#"{"x":"</script><script>alert(1)</script>"}"#;
+        let out = escape_json_for_script(input);
+        assert!(!out.contains("</script"));
+        assert!(!out.contains("<script"));
+        assert!(out.contains(r"<\/script"));
+    }
+
+    #[test]
+    fn escape_json_passes_through_safe_strings() {
+        let s = r#"{"a":1,"b":"hello"}"#;
+        assert_eq!(escape_json_for_script(s), s);
     }
 }

benchmarks-website/server/static/CHART_JS_LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2024 Chart.js Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.