@tangle-network/charts 0.21.13 → 0.21.14

package/dist/react/flow-waterfall.css

@@ -224,6 +224,9 @@
 .fw-root .fw-row[data-running] .fw-bar { transition: width 120ms linear; }
 /* The chain that gates the trace's end: an accent edge under its bars, so cutting latency there is visibly what moves the end. */
 .fw-root .fw-row[data-critical] .fw-bar { box-shadow: inset 0 -2px 0 var(--fw-accent); }
+/* While searching, ancestors shown only for context recede and the matching names stand out. */
+.fw-root .fw-row[data-search="context"] .fw-label { opacity: 0.55; }
+.fw-root .fw-row[data-search="match"] .fw-name-text { font-weight: 600; }
 /* A restart: an amber notch through the bar at that moment; the bar keeps its own state. */
 .fw-root .fw-mark { position: absolute; z-index: 2; left: calc(var(--x0) - 1px); width: 2px; top: calc(50% + var(--fw-bar-shift) - var(--fw-bar-h) / 2 - 4px); height: calc(var(--fw-bar-h) + 8px);
   border-radius: 2px; background: var(--fw-amber); box-shadow: 0 0 0 1px var(--fw-surface); opacity: var(--on); pointer-events: auto; }

package/dist/react/index.js

@@ -2590,15 +2590,19 @@ function segmentOf(row) {
 		name: row.name
 	};
 }
