Detail on demand

DetailOnDemand.tsxSmall and large render from the same panel and the same range, so they cannot disagree. One button opens and closes, Esc closes, and focus goes back where it came from. Three forms behind one prop.Copy

import { useEffect, useRef } from "react";
import { Maximize2, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type Form = "full-page" | "side-panel" | "inline";

export type Panel = { id: string; title: string; unit: string; values: number[] };

/** The one query every panel shares. Both sizes render from it, so
 *  expanding cannot change the interval or the range. */
export type Range = { label: string; interval: string };

const FORM_LABEL: Record<Form, string> = { "full-page": "Full page", "side-panel": "Side panel", inline: "Inline" };

/** One path, scaled to whatever box it is in. */
function Line({ values, className }: { values: number[]; className?: string }) {
  const min = Math.min(...values), max = Math.max(...values), span = max - min || 1;
  const d = values.map((v, i) => `${i ? "L" : "M"}${(i / (values.length - 1)) * 100} ${100 - ((v - min) / span) * 100}`).join(" ");
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" className={cn("h-full w-full overflow-visible", className)} aria-hidden="true">
      <path d={d} fill="none" stroke="hsl(var(--chart-1))" strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

function PanelCard({ panel, range, large, onToggle, buttonRef }: {
  panel: Panel; range: Range; large: boolean; onToggle: () => void; buttonRef?: (el: HTMLButtonElement | null) => void;
}) {
  const last = panel.values[panel.values.length - 1];
  return (
    <div className={cn("flex flex-col rounded-lg border bg-card p-3", large && "border-chart-1")}>
      <div className="flex items-center gap-2">
        <p className="text-xs text-muted-foreground">{panel.title}</p>
        <p className="text-sm tabular-nums text-card-foreground">{last.toLocaleString("en-GB")}{panel.unit}</p>
        {/* The same button opens and closes; Esc closes too. */}
        <Button ref={buttonRef} variant="ghost" size="sm" className="ml-auto h-6 w-6 p-0" onClick={onToggle} aria-label={large ? `Close ${panel.title}` : `Expand ${panel.title}`}>
          {large ? <X className="size-3.5" /> : <Maximize2 className="size-3" />}
        </Button>
      </div>
      <div className={cn("mt-2 min-h-0 flex-1", large ? "min-h-[120px]" : "h-10")}><Line values={panel.values} /></div>
      {/* The range is printed at both sizes, from the same object, so the two views cannot disagree. */}
      <p className={cn("mt-2 tabular-nums text-muted-foreground", large ? "text-xs" : "text-[10px]")}>
        {range.label} · {range.interval}{large && ` · ${panel.values.length} points`}
      </p>
    </div>
  );
}

export function DetailOnDemand({ panels, range, form, expanded, onExpand, columns = 3 }: {
  panels: Panel[];
  range: Range;
  form: Form;
  /** Which panel is open, or null. Lift it into the URL so the page a
   *  colleague opens is the one you found. */
  expanded: string | null;
  onExpand: (id: string | null) => void;
  columns?: number;
}) {
  const buttons = useRef(new Map<string, HTMLButtonElement>());
  const open = panels.find((p) => p.id === expanded) ?? null;

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onExpand(null);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onExpand]);

  // Closing puts focus back on the button that opened it, so keyboard users
  // land where they were rather than at the top of the page.
  const close = (id: string) => { onExpand(null); requestAnimationFrame(() => buttons.current.get(id)?.focus()); };

  const grid = (
    <div className="grid gap-3" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
      {panels.map((p) => {
        const large = form === "inline" && p.id === expanded;
        return (
          <div key={p.id} className={cn(large && "col-span-full")}>
            <PanelCard panel={p} range={range} large={large} onToggle={() => (p.id === expanded ? close(p.id) : onExpand(p.id))} buttonRef={(el) => el && buttons.current.set(p.id, el)} />
          </div>
        );
      })}
    </div>
  );

  return (
    <div className="relative" data-form={form} aria-label={`Detail as ${FORM_LABEL[form]}`}>
      {form === "side-panel" && open ? (
        <div className="grid grid-cols-[1fr_44%] gap-3">
          {grid}
          <PanelCard panel={open} range={range} large onToggle={() => close(open.id)} />
        </div>
      ) : grid}
      {/* In a page this is `fixed inset-0`; the preview keeps it inside the frame. */}
      {form === "full-page" && open && (
        <div className="absolute inset-0 z-10 flex bg-background/95 p-2">
          <div className="flex-1"><PanelCard panel={open} range={range} large onToggle={() => close(open.id)} /></div>
        </div>
      )}
    </div>
  );
}

