OPERATOR

EventTimeline

Events and selection

  1. success
    Radio

    Channel 04 has a stable carrier.

  2. info
    – Service

    A duration event with explicit start and end.

  3. warning
    Radio

    Round-trip latency exceeded the reference threshold.

Supply a start/end window and stable, unique event IDs. Times use Unix epoch milliseconds and display in UTC. Point events use diamonds; a later end produces a duration bar clipped to the window. The text list retains full timestamps.

Each entry leads with the event title and keeps severity at the right edge. The timestamp and category share a secondary metadata row, followed by the description. Selectable titles use a text action; a selected entry gains a border and a visible selection label.

<EventTimeline
  start={range.start}
  end={range.end}
  events={[
    { id: "link", label: "Link acquired", start: linkTime, lane: "Radio", severity: "success" },
    {
      id: "service",
      label: "Inspection",
      start: inspectionStart,
      end: inspectionEnd,
      lane: "Service",
    },
  ]}
  selectedId={selectedId}
  onSelectionChange={setSelectedId}
/>

Selection is controlled and persists across window changes. onSelectionChange enables selection buttons; otherwise the list is read-only. Overlapping events remain individually available in the list.

Invalid timestamps and reversed intervals are omitted and counted. Events wholly outside the window are excluded. Invalid or empty windows show an explanation.

Empty

No events in this time range.

Disabled selection

  1. success
    Radio

    Channel 04 has a stable carrier.

  2. info
    – Service

    A duration event with explicit start and end.

  3. warning
    Radio

    Round-trip latency exceeded the reference threshold.

Props

PROPTYPEDEFAULTREQUIRED
events

Readonly TimelineEvent array. Invalid timestamps and reversed intervals are omitted with an explicit count. The visible list is sorted by start time.

array—yes
start

Inclusive visible window start, Unix epoch milliseconds.

number—yes
end

Inclusive visible window end, Unix epoch milliseconds. Must follow start.

number—yes
selectedId

Controlled selected event ID, or null for no selection. Filtering the visible window never changes the supplied selection.

string—no
onSelectionChange

(id: string) => void. Adds native selection buttons to the event list; Enter and Space select an event.

function—no
disabled

Disables selection buttons while keeping data readable.

booleanfalseno
label

Accessible name of the group. The event list is named after it with "list" added (label="Service events" names the list "Service events list").

string"Event timeline"no
emptyMessagestring"No events in this time range."no

Accessibility

  • The chronological list includes every visible event, lane, full timestamp, and description. It is named after label with "list" added, so label="Service events" names it "Service events list".
  • The list stays in the page however many events it holds, so it remains the complete record and never becomes a second scrolling box. Selecting an event or resizing the timeline redraws only what changed, so long lists stay quick to update.
  • Selection buttons support Enter/Space and visible focus; selected events expose text, a border, and aria-pressed.
  • Badges state severity. The SVG is aria-hidden; the list provides complete data.

Manifest entry

<EventTimeline events={events} start={range.start} end={range.end} selectedId={selectedId} onSelectionChange={setSelectedId} label="Service events" />
View agent manifest
{
  "description": "UTC event graphic with lanes, clipped duration bars, point markers, and a complete accessible event list. Event titles lead each entry, severity aligns at the trailing edge, and timestamps/categories form a secondary metadata row.",
  "props": {
    "events": {
      "type": "array",
      "items": {
        "id": "string (required, unique)",
        "label": "string (required)",
        "start": "number (required, epoch milliseconds)",
        "end": "number (optional, epoch milliseconds, inclusive)",
        "lane": "string (optional, defaults to Events)",
        "description": "string (optional)",
        "severity": "enum [neutral, info, success, warning, error] (default neutral)"
      },
      "required": true,
      "description": "Readonly TimelineEvent array. Invalid timestamps and reversed intervals are omitted with an explicit count. The visible list is sorted by start time."
    },
    "start": {
      "type": "number",
      "required": true,
      "description": "Inclusive visible window start, Unix epoch milliseconds."
    },
    "end": {
      "type": "number",
      "required": true,
      "description": "Inclusive visible window end, Unix epoch milliseconds. Must follow start."
    },
    "selectedId": {
      "type": "string",
      "description": "Controlled selected event ID, or null for no selection. Filtering the visible window never changes the supplied selection."
    },
    "onSelectionChange": {
      "type": "function",
      "description": "(id: string) => void. Adds native selection buttons to the event list; Enter and Space select an event."
    },
    "disabled": {
      "type": "boolean",
      "default": false,
      "description": "Disables selection buttons while keeping data readable."
    },
    "label": {
      "type": "string",
      "default": "Event timeline",
      "description": "Accessible name of the group. The event list is named after it with \"list\" added (label=\"Service events\" names the list \"Service events list\")."
    },
    "emptyMessage": {
      "type": "string",
      "default": "No events in this time range."
    }
  },
  "composable_with": [
    "TimeRange",
    "SplitPane",
    "Card"
  ],
  "never_inside": [
    "Button"
  ],
  "example": "<EventTimeline events={events} start={range.start} end={range.end} selectedId={selectedId} onSelectionChange={setSelectedId} label=\"Service events\" />"
}

Previous

Sparkline

Next

Badge

On this page