Function TimelineChart

dashboard/lcm/src/components.tsx:149–197

(props: { buckets?: any[]; nodeBuckets?: any[]; undatedCount?: any })

/** Responsive CSS bar chart (no SVG stretching, so bars stay crisp and the
 *  summary markers render as true round dots regardless of bucket count). */
export function TimelineChart(props: { buckets?: any[]; nodeBuckets?: any[]; undatedCount?: any }): React.ReactElement {
  // Buckets cover only messages with real timestamps; the server reports
  // messages without one separately so they surface as an honest note
  // instead of a fake single bar.
  const buckets = (props.buckets || []).filter(function (b) { return b && b.bucket != null; });
  const nodeBuckets = props.nodeBuckets || [];
  const undatedCount = Number(props.undatedCount) || 0;
  if (!buckets.length) {
    return (
      <EmptyState className="hermes-lcm-empty">
        {undatedCount > 0
          ? `No dated messages yet — ${fmtInt(undatedCount)} stored messages have no timestamp`
          : "No timeline data"}
      </EmptyState>
    );
  }
  const maxCount = buckets.reduce((acc, b) => Math.max(acc, Number(b.count) || 0), 0) || 1;
  const nodeByBucket: Record<string, number> = {};
  nodeBuckets.forEach(function (nb) { nodeByBucket[nb.bucket] = Number(nb.count) || 0; });

  const cols = buckets.map(function (b, i) {
    const count = Number(b.count) || 0;
    const pct = count > 0 ? Math.max(3, Math.round((count / maxCount) * 100)) : 0;
    const nodes = nodeByBucket[b.bucket] || 0;
    const tip = `${b.bucket}: ${fmtInt(count)} messages`
      + (nodes ? ` · ${fmtInt(nodes)} summaries` : "");
    return (
      <div key={b.bucket + i} className="hermes-lcm-tl-col" title={tip}>
        <div className={"hermes-lcm-tl-dot" + (nodes ? " hermes-lcm-tl-dot-on" : "")} />
        <div className="hermes-lcm-tl-bar" style={{ height: pct + "%" }} />
      </div>
    );
  });

  return (
    <div className="hermes-lcm-tl">
      <div className="hermes-lcm-tl-bars">{cols}</div>
      <div className="hermes-lcm-svg-axis">
        <span>{short(buckets[0].bucket, 16)}</span>
        <span>{short(buckets[buckets.length - 1].bucket, 16)}</span>
      </div>
      {undatedCount > 0 ? (
        <div className="hermes-lcm-dim hermes-lcm-tl-undated">
          {`${fmtInt(undatedCount)} undated messages not shown`}
        </div>
      ) : null}
    </div>
  );
}

/** Per-group compression (kept vs saved), rendered as a small inline SVG. */
export function CompressionBars(props: { groups?: any[]; onPick?: (g: any) => void }): React.ReactElement {