Anto01
e1c59a51c1
Phase 2 - Execution Bridge: - Update /start endpoint to fallback to generic runner when no study script exists - Auto-detect model files (.prt, .sim) from 1_setup/model/ directory - Pass atomizer_spec.json path to generic runner Phase 3 - Live Monitoring & Results Overlay: - Add ResultBadge component for displaying values on canvas nodes - Extend schema with resultValue and isFeasible fields - Update DesignVarNode, ObjectiveNode, ConstraintNode, ExtractorNode to show results - Add Run/Stop buttons and Results toggle to SpecRenderer - Poll /status endpoint every 3s and map best_trial values to nodes - Show green/red badges for constraint feasibility
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { memo } from 'react';
|
|
|
|
interface ResultBadgeProps {
|
|
value: number | string | null | undefined;
|
|
unit?: string;
|
|
isFeasible?: boolean; // For constraints
|
|
label?: string;
|
|
}
|
|
|
|
export const ResultBadge = memo(function ResultBadge({ value, unit, isFeasible, label }: ResultBadgeProps) {
|
|
if (value === null || value === undefined) return null;
|
|
|
|
const displayValue = typeof value === 'number'
|
|
? value.toLocaleString(undefined, { maximumFractionDigits: 4 })
|
|
: value;
|
|
|
|
// Determine color based on feasibility (if provided)
|
|
let bgColor = 'bg-primary-500/20';
|
|
let textColor = 'text-primary-300';
|
|
let borderColor = 'border-primary-500/30';
|
|
|
|
if (isFeasible === true) {
|
|
bgColor = 'bg-emerald-500/20';
|
|
textColor = 'text-emerald-300';
|
|
borderColor = 'border-emerald-500/30';
|
|
} else if (isFeasible === false) {
|
|
bgColor = 'bg-red-500/20';
|
|
textColor = 'text-red-300';
|
|
borderColor = 'border-red-500/30';
|
|
}
|
|
|
|
return (
|
|
<div className={`absolute -top-3 -right-2 px-2 py-0.5 rounded-full border ${bgColor} ${borderColor} ${textColor} text-xs font-mono shadow-lg backdrop-blur-sm z-10 flex items-center gap-1`}>
|
|
{label && <span className="opacity-70 mr-1">{label}:</span>}
|
|
<span className="font-bold">{displayValue}</span>
|
|
{unit && <span className="opacity-70 text-[10px] ml-0.5">{unit}</span>}
|
|
</div>
|
|
);
|
|
});
|