@tangle-network/charts 0.20.2 → 0.21.0

package/dist/react/flow-waterfall.css

@@ -262,7 +262,8 @@
 .fw-root .fw-badge { height: 18px; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--fw-amber); background: color-mix(in oklab, var(--fw-amber) 13%, transparent); border: 1px solid color-mix(in oklab, var(--fw-amber) 28%, transparent); }
 
 /* Handoff elbows: 1.5 px stroke, 6 px radius, a 5 px dot where the handoff leaves its sender. */
-.fw-root .fw-links { position: absolute; top: 0; bottom: 0; left: var(--fw-label-col); right: 0; overflow: hidden; pointer-events: none; z-index: 1; }
+/* Under the rows (which follow it), so end labels and badges always sit above the connectors. */
+.fw-root .fw-links { position: absolute; top: 0; bottom: 0; left: var(--fw-label-col); right: 0; overflow: hidden; pointer-events: none; z-index: 0; }
 .fw-root .fw-link {
   --x: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px);
   position: absolute; width: 8px; border: 0 solid var(--line); border-bottom-width: 1.5px; translate: 0 var(--fw-bar-shift);

package/dist/react/index.d.ts

@@ -277,6 +277,31 @@ export declare function Gantt({ rows, lanes: laneInput, colors, axis, span, mark
   hatch?: string[];
 }): import("react").JSX.Element;
 //#endregion
+//#region src/react/gap.d.ts
+interface GapBand {
+  min: number;
+  max: number;
+}
+interface GapProps {
+  value: number;
+  /** A bound, not a measurement: the true value is at most (upper) or at least (lower) `value`; drawn as an open arrow. */
+  bound?: 'upper' | 'lower' | null;
+  target: GapBand;
+  stretch?: GapBand | null;
+  scale?: 'log' | 'linear';
+  format?: (value: number) => string;
+  /** The value mark's color; the caller's state color. */
+  tone?: string;
+  /** Hover text for each mark; defaults name the numbers. */
+  titles?: {
+    value?: string;
+    target?: string;
+    stretch?: string;
+  };
+  label?: string;
+}
+export declare function Gap({ value, bound, target, stretch, scale, format, tone, titles, label }: GapProps): import("react").JSX.Element;
+//#endregion
 //#region src/react/figure-view.d.ts
 /** A figure drawn for a width: FigureView calls it with its container's measured width (at least 720 px). */
 type FigureAtWidth = (width: number) => Figure | Refusal;
@@ -391,4 +416,4 @@ interface FlowWaterfallProps {
  * Data remains producer-owned; playback, zoom and folding change presentation only. */
 export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCollapsed, defaultView, renderIcon, maxHeight, onSelect, markers, onTimeChange, agentFill, selectedId, onDeselect, description, summary: showSummary }: FlowWaterfallProps): import("react").JSX.Element;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };
+export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, GapBand, GapProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -1765,6 +1765,118 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
 	});
 }
 //#endregion
