diff --git a/frontend/src/components/Common/Sparkline.tsx b/frontend/src/components/Common/Sparkline.tsx index 7be9b9d..0bc4d98 100644 --- a/frontend/src/components/Common/Sparkline.tsx +++ b/frontend/src/components/Common/Sparkline.tsx @@ -9,8 +9,14 @@ const PAD = 8 /** Above this ratio a linear series is all baseline and one spike. */ const LOG_RATIO = 100 -/** How far the left end fades over, in viewBox units. */ -const FADE = 40 +/** + * How far the left end fades over, in viewBox units — a quarter of the width. + * + * Proportional, so it reads the same in a panel and in a table cell three + * times as wide. Any more and a wide curve loses readings that are still + * part of what the series says. + */ +const FADE = 25 /** Enough digits to tell two neighbouring readings apart. */ const READOUT_DIGITS = 4 diff --git a/frontend/src/components/Health/HealthOverview.tsx b/frontend/src/components/Health/HealthOverview.tsx index e895568..a08e5c6 100644 --- a/frontend/src/components/Health/HealthOverview.tsx +++ b/frontend/src/components/Health/HealthOverview.tsx @@ -113,7 +113,7 @@ export function HealthOverview() { /> Flow activity (24h)
{/* The name anchors the left, the numbers read down their own - centre, and the trend takes whatever width is left over. */} + centre, and the trend closes the row on the right. */} @@ -148,7 +148,10 @@ export function HealthOverview() { - @@ -165,10 +168,14 @@ export function HealthOverview() { {row.flow || "—"} - +
Errors Avg Lag + {/* A bounded share rather than all the slack: the columns + beside it grow with their own content, so the numbers + spread across the middle instead of huddling on the left. */} + Trend
{row.executions} + {si(row.executions)} + {row.errors ? ( - {row.errors} failed + + {si(row.errors)} failed + ) : ( none )} diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index 10fbb9e..a9d9260 100644 --- a/frontend/src/lib/utils.ts +++ b/frontend/src/lib/utils.ts @@ -24,9 +24,11 @@ const SI_STEPS: [number, string][] = [ * keeps a reading in its column, and beyond giga or micro the exponent is. * * Where it applies: anything read at a glance and bounded by the width of a - * tile, a table cell, an axis gutter or a legend. Exact counts (executions, - * failures) and anything the user is about to act on — a payload, a form - * field, the edge inspector's value — stay unrounded. + * tile, a table cell, an axis gutter or a legend — a rollup's own counts + * included, since 179240 executions is a size, not a number anyone reads + * digit by digit. What the user acts on stays unrounded: a payload, a form + * field, the edge inspector's value, and the standing counts (nodes, flows + * running, queue depth) that are small by nature and exact by meaning. */ export function si(value: number, digits = 3): string { if (!Number.isFinite(value)) return "--"