1import type { RenderResponse } from '../worker/renderWorker';
3export default function DiagnosticsPanel({ result }: { result: RenderResponse }) {
4 const d = result.diag;
5 const modes = Array.from(result.modeF);
6 const shown = modes.slice(0, 8);
7 return (
8 <div className="diag">
9 <table>
10 <tbody>
11 <tr>
12 <th>Strokes</th>
13 <td>
14 {d.strikeCount === 1
15 ? `single, ${d.meanV.toFixed(2)} m/s`
16 : `${d.strikeCount} · mean ${d.meanV.toFixed(2)} m/s, max ${d.maxV.toFixed(2)} m/s`}
17 </td>
18 </tr>
19 <tr>
20 <th>Contact</th>
21 <td>
22 {d.meanTauUs.toFixed(0)} µs mean (Hertz) · peak force {d.peakForceN.toFixed(0)} N
23 </td>
24 </tr>
25 <tr>
26 <th>Plate modes</th>
27 <td className="partials">
28 {d.modesKept} up to n = {d.maxN} nodal diameters · {d.plateMassKg.toFixed(2)} kg
29 </td>
30 </tr>
31 <tr>
32 <th>Lowest</th>
33 <td className="partials">{shown.map((f) => f.toFixed(0)).join(', ')} … Hz</td>
34 </tr>
35 <tr>
36 <th>Nonlinearity</th>
37 <td>
38 peak w<sub>rms</sub> {d.peakWrmsUm.toFixed(0)} µm ={' '}
39 {Math.sqrt(d.peakStrength).toFixed(2)} thicknesses ·{' '}
40 {(100 * d.cascadeLostFrac).toFixed(1)}% left the top of the band
41 </td>
42 </tr>
43 <tr>
44 <th>Listener</th>
45 <td>{(d.listenerDistM * 100).toFixed(0)} cm from the plate</td>
46 </tr>
47 <tr>
48 <th>Peak pressure</th>
49 <td>
50 {d.peakPa.toFixed(3)} Pa ({d.peakSplDb.toFixed(1)} dB SPL) · click{' '}
51 {d.directPeakPa.toFixed(2)} Pa
52 </td>
53 </tr>
54 <tr>
55 <th>Length</th>
56 <td>
57 {d.durationS.toFixed(2)} s · {result.quality} · oversample {d.oversample}
58 </td>
59 </tr>
60 </tbody>
61 </table>
62 <div className="cachenote">
63 eigensolves: {d.solveCached ? 'cached' : `${(d.solveMs / 1000).toFixed(2)} s`} · cascade +
64 radiation: {d.radiateCached ? 'cached' : `${(d.radiateMs / 1000).toFixed(2)} s`}
65 </div>
66 {d.warnings.map((w, i) => (
67 <div key={i} className="warning">⚠ {w}</div>
68 ))}
69 </div>
70 );
71}