Reports: the timeline, play, compare, and the frame interface 95b525b0b977

  /* Report frames ask for runs (#127, RP4): report.run() is the run on

     screen, report.history(dataset) that file of data/ across the runs,

     oldest first. Answered only to the frame itself, from the files of

     this report's own runs. */

  if (frames.length) window.addEventListener("message", function (e) {

    frames.forEach(function (f) {

      if (e.source !== f.contentWindow) return;

      var ask = e.data && e.data.oxygenhubAsk;

      if (!ask) return;

      var runs = []; try { runs = JSON.parse(f.dataset.reportRuns || "[]"); } catch (_) {}

      var current = Number(f.dataset.reportCurrent);

      var reply = function (body) { f.contentWindow.postMessage({ oxygenhubAnswer: { n: ask.n, value: body.value, error: body.error } }, "*"); };

      var meta = function (r) { return { run: r.run, bookmark: r.bookmark, created_ms: r.created_ms, summary: r.summary, current: r.id === current }; };

      if (ask.what === "run") {

        var r = runs.filter(function (x) { return x.id === current; })[0];

        reply({ value: r ? meta(r) : null });

      } else if (ask.what === "history" && typeof ask.dataset === "string" && /^[A-Za-z0-9._+-]+(\/[A-Za-z0-9._+-]+)*$/.test(ask.dataset)) {

        Promise.all(runs.map(function (r) {

          return fetch(r.files + "/data/" + ask.dataset).then(function (res) { return res.ok ? res.text() : null; }).catch(function () { return null; })

            .then(function (text) { var m = meta(r); m.text = text; return m; });

        })).then(function (all) { reply({ value: all.filter(function (x) { return x.text !== null; }) }); });

      } else {

        reply({ error: "ask for run, or history with a file name under data/" });

      }

    });

  });

  /* The report timeline (#127, RP4): arrow keys step through the runs,

     Play steps on by itself at the chosen speed, carried in the URL. */

  var tl = document.querySelector("[data-timeline]");

  if (tl) {

    var stops = Array.prototype.slice.call(tl.querySelectorAll("[data-tl-stop]"));

    var at = stops.findIndex(function (a) { return a.classList.contains("on"); });

    var go = function (i, play) {

      if (i < 0 || i >= stops.length) return;

      var u = new URL(stops[i].href, location.href);

      if (play) u.searchParams.set("play", play); else u.searchParams.delete("play");

      location.href = u.toString();

    };

    document.addEventListener("keydown", function (e) {

      if (e.target.closest("input, select, textarea, [contenteditable]")) return;

      if (e.key === "ArrowLeft") { e.preventDefault(); go(at - 1, tl.dataset.play); }

      if (e.key === "ArrowRight") { e.preventDefault(); go(at + 1, tl.dataset.play); }

    });

    var speed = tl.querySelector("[data-tl-speed]"), button = tl.querySelector("[data-tl-play]");

    if (button) button.addEventListener("click", function () {

      if (tl.dataset.play) { go(at, null); return; }

      go(at >= stops.length - 1 ? 0 : at + 1, speed ? speed.value : "2");

    });

    if (speed) speed.addEventListener("change", function () { if (tl.dataset.play) go(at, speed.value); });

    if (tl.dataset.play) {

      var next = at + 1;

      if (next < stops.length) setTimeout(function () { go(next, tl.dataset.play); }, Number(tl.dataset.play) * 1000);

      else setTimeout(function () { go(at, null); }, Number(tl.dataset.play) * 1000);

    }

  }

  // The frame interface (RP4): report.run() is the run on screen, and

  // report.history("frames.csv") that file of data/ across the report's

  // runs on its bookmark, oldest first, each { run, created_ms, current,

  // text }. Both are promises; outside the hub there is no report object.

  var asked = 0, waiting = {};

  window.addEventListener("message", function (e) {

    var a = e.source === window.parent && e.data && e.data.oxygenhubAnswer;

    if (!a || !waiting[a.n]) return;

    var w = waiting[a.n]; delete waiting[a.n];

    if (a.error) w.reject(new Error(a.error)); else w.resolve(a.value);

  });

  var ask = function (what, dataset) {

    return new Promise(function (resolve, reject) {

      var n = ++asked;

      waiting[n] = { resolve: resolve, reject: reject };

      window.parent.postMessage({ oxygenhubAsk: { n: n, what: what, dataset: dataset } }, "*");

      setTimeout(function () { if (waiting[n]) { delete waiting[n]; reject(new Error("no answer from the hub")); } }, 30000);

    });

  };

  window.report = { run: function () { return ask("run"); }, history: function (dataset) { return ask("history", dataset); } };

    /// Another run of the same report to compare with, by id (#127, RP4).

    compare: Option<i64>,

    /// Playing: seconds per run, carried from stop to stop.

    play: Option<u32>,

