File size: 1,482 Bytes
900a32d e4daa3b 900a32d e4daa3b a3c22e6 e4daa3b 900a32d e4daa3b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import type { Metrics } from "../types";
interface MetricsPanelProps {
metrics: Metrics;
}
export function MetricsPanel({ metrics }: MetricsPanelProps) {
return (
<div className="bg-gray-800 rounded-lg p-4 space-y-3">
<h3 className="font-medium text-lg">Results</h3>
<div className="grid grid-cols-2 gap-3 text-sm">
<div>
<span className="text-gray-400">Case:</span>
<span className="ml-2 font-mono">{metrics.caseId}</span>
</div>
{metrics.diceScore !== null && (
<div>
<span className="text-gray-400">Dice Score:</span>
<span className="ml-2 font-mono text-green-400">
{metrics.diceScore.toFixed(3)}
</span>
</div>
)}
{metrics.volumeMl !== null && (
<div>
<span className="text-gray-400">Volume:</span>
<span className="ml-2 font-mono">
{metrics.volumeMl.toFixed(2)} mL
</span>
</div>
)}
<div>
<span className="text-gray-400">Time:</span>
<span className="ml-2 font-mono">
{metrics.elapsedSeconds.toFixed(1)}s
</span>
</div>
</div>
{/* Ephemeral storage warning */}
{metrics.warning && (
<div className="mt-3 p-2 bg-yellow-900/30 border border-yellow-600/50 rounded text-xs text-yellow-300">
{metrics.warning}
</div>
)}
</div>
);
}
|