+//#region src/react/gap.tsx
+/** One reading against its target band on one scale: how far a value sits from where it should be. Values, words and
+* colors belong to callers; the chart only places them. */
+const HEIGHT = 24;
+const MID = HEIGHT / 2;
+function Gap({ value, bound = null, target, stretch = null, scale = "log", format = formatCompact, tone = "var(--chart-live-accent, #8b7cf6)", titles = {}, label }) {
+	const [ref, width] = useWidth();
+	const log = scale === "log" && value > 0 && target.min > 0;
+	const f = (v) => log ? Math.log10(v) : v;
+	const ends = [
+		value,
+		target.min,
+		target.max,
+		...stretch ? [stretch.min, stretch.max] : []
+	].map(f);
+	const lo = Math.min(...ends);
+	const hi = Math.max(...ends);
+	const pad = Math.max((hi - lo) * .08, log ? .15 : Math.abs(hi) * .05 || 1);
+	const x = (v) => width ? (f(v) - (lo - pad)) / (hi - lo + 2 * pad) * width : 0;
+	const band = (b) => ({
+		x: x(b.min),
+		w: Math.max(4, x(b.max) - x(b.min))
+	});
+	const t = band(target);
+	const s = stretch ? band(stretch) : null;
+	const near = value < target.min ? x(target.min) : value > target.max ? x(target.max) : x(value);
+	const vx = x(value);
+	const range = (b) => b.min === b.max ? `≈${format(b.min)}` : `${format(b.min)}–${format(b.max)}`;
+	const decades = log && width ? Array.from({ length: Math.floor(hi + pad) - Math.ceil(lo - pad) + 1 }, (_, i) => Math.ceil(lo - pad) + i) : [];
+	const arrow = bound === "upper" ? `M${vx + 4},6 L${vx - 4},${MID} L${vx + 4},18` : `M${vx - 4},6 L${vx + 4},${MID} L${vx - 4},18`;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "ov-gap",
+		role: "img",
+		"aria-label": label ?? `${bound === "upper" ? "≤" : bound === "lower" ? "≥" : ""}${format(value)} against ${range(target)}`,
+		children: width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height: HEIGHT,
+			viewBox: `0 0 ${width} ${HEIGHT}`,
+			"aria-hidden": true,
+			children: [
+				/* @__PURE__ */ jsx("line", {
+					className: "ov-gap-track",
+					x1: 0,
+					x2: width,
+					y1: MID,
+					y2: MID
+				}),
+				decades.map((d) => /* @__PURE__ */ jsx("line", {
+					className: "ov-gap-tick",
+					x1: x(10 ** d),
+					x2: x(10 ** d),
+					y1: 8,
+					y2: 16
+				}, d)),
+				s && /* @__PURE__ */ jsx("rect", {
+					className: "ov-gap-stretch",
+					x: s.x,
+					y: 4,
+					width: s.w,
+					height: 16,
+					rx: 4,
+					children: /* @__PURE__ */ jsx("title", { children: titles.stretch ?? `stretch ${range(stretch)}` })
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					className: "ov-gap-target",
+					x: t.x,
+					y: 4,
+					width: t.w,
+					height: 16,
+					rx: 4,
+					children: /* @__PURE__ */ jsx("title", { children: titles.target ?? `target ${range(target)}` })
+				}),
+				Math.abs(near - vx) > 1 && /* @__PURE__ */ jsx("line", {
+					className: "ov-gap-span",
+					x1: vx,
+					x2: near,
+					y1: MID,
+					y2: MID,
+					style: { stroke: tone }
+				}),
+				/* @__PURE__ */ jsxs("g", {
+					className: "ov-gap-value",
+					children: [
+						/* @__PURE__ */ jsx("title", { children: titles.value ?? `${bound === "upper" ? "≤" : bound === "lower" ? "≥" : ""}${format(value)}` }),
+						bound ? /* @__PURE__ */ jsx("path", {
+							d: arrow,
+							fill: "none",
+							stroke: tone,
+							strokeWidth: 2,
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						}) : /* @__PURE__ */ jsx("circle", {
+							cx: vx,
+							cy: MID,
+							r: 5,
+							fill: tone
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: vx - 8,
+							y: 0,
+							width: 16,
+							height: HEIGHT,
+							fill: "transparent"
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
 //#region src/react/figure-view.tsx
 /** Embeds a static Figure or Refusal in React: the wide or phone render chosen by the container's width, the data
 * table in a disclosure. The SVG and table strings come from this library's figure functions, which escape input. */
@@ -2663,7 +2775,8 @@ function agentFamilies(agents, open) {
 				detail: members[0].span.detail,
 				meta: {
 					failedAgents: failed,
-					costPartial: known.length < members.length
+					costPartial: known.length < members.length,
+					members: members.map((row) => row.id)
 				}
 			}
 		});
@@ -2780,6 +2893,16 @@ function stepRuns(steps) {
 	}
 	return out;
 }
+/** A row as the view draws it: its drawn copy, or for a member of a folded family, itself in the family's hue. */
+function drawnRow(row, visible) {
+	const drawn = visible.find((item) => item.id === row.id);
+	if (drawn) return drawn;
+	const family = visible.find((item) => (item.span.meta?.members)?.includes(row.id));
+	return family ? {
+		...row,
+		tone: family.tone
+	} : row;
+}
 //#endregion
 //#region src/react/flow-waterfall-icons.tsx
 const svg = (children, label) => /* @__PURE__ */ jsx("svg", {
@@ -4550,7 +4673,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const busy = agents.reduce((sum, row) => sum + busyMs(row, limit), 0);
 	const speedup = limit > 0 ? busy / limit : 0;
 	const done = !isLive && !trace.spans.some(spanRunning);
-	const shown = (row) => row && (visible.find((item) => item.id === row.id) ?? row);
+	const shown = (row) => row && drawnRow(row, visible);
 	const cardRow = shown(card ? byId.get(card.target) : void 0);
 	const cardAgent = cardRow && (() => {
 		for (let cursor = cardRow; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) if (cursor.kind === "pipeline") return shown(cursor);
@@ -4781,4 +4904,4 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, FlowWaterfall, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, FlowWaterfall, Gantt, Gap, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };

package/dist/react/live.css

@@ -89,3 +89,11 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .tgc-dot-map { color: var(--chart-live-muted, #8a8a8a); }
 .tgc-dot-map canvas:focus-visible { outline: 2px solid var(--chart-accent, #7760bd); outline-offset: 2px; }
 .tgc-dot-map-tip { z-index: 2; max-width: 300px; padding: 6px 9px; border-radius: 6px; background: var(--chart-tip-bg, #262626); color: var(--chart-tip-ink, #eee); font: 12px/1.4 ui-sans-serif, system-ui, sans-serif; white-space: pre-line; box-shadow: 0 4px 14px rgb(0 0 0 / .3); }
+.ov-gap { width: 100%; min-width: 96px; height: 24px; }
+.ov-gap svg { display: block; overflow: visible; }
+.ov-gap-track { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 40%, transparent); stroke-width: 1; }
+.ov-gap-tick { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 60%, transparent); stroke-width: 1; }
+.ov-gap-target { fill: color-mix(in srgb, var(--chart-live-pass, #2f9e6e) 28%, transparent); stroke: var(--chart-live-pass, #2f9e6e); stroke-width: 1; }
+.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; }

package/package.json

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