lepus-saga 0.3.0 → 0.3.2

data/web/assets/js/map.js

@@ -7,7 +7,8 @@ import { isLive, now as clock, onLive } from "./live.js";
 // are the stations, n is the end terminal. Tokens ride the main line ("fwd")
 // or the compensation rail beneath it ("back"). Tokens heading out of the
 // same station share up to three lanes; past SEGMENT_SHOWN the rest ride as
-// one "+N" pill.
+// one "+N" pill. Executions that finished between two polls without being
+// seen live replay their whole path quickly, in a lighter shade.
 
 const RAIL_OFFSET = 12;
 const LANES = { fwd: [0, -8, -16], back: [RAIL_OFFSET, RAIL_OFFSET + 7, RAIL_OFFSET + 14] };
@@ -16,6 +17,8 @@ const SEGMENT_SHOWN = 8;
 const CREEP_MIN = 0.1;
 const CREEP_MAX = 0.9;
 const CREEP_FRAME_MS = 66;
+const FADE_IN_MS = 150;
+const FLASH_S = 1.4;
 
 export class LineMap {
   constructor(host, { mode = "lines", label = "Saga lines" } = {}) {
@@ -24,6 +27,7 @@ export class LineMap {
     this.label = label;
     this.lines = [];
     this.tokens = new Map();
+    this.finished = new Map();
     this.width = 0;
     this.frame = null;
     this.svg = s("svg", { role: "group", "aria-label": label });
@@ -41,6 +45,7 @@ export class LineMap {
     this.offLive();
     cancelAnimationFrame(this.frame);
     clearTimeout(this.slowTimer);
+    clearTimeout(this.finishedTimer);
     this.frame = null;
   }
 
@@ -75,17 +80,52 @@ export class LineMap {
       seen.add(spec.id);
       const token = this.tokens.get(spec.id);
       if (token) {
+        // A token that stops moving leaves from where it was drawn, not from
+        // where its lane had held it back.
+        if (spec.leave && !token.leave && token.shownPos !== undefined) token.pos = token.shownPos;
         Object.assign(token, { leave: false }, spec);
       } else {
         this.tokens.set(spec.id, { pos: spec.from ?? spec.target, opacity: spec.from !== undefined && !reducedMotion.matches ? 0 : 1, ...spec });
       }
     }
     for (const [id, token] of this.tokens) {
-      if (!seen.has(id) && !token.leave) token.leave = true;
+      if (seen.has(id) || token.leave || token.replay) continue;
+      if (token.shownPos !== undefined) token.pos = token.shownPos;
+      token.leave = true;
     }
     this.wake();
   }
 
+  // Executions that started and finished between two polls. Each runs its
+  // legs ([{rail, to}], from the start terminal) in `duration` ms after
+  // `delay` ms, then ends "done" (fades out) or "stop" (flashes, then fades).
+  replay(specs) {
+    const start = performance.now();
+    for (const spec of specs) {
+      if (this.tokens.has(spec.id)) continue;
+      this.tokens.set(spec.id, {
+        id: spec.id, line: spec.line, pos: -1, target: -1, rail: "fwd", kind: "move", opacity: 0,
+        replay: { legs: spec.legs, end: spec.end, duration: spec.duration, start: start + (spec.delay || 0) }
+      });
+    }
+    this.wake();
+  }
+
+  // Notes drawn at the end of a line for `ms`: [{line, parts: [{text, tone}]}],
+  // tone being "done", "back", "stop" or "pale".
+  setFinished(notes, ms) {
+    const until = performance.now() + ms;
+    for (const note of notes) this.finished.set(note.line, { ...note, until });
+    clearTimeout(this.finishedTimer);
+    const expire = () => {
+      const now = performance.now();
+      for (const [line, note] of this.finished) if (note.until <= now) this.finished.delete(line);
+      this.drawTokens();
+      if (this.finished.size) this.finishedTimer = setTimeout(expire, Math.max(50, Math.min(...[...this.finished.values()].map((note) => note.until)) - now));
+    };
+    expire();
+  }
+
   // Replay: put one token exactly where the caller says, no animation.
   place(spec) {
     this.tokens.clear();
@@ -431,9 +471,18 @@ export class LineMap {
 
     for (const [id, token] of this.tokens) {
       if (token.fixed) continue;
+      if (token.replay) {
+        if (reduce || !this.advanceReplay(token, now, dt)) this.tokens.delete(id);
+        else busy = true;
+        continue;
+      }
       const target = this.effectiveTarget(token);
       const gap = target - token.pos;
-      if (reduce) {
+      const backward = !token.leave && Math.sign(gap) === (token.rail === "back" ? 1 : -1);
+      if (backward) {
+        // A refresh that lands a live token behind where it is waits for it
+        // to catch up rather than pulling it back.
+      } else if (reduce) {
         token.pos = target;
       } else if (Math.abs(gap) > 0.004) {
         const speed = Math.max(0.12, Math.min(3, Math.abs(gap) * 2.2));
@@ -476,6 +525,41 @@ export class LineMap {
     }
   }
 
+  // Moves a replayed token along its legs; false once it has faded out.
+  advanceReplay(token, now, dt) {
+    const replay = token.replay;
+    const elapsed = now - replay.start;
+    if (elapsed < 0) {
+      token.opacity = 0;
+      return true;
+    }
+    const total = replay.legs.reduce((sum, leg, index) => sum + Math.abs(leg.to - (index ? replay.legs[index - 1].to : -1)), 0) || 1;
+    let along = Math.min(1, elapsed / replay.duration) * total;
+    let from = -1;
+    for (const [index, leg] of replay.legs.entries()) {
+      const length = Math.abs(leg.to - from);
+      if (along <= length || index === replay.legs.length - 1) {
+        token.pos = from + Math.sign(leg.to - from) * Math.min(along, length);
+        token.rail = leg.rail;
+        token.kind = leg.rail === "back" ? "back" : "move";
+        break;
+      }
+      along -= length;
+      from = leg.to;
+    }
+    token.opacity = Math.min(1, elapsed / FADE_IN_MS);
+    if (elapsed < replay.duration) return true;
+
+    token.hold = (token.hold || 0) + dt;
+    const linger = replay.end === "stop" ? FLASH_S : 0.25;
+    if (replay.end === "stop") {
+      token.kind = "stop";
+      token.flash = true;
+    }
+    if (token.hold > linger) token.opacity = 1 - (token.hold - linger) * 2.2;
+    return token.opacity > 0;
+  }
+
   // Tokens leaving the same station on the same rail form a segment group.
   // The group shows its first SEGMENT_SHOWN tokens (stable by id) in up to
   // three lanes and folds the rest, plus any the poll did not list, into a pill.
@@ -491,7 +575,9 @@ export class LineMap {
       const geo = byLine.get(token.line);
       if (!geo) continue;
       if (token.kind === "idle" && !token.leave) continue;
-      if (token.fixed || token.leave || this.layout.single) loose.push({ token, geo });
+      if (token.replay) {
+        if (token.opacity > 0) loose.push({ token, geo });
+      } else if (token.fixed || token.leave || this.layout.single) loose.push({ token, geo });
       else group(geo, token.rail, token.target).tokens.push(token);
     }
     if (!this.layout.single && this.tokensKnown) {
@@ -533,7 +619,9 @@ export class LineMap {
       const ahead = (p) => (p.x * geo.axis.x + p.y * geo.axis.y) * dir;
       const floor = ahead(this.point(geo, target)) + 10;
       const ceiling = Math.max(floor, ahead(this.point(geo, target + dir)) - (geo.vertical ? 22 : 64));
+      const segment = Math.max(1, Math.abs(ahead(this.point(geo, target + dir)) - ahead(this.point(geo, target))));
       const candidates = shown.map((token) => {
+        token.shownPos = token.pos;
         const p = this.point(geo, token.pos);
         return { token, p, raw: ahead(p), at: Math.min(ahead(p), ceiling) };
       }).sort((a, b) => b.at - a.at);
@@ -541,19 +629,29 @@ export class LineMap {
       const placed = [];
       let folded = 0;
       for (const item of candidates) {
-        let lane = front.findIndex((at) => at - item.at >= LANE_GAP);
+        // A token keeps its lane and is never drawn behind where it was while
+        // it stays on this leg, so a newcomer never pushes it back.
+        const held = item.token.drawn;
+        const same = held && held.geo === geo && held.target === target && held.rail === rail;
+        let lane = same && front[held.lane] - item.at >= LANE_GAP ? held.lane : front.findIndex((at) => at - item.at >= LANE_GAP);
         let at = item.at;
         if (lane < 0) {
           lane = front.indexOf(Math.max(...front));
           at = front[lane] - LANE_GAP;
-          if (at < floor) {
+          if (at < floor && !same) {
             folded++;
             continue;
           }
         }
-        front[lane] = at;
+        if (same && at < held.at) {
+          at = held.at;
+          lane = held.lane;
+        }
+        item.token.drawn = { geo, target, rail, lane, at };
+        front[lane] = Math.min(front[lane], at);
         const shift = (item.raw - at) * dir;
         item.p = { x: item.p.x - geo.axis.x * shift, y: item.p.y - geo.axis.y * shift };
+        item.token.shownPos = item.token.pos - (item.raw - at) / segment * dir;
         item.lane = lane;
         placed.push(item);
       }
@@ -566,6 +664,27 @@ export class LineMap {
       }
       if (rest > 0) this.drawPill(layer, geo, rail, target, rest, hidden);
     }
+
+    for (const [name, note] of this.finished) {
+      const geo = byLine.get(name);
+      if (geo && !this.layout.single) this.drawNote(layer, geo, note);
+    }
+  }
+
+  // A "+N just finished" pill, or a summary of how executions ended, by the
+  // end terminal of the line.
+  drawNote(layer, geo, note) {
+    const text = note.parts.map((part) => part.text).join(" · ");
+    const w = Math.round(text.length * 6.6 + 18);
+    const hgt = 20;
+    const cx = geo.vertical ? geo.end.x + 26 + w / 2 : geo.end.x - 14 - w / 2;
+    const cy = geo.vertical ? geo.end.y : geo.end.y - 30;
+    const label = s("text", { class: "t-note-n", x: cx, y: cy + 4, "text-anchor": "middle" });
+    note.parts.forEach((part, index) => {
+      if (index) label.append(s("tspan", { class: "t-note-sep" }, " · "));
+      label.append(s("tspan", { class: `t-note-${part.tone || "pale"}` }, part.text));
+    });
+    layer.append(s("rect", { class: "t-note", x: cx - w / 2, y: cy - hgt / 2, width: w, height: hgt, rx: hgt / 2 }), label);
   }
 
   isPartial(geo, index) {
@@ -579,6 +698,15 @@ export class LineMap {
     const hgt = geo.vertical ? long : short;
     const opacity = token.opacity < 1 ? Math.max(0, token.opacity).toFixed(3) : null;
     const moving = token.kind === "move" || token.kind === "back";
+    const state = token.replay ? "replay" : token.leave ? "exit" : "live";
+    if (token.flash && token.hold) {
+      const fade = Math.max(0, 1 - token.hold / FLASH_S);
+      const pulse = 0.5 + 0.5 * Math.cos(token.hold * Math.PI * 4);
+      layer.append(s("rect", {
+        class: "t-flash", x: p.x - w / 2 - 6, y: p.y - hgt / 2 - 6, width: w + 12, height: hgt + 12, rx: short / 2 + 6,
+        opacity: (fade * pulse * 0.55 * Math.max(0, Math.min(1, token.opacity))).toFixed(3)
+      }));
+    }
     if (moving && trail) {
       const dir = token.kind === "back" ? -1 : 1;
       const length = token.big ? 70 : 46;
@@ -587,10 +715,14 @@ export class LineMap {
       const tw = geo.vertical ? 4 : length;
       const th = geo.vertical ? length : 4;
       const grad = `${this.uid}-${geo.vertical ? "v" : "h"}-${dir > 0 ? "f" : "b"}-${token.kind}`;
-      layer.append(s("rect", { fill: `url(#${grad})`, x: tx - tw / 2, y: ty - th / 2, width: tw, height: th, rx: 2, opacity }));
+      const trailOpacity = token.replay ? (Math.max(0, token.opacity) * 0.5).toFixed(3) : opacity;
+      layer.append(s("rect", { fill: `url(#${grad})`, x: tx - tw / 2, y: ty - th / 2, width: tw, height: th, rx: 2, opacity: trailOpacity }));
     }
-    const cls = ["t-token", token.kind && token.kind !== "move" ? `is-${token.kind}` : "", thin ? "is-thin" : ""].join(" ").trim();
-    layer.append(s("rect", { class: cls, x: p.x - w / 2, y: p.y - hgt / 2, width: w, height: hgt, rx: short / 2, opacity }));
+    const cls = ["t-token", token.kind && token.kind !== "move" ? `is-${token.kind}` : "", thin ? "is-thin" : "", token.replay ? "is-replay" : ""].join(" ").trim();
+    layer.append(s("rect", {
+      class: cls, x: p.x - w / 2, y: p.y - hgt / 2, width: w, height: hgt, rx: short / 2, opacity,
+      "data-token": token.id, "data-state": state
+    }));
   }
 
   drawPill(layer, geo, rail, target, rest, hidden) {

data/web/assets/js/views/execution.js

@@ -1,5 +1,5 @@
 import { api } from "../api.js";
-import { h, s, clear, toast, copyButton, reducedMotion } from "../dom.js";
+import { h, s, append, clear, toast, copyButton, reducedMotion } from "../dom.js";
 import { every, pollMs } from "../live.js";
 import { LineMap } from "../map.js";
 import { ago, duration, offset, plural, stamp, statusLabel, toTime } from "../format.js";
@@ -338,7 +338,7 @@ export function execution(root, { id, me }) {
     history.append(...rows);
     const ctx = h("div", {});
 
-    root.append(
+    append(root, [
       h("p", { class: "crumbs" }, h("a", { href: "#/executions" }, "Executions"), " / ",
         h("a", { href: `#/executions?saga=${encodeURIComponent(execution.saga_name)}` }, execution.saga_name)),
       h("div", { class: "x-head" },
@@ -365,7 +365,7 @@ export function execution(root, { id, me }) {
             h("h2", { class: "section-title" }, "Other runs for this resource"),
             h("ul", { class: "related" }, related.map((other) => h("li", {}, h("a", { href: `#/executions/${encodeURIComponent(other.id)}` },
               h("span", { class: `state state-${other.status}` }, statusLabel(other.status)), stamp(other.started_at)))))) : null))
-    );
+    ]);
 
     els = { play, range, now, rows, ctx };
     map = new LineMap(mapHost, { mode: "single", label: `${execution.saga_name} line` });

data/web/assets/js/views/executions.js

@@ -43,6 +43,15 @@ function glyph(execution, definition) {
 
 const shortError = (name) => name.split("::").pop();
 
+// Only these columns sort: the API pages along either one.
+const SORTS = [
+  { key: "started", api: "started_at", label: "Started", desc: "latest first", asc: "earliest first" },
+  { key: "took", api: "duration", label: "Took", desc: "longest first", asc: "shortest first" }
+];
+const PAGE = 40;
+const REFRESH_MAX = 200;
+const ARROWS = { descending: "M2.5 3.5L5 6l2.5-2.5", ascending: "M2.5 6.5L5 4l2.5 2.5", none: "M2.5 3.8L5 1.5l2.5 2.3M2.5 6.2L5 8.5l2.5-2.3" };
+
 export function executions(root, { params, me }) {
   const stalled = params.get("stalled") === "1";
   const stallText = duration((me.stalled_after || 900) * 1000);
@@ -52,19 +61,24 @@ export function executions(root, { params, me }) {
   const step = params.get("step") || "";
   const error = params.get("error") || "";
   const errorStep = params.get("error_step") || "";
+  const sorts = stalled ? SORTS.slice(0, 1) : SORTS;
+  let sort = sorts.find((candidate) => candidate.key === params.get("sort")) || SORTS[0];
+  let dir = params.get("dir") === "asc" ? "asc" : "desc";
   let destroyed = false;
   let rows = [];
   let next = null;
-  let extended = false;
+  let version = 0;
 
-  const go = (changes) => {
+  const hashFor = (changes) => {
     const query = new URLSearchParams({
       status: stalled ? "" : group.key, saga, step, error, error_step: errorStep,
-      range: range ? range.key : "", stalled: stalled ? "1" : "", ...changes
+      range: range ? range.key : "", stalled: stalled ? "1" : "",
+      sort: sort === SORTS[0] ? "" : sort.key, dir: dir === "desc" ? "" : dir, ...changes
     });
     for (const [key, value] of [...query]) if (!value) query.delete(key);
-    location.hash = `#/executions${query.toString() ? `?${query}` : ""}`;
+    return `#/executions${query.toString() ? `?${query}` : ""}`;
   };
+  const go = (changes) => { location.hash = hashFor(changes); };
 
   const seg = h("div", { class: "seg", role: "group", "aria-label": "Status" },
     GROUPS.map((candidate) => h("button", {
@@ -82,28 +96,73 @@ export function executions(root, { params, me }) {
   const errorChip = error || errorStep ? h("button", { type: "button", class: "chip", onclick: () => go({ error: "", error_step: "" }), "aria-label": `Stop filtering by ${errorLabel}`, title: error || null },
     "failed with ", h("b", {}, errorLabel), h("span", { "aria-hidden": "true" }, "×")) : null;
 
+  const headers = new Map();
+  const sortHeader = (candidate) => {
+    const path = s("path", {});
+    const th = h("th", { scope: "col" },
+      h("button", { type: "button", class: "sort", onclick: () => pickSort(candidate, null) }, candidate.label,
+        s("svg", { viewBox: "0 0 10 10", width: 10, height: 10, "aria-hidden": "true" }, path)));
+    headers.set(candidate.key, { th, path });
+    return th;
+  };
+  const picker = h("select", { class: "select sort-pick", "aria-label": "Sort" },
+    sorts.flatMap((candidate) => ["desc", "asc"].map((way) => h("option", { value: `${candidate.key}:${way}` }, `${candidate.label}, ${candidate[way]}`))));
+  picker.addEventListener("change", () => {
+    const [key, way] = picker.value.split(":");
+    pickSort(SORTS.find((candidate) => candidate.key === key), way);
+  });
+
+  const caption = h("caption", { class: "visually-hidden" });
   const body = h("tbody");
   const table = h("table", { class: "rows" },
+    caption,
     h("thead", {}, h("tr", {},
       h("th", { class: "r-glyph", scope: "col" }, h("span", { class: "visually-hidden" }, "Position on the line")),
       h("th", { scope: "col" }, "Resource"),
       h("th", { class: "r-saga-col", scope: "col" }, "Saga"),
       h("th", { scope: "col" }, "Step"),
       h("th", { scope: "col" }, "Status"),
-      h("th", { scope: "col" }, "Started"),
-      h("th", { scope: "col" }, stalled ? "Waiting" : "Took"))),
+      sortHeader(SORTS[0]),
+      stalled ? h("th", { scope: "col" }, "Waiting") : sortHeader(SORTS[1]))),
     body);
-  const more = h("button", { type: "button", class: "btn btn-quiet", hidden: true }, "Show older");
+  const more = h("button", { type: "button", class: "btn btn-quiet", hidden: true });
   const status = h("p", { class: "empty", hidden: true });
 
   root.append(
     h("div", { class: "list-head" },
       h("h1", { class: "list-title" }, saga ? saga : stalled ? "Stalled executions" : "Executions"),
-      h("div", { class: "filters" }, seg, select, chip, errorChip, rangeChip, stalledChip)),
+      h("div", { class: "filters" }, seg, select, picker, chip, errorChip, rangeChip, stalledChip)),
     table, status, h("div", { class: "more-row" }, more));
 
   let definitions = new Map();
 
+  function showSort() {
+    for (const [key, { th, path }] of headers) {
+      const state = key === sort.key ? (dir === "desc" ? "descending" : "ascending") : "none";
+      if (state === "none") th.removeAttribute("aria-sort");
+      else th.setAttribute("aria-sort", state);
+      path.setAttribute("d", ARROWS[state]);
+    }
+    picker.value = `${sort.key}:${dir}`;
+    table.classList.toggle("is-by-took", sort.key === "took");
+    caption.textContent = `Executions, sorted by ${sort.label.toLowerCase()}, ${sort[dir]}`;
+    more.textContent = sort === SORTS[0] && dir === "desc" ? "Show older" : "Show more";
+  }
+
+  // A header sorts by its column, or flips the direction when it already
+  // does. The list starts over in the new order; the URL keeps it.
+  function pickSort(candidate, way) {
+    dir = way || (candidate === sort ? (dir === "desc" ? "asc" : "desc") : "desc");
+    sort = candidate;
+    history.replaceState(null, "", hashFor({}));
+    showSort();
+    version++;
+    rows = [];
+    next = null;
+    more.hidden = true;
+    refresh().catch(() => {});
+  }
+
   function draw() {
     const now = Date.now();
     refill(body, rows.map((execution) => {
@@ -117,7 +176,7 @@ export function executions(root, { params, me }) {
         h("td", { class: "r-step" }, execution.current_step || ""),
         h("td", { class: "r-state" }, h("span", { class: `state state-${execution.status}` }, statusLabel(execution.status))),
         h("td", { class: "r-when" }, h("time", { datetime: execution.started_at }, ago(started))),
-        h("td", { class: "r-took" }, stalled ? waited(now - toTime(execution.last_progress_at)) : end ? duration(end - started) : ""));
+        h("td", { class: "r-took" }, stalled ? waited(now - toTime(execution.last_progress_at)) : took(execution, started, end)));
       tr.addEventListener("click", (event) => { if (!event.target.closest("a")) location.hash = href; });
       return tr;
     }));
@@ -128,38 +187,53 @@ export function executions(root, { params, me }) {
 
   // With an error filter the range bounds when the attempt failed, as the
   // counts under "Needs attention" do, rather than when the execution started.
-  function query(before) {
+  function took(execution, started, end) {
+    if (execution.duration_ms !== null && execution.duration_ms !== undefined) return duration(execution.duration_ms);
+    return end ? duration(end - started) : "";
+  }
+
+  function query(after, limit = PAGE) {
     const since = range ? rangeFrom(range) : null;
     const byError = Boolean(error || errorStep);
     return {
       status: group.statuses, saga: saga || null, step: step || null, error: error || null, error_step: errorStep || null,
-      stalled: stalled ? 1 : null, from: byError ? null : since, error_from: byError ? since : null, before, limit: 40
+      stalled: stalled ? 1 : null, from: byError ? null : since, error_from: byError ? since : null,
+      sort: sort.api, dir, after, limit
     };
   }
 
+  // Polls reload every row shown so far, in the current order.
   async function refresh() {
-    if (extended) return;
-    const [defs, data] = await Promise.all([sagaDefinitions(), api.executions(query())]);
-    if (destroyed) return;
+    if (rows.length > REFRESH_MAX) return;
+    const asked = version;
+    const [defs, data] = await Promise.all([sagaDefinitions(), api.executions(query(null, Math.min(REFRESH_MAX, Math.max(PAGE, rows.length))))]);
+    if (destroyed || asked !== version) return;
     definitions = defs;
     if (select.options.length === 1) {
       for (const name of defs.keys()) select.append(h("option", { value: name, selected: name === saga }, name));
     }
     rows = data.executions;
-    next = data.next_before;
+    next = data.next;
     draw();
   }
 
   more.addEventListener("click", async () => {
+    const asked = version;
     more.disabled = true;
-    const data = await api.executions(query(next));
-    extended = true;
-    rows = rows.concat(data.executions);
-    next = data.next_before;
-    more.disabled = false;
-    draw();
+    try {
+      const data = await api.executions(query(next));
+      if (destroyed || asked !== version) return;
+      const shown = new Set(rows.map((execution) => execution.id));
+      rows = rows.concat(data.executions.filter((execution) => !shown.has(execution.id)));
+      next = data.next;
+      draw();
+    } finally {
+      more.disabled = false;
+    }
   });
 
+  showSort();
+
   const stop = every(pollMs, refresh);
   return { destroy() { destroyed = true; stop(); } };
 }