spb/internetpressure

1import { fmt } from '@/lib/format';2import type { ServiceDetail, TargetRow } from '@/lib/types';34/** z → colour: |z|<1.5 neutral, <3 elevated, <5 high, ≥5 severe; failing cell = severe outline. */5function zColor(z: number, ok: boolean): string {6  if (!ok) return 'var(--p-severe)';7  const a = Math.abs(z);8  if (a < 1) return 'var(--panel-2)';9  if (a < 1.5) return 'rgba(76,201,240,0.25)';10  if (a < 3) return 'rgba(233,196,106,0.45)';11  if (a < 5) return 'rgba(231,111,81,0.6)';12  return 'rgba(214,40,40,0.75)';13}1415export function ProbeTargetMatrix({ matrix, targets }: { matrix: ServiceDetail['matrix']; targets: TargetRow[] }) {16  if (!matrix.length || !targets.length) return <p className="py-3 text-[12.5px] text-ink-3">No matrix available.</p>;17  const cols = targets.map((t) => t.target_id);18  return (19    <div className="scroll-x -mx-3 px-3">20      <table className="text-[11px]">21        <thead>22          <tr>23            <th className="label sticky left-0 bg-bg py-1 pr-3 text-left font-medium">probe \ target</th>24            {targets.map((t) => (25              <th key={t.target_id} className="px-0.5 pb-1 align-bottom font-normal text-ink-2" title={t.name}>26                <span className="block h-20 w-6 [writing-mode:vertical-rl] rotate-180 truncate text-[10px]">{t.name.replace(/^.*· /, '')}</span>27              </th>28            ))}29          </tr>30        </thead>31        <tbody>32          {matrix.map((row) => {33            const byId = new Map(row.targets.map((c) => [c.target_id, c]));34            return (35              <tr key={row.probe_id}>36                <th className="num sticky left-0 bg-bg py-0.5 pr-3 text-left font-normal text-ink">37                  {row.probe_id} <span className="text-ink-3">{row.probe_region}</span>38                </th>39                {cols.map((id) => {40                  const c = byId.get(id);41                  return (42                    <td key={id} className="p-0.5">43                      <span className="num flex h-6 w-6 items-center justify-center rounded-[2px] text-[9.5px]" style={{ background: c ? zColor(c.z, c.ok) : 'transparent', color: c && (Math.abs(c.z) >= 3 || !c.ok) ? '#fff' : 'var(--ink-2)', outline: c && !c.ok ? '1px solid var(--p-severe)' : undefined }} title={c ? `${row.probe_id} → ${id}\nTTFB ${fmt(c.ttfb_ms, 0)} ms · z ${fmt(c.z)} · ${c.ok ? 'ok' : 'FAILING'}` : 'not measured'}>44                        {c ? (c.ok ? fmt(c.z, 1) : '×') : '·'}45                      </span>46                    </td>47                  );48                })}49              </tr>50            );51          })}52        </tbody>53      </table>54    </div>55  );56}57