fix(hub): ui bug where charts didn't display 1m max until next update

internal/site/src/components/charts/area-chart.tsx

@@ -67,8 +67,8 @@ export default function AreaChartDefault({
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { isIntersecting, ref } = useIntersectionObserver({ freeze: false })
 	const sourceData = customData ?? chartData.systemStats
-	// Only update the rendered data while the chart is visible
 	const [displayData, setDisplayData] = useState(sourceData)
+	const [displayMaxToggled, setDisplayMaxToggled] = useState(maxToggled)
 
 	// Reduce chart redraws by only updating while visible or when chart time changes
 	useEffect(() => {
@@ -78,7 +78,10 @@ export default function AreaChartDefault({
 		if (shouldUpdate) {
 			setDisplayData(sourceData)
 		}
-	}, [displayData, isIntersecting, sourceData])
+		if (isIntersecting && maxToggled !== displayMaxToggled) {
+			setDisplayMaxToggled(maxToggled)
+		}
+	}, [displayData, displayMaxToggled, isIntersecting, maxToggled, sourceData])
 
 	// Use a stable key derived from data point identities and visual properties
 	const areasKey = dataPoints?.map((d) => `${d.label}:${d.opacity}`).join("\0")
@@ -106,14 +109,14 @@ export default function AreaChartDefault({
 				/>
 			)
 		})
-	}, [areasKey, maxToggled])
+	}, [areasKey, displayMaxToggled])
 
 	return useMemo(() => {
 		if (displayData.length === 0) {
 			return null
 		}
 		// if (logRender) {
-		// console.log("Rendered at", new Date(), "for", dataPoints?.at(0)?.label)
+		// console.log("Rendered", dataPoints?.map((d) => d.label).join(", "), new Date())
 		// }
 		return (
 			<ChartContainer
@@ -163,5 +166,5 @@ export default function AreaChartDefault({
 				</AreaChart>
 			</ChartContainer>
 		)
-	}, [displayData, yAxisWidth, showTotal, filter])
+	}, [displayData, yAxisWidth, filter, Areas])
 }

internal/site/src/components/charts/line-chart.tsx

@@ -66,8 +66,8 @@ export default function LineChartDefault({
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { isIntersecting, ref } = useIntersectionObserver({ freeze: false })
 	const sourceData = customData ?? chartData.systemStats
-	// Only update the rendered data while the chart is visible
 	const [displayData, setDisplayData] = useState(sourceData)
+	const [displayMaxToggled, setDisplayMaxToggled] = useState(maxToggled)
 
 	// Reduce chart redraws by only updating while visible or when chart time changes
 	useEffect(() => {
@@ -77,7 +77,10 @@ export default function LineChartDefault({
 		if (shouldUpdate) {
 			setDisplayData(sourceData)
 		}
-	}, [displayData, isIntersecting, sourceData])
+		if (isIntersecting && maxToggled !== displayMaxToggled) {
+			setDisplayMaxToggled(maxToggled)
+		}
+	}, [displayData, displayMaxToggled, isIntersecting, maxToggled, sourceData])
 
 	// Use a stable key derived from data point identities and visual properties
 	const linesKey = dataPoints?.map((d) => `${d.label}:${d.strokeOpacity ?? ""}`).join("\0")
@@ -105,14 +108,14 @@ export default function LineChartDefault({
 				/>
 			)
 		})
-	}, [linesKey, maxToggled])
+	}, [linesKey, displayMaxToggled])
 
 	return useMemo(() => {
 		if (displayData.length === 0) {
 			return null
 		}
 		// if (logRender) {
-		// console.log("Rendered at", new Date(), "for", dataPoints?.at(0)?.label)
+		// console.log("Rendered", dataPoints?.map((d) => d.label).join(", "), new Date())
 		// }
 		return (
 			<ChartContainer
@@ -162,5 +165,5 @@ export default function LineChartDefault({
 				</LineChart>
 			</ChartContainer>
 		)
-	}, [displayData, yAxisWidth, showTotal, filter, chartData.chartTime])
+	}, [displayData, yAxisWidth, filter, Lines])
 }

internal/site/src/components/systemd-table/systemd-table.tsx

@@ -18,7 +18,7 @@ import { listenKeys } from "nanostores"
 import { memo, type ReactNode, useEffect, useMemo, useRef, useState } from "react"
 import { getStatusColor, systemdTableCols } from "@/components/systemd-table/systemd-table-columns"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -161,13 +161,13 @@ export default function SystemdTable({ systemId }: { systemId?: string }) {
 						<CardTitle className="mb-2">
 							<Trans>Systemd Services</Trans>
 						</CardTitle>
-						<CardDescription className="flex items-center">
+						<div className="text-sm text-muted-foreground flex items-center flex-wrap">
 							<Trans>Total: {data.length}</Trans>
 							<Separator orientation="vertical" className="h-4 mx-2 bg-primary/40" />
 							<Trans>Failed: {statusTotals[ServiceStatus.Failed]}</Trans>
 							<Separator orientation="vertical" className="h-4 mx-2 bg-primary/40" />
 							<Trans>Updated every 10 minutes.</Trans>
-						</CardDescription>
+						</div>
 					</div>
 					<Input
 						placeholder={t`Filter...`}