export const FORMS = Object.entries(FORM_LABEL) as [Form, string][];

demo.tsxHow it is called: six service panels with p95 open as a side panel, and a picker to try the same state as full page or inline.Copy

import { useState } from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { DetailOnDemand, FORMS, type Form, type Panel } from "./DetailOnDemand";

/** Six panels for one service over the last six hours at five-minute
 *  intervals. p95 latency is the one that moved. */
const PANELS: Panel[] = [
  { id: "rps", title: "Requests", unit: "/s", values: [812, 826, 840, 833, 851, 870, 902, 915, 931, 944, 960, 958, 971, 990, 1004, 1012, 1030, 1027, 1041, 1055, 1063, 1058, 1072, 1080] },
  { id: "errors", title: "Error rate", unit: "%", values: [0.4, 0.4, 0.5, 0.4, 0.4, 0.5, 0.5, 0.4, 0.6, 0.5, 0.5, 0.4, 0.5, 0.6, 0.5, 0.5, 0.4, 0.5, 0.5, 0.6, 0.5, 0.5, 0.4, 0.5] },
  { id: "p95", title: "p95 latency", unit: "ms", values: [212, 218, 209, 224, 231, 226, 240, 238, 252, 261, 274, 290, 318, 342, 361, 355, 338, 322, 301, 288, 276, 269, 262, 258] },
  { id: "cpu", title: "CPU", unit: "%", values: [41, 42, 44, 43, 45, 47, 48, 50, 52, 53, 55, 58, 61, 63, 62, 60, 58, 57, 55, 54, 53, 52, 52, 51] },
  { id: "mem", title: "Memory", unit: "%", values: [63, 63, 64, 64, 64, 65, 65, 65, 66, 66, 66, 67, 67, 67, 68, 68, 68, 68, 69, 69, 69, 69, 70, 70] },
  { id: "queue", title: "Queue depth", unit: "", values: [12, 14, 11, 15, 18, 16, 21, 24, 28, 33, 41, 52, 68, 81, 77, 64, 51, 43, 36, 30, 25, 21, 18, 16] },
];

/** p95 open as a side panel. The picker tries the other two forms on the
 *  same state; the range under every panel stays the same one. */
export default function Demo() {
  const [form, setForm] = useState<Form>("side-panel");
  const [expanded, setExpanded] = useState<string | null>("p95");

  return (
    <div className="flex flex-col gap-3">
      <ToggleGroup type="single" value={form} onValueChange={(v) => v && setForm(v as Form)} aria-label="Form of expansion" className="justify-start">
        {FORMS.map(([id, label]) => (
          <ToggleGroupItem key={id} value={id} size="sm" className="h-7 rounded-md border text-xs data-[state=on]:border-chart-1 data-[state=on]:bg-chart-1/10 data-[state=on]:text-chart-1">{label}</ToggleGroupItem>
        ))}
      </ToggleGroup>
      <DetailOnDemand
        panels={PANELS}
        range={{ label: "Last 6 hours", interval: "5m" }}
        form={form}
        expanded={expanded}
        onExpand={setExpanded}
      />
    </div>
  );
}