js-snippets component gallery

<timeline-view>

drag to pan · ctrl/⌘+wheel or pinch to zoom · shift+wheel or horizontal wheel to pan · vertical wheel scrolls the page · hover anything for a tooltip · pan left for lazy-loaded history · the feed is infinite and generated locally.

same feed, compact + retheme (auto-fit demotes lanes; --timeline-* custom properties)

back-limited, still live (minTime alone — pan left and it stops dead at the floor; nothing is ever requested before it, yet the right edge still follows the clock)

static content (minTime + maxTime — a finished window: no now line, no jump-to-live pill, no follow, and the bars that were still running at the end stop exactly at it)

<data-table>

Type in the box to narrow · click a chip to hide that bucket · click a header to sort (asc → desc → back to the producer's order) · tab into the rows and press Enter to open a row's detail (the failure rows' details are async, so the placeholder-then-paint path is visible too). Note the blank durations: they sort LAST in both directions, because absence is not a value. Duration sorts by its real millisecond number while showing “1.2s” — sorting the display string would put “10s” before “9s”.

(click or Enter a row — the event lands here)

minimal (no query, no chips, no row listener — the bar hides itself and rows stay out of the tab order)

filtered to nothing (NOT the same as having no data — it says how many it is hiding)

<activity-feed>

A <data-table> underneath — the chips, counts and empty states are that component's. Severity comes from the ACTION half of each dotted kind and family from the NAMESPACE half, so weather.observed and kettle.boiled — kinds no rule has ever heard of — still get a severity and a stable hue the first time they appear. Field values are searchable: paste a repo slug into the box.

empty (a feed with nothing in it says so, rather than looking broken)

<dag-view>

Drag to pan · ctrl/⌘+wheel or pinch to zoom · a plain wheel pans, so the page never gets its scroll stolen · the toolbar and the +/-/0 keys do the same thing · hover a node to fade everything outside its dependency neighbourhood · click to pin that, double-click to zoom to it · arrow keys walk the graph along its edges once something is selected · type in the box to highlight matches (it highlights rather than filters, because the edges are the reason a match matters). Note the long checkout → publish edge bending around two layers rather than cutting through them, the over-long label truncating inside its box, and the notice strip top-right naming the two edges the graph could not draw.

(layout facts land here)

(click a node — the event lands here)

a circular dependency (three services that each wait on the next — a layered drawing has to break the cycle to draw at all, so the broken edge is drawn dashed in the emphasis colour with its arrow still pointing the TRUE way, and the notice says so)

left to right (the same data, orientation="LR" — two pictures of one graph on one page, so an axis bug has nowhere to hide)

retheme (the same data under --dag-* custom properties)

empty (a graph with nothing in it says so, rather than looking broken)

<perf-graph>

One scrolling metric per element, everything drawn on one canvas. The full HUD carries a label, the current value, an avg/min/max row, tick labels and a dashed budget line the autoscale keeps in view. The compact strip below it is the table-cell shape: one text row over the trace, nothing else.

compact (five gauges in one row — compact, fixed 0–100 scale)

fixed against autoscaled (the same samples: min="0" max="100" on the left, autoscale on the right)

empty (no samples yet: the readout says so with a dash, and nothing is drawn as zero)