@tangle-network/charts 2.0.9 → 2.0.12

package/dist/react/index.d.ts

@@ -223,7 +223,11 @@ interface MeterSegment {
 }
 /** A used-of-total meter with its numbers. With `segments` it is a part-of-whole bar: the remainder of `total` that no
  * segment accounts for is drawn hatched and labelled `untraced`, and a missing total hatches the whole track. */
-export declare function Meter({ used, total, format, tone, text, segments, untraced }: {
+export declare function Meter({ used, total, format, tone, text, segments, steps, untraced }: {
+  steps?: {
+    label: string;
+    state: 'pass' | 'fail' | 'undecided' | 'unrun';
+  }[];
   used?: number | null | undefined;
   total: number | null | undefined;
   format?: (v: number) => string;
@@ -260,7 +264,11 @@ export declare function Events({ at, from, to, label, color, ticks, axis, time }
  * state; hovering a span names it, its state and its span. Times are epoch ms; `axis` labels the time axis.
  * `lanes` give a row several spans (the same shape as the static `timeline`); a span with `end: null` is open and runs
  * to `now`. `marks` draw recorded events across every lane, and states in `hatch` are drawn hatched (no data). */
-export declare function Gantt({ rows, lanes: laneInput, colors, axis, span, marks, now, hatch }: {
+export declare function Gantt({ rows, lanes: laneInput, colors, axis, span, marks, now, hatch, selectedId, onSelect, bestMark, maxHeight }: {
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+  bestMark?: string;
+  maxHeight?: number;
   rows?: {
     label: string;
     start: number;

package/dist/react/index.js

@@ -1385,7 +1385,19 @@ const SEGMENT_TONES = [
 ];
 /** A used-of-total meter with its numbers. With `segments` it is a part-of-whole bar: the remainder of `total` that no
 * segment accounts for is drawn hatched and labelled `untraced`, and a missing total hatches the whole track. */
-function Meter({ used, total, format = formatCompact, tone, text, segments, untraced = "untraced" }) {
+function Meter({ used, total, format = formatCompact, tone, text, segments, steps, untraced = "untraced" }) {
+	if (steps) {
+		const current = steps.findIndex((step) => step.state !== "pass");
+		return /* @__PURE__ */ jsx("ol", {
+			className: "ov-meter-steps",
+			"aria-label": text ?? "Check steps",
+			children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", {
+				"data-state": step.state,
+				"aria-current": i === current ? "step" : void 0,
+				children: [/* @__PURE__ */ jsx("strong", { children: i + 1 }), /* @__PURE__ */ jsx("span", { children: step.label })]
+			}, i))
+		});
+	}
 	if (segments) return /* @__PURE__ */ jsx(SegmentMeter, {
 		segments,
 		total,
@@ -1586,9 +1598,11 @@ function Events({ at, from, to, label, color = LIVE_SERIES[0], ticks = 7, axis =
 * state; hovering a span names it, its state and its span. Times are epoch ms; `axis` labels the time axis.
 * `lanes` give a row several spans (the same shape as the static `timeline`); a span with `end: null` is open and runs
 * to `now`. `marks` draw recorded events across every lane, and states in `hatch` are drawn hatched (no data). */
-function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, hatch = ["missing", "untraced"] }) {
+function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, hatch = ["missing", "untraced"], selectedId, onSelect, bestMark, maxHeight }) {
 	const [ref, width, em] = useWidth();
 	const [tip, setTip] = useState(null);
+	const scroller = useRef(null);
+	const [scrollTop, setScrollTop] = useState(0);
 	const lanes = laneInput ?? (rows ?? []).map((row, i) => ({
 		id: `${row.label}-${i}`,
 		label: row.label,
@@ -1612,9 +1626,21 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
 		children: "No agent has started."
 	});
 	const ends = (s) => s.end ?? now;
-	const rowH = Math.round(1.25 * em);
-	const labelW = Math.min(Math.round(13 * em), Math.round(width * .32));
-	const top = marks.length ? 4 + Math.round(Math.min(3, marks.length) * em + .3 * em) : 4;
+	const phone = width < 600;
+	const rowH = Math.round((phone ? 2.8 : 2.2) * em);
+	const labelW = phone ? 8 : Math.min(Math.round(16 * em), Math.round(width * .28));
+	const top = maxHeight ? 4 : marks.length ? 48 : 8;
+	const fractions = phone ? [
+		0,
+		.5,
+		1
+	] : [
+		0,
+		.25,
+		.5,
+		.75,
+		1
+	];
 	const bottom = Math.round(1.8 * em);
 	const height = top + lanes.length * rowH + bottom;
 	const times = [
@@ -1629,131 +1655,233 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
 	const fallback = colors.unknown ?? "var(--chart-live-faint, var(--chart-muted))";
 	const hatched = new Set(hatch);
 	const plotBottom = top + lanes.length * rowH;
+	const first = maxHeight && lanes.length > 100 ? Math.max(0, Math.floor((scrollTop - top) / rowH) - 6) : 0;
+	const visible = maxHeight && lanes.length > 100 ? lanes.slice(first, first + Math.ceil(maxHeight / rowH) + 14) : lanes;
+	const select = (id) => onSelect?.(id);
+	const focusLane = (index) => {
+		const at = Math.max(0, Math.min(lanes.length - 1, index));
+		const position = at === 0 ? 0 : top + at * rowH - rowH;
+		if (scroller.current) scroller.current.scrollTop = position;
+		setScrollTop(Math.max(0, position));
+		requestAnimationFrame(() => scroller.current?.querySelector(`[data-lane-index="${at}"]`)?.focus());
+	};
+	const tipY = (y) => Math.max(0, y - (maxHeight ? scrollTop - 52 : 0) - em);
+	const tipX = (x) => Math.max(0, Math.min(x + 8, width - Math.min(240, width)));
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: "ov-plot",
+		className: "ov-plot ov-gantt",
+		"data-featured": bestMark ? true : void 0,
 		onMouseLeave: () => setTip(null),
 		children: [
-			width > 0 && /* @__PURE__ */ jsxs("svg", {
+			maxHeight && width > 0 && /* @__PURE__ */ jsxs("svg", {
 				width,
-				height,
-				role: "img",
-				"aria-label": `${lanes.length} ${laneInput ? "lanes" : "agents"} over time`,
-				children: [
-					[
-						0,
-						.25,
-						.5,
-						.75,
-						1
-					].map((f) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-						x1: labelW + f * plotW,
-						x2: labelW + f * plotW,
-						y1: top,
-						y2: plotBottom,
-						className: "ov-gridline"
-					}), /* @__PURE__ */ jsx("text", {
-						x: labelW + f * plotW,
-						y: height - em * .35,
-						className: "ov-axis",
-						textAnchor: f === 0 ? "start" : f === 1 ? "end" : "middle",
-						children: axis(t0 + f * (t1 - t0))
-					})] }, f)),
-					lanes.map((lane, i) => {
-						const y = top + i * rowH;
-						return /* @__PURE__ */ jsxs("g", {
-							"data-lane": lane.id,
-							children: [
-								/* @__PURE__ */ jsx("rect", {
-									x: 0,
-									y,
-									width,
-									height: rowH,
-									fill: "transparent",
-									onMouseEnter: () => setTip({
-										x: Math.min(x(ends(lane.spans.at(-1) ?? { end: t1 })) + 8, width - em * 16),
-										y: Math.max(0, y - em),
-										title: lane.label,
-										lines: lane.spans.flatMap((s) => [{
-											label: s.end === null ? `${s.state} (open)` : s.state,
-											value: span(s.start, ends(s)),
-											color: hatched.has(s.state) ? void 0 : colors[s.state] ?? fallback
-										}, ...s.note ? [{
-											label: s.note,
-											value: ""
-										}] : []])
-									})
-								}),
-								/* @__PURE__ */ jsx("text", {
-									x: labelW - em * .5,
-									y: y + rowH / 2,
-									dominantBaseline: "middle",
-									textAnchor: "end",
-									className: "ov-axis ov-gantt-label",
-									children: lane.label.length > 26 ? `${lane.label.slice(0, 25)}…` : lane.label
-								}),
-								lane.spans.map((s, j) => {
-									const color = colors[s.state] ?? fallback;
-									const bx = x(s.start), bw = Math.max(2, x(ends(s)) - bx), by = y + rowH * .18, bh = rowH * .64;
-									const open = s.end === null;
-									return /* @__PURE__ */ jsx("g", {
-										"data-state": s.state,
-										"data-open": open ? "true" : void 0,
-										"data-hatched": hatched.has(s.state) ? "true" : void 0,
+				height: 52,
+				"aria-label": "Releases and time axis",
+				children: [marks.map((mark, i) => /* @__PURE__ */ jsxs("g", {
+					"data-best": mark.label === bestMark || void 0,
+					children: [/* @__PURE__ */ jsx(Mark, {
+						mark,
+						x: x(mark.at),
+						top: 10,
+						bottom: 28,
+						row: 0,
+						em,
+						flip: x(mark.at) > width * .62
+					}), mark.label === bestMark && /* @__PURE__ */ jsx("circle", {
+						cx: x(mark.at),
+						cy: 14,
+						r: 8,
+						fill: "none",
+						stroke: "var(--accent-text)",
+						strokeWidth: 2
+					})]
+				}, i)), fractions.map((f) => /* @__PURE__ */ jsx("text", {
+					x: labelW + f * plotW,
+					y: 46,
+					className: "ov-axis",
+					textAnchor: f === 0 ? "start" : f === 1 ? "end" : "middle",
+					children: axis(t0 + f * (t1 - t0))
+				}, f))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scroller,
+				className: "ov-gantt-scroll",
+				style: {
+					maxHeight,
+					overflow: maxHeight ? "auto" : void 0
+				},
+				onScroll: (event) => {
+					setScrollTop(event.currentTarget.scrollTop);
+					setTip(null);
+				},
+				children: width > 0 && /* @__PURE__ */ jsxs("svg", {
+					width,
+					height,
+					role: onSelect ? "group" : "img",
+					"aria-label": `${lanes.length} ${laneInput ? "lanes" : "agents"} over time`,
+					children: [
+						fractions.map((f) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+							x1: labelW + f * plotW,
+							x2: labelW + f * plotW,
+							y1: top,
+							y2: plotBottom,
+							className: "ov-gridline"
+						}), !maxHeight && /* @__PURE__ */ jsx("text", {
+							x: labelW + f * plotW,
+							y: height - em * .35,
+							className: "ov-axis",
+							textAnchor: f === 0 ? "start" : f === 1 ? "end" : "middle",
+							children: axis(t0 + f * (t1 - t0))
+						})] }, f)),
+						visible.map((lane, offset) => {
+							const i = first + offset, y = top + i * rowH;
+							return /* @__PURE__ */ jsxs("g", {
+								"data-lane": lane.id,
+								"data-lane-index": i,
+								role: onSelect ? "button" : void 0,
+								tabIndex: onSelect ? 0 : void 0,
+								"aria-label": lane.label,
+								"aria-pressed": onSelect ? selectedId === lane.id : void 0,
+								onClick: () => select(lane.id),
+								onKeyDown: (event) => {
+									if (event.key === "Enter" || event.key === " ") {
+										event.preventDefault();
+										select(lane.id);
+									}
+									const next = {
+										ArrowDown: i + 1,
+										ArrowUp: i - 1,
+										Home: 0,
+										End: lanes.length - 1
+									}[event.key];
+									if (next !== void 0) {
+										event.preventDefault();
+										focusLane(next);
+									}
+								},
+								children: [
+									selectedId === lane.id && /* @__PURE__ */ jsx("rect", {
+										x: 0,
+										y,
+										width,
+										height: rowH,
+										fill: "var(--ix-sel-bg)",
+										rx: 4
+									}),
+									/* @__PURE__ */ jsx("rect", {
+										x: 0,
+										y,
+										width,
+										height: rowH,
+										fill: "transparent",
 										onMouseEnter: () => setTip({
-											x: Math.min(bx + bw + 8, width - em * 16),
-											y: Math.max(0, y - em),
+											x: tipX(x(ends(lane.spans.at(-1) ?? { end: t1 }))),
+											y: tipY(y),
 											title: lane.label,
-											lines: [{
-												label: open ? `${s.state} (open)` : s.state,
+											lines: lane.spans.flatMap((s) => [{
+												label: s.end === null ? `${s.state} (open)` : s.state,
 												value: span(s.start, ends(s)),
-												color: hatched.has(s.state) ? void 0 : color
+												color: hatched.has(s.state) ? void 0 : colors[s.state] ?? fallback
 											}, ...s.note ? [{
 												label: s.note,
 												value: ""
-											}] : []]
-										}),
-										children: hatched.has(s.state) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
-											x: bx,
-											y: by,
-											width: bw,
-											height: bh,
-											className: "ov-hatch-bg"
-										}), /* @__PURE__ */ jsx("path", {
-											d: hatchPath(bx, by, bw, bh, 4),
-											className: "ov-hatch"
-										})] }) : /* @__PURE__ */ jsx("rect", {
-											x: bx,
-											y: by,
-											width: bw,
-											height: bh,
-											rx: 2,
-											fill: color,
-											className: open ? "ov-gantt-open" : void 0
+											}] : []])
 										})
-									}, j);
+									}),
+									/* @__PURE__ */ jsxs("text", {
+										x: phone ? 8 : labelW - em * .5,
+										y: phone ? y + 13 : y + rowH / 2,
+										dominantBaseline: "middle",
+										textAnchor: phone ? "start" : "end",
+										className: "ov-axis ov-gantt-label",
+										children: [/* @__PURE__ */ jsx("title", { children: lane.label }), lane.label.length > 26 ? `${lane.label.slice(0, 25)}…` : lane.label]
+									}),
+									lane.spans.map((s, j) => {
+										const color = colors[s.state] ?? fallback;
+										const bx = x(s.start), bw = Math.max(2, x(ends(s)) - bx), by = y + (phone ? 24 : rowH * .25), bh = rowH * .5;
+										const open = s.end === null;
+										return /* @__PURE__ */ jsx("g", {
+											"data-state": s.state,
+											"data-open": open ? "true" : void 0,
+											"data-hatched": hatched.has(s.state) ? "true" : void 0,
+											onMouseEnter: () => setTip({
+												x: tipX(bx + bw),
+												y: tipY(y),
+												title: lane.label,
+												lines: [{
+													label: open ? `${s.state} (open)` : s.state,
+													value: span(s.start, ends(s)),
+													color: hatched.has(s.state) ? void 0 : color
+												}, ...s.note ? [{
+													label: s.note,
+													value: ""
+												}] : []]
+											}),
+											children: hatched.has(s.state) ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+												x: bx,
+												y: by,
+												width: bw,
+												height: bh,
+												className: "ov-hatch-bg"
+											}), /* @__PURE__ */ jsx("path", {
+												d: hatchPath(bx, by, bw, bh, 4),
+												className: "ov-hatch"
+											})] }) : /* @__PURE__ */ jsx("rect", {
+												x: bx,
+												y: by,
+												width: bw,
+												height: bh,
+												rx: 2,
+												fill: color,
+												className: open ? "ov-gantt-open" : void 0
+											})
+										}, j);
+									})
+								]
+							}, lane.id);
+						}),
+						now !== void 0 && /* @__PURE__ */ jsx("line", {
+							x1: x(now),
+							x2: x(now),
+							y1: top,
+							y2: plotBottom,
+							className: "ov-now",
+							"data-now": "true"
+						}),
+						[...marks].sort((a, b) => a.at - b.at).map((mark, i) => /* @__PURE__ */ jsxs("g", {
+							className: mark.verdict ? `ov-verdict-${mark.verdict}` : void 0,
+							"data-best": mark.label === bestMark || void 0,
+							style: maxHeight ? { pointerEvents: "none" } : void 0,
+							children: [
+								maxHeight && /* @__PURE__ */ jsx("line", {
+									x1: x(mark.at),
+									x2: x(mark.at),
+									y1: top,
+									y2: plotBottom,
+									className: `ov-mark ov-mark-${mark.kind}`,
+									style: { opacity: mark.label === bestMark ? .8 : .3 }
+								}),
+								!maxHeight && /* @__PURE__ */ jsx(Mark, {
+									mark,
+									x: x(mark.at),
+									top: 4,
+									bottom: plotBottom,
+									row: i % 2,
+									em,
+									flip: x(mark.at) > labelW + plotW * .62
+								}),
+								!maxHeight && mark.label === bestMark && /* @__PURE__ */ jsx("circle", {
+									cx: x(mark.at),
+									cy: 4 + Math.max(3, em / 4),
+									r: 8,
+									fill: "none",
+									stroke: "var(--accent-text)",
+									strokeWidth: 2
 								})
 							]
-						}, lane.id);
-					}),
-					now !== void 0 && /* @__PURE__ */ jsx("line", {
-						x1: x(now),
-						x2: x(now),
-						y1: top,
-						y2: plotBottom,
-						className: "ov-now",
-						"data-now": "true"
-					}),
-					[...marks].sort((a, b) => a.at - b.at).map((mark, i) => /* @__PURE__ */ jsx(Mark, {
-						mark,
-						x: x(mark.at),
-						top: 4,
-						bottom: plotBottom,
-						row: i % 3,
-						em,
-						flip: x(mark.at) > labelW + plotW * .62
-					}, `mark-${i}`))
-				]
+						}, `mark-${i}`))
+					]
+				})
 			}),
 			/* @__PURE__ */ jsx(Tooltip, { tip }),
 			/* @__PURE__ */ jsx(EventList, {
@@ -9088,8 +9216,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 		if (view !== "agents" || resized.current || !root.current) return;
 		let widest = 0;
 		for (const text of root.current.querySelectorAll(".fw-view-agents .fw-row:not(.fw-sticky-row) .fw-name-text")) {
-			const label = text.closest(".fw-label");
-			if (label) widest = Math.max(widest, text.scrollWidth + label.clientWidth - text.clientWidth);
+			const label = text.closest(".fw-label"), name = text.parentElement;
+			if (label) widest = Math.max(widest, name.getBoundingClientRect().right - label.getBoundingClientRect().left + text.scrollWidth - text.clientWidth);
 		}
 		if (widest > 0) setNameWidth(Math.max(140, Math.min(560, Math.ceil(widest) + 16)));
 	}, [view, agents]);

