Time Split

Anatomy

One bar showing where a sequence of steps spent its time. Use it for a pipeline, a build or a request trace: any ordered list of steps where the reader asks "what took so long". Segments sit in execution order and are sized by their share of measured time, so the shape of the bar is the answer.

maud_ui::primitives::time_split

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`segments`	`Vec<Segment>`	`[]`	Steps in EXECUTION ORDER. Steps that never ran should be left out entirely rather than passed with a zero duration: the empty remainder of the track is what "it ended here" looks like.
`caption`	`String`	`""`	The finding, in words. Do not skip it — see the module note.
`aria_label`	`String`	`""`	Read to a screen reader in place of the bar. `aria_from` builds a decent one from the segments.

Examples

One dominant step — the common case, drawn honestly

build-in-guest took 96% of this run (2m 29s of 2m 35s).

Failed part-way — the empty track is where it stopped

Failed at gate-clippy-test after 7.1s. 2 of 6 steps ran.

Still running

build-in-guest running · 1m 11s elapsed.

A step that ran without a measurement — a mark, never a width

Timing unavailable for 1 step.

Usage and composition

Import

use maud_ui::primitives::time_split::{self, Props, Segment, SegmentState};

Example

use maud::html;
use maud_ui::primitives::time_split::{self, Segment};

let steps = vec![
    Segment::done("clone-or-pull", 447, "447 ms"),
    Segment::done("build-in-guest", 149_101, "2m 29s"),
    Segment::done("report", 13, "13 ms"),
];

html! {
    (time_split::render(time_split::Props {
        caption: time_split::dominant_caption(&steps, "2m 30s").unwrap_or_default(),
        aria_label: time_split::aria_from(&steps),
        segments: steps,
    }))
}

Segment

Segment::done(name, millis, label) builds a finished step.

Variants

State	Meaning
Done	Finished with no complaint.
Failed	Ended the sequence.
Running	Still going.
Unmeasured	Ran, but its duration is not known. Drawn as a marker with no width.

Helpers

dominant_caption(&segments, total_label) -> Option<String> writes the usual caption: which step took the run and its share. It returns None when nothing was measured.
aria_from(&segments) -> String lists every step and its duration for a screen reader.

Rules

Never rescale. A log scale or equal-width segments hide the one thing the bar exists to show. A step that took 96% looks like it took 96%.
No legend, no segment labels. Labels break first at phone width, and the table this usually sits above already names every step.
Nothing measured, nothing drawn. render emits no markup when no segment has a duration, because an empty track would read as "this did nothing".
The step the caption names takes the full accent, so the bar and the sentence point at the same thing.

Progress, Meter, Chart, Table.

Accessibility

Role: the track is role="img" with an aria-label that names every step.
Keyboard: each segment has tabindex="0" and a data-tip tooltip, so a keyboard reaches the step names too.
Colour: each state has a border treatment as well as a fill, so status never rests on colour alone.

← Back to Gallery