Process mimic

A schematic of the physical plant with live values on it. The layout is the operator's mental model, so it must not be rearranged for visual balance the way a dashboard grid can be.


Tokens this needs: --foreground, --card, --muted, --muted-foreground, --border, --status-warn, --status-critical, --status-unknown
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// ProcessMimic.tsx
────────────────────────────────────────────────────────────────────────

import { cn } from "@/lib/utils";

/** The closed set. Nothing else may be styled as a status. */
export type Status = "nominal" | "warn" | "critical" | "unknown";

/** Colour only leaves neutral for an abnormal state, and never alone: the glyph goes with it. */
const STATUS: Record<Status, { stroke: string; text: string; glyph: string | null }> = {
  nominal: { stroke: "stroke-border", text: "fill-foreground", glyph: null },
  warn: { stroke: "stroke-status-warn", text: "fill-status-warn", glyph: "▲" },
  critical: { stroke: "stroke-status-critical", text: "fill-status-critical", glyph: "▲" },
  unknown: { stroke: "stroke-status-unknown", text: "fill-status-unknown", glyph: "?" },
};

export type Kind = "vessel" | "valve" | "pump" | "instrument" | "outlet";
/** A piece of plant, placed where the operator expects it. The tag is the one printed on the equipment. */
export type Equipment = { tag: string; kind: Kind; x: number; y: number; w?: number; h?: number };
export type Reading = { value: number; unit: string; status: Status; stale?: boolean };

const fmt = (r: Reading) => (r.unit === "%" ? `${r.value}%` : `${r.value} ${r.unit}`);

const Value = ({ x, y, r, className, anchor = "middle" }: { x: number; y: number; r?: Reading; className?: string; anchor?: "start" | "middle" }) =>
  r ? (
    <text x={x} y={y} textAnchor={anchor} className={cn("text-[11px] tabular-nums", r.stale ? "fill-muted-foreground" : STATUS[r.status].text, className)}>
      {STATUS[r.status].glyph && <tspan>{STATUS[r.status].glyph} </tspan>}
      {fmt(r)}
      {r.stale && <tspan className="text-[9px]"> stale</tspan>}
    </text>
  ) : null;

/**
 * Flat and grey, with live values where the instruments are. The layout is
 * the operator's mental model, so it arrives as coordinates and is drawn as
 * given, never rearranged for balance. A vessel's level is its fill height.
 */
export function ProcessMimic({ equipment, pipes, readings, width = 440, height = 230 }: {
  equipment: Equipment[];
  /** Polylines between equipment, in the same coordinate space. */
  pipes: [number, number][][];
  readings: Record<string, Reading>;
  width?: number;
  height?: number;
}) {
  return (
    <svg viewBox={`0 0 ${width} ${height}`} width={width} height={height} className="max-w-full" role="img" aria-label="process mimic">
      {pipes.map((p, i) => (
        <polyline key={i} points={p.map(([x, y]) => `${x},${y}`).join(" ")} fill="none" className="stroke-border" strokeWidth={2} />
      ))}
      {equipment.map((e) => {
        const r = readings[e.tag];
        const st = r?.stale ? "stroke-border" : STATUS[r?.status ?? "nominal"].stroke;
        const dash = r?.stale ? "4 3" : undefined;
        const tag = <text className="fill-muted-foreground text-[9px]" textAnchor="middle">{e.tag}</text>;
        switch (e.kind) {
          case "vessel": {
            const w = e.w ?? 70, h = e.h ?? 92;
            const level = r ? Math.min(1, Math.max(0, r.value / 100)) * h : 0;
            return (
              <g key={e.tag}>
                <rect x={e.x} y={e.y + h - level} width={w} height={level} className="fill-muted" />
                <rect x={e.x} y={e.y} width={w} height={h} rx={3} fill="none" className={st} strokeWidth={r?.status === "nominal" ? 1.5 : 2} strokeDasharray={dash} />
                <text x={e.x + w / 2} y={e.y - 8} textAnchor="middle" className="fill-muted-foreground text-[9px]">{e.tag}</text>
                <Value x={e.x + w / 2} y={e.y + h / 2} r={r} />
              </g>
            );
          }
          case "valve":
            return (
              <g key={e.tag}>
                <circle cx={e.x} cy={e.y} r={9} className={cn("fill-card", st)} strokeWidth={1.5} />
                <path d={`M${e.x - 5} ${e.y - 4} L${e.x + 5} ${e.y + 4} M${e.x - 5} ${e.y + 4} L${e.x + 5} ${e.y - 4}`} className="stroke-muted-foreground" />
                <g transform={`translate(${e.x} ${e.y + 26})`}>{tag}</g>
              </g>
            );
          case "pump":
            return (
              <g key={e.tag}>
                <path d={`M${e.x} ${e.y - 12} L${e.x + 26} ${e.y} L${e.x} ${e.y + 12} Z`} className={cn("fill-muted", st)} strokeWidth={1.5} />
                <Value x={e.x + 13} y={e.y - 20} r={r} className="text-[10px]" />
                <g transform={`translate(${e.x + 13} ${e.y + 30})`}>{tag}</g>
              </g>
            );
          case "outlet":
            return (
              <g key={e.tag}>
                <rect x={e.x} y={e.y} width={e.w ?? 88} height={e.h ?? 30} rx={3} fill="none" className="stroke-border" strokeWidth={1.5} />
                <text x={e.x + (e.w ?? 88) / 2} y={e.y + (e.h ?? 30) / 2 + 4} textAnchor="middle" className="fill-muted-foreground text-[9px]">{e.tag}</text>
              </g>
            );
          case "instrument":
            return (
              <g key={e.tag}>
                <text x={e.x} y={e.y} className="fill-muted-foreground text-[9px]">{e.tag}</text>
                <Value x={e.x} y={e.y + 16} r={r} className="text-[10px]" anchor="start" />
              </g>
            );
        }
      })}
    </svg>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { ProcessMimic, type Equipment, type Reading } from "./ProcessMimic";

/** Two vessels, a valve, a pump and two field instruments. V-102 is above its level alarm. */
const EQUIPMENT: Equipment[] = [
  { tag: "V-101", kind: "vessel", x: 26, y: 46 },
  { tag: "FV-12", kind: "valve", x: 126, y: 92 },
  { tag: "V-102", kind: "vessel", x: 156, y: 62 },
  { tag: "P-204", kind: "pump", x: 286, y: 108 },
  { tag: "to unit 3", kind: "outlet", x: 328, y: 182 },
  { tag: "TI-07", kind: "instrument", x: 26, y: 172 },
  { tag: "PI-19", kind: "instrument", x: 156, y: 188 },
];

const PIPES: [number, number][][] = [
  [[96, 92], [156, 92]],
  [[226, 108], [286, 108]],
  [[312, 108], [360, 108], [360, 182]],
];

const READINGS: Record<string, Reading> = {
  "V-101": { value: 44, unit: "%", status: "nominal" },
  "V-102": { value: 96, unit: "%", status: "warn" },
  "P-204": { value: 312, unit: "rpm", status: "nominal" },
  "TI-07": { value: 84, unit: "°C", status: "nominal" },
  "PI-19": { value: 2.1, unit: "bar", status: "nominal" },
};

export default function Demo() {
  return (
    <div className="rounded-lg border bg-card p-4">
      <ProcessMimic equipment={EQUIPMENT} pipes={PIPES} readings={READINGS} />
    </div>
  );
}