1import type { RenderResult } from '../hooks/useRenderer';
3export default function DiagnosticsPanel({ result }: { result: RenderResult }) {
4 const d = result.diag;
5 return (
6 <div className="diag">
7 <table>
8 <tbody>
9 <tr>
10 <th>Partials</th>
11 <td className="partials">
12 {d.partialsHz.map((f) => f.toFixed(0)).join(', ')} Hz
13 </td>
14 </tr>
15 <tr>
16 <th>Ratios</th>
17 <td className="partials">{d.ratios.map((r) => r.toFixed(2)).join(', ')}</td>
18 </tr>
19 <tr>
20 <th>Helmholtz</th>
21 <td>{d.helmholtzHz.toFixed(0)} Hz</td>
22 </tr>
23 <tr>
24 <th>Contact</th>
25 <td>
26 {d.contactMs.toFixed(3)} ms, peak {d.peakForceN.toFixed(0)} N
27 </td>
28 </tr>
29 <tr>
30 <th>Listener</th>
31 <td>{(d.listenerDistM * 100).toFixed(0)} cm from block centre</td>
32 </tr>
33 <tr>
34 <th>Peak pressure</th>
35 <td>
36 {d.peakPa.toFixed(3)} Pa ({d.peakSplDb.toFixed(1)} dB SPL)
37 </td>
38 </tr>
39 <tr>
40 <th>Quality</th>
41 <td>
42 {result.quality} · oversample {d.oversample} · {d.elements} elements
43 </td>
44 </tr>
45 </tbody>
46 </table>
47 <div className="cachenote">
48 solve: {d.solveCached ? 'cached' : `${(d.solveMs / 1000).toFixed(2)} s`} · radiation:{' '}
49 {d.radiateCached ? 'cached' : `${(d.radiateMs / 1000).toFixed(2)} s`}
50 </div>
51 {d.warnings.map((w, i) => (
52 <div key={i} className="warning">⚠ {w}</div>
53 ))}
54 </div>
55 );
56}