/// A stop on the timeline: one run of the report on its bookmark.

pub struct Stop {

    pub id: i64,

    pub href: String,

    pub label: String,

    pub tip: String,

    pub current: bool,

    pub compared: bool,

}

/// A metric shown against another run.

pub struct Compared {

    pub key: String,

    pub here: String,

    pub there: String,

    pub unit: String,

    /// here − there, `+1.5`; empty when equal or missing.

    pub delta: String,

    pub trend: &'static str,

}

    /// Oldest first, the run shown marked.

    timeline: Vec<Stop>,

    /// The run compared with, its metrics against this one's, and its frame.

    compare: Option<(Report, Vec<Compared>, Option<String>)>,

    /// Seconds per run while playing.

    play: Option<u32>,

    /// The runs, oldest first, as JSON for the frame interface

    /// (`report.run()`, `report.history()`).

    runs_json: String,

            }

        })

        .collect()

}

/// The metrics of this run against another's, every key either has.

fn compared(here: &[Metric], there: &[Metric]) -> Vec<Compared> {

    let mut keys: Vec<&str> = here.iter().chain(there).map(|m| m.key.as_str()).collect();

    keys.sort();

    keys.dedup();

    keys.into_iter()

        .map(|k| {

            let (a, b) = (here.iter().find(|m| m.key == k), there.iter().find(|m| m.key == k));

            let (delta, trend) = match (a, b) {

                (Some(a), Some(b)) if (a.value - b.value).abs() > f64::EPSILON => {

                    let up = a.value > b.value;

                    let trend = match a.better.as_str() {

                        "higher" if up => "better",

                        "higher" => "worse",

                        "lower" if up => "worse",

                        "lower" => "better",

                        _ => "same",

                    };

                    (format!("{}{}", if up { "+" } else { "" }, num(a.value - b.value)), trend)

                }

                _ => (String::new(), "same"),

            };

            Compared {

                key: k.to_string(),

                here: a.map(|m| num(m.value)).unwrap_or_else(|| "–".into()),

                there: b.map(|m| num(m.value)).unwrap_or_else(|| "–".into()),

                unit: a.or(b).map(|m| m.unit.clone()).unwrap_or_default(),

                delta,

                trend,

    let base_of = |id: i64| format!("/{owner}/{name}/reports/files/{id}/{}", reports::file_mac(&app, id));

    let files_base = base_of(report.id);

    let label = |r: &Report| r.run_number.map(|n| format!("run #{n}")).unwrap_or_else(|| "upload".into());

    let page = format!("/{owner}/{name}/reports/{rname}");

    let keep = |id: i64| {

        let mut url = format!("{page}?id={id}");

        if let Some(c) = q.compare.filter(|c| *c != id) {

            url.push_str(&format!("&compare={c}"));

        }

        if let Some(p) = q.play {

            url.push_str(&format!("&play={p}"));

        }

        url

    };

    let timeline: Vec<Stop> = runs

        .iter()

        .rev()

        .map(|r| Stop {

            id: r.id,

            href: keep(r.id),

            label: label(r),

            tip: format!("{}{}", label(r), if r.summary.is_empty() { String::new() } else { format!(": {}", r.summary) }),

            current: r.id == report.id,

            compared: Some(r.id) == q.compare,

        })

        .collect();

    // Another run to compare with (RP4): every metric, both values, the

    // difference; and its page beside this one's.

    let compare = match q.compare.filter(|c| *c != report.id) {

        Some(cid) => match reports::get(&app.db, row.id, cid).await.map_err(e)?.filter(|r| r.name == rname) {

            Some(other) => {

                let theirs = reports::metrics(&app.db, other.id).await.map_err(e)?;

                let rows = compared(&now, &theirs);

                let f =

                    reports::file(&app.db, other.id, "index.html").await.map_err(e)?.map(|_| format!("{}/index.html", base_of(other.id)));

                Some((other, rows, f))

            }

            None => None,

        },

        None => None,

    };

    let runs_json = serde_json::to_string(

        &runs

            .iter()

            .rev()

            .map(|r| serde_json::json!({ "id": r.id, "run": r.run_number, "bookmark": r.bookmark, "created_ms": r.created_ms, "summary": r.summary, "files": base_of(r.id), "current": r.id == report.id }))

            .collect::<Vec<_>>(),

    )

    .unwrap_or_default();

        timeline,

        compare,

        play: q.play.map(|p| p.clamp(1, 60)),

        runs_json,

    // A second run of the report: the timeline has two stops, and the

    // first can be compared with it (RP4).

    let first: i64 = sqlx::query_scalar("SELECT id FROM reports WHERE name = 'frame-timing'").fetch_one(&h.app.db).await.unwrap();

    let second: i64 = sqlx::query_scalar(

        "INSERT INTO reports (repo_id, name, kind, title, summary, context, run_id, job_id, run_number, job, bookmark, state, manifest, files, bytes, created_ms) \

         SELECT repo_id, name, kind, title, 'Median 18.0 ms', context, run_id, NULL, 2, job, bookmark, state, manifest, files, bytes, created_ms + 1000 FROM reports WHERE id = ? RETURNING id",

    )

    .bind(first)

    .fetch_one(&h.app.db)

    .await

    .unwrap();

    sqlx::query(

        "INSERT INTO report_metrics (report_id, key, value, unit, better, fail_above) VALUES (?, 'median_ms', 18.0, 'ms', 'lower', 20)",

    )

    .bind(second)

    .execute(&h.app.db)

    .await

    .unwrap();

    let (_, page) = call(&h.app, "GET", "/andy/demo/reports/frame-timing", None, None).await;

    assert_eq!(page.matches("data-tl-stop").count(), 2, "a stop per run");

    assert!(page.contains("Median 18.0 ms"), "the newest run is shown");

    let (_, page) = call(&h.app, "GET", &format!("/andy/demo/reports/frame-timing?id={first}&compare={second}&play=3"), None, None).await;

    assert!(page.contains("This run against run #2") && page.contains("-1.6"), "every metric against the other run");

    let stop = page.split("data-tl-stop").next().unwrap_or("").rsplit("href=").next().unwrap_or("").to_string();

    assert!(page.contains("data-play=\"3\""), "playing");

    assert!(stop.contains("play") && stop.contains('3'), "playing carries on from stop to stop: {stop}");

    assert!(page.contains("data-report-runs="), "the frame interface knows the runs");

beyond this hub to load. The timeline (3) is built too: one stop per

run on the bookmark, arrow keys to step, Play at 1 to 10 s a run (carried

in the URL as `play`), Compare against any other run (`compare`) with

every metric's difference and the two pages side by side, and the frame

interface: inside the frame, `report.run()` and `report.history("file")`

answer from the hub page by postMessage, `history` reading that file of

`data/` from each run's capability URL. Retention (§3.3) and `oh report`

(4) follow.

{% if timeline.len() > 1 %}

<section class="rep-timeline" data-timeline{% if let Some(p) = play %} data-play="{{ p }}"{% endif %}>

  <div class="rep-tl-bar">

    <button type="button" class="rep-tl-btn" data-tl-play aria-label="{% if play.is_some() %}Stop playing{% else %}Play through the runs{% endif %}">{% if play.is_some() %}■ Stop{% else %}▶ Play{% endif %}</button>

    <label class="small mute">every <select data-tl-speed aria-label="Seconds per run">{% for s in [1u32, 2, 3, 5, 10] %}<option value="{{ s }}"{% if play.unwrap_or(2) == *s %} selected{% endif %}>{{ s }} s</option>{% endfor %}</select></label>

    <form class="inline small" method="get" action="{{ repo.url }}/reports/{{ report.name }}">

      <input type="hidden" name="id" value="{{ report.id }}">

      <label class="mute">compare with <select name="compare" onchange="this.form.submit()" aria-label="Run to compare with"><option value="">none</option>{% for t in timeline %}{% if !t.current %}<option value="{{ t.id }}"{% if t.compared %} selected{% endif %}>{{ t.label }}</option>{% endif %}{% endfor %}</select></label>

      <noscript><button>Compare</button></noscript>

    </form>

    <span class="small mute rep-tl-keys">← → step through runs</span>

  </div>

  <ol class="rep-tl-stops">

    {% for t in timeline %}<li><a href="{{ t.href }}" class="rep-tl-stop{% if t.current %} on{% endif %}{% if t.compared %} cmp{% endif %}" title="{{ t.tip }}"{% if t.current %} aria-current="true"{% endif %} data-tl-stop><span class="sr">{{ t.label }}</span></a></li>{% endfor %}

  </ol>

  <div class="rep-tl-ends small mute"><span>{% if let Some(f) = timeline.first() %}{{ f.label }}{% endif %}</span><span>{% if let Some(l) = timeline.last() %}{{ l.label }}{% endif %}</span></div>

</section>

{% endif %}

{% if let Some((other, rows, _)) = compare %}

<section class="panel">

  <h2 class="rep-cmp-h">This run against {% if let Some(n) = other.run_number %}run #{{ n }}{% else %}an upload{% endif %} <a class="small" href="{{ repo.url }}/reports/{{ report.name }}?id={{ report.id }}">stop comparing</a></h2>

  <table class="rep-table">

    <thead><tr><th>Metric</th><th class="num">{% if let Some(n) = report.run_number %}run #{{ n }}{% else %}this{% endif %}</th><th class="num">{% if let Some(n) = other.run_number %}run #{{ n }}{% else %}that{% endif %}</th><th class="num">Difference</th></tr></thead>

    <tbody>

    {% for c in rows %}

      <tr><td><code>{{ c.key }}</code></td><td class="num"><strong>{{ c.here }}</strong>{% if !c.unit.is_empty() %} <small class="mute">{{ c.unit }}</small>{% endif %}</td><td class="num">{{ c.there }}</td><td class="num">{% if !c.delta.is_empty() %}<span class="rep-delta {{ c.trend }}">{{ c.delta }}</span>{% else %}<span class="mute">–</span>{% endif %}</td></tr>

    {% endfor %}

    </tbody>

  </table>

</section>

{% endif %}

{% if !metrics.is_empty() && compare.is_none() %}

<section class="rep-frame-wrap{% if let Some((_, _, Some(_))) = compare %} rep-side{% endif %}">

  <iframe class="rep-frame" src="{{ src }}" sandbox="allow-scripts" referrerpolicy="no-referrer" loading="lazy" title="{{ report.title }}" data-report-runs="{{ runs_json }}" data-report-current="{{ report.id }}"></iframe>

  {% if let Some((other, _, Some(osrc))) = compare %}<iframe class="rep-frame" src="{{ osrc }}" sandbox="allow-scripts" referrerpolicy="no-referrer" loading="lazy" title="{{ report.title }}, {% if let Some(n) = other.run_number %}run #{{ n }}{% else %}upload{% endif %}" data-report-runs="{{ runs_json }}" data-report-current="{{ other.id }}"></iframe>{% endif %}

/* Reports timeline (oxygenhub#127, RP4) */

.rep-timeline { margin: 1em 0; padding: .8em 1em; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }

.rep-tl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.2em; margin-bottom: .7em; }

.rep-tl-btn { font: inherit; font-weight: 600; padding: .3em .9em; border-radius: 999px; border: 1px solid var(--acc); color: var(--acc); background: transparent; cursor: pointer; }

.rep-tl-btn:hover { background: color-mix(in srgb, var(--acc) 12%, transparent); }

.rep-tl-keys { margin-left: auto; }

.rep-tl-stops { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }

.rep-tl-stops li { flex: 1; min-width: 4px; }

.rep-tl-stop { display: block; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--acc) 22%, var(--soft)); }

.rep-tl-stop:hover { background: color-mix(in srgb, var(--acc) 55%, var(--soft)); }

.rep-tl-stop.on { background: var(--acc); height: 22px; }

.rep-tl-stop.cmp { background: var(--warn); height: 22px; }

.rep-tl-ends { display: flex; justify-content: space-between; margin-top: .3em; }

.rep-cmp-h { display: flex; align-items: baseline; gap: 1em; font-size: 1.05em; margin: 0 0 .6em; }

.rep-frame-wrap.rep-side { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }

.rep-frame-wrap.rep-side > p { grid-column: 1 / -1; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }