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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user