Keep the theme redraw from wiping a chart's x scale

Reaching Home from another page builds its charts in the same commit their
theme effect first fires in, with the readings already cached. uPlot ranges its
scales in a microtask, so `redraw()` re-set the x scale from the chart's own —
still empty — bounds before that ran, and the pending range taken from the data
was lost: axes without ticks, no lines, and no way back but the range control,
which rebuilds the chart. Redrawing without the paths is all a colour swap
needs and leaves the scales alone.

The cards also carried "Nothing has run yet." while the first readings were
still on their way; they now carry the skeleton the rest of Home uses.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SKL7sUgNWhukDEz95vSMQv
This commit is contained in:
2026-08-20 14:33:17 +02:00
co-authored by Claude Opus 5
parent c23b2ccc2e
commit 3e95842b5f
3 changed files with 28 additions and 7 deletions
@@ -100,11 +100,13 @@ function Chart({
title,
labels,
plots,
pending,
moment,
}: {
title: string
labels: string[]
plots: HistoryPoint[][]
pending: boolean
moment: Moment
}) {
return (
@@ -127,6 +129,7 @@ function Chart({
labels={labels}
plots={plots}
empty="Nothing has run yet."
pending={pending}
onCursor={moment.onCursor}
onSelect={moment.onSelect}
/>
@@ -205,7 +208,9 @@ export function HealthActivity({ range }: { range: Range }) {
const runsAt = useMoment()
const failuresAt = useMoment()
const { data: series } = useQuery(timeseriesQueryOptions(range))
const { data: series, isPending: seriesPending } = useQuery(
timeseriesQueryOptions(range),
)
const { data: runs } = useQuery(runsQueryOptions(range))
const { data: pinnedRuns } = useQuery(minuteRunsQueryOptions(runsAt.pinned))
const { data: failures } = useQuery(failuresQueryOptions(range))
@@ -267,6 +272,7 @@ export function HealthActivity({ range }: { range: Range }) {
at((point) => point.messages),
at((point) => point.executions),
]}
pending={seriesPending}
moment={runsAt}
/>
<Chart
@@ -277,6 +283,7 @@ export function HealthActivity({ range }: { range: Range }) {
at((point) => point.avg_ms),
at((point) => point.avg_lag_ms),
]}
pending={seriesPending}
moment={failuresAt}
/>
</section>