trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions

fix(frontend): update ModelInfoResponse types to match backend structure

Browse source 
- Update TypeScript types to match flat backend response structure
- Remove nested model_info and metrics objects
- Remove label_config, use labels array and per_class_metrics array
- Update all component references to use new structure
- Generate default colors for prediction labels in CandleChart
- Fix TypeScript type errors for nullable model_version
- Remove accuracy/F1 metrics display (not in new response)
This commit is contained in:
Marko Djordjevic 2026-02-15 21:39:38 +01:00
parent aa81d4f3d0
commit 5a7c901980
95 changed files with 326 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/CandleChart.tsx
View file

@ -374,10 +374,21 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
}
// Build a label-to-color map from modelInfo
// Generate colors for labels since backend no longer provides them
const labelColorMap: Record<string, string> = {};
if (modelInfo?.label_config) {
modelInfo.label_config.forEach((lc) => {
labelColorMap[lc.name] = lc.color;
if (modelInfo?.labels) {
const predefinedColors = [
'#3b82f6', // blue
'#ef4444', // red
'#10b981', // green
'#f59e0b', // amber
'#8b5cf6', // violet
'#ec4899', // pink
'#06b6d4', // cyan
'#f97316', // orange
];
modelInfo.labels.forEach((label, index) => {
labelColorMap[label] = predefinedColors[index % predefinedColors.length];
});
}

32
src/components/PredictionPanel.tsx
View file

@ -9,7 +9,7 @@ interface PredictionPanelProps {
onFetchBatchPredictions: () => void;
onConfidenceChange: (threshold: number) => void;
onToggleLabelSelection: (label: string) => void;
predictionSummary?: PredictionSummary;
predictionSummary: PredictionSummary | null;
isModelOnline: boolean;
showOnlyDisagreements?: boolean;
onToggleShowOnlyDisagreements?: () => void;
@ -77,23 +77,15 @@ export default function PredictionPanel({
<div className="mb-3 p-2 bg-muted/50 rounded text-xs">
<div className="flex justify-between">
<span className="text-muted-foreground">Model:</span>
<span className="font-mono text-foreground">{modelInfo.model_info.model_name}</span>
<span className="font-mono text-foreground">{modelInfo.model_name}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Version:</span>
<span className="font-mono text-foreground">{modelInfo.model_info.model_version}</span>
<span className="font-mono text-foreground">{modelInfo.model_version || 'N/A'}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Type:</span>
<span className="text-foreground">{modelInfo.model_info.model_type}</span>
</div>
<div className="flex justify-between mt-1 pt-1 border-t border-border">
<span className="text-muted-foreground">Accuracy:</span>
<span className="text-foreground">{(modelInfo.metrics.accuracy * 100).toFixed(1)}%</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">F1 (macro):</span>
<span className="text-foreground">{(modelInfo.metrics.f1_macro * 100).toFixed(1)}%</span>
<span className="text-foreground">{modelInfo.model_type}</span>
</div>
</div>
)}
@ -144,26 +136,22 @@ export default function PredictionPanel({
<div className="mb-3">
<label className="text-xs text-muted-foreground mb-2 block">Filter by Label</label>
<div className="space-y-1 max-h-32 overflow-y-auto">
{modelInfo.label_config.map((labelConfig) => {
const metrics = modelInfo.metrics.per_class[labelConfig.name];
const isSelected = selectedLabels.has(labelConfig.name);
{modelInfo.labels.map((label) => {
const metrics = modelInfo.per_class_metrics.find((m) => m.label === label);
const isSelected = selectedLabels.has(label);
return (
<label
key={labelConfig.name}
key={label}
className="flex items-center gap-2 p-1 rounded hover:bg-muted/50 cursor-pointer"
>
<input
type="checkbox"
checked={isSelected}
onChange={() => onToggleLabelSelection(labelConfig.name)}
onChange={() => onToggleLabelSelection(label)}
className="w-3 h-3"
/>
<div
className="w-3 h-3 rounded"
style={{ backgroundColor: labelConfig.color }}
/>
<span className="text-xs text-foreground flex-1">{labelConfig.name}</span>
<span className="text-xs text-foreground flex-1">{label}</span>
{metrics && (
<span className="text-xs text-muted-foreground font-mono">
F1: {(metrics.f1_score * 100).toFixed(0)}%