package/dist/react/live.css

@@ -97,3 +97,28 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-gap-stretch { fill: none; stroke: var(--chart-live-pass, #2f9e6e); stroke-width: 1; stroke-dasharray: 3 3; }
 .ov-gap-span { stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
 .ov-gap-value { cursor: default; }
+
+.ov-gantt { font: 14px/20px var(--font-sans, sans-serif); }
+.ov-gantt .ov-axis { fill: var(--chart-live-muted, var(--text-muted, #666)); font-size: 13px; }
+.ov-gantt .ov-mark-label { fill: var(--chart-live-fg, var(--text-primary, currentColor)); font-size: 13px; }
+.ov-gantt .ov-tip { background: var(--chart-live-raised, var(--bg-elevated, #fff)); border-color: var(--chart-live-border, var(--border-color, #aaa)); max-width: min(240px, 100%); box-sizing: border-box; }
+.ov-gantt-scroll { overscroll-behavior: contain; }
+.ov-gantt [role='button'] { cursor: pointer; outline: none; }
+.ov-gantt [role='button']:hover > rect:first-child { fill: var(--ix-hover-bg); }
+.ov-gantt [role='button']:focus-visible > rect:first-child { stroke: var(--accent-text); stroke-width: 2; }
+.ov-gantt [data-state] rect { transition: width var(--motion-stream), fill var(--motion-control); }
+.ov-gantt [data-open='true'] rect { animation: ov-gantt-live var(--motion-ambient) infinite; }
+.ov-gantt[data-featured] [data-mark] text { display: none; }
+.ov-gantt[data-featured] [data-best] text { display: block; }
+.ov-gantt[data-featured] .ov-events { display: none; }
+@keyframes ov-gantt-live { 50% { opacity: .55; } }
+@media (prefers-reduced-motion: reduce) { .ov-gantt [data-state] rect { transition: none; animation: none; } }
+
+.ov-meter-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; padding: 0; margin: 0; list-style: none; }
+.ov-meter-steps li { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 104px; padding: 16px; border-radius: var(--radius-lg); background: var(--bg-elevated); }
+.ov-meter-steps strong { font-size: 26px; line-height: 30px; }
+.ov-meter-steps [data-state='pass'] { background: var(--surface-success-bg); }
+.ov-meter-steps [aria-current='step'] { background: var(--surface-warning-bg); color: var(--surface-warning-text); }
+
+.ov-meter-steps span { overflow-wrap: anywhere; }
+@media (max-width: 720px) { .ov-meter-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-meter-steps li { padding: 12px; min-height: 94px; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "2.0.9",
+  "version": "2.0.12",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",