Recipe: an event log

A day of service events, fetched window by window from a server as the view moves, in lanes by severity, and merged into counted markers where they crowd. Zoom with ctrl + wheel (or + and -) and pan: the line below the timeline counts the requests.

Live example: An event log, fetched by window and clustered

Loading…

Code — edit it and press Run

import { createTimeline } from "@temporeum/timeline-element";

const SECOND = 1000;
const HOUR = 3_600_000;
const T0 = Date.UTC(2026, 9, 27, 8);
const LEVELS = ["info", "info", "info", "info", "warn", "info", "info", "error"];

// A stand-in for your server: the same events for the same window, every time.
// A real host would `fetch(`/api/log?from=${from}&to=${to}`, { signal })`.
function hash(n) {
  let x = Math.imul(n ^ 0x9e3779b9, 0x85ebca6b);
  x ^= x >>> 13;
  return Math.imul(x, 0xc2b2ae35) >>> 0;
}
let requests = 0;
const requestsLine = document.querySelector("#requests");
function queryLog([from, to], signal) {
  requests += 1;
  requestsLine.dataset.count = String(requests);
  requestsLine.textContent = `${String(requests)} window request(s) so far — zoom with ctrl + wheel or +/-, then pan`;
  const events = [];
  for (let slot = Math.ceil(from / (20 * SECOND)); slot * 20 * SECOND < to; slot += 1) {
    const h = hash(slot);
    if (h % 3 !== 0) continue;
    const level = LEVELS[h % LEVELS.length];
    events.push({
      id: `e${String(slot)}`,
      start: slot * 20 * SECOND + (h % 20) * SECOND,
      granularity: "second",
      laneId: level,
      label: `${level} #${String(slot % 10_000)}`,
      className: `level-${level}`,
    });
  }
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => resolve(events), 120);
    // The timeline aborts a window the view has left: stop the work.
    signal.addEventListener("abort", () => {
      clearTimeout(timer);
      reject(signal.reason);
    });
  });
}

createTimeline(document.querySelector("#timeline"), {
  items: queryLog,
  lanes: [
    { id: "error", label: "Error", pinned: true },
    { id: "warn", label: "Warning" },
    { id: "info", label: "Info" },
  ],
  theme: "light",
  ariaLabel: "Service log",
  domain: [T0, T0 + 2 * HOUR],
  // A log is read, not edited; keep the zoom between a minute and two days.
  limits: { minSpanMs: 60 * SECOND, maxSpanMs: 48 * HOUR },
  // Events too close to tell apart become one marker with their count.
  cluster: true,
});

Run “An event log, fetched by window and clustered” on your own machine

Make an empty folder and put this example’s two files in it:

index.html — the page the code runs in, its markup and styles:

<style>
  #timeline .level-warn { --tl-item-fill: #ffe08a; }
  #timeline .level-error { --tl-item-fill: #ffc9c4; }
</style>
<div id="timeline" style="height: 300px"></div>
<p class="log" id="requests" aria-live="polite">Waiting for the first window…</p>

main.js — the code, as it is in the editor now, your edits included:

In a terminal in that folder, install the library and Vite (it lets the browser follow the imports), then start it:
```
npm init -y
npm install @temporeum/timeline-element
npm install --save-dev vite
npx vite
```
Open the address it prints, http://localhost:5173/.

How it is made

items is a function. The timeline calls it with the window it needs and an AbortSignal, and aborts the request when the view moves on. Zoom in and nothing is asked: the window already held covers it. See async data.
Clusters (cluster: true) merge events too close to tell apart into one marker with their count; tap it, or focus it and press Enter, and it opens. See clustering.
Severity is a lane and a class. The error lane is pinned, so it comes first, at the top, with the pinned lanes' fill; each event's class (level-…) sets its colour.
Limits keep the view between a minute and two days, so the server is never asked for a year.
No editing: a log is read, so editing is left off and a drag only pans.

  domain: [T0, T0 + 2 * HOUR],
  // A log is read, not edited; keep the zoom between a minute and two days.
  limits: { minSpanMs: 60 * SECOND, maxSpanMs: 48 * HOUR },

From the running example example/recipe-log

Each event is an instant with granularity: "second": it covers its second, so two events in the same second take two rows instead of drawing over each other.