Replace MSE progress bars with color-coded numeric display

Progress bars are semantically wrong for unbounded MSE values.
Show raw 4-decimal number with color threshold:
  >= 1.0  red    (high anomaly)
  >= 0.5  orange
  >= 0.1  yellow
  <  0.1  green  (near-normal)

https://claude.ai/code/session_01Wen51749mAnwBEfh7XmvUw
This commit is contained in:
Claude 2026-05-19 12:59:51 +00:00
parent 21c9408f24
commit 14b1f31f85
No known key found for this signature in database

View File

@ -301,19 +301,19 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ log, onClose, showNotificat
<span className={`text-sm font-medium ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>ML Score Details:</span>
<div className={`mt-2 p-3 rounded-lg space-y-2 ${isDark ? 'bg-gray-700' : 'bg-gray-50'}`}>
{[
{ label: 'Confidence', value: log.confidence, color: 'bg-blue-500' },
{ label: 'AE Score', value: log.ae_score, color: 'bg-purple-500' },
].map(({ label, value, color }) => (
{ label: 'Confidence', value: log.confidence },
{ label: 'AE Score', value: log.ae_score },
].map(({ label, value }) => (
<div key={label} className="flex justify-between items-center">
<span className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-600'}`}>{label}:</span>
<div className="flex items-center space-x-2">
<div className={`w-24 h-2 rounded-full ${isDark ? 'bg-gray-600' : 'bg-gray-200'}`}>
<div className={`h-2 rounded-full ${color}`} style={{ width: `${Math.min(value * 100, 100)}%` }} />
</div>
<span className={`text-sm font-medium font-mono ${isDark ? 'text-gray-300' : 'text-gray-900'}`}>
{value.toFixed(4)}
</span>
</div>
<span className={`text-sm font-mono font-semibold ${
value >= 1.0 ? 'text-red-500' :
value >= 0.5 ? 'text-orange-500' :
value >= 0.1 ? 'text-yellow-500' :
'text-green-500'
}`}>
{value.toFixed(4)}
</span>
</div>
))}
</div>