+/** The rows a search term matches by themselves, before ancestor context is added. */
+function searchMatchIds(rows, query, matchSpan) {
+	const term = query.trim();
+	const lower = term.toLowerCase();
+	return new Set(rows.filter((row) => matchSpan ? matchSpan(row.span, term) : `${row.name} ${row.span.detail ?? ""} ${row.kind} ${row.ok ? "" : "failed"} ${row.span.status ?? ""}`.toLowerCase().includes(lower)).map((row) => row.id));
+}
 /** Search keeps ancestor context and deliberately reveals matches inside collapsed branches. */
 function visibleFlowWaterfallRows(rows, query, collapsed, matchSpan) {
 	const byId = new Map(rows.map((row) => [row.id, row]));
-	const term = query.trim().toLowerCase();
-	if (term) {
+	if (query.trim()) {
 		const matching = /* @__PURE__ */ new Set();
-		for (const row of rows) {
-			if (matchSpan ? !matchSpan(row.span, query.trim()) : !`${row.name} ${row.span.detail ?? ""} ${row.kind} ${row.ok ? "" : "failed"} ${row.span.status ?? ""}`.toLowerCase().includes(term)) continue;
-			let cursor = row;
+		for (const id of searchMatchIds(rows, query, matchSpan)) {
+			let cursor = byId.get(id);
 			while (cursor && !matching.has(cursor.id)) {
 				matching.add(cursor.id);
 				cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0;
@@ -2632,7 +2636,12 @@ function slowestRow(rows, clockMs) {
 * chain ends last wins. Cutting latency anywhere else leaves the trace's end unchanged. */
 function criticalPathIds(rows) {
 	const children = /* @__PURE__ */ new Map();
-	for (const row of rows) if (row.parentId) children.set(row.parentId, [...children.get(row.parentId) ?? [], row]);
+	for (const row of rows) {
+		if (!row.parentId) continue;
+		const siblings = children.get(row.parentId);
+		if (siblings) siblings.push(row);
+		else children.set(row.parentId, [row]);
+	}
 	let best;
 	for (const root of rows) {
 		if (root.parentId) continue;
@@ -3346,7 +3355,7 @@ function endLabel(row, clockMs) {
 }
 /** One trace row. Geometry comes from CSS variables, so a row re-renders only when its own state changes. */
 const FlowRow = memo(function FlowRow(props) {
-	const { row, view, top, collapsed, searching, slowest, costliest, critical, active, focusable, selected, sticky, clockMs, renderIcon, fillByAgent, motion } = props;
+	const { row, view, top, collapsed, searching, slowest, costliest, critical, matched, active, focusable, selected, sticky, clockMs, renderIcon, fillByAgent, motion } = props;
 	const span = row.span;
 	const running = spanRunning(span);
 	const agentView = view === "agents";
@@ -3368,6 +3377,7 @@ const FlowRow = memo(function FlowRow(props) {
 		"data-span-kind": kind,
 		"data-slowest": slowest || void 0,
 		"data-critical": critical || void 0,
+		"data-search": searching ? matched ? "match" : "context" : void 0,
 		"data-running": running || void 0,
 		"aria-level": agentView ? void 0 : row.depth + 1,
 		"aria-expanded": row.hasChildren && !agentView ? !folded : void 0,
@@ -3562,7 +3572,7 @@ const FlowRow = memo(function FlowRow(props) {
 			] })
 		})]
 	});
-}, (a, b) => a.row === b.row && a.view === b.view && a.top === b.top && a.collapsed === b.collapsed && a.searching === b.searching && a.slowest === b.slowest && a.costliest === b.costliest && a.critical === b.critical && a.active === b.active && a.focusable === b.focusable && a.selected === b.selected && a.sticky === b.sticky && a.motion === b.motion && a.renderIcon === b.renderIcon && a.fillByAgent === b.fillByAgent && a.sharedDetail === b.sharedDetail && a.expanded === b.expanded && (a.clockMs === b.clockMs || !open(a.row, a.clockMs) && !open(b.row, b.clockMs)));
+}, (a, b) => a.row === b.row && a.view === b.view && a.top === b.top && a.collapsed === b.collapsed && a.searching === b.searching && a.slowest === b.slowest && a.costliest === b.costliest && a.critical === b.critical && a.matched === b.matched && a.active === b.active && a.focusable === b.focusable && a.selected === b.selected && a.sticky === b.sticky && a.motion === b.motion && a.renderIcon === b.renderIcon && a.fillByAgent === b.fillByAgent && a.sharedDetail === b.sharedDetail && a.expanded === b.expanded && (a.clockMs === b.clockMs || !open(a.row, a.clockMs) && !open(b.row, b.clockMs)));
 /** An elbow connector between two rows at one moment, drawn in the row's tone; appears when the clock reaches it. */
 function LinkMark({ link, rowHeight, hot }) {
 	const upper = Math.min(link.from, link.to), lower = Math.max(link.from, link.to);
@@ -3774,6 +3784,12 @@ function FlowBody(props) {
 		props.byId,
 		view
 	]);
+	const matched = useMemo(() => searching ? searchMatchIds(rows, props.query, props.matchSpan) : void 0, [
+		searching,
+		rows,
+		props.query,
+		props.matchSpan
+	]);
 	const index = useMemo(() => new Map(rows.map((row, i) => [row.id, i])), [rows]);
 	const motion = useRowMotion(rows);
 	const [jumped, setJumped] = useState();
@@ -3847,13 +3863,24 @@ function FlowBody(props) {
 	}, []);
 	const first = Math.max(0, chunk * CHUNK - OVERSCAN);
 	const last = Math.min(rows.length, chunk * CHUNK + Math.ceil(viewport / rowHeight) + CHUNK + OVERSCAN);
+	const scrollToRow = (i, element) => {
+		const offset = (view === "spans" ? Math.min(STICKY_LEVELS, rows[i].depth) : 0) * rowHeight;
+		if (i * rowHeight - offset < element.scrollTop) element.scrollTop = Math.max(0, i * rowHeight - offset);
+		else if ((i + 1) * rowHeight > element.scrollTop + element.clientHeight) element.scrollTop = (i + 1) * rowHeight - element.clientHeight;
+	};
+	const shownSelection = useRef(void 0);
+	useEffect(() => {
+		if (!selectedId || selectedId === shownSelection.current) return;
+		const i = index.get(selectedId);
+		if (i === void 0 || !scroller.current) return;
+		shownSelection.current = selectedId;
+		scrollToRow(i, scroller.current);
+	});
 	const focusRow = (id) => {
 		const i = index.get(id);
 		const element = scroller.current;
 		if (i === void 0 || !element) return;
-		const offset = (view === "spans" ? Math.min(STICKY_LEVELS, rows[i].depth) : 0) * rowHeight;
-		if (i * rowHeight - offset < element.scrollTop) element.scrollTop = Math.max(0, i * rowHeight - offset);
-		else if ((i + 1) * rowHeight > element.scrollTop + element.clientHeight) element.scrollTop = (i + 1) * rowHeight - element.clientHeight;
+		scrollToRow(i, element);
 		props.onActiveChange(id);
 		requestAnimationFrame(() => element.querySelector(`.fw-canvas [data-span-id="${CSS.escape(id)}"]`)?.focus({ preventScroll: true }));
 	};
@@ -4021,6 +4048,7 @@ function FlowBody(props) {
 		slowest: item.id === slowestId,
 		costliest: item.id === props.costliestId,
 		critical: props.criticalIds?.has(item.id),
+		matched: matched?.has(item.id),
 		active: item.id === activeId,
 		focusable: !isSticky && (item.id === activeId || (activeId === void 0 || !index.has(activeId)) && i === 0),
 		selected: item.id === selectedId,
@@ -4975,6 +5003,8 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 				maxHeight: rowsHeight,
 				collapsed,
 				searching: Boolean(query.trim()),
+				query,
+				matchSpan,
 				pauses: trace.pauses,
 				cursorLine: position !== null || playing,
 				sharedDetail,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.21.13",
+  "version": "0.21.14",
   "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",