timeline.ts

2.6 KB · raw
1import type { Save } from "../mirror/queries.ts";2import { type Html, html } from "./html.ts";3import { formatDate } from "./layout.ts";45const TIP_CHARS = 120;67/** One dot of the drifting timeline, as kepr.js reads it from `/<repo>/timeline`. */8export type TimelineSave = { id: string; t: number; message: string; meta: string };910/**11 * §21.4's dotted timeline as SVG, so it draws without JavaScript: one dot per save on a dashed12 * line, x by time (as a percentage, so it scales without squashing dots), brighter and fuller where13 * neighbours crowd within a fortieth of the span. kepr.js swaps it for Kepr 2's drifting canvas,14 * fetching each save's words from `data-src` after the page has drawn: carried as tooltips in the15 * page, they were most of a big repo's page.16 */17export function timelineSvg(repo: string, saves: Save[]): Html {18	const times = saves.map((save) => save.created_at);19	// Replayed saves keep their own times, so the line is not in time order.20	const sorted = times.toSorted((a, b) => a - b);21	const first = sorted[0] ?? 0;22	const span = (sorted.at(-1) ?? first) - first;23	const reach = Math.max(span / 40, 3600);24	const dots = times.map((t) => {25		const x = span === 0 ? 50 : 1 + (98 * (t - first)) / span;26		const near = countBetween(sorted, t - reach, t + reach);27		const level = near >= 8 ? 3 : near >= 4 ? 2 : near >= 2 ? 1 : 0;28		return html`<circle class="dot d${level}" cx="${x.toFixed(3)}%" cy="32" r="${2.5 + level * 0.5}"/>`;29	});30	return html`<svg class="timeline" width="100%" height="64" role="img" aria-label="${31		saves.length32	} saves over time" data-src="/${repo}/timeline">33<line class="timeline-line" x1="0" x2="100%" y1="32" y2="32"/>34${dots}35</svg>`;36}3738/** Each save's ID, time, first line (cut to fit the 340 px tip) and when, who and in what session. */39export function timelineSaves(saves: Save[]): TimelineSave[] {40	return saves.map((save) => {41		const line = save.message.split("\n")[0] as string;42		return {43			id: save.id,44			t: save.created_at,45			message: line.length > TIP_CHARS ? `${line.slice(0, TIP_CHARS - 1)}…` : line,46			meta: [formatDate(save.created_at), save.agent, save.session].filter(Boolean).join(" · "),47		};48	});49}5051// How many of the sorted times fall within [low, high].52function countBetween(sorted: number[], low: number, high: number): number {53	// The index of the first time that `before` no longer holds for.54	const first = (before: (time: number) => boolean) => {55		let [lo, hi] = [0, sorted.length];56		while (lo < hi) {57			const mid = (lo + hi) >> 1;58			if (before(sorted[mid] as number)) lo = mid + 1;59			else hi = mid;60		}61		return lo;62	};63	return first((t) => t <= high) - first((t) => t < low);64}