Top: a graph's past holds still — columns draw the peak of their own fixed slice of history

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/Top.tsx

@@ -10,6 +10,7 @@ import { fetchCatalog, fetchHistories, useSensorStream } from './sensors'
 import { fmtMs, nextPoint, REFRESH_OPTIONS, setRefreshMs, strideMs, useHistorySec, useRefreshMs } from './prefs'
 import { Loading, askYes, toast } from './ui'
 import { Theme, currentThemeId, themeById } from './themes'
+import { columnsOf } from './graphcols'
 import { savePrefs } from './accents'
 
 const MAX = 300 // points kept per curve, as the machines keep them
@@ -67,7 +68,7 @@ function at(g: readonly string[], t: number): string {
 
 // ---- the dot graph ----
 // One dot column per sample, filled from the bottom, each dot coloured by how high it sits.
-function Graph({ values, tick, cap, max, grad, flip = false }: { values: number[]; tick: number; cap: number; max?: number; grad: GradName; flip?: boolean }) {
+function Graph({ values, tick, advance, cap, max, grad, flip = false }: { values: number[]; tick: number; advance: number; cap: number; max?: number; grad: GradName; flip?: boolean }) {
   const ref = useRef<HTMLCanvasElement>(null)
   const box = useRef<HTMLDivElement>(null)
   const pal = useContext(Pal)
@@ -89,14 +90,9 @@ function Graph({ values, tick, cap, max, grad, flip = false }: { values: number[
     const step = 3, rows = Math.max(1, Math.floor(height / step)), cols = Math.max(1, Math.floor(w / step))
     // The box is the whole window, always: `cap` points wide (what the window holds at this
     // rate) whatever the box measures, so a full history fills it edge to edge and a machine
-    // that has only just started draws in from the right, as btop does — a handful of samples
-    // is not stretched into a bar chart.
-    const n = Math.min(values.length, cap)
-    const seen: number[] = []
-    for (let c = 0; c < cols; c++) {
-      const i = Math.floor((c * cap) / cols) - (cap - n)
-      if (i >= 0) seen.push(values[values.length - n + i])
-    }
+    // that has only just started draws in from the right, as btop does. Which points each
+    // column draws — the peak of its own fixed slice of the history — is graphcols.ts.
+    const seen = columnsOf(values, advance, cap, cols)
     const top = max ?? Math.max(1, ...seen)
     const stops = pal[grad]
     for (let i = 0; i < seen.length; i++) {
@@ -110,7 +106,7 @@ function Graph({ values, tick, cap, max, grad, flip = false }: { values: number[
         g.fillRect(x, y, 2, 2)
       }
     }
-  }, [values, tick, cap, w, height, max, grad, flip, pal]) // tick: the curve is appended to in place
+  }, [values, tick, advance, cap, w, height, max, grad, flip, pal]) // tick: the curve is appended to in place
   return <div className="tg" ref={box} data-n={values.length}><canvas ref={ref} style={{ width: '100%', height: '100%' }} /></div>
 }
 
@@ -196,6 +192,7 @@ function useCurves(live: Values | null, t: number, refreshMs: number, historySec
   const cur = useRef<Map<string, number[]>>(new Map())
   const lastT = useRef(0)
   const binN = useRef(1)
+  const adv = useRef(0) // the number of the newest point, counted since the page opened: what a graph's columns are cut by
   const [ticks, bump] = useState(0)
   const seed = useCallback(async () => {
     try {
@@ -215,6 +212,7 @@ function useCurves(live: Values | null, t: number, refreshMs: number, historySec
     const { fresh, start } = nextPoint(t, lastT.current, strideMs(historySec, refreshMs), refreshMs)
     binN.current = fresh ? 1 : binN.current + 1
     lastT.current = start
+    if (fresh) adv.current++
     const n = binN.current
     for (const [id, v] of Object.entries(live)) {
       if (typeof v !== 'number') continue
@@ -226,7 +224,7 @@ function useCurves(live: Values | null, t: number, refreshMs: number, historySec
     }
     bump((x) => x + 1)
   }, [live, t, refreshMs, historySec])
-  return [cur.current, ticks] as const
+  return [cur.current, ticks, adv.current] as const
 }
 
 // ---- the page ----
@@ -248,7 +246,7 @@ export default function Top() {
     fetchCatalog().then((c) => { catalog.current = new Map(c.map((x) => [x.id, x])) }).catch(() => {}).finally(() => window.setTimeout(() => { refetching.current = false }, 10000))
   }, [values])
   const s: Sample | null = useMemo(() => (values && ready ? sampleOf(values, catalog.current) : null), [values, ready])
-  const [curves, tick] = useCurves(values, s?.t ?? 0, refreshMs, historySec, stream.resumed)
+  const [curves, tick, advance] = useCurves(values, s?.t ?? 0, refreshMs, historySec, stream.resumed)
 
   // the process table, and the CPU model, come from the same place the Processes page reads
   const [pt, setPt] = useState<ProcTable | null>(null)
@@ -321,6 +319,8 @@ export default function Top() {
   const iface = net[0]
   const fs = s?.fs ?? []
   const pct = (a: number, b: number) => (b > 0 ? (a / b) * 100 : 0)
+  // the top of a graph's scale: the peak of what it is drawing — the window, not everything kept
+  const peak = (id: string) => Math.max(1, ...(curves.get(id) ?? []).slice(-cap))
 
   return (
     <Pal.Provider value={pal}>
@@ -335,7 +335,7 @@ export default function Top() {
       </>}>
         <div className="t-cpu">
           <div className="t-cpu-graph">
-            <Graph values={curves.get('cpu.usage') ?? []} tick={tick} cap={cap} max={100} grad="cpu" />
+            <Graph values={curves.get('cpu.usage') ?? []} tick={tick} advance={advance} cap={cap} max={100} grad="cpu" />
             <div className="t-up">up {upfor(uptime)}</div>
           </div>
           <div className="t-cores">
@@ -389,12 +389,12 @@ export default function Top() {
           <div className="t-net">
             <div className="t-net-graphs">
               <div className="t-net-g">
-                <span className="t-scale">{rate(Math.max(1, ...(curves.get(`net.${segOf(iface.iface)}.rx`) ?? [0])))}</span>
-                <Graph values={curves.get(`net.${segOf(iface.iface)}.rx`) ?? []} tick={tick} cap={cap} grad="down" />
+                <span className="t-scale">{rate(peak(`net.${segOf(iface.iface)}.rx`))}</span>
+                <Graph values={curves.get(`net.${segOf(iface.iface)}.rx`) ?? []} tick={tick} advance={advance} cap={cap} grad="down" />
               </div>
               <div className="t-net-g">
-                <Graph values={curves.get(`net.${segOf(iface.iface)}.tx`) ?? []} tick={tick} cap={cap} grad="up" flip />
-                <span className="t-scale t-scale-b">{rate(Math.max(1, ...(curves.get(`net.${segOf(iface.iface)}.tx`) ?? [0])))}</span>
+                <Graph values={curves.get(`net.${segOf(iface.iface)}.tx`) ?? []} tick={tick} advance={advance} cap={cap} grad="up" flip />
+                <span className="t-scale t-scale-b">{rate(peak(`net.${segOf(iface.iface)}.tx`))}</span>
               </div>
             </div>
             <div className="t-net-nums">