ui: type-matched glyphs in the expanded series rows too (#40)

Every metric in practice is multi-series, so the collapsed rows show '—' and
the data the user actually sees is the expanded per-series sub-rows — which
were still plain line sparklines for all types. Now those match the type:
counters render rate bars, histograms render their per-series latency
distribution (hist_facet returns each series' latest bucket_counts + shared
bounds), gauges keep the value line.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: thejefflarson

server/src/api.rs

@@ -701,11 +701,16 @@ pub struct HistFacetPoint {
 pub struct HistFacetSeries {
     attrs: serde_json::Value,
     points: Vec<HistFacetPoint>,
+    /// This series' most recent per-bucket counts, so the row can draw the
+    /// distribution shape (bars) rather than just a percentile line.
+    dist: Vec<i64>,
 }
 
 #[derive(Serialize)]
 pub struct HistFacetResponse {
     unit: Option<String>,
+    /// Bucket upper bounds shared by the series' `dist` arrays.
+    bounds: Vec<f64>,
     series: Vec<HistFacetSeries>,
     truncated: i64,
 }
@@ -743,8 +748,14 @@ pub async fn metric_hist_facet(
     .map_err(internal)?;
 
     let mut unit: Option<String> = None;
-    let mut map: std::collections::BTreeMap<String, (serde_json::Value, Vec<HistFacetPoint>)> =
-        std::collections::BTreeMap::new();
+    let mut bounds: Vec<f64> = Vec::new();
+    // Rows are ordered t ASC, so the last counts seen per series is the latest
+    // distribution.
+    #[allow(clippy::type_complexity)]
+    let mut map: std::collections::BTreeMap<
+        String,
+        (serde_json::Value, Vec<HistFacetPoint>, Vec<i64>),
+    > = std::collections::BTreeMap::new();
     for r in rows {
         if unit.is_none() {
             unit = r.unit;
@@ -753,28 +764,37 @@ pub async fn metric_hist_facet(
             (Some(b), Some(c)) if c.len() == b.len() + 1 => (b, c),
             _ => continue,
         };
+        if bounds.is_empty() {
+            bounds = b.clone();
+        }
         let point = HistFacetPoint {
             t: r.t,
             p50: hist_quantile(&b, &c, 0.50),
             p95: hist_quantile(&b, &c, 0.95),
             p99: hist_quantile(&b, &c, 0.99),
         };
-        map.entry(r.attrs.to_string())
-            .or_insert_with(|| (r.attrs, Vec::new()))
-            .1
-            .push(point);
+        let entry = map
+            .entry(r.attrs.to_string())
+            .or_insert_with(|| (r.attrs, Vec::new(), Vec::new()));
+        entry.1.push(point);
+        entry.2 = c;
     }
 
     let mut series: Vec<HistFacetSeries> = map
         .into_values()
-        .map(|(attrs, points)| HistFacetSeries { attrs, points })
+        .map(|(attrs, points, dist)| HistFacetSeries {
+            attrs,
+            points,
+            dist,
+        })
         .collect();
     series.sort_by(|a, b| b.points.len().cmp(&a.points.len()));
     let truncated = series.len().saturating_sub(FACET_MAX_SERIES) as i64;
     series.truncate(FACET_MAX_SERIES);
 
     Ok(Json(HistFacetResponse {
         unit,
+        bounds,
         series,
         truncated,
     }))

ui/src/api.ts

@@ -172,9 +172,11 @@ export interface HistFacetPoint {
 export interface HistFacetSeries {
   attrs: Record<string, string>;
   points: HistFacetPoint[];
+  dist: number[];
 }
 export interface HistFacetResponse {
   unit: string | null;
+  bounds: number[];
   series: HistFacetSeries[];
   truncated: number;
 }

ui/src/components/MetricList.tsx

@@ -75,10 +75,13 @@ function FacetSeriesRows({ name, unit }: { name: string; unit: string | null })
             <tr key={i}>
               <td className="mono sub-label">{labels[i]}</td>
               <td>
-                {vals.length >= 2 ? (
-                  <Sparkline values={[...vals].reverse()} />
-                ) : (
+                {vals.length < 2 ? (
                   <span className="muted">—</span>
+                ) : data.rated ? (
+                  // counter: per-interval rate as bars (points are oldest→newest)
+                  <Bars values={vals} />
+                ) : (
+                  <Sparkline values={[...vals].reverse()} />
                 )}
               </td>
               <td className="num">{formatValue(latest, u)}</td>
@@ -97,7 +100,7 @@ function FacetSeriesRows({ name, unit }: { name: string; unit: string | null })
   );
 }
 
-// Histogram series rows: p95 trend sparkline + latest p50/p95/p99.
+// Histogram series rows: latency distribution bars + latest p50/p95/p99.
 function HistSeriesRows({ name, unit }: { name: string; unit: string | null }) {
   const [data, setData] = useState<HistFacetResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -119,14 +122,13 @@ function HistSeriesRows({ name, unit }: { name: string; unit: string | null }) {
       <caption className="muted small subseries-count">{data.series.length} series</caption>
       <tbody>
         {data.series.map((s, i) => {
-          const p95s = s.points.map((p) => p.p95).filter((v): v is number => v != null);
           const last = s.points.length ? s.points[s.points.length - 1] : null;
           return (
             <tr key={i}>
               <td className="mono sub-label">{labels[i]}</td>
-              <td title="p95 trend">
-                {p95s.length >= 2 ? (
-                  <Sparkline values={[...p95s].reverse()} />
+              <td title="latency distribution">
+                {s.dist && s.dist.length > 1 ? (
+                  <Bars values={s.dist} />
                 ) : (
                   <span className="muted">—</span>
                 )}