71 lines
2.2 KiB
React
71 lines
2.2 KiB
React
const categoryLabels = {
|
|
observations: "Direct Observations",
|
|
reportedClaims: "Reported Claims",
|
|
assumptions: "Unsupported Assumptions",
|
|
entities: "Entities",
|
|
transitions: "Transitions",
|
|
expectedButMissing: "Expected But Missing",
|
|
presentButUnexpected: "Present But Unexpected",
|
|
contradictions: "Contradictions",
|
|
openUncertainties: "Open Uncertainties",
|
|
};
|
|
|
|
const confidenceColor = {
|
|
low: "text-red-600 bg-red-50 border-red-200",
|
|
medium: "text-yellow-700 bg-yellow-50 border-yellow-200",
|
|
high: "text-green-700 bg-green-50 border-green-200",
|
|
};
|
|
|
|
const ConfidenceBadge = ({ level }) => (
|
|
<span className={`inline-block rounded-full border px-2 py-0.5 text-xs font-medium ${confidenceColor[level] || "text-gray-600 bg-gray-100"}`}>
|
|
{level}
|
|
</span>
|
|
);
|
|
|
|
function ItemList({ items, renderExtra }) {
|
|
if (!items?.length) return <p className="text-sm italic text-gray-400">None identified</p>;
|
|
|
|
return (
|
|
<ul className="space-y-2">
|
|
{items.map((item) => (
|
|
<li key={item.id} className="rounded border border-gray-200 bg-white px-3 py-2 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-mono text-xs text-gray-400">#{item.id}</span>
|
|
<ConfidenceBadge level={item.confidence} />
|
|
</div>
|
|
<p className="mt-1">{item.description}</p>
|
|
{renderExtra && renderExtra(item)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default function ReconstructionView({ reconstruction, partial }) {
|
|
if (partial) {
|
|
return (
|
|
<div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800">
|
|
⚠ Partial result — some fields failed validation. Showing what was accepted.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const categories = Object.entries(categoryLabels).map(([key, label]) => ({
|
|
key,
|
|
label,
|
|
items: reconstruction[key],
|
|
}));
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
<h2 className="mb-3 text-lg font-semibold">Reconstruction</h2>
|
|
{categories.map(({ key, label, items }) => (
|
|
<div key={key} className="mb-4 rounded border border-gray-200 bg-white p-4">
|
|
<h3 className="mb-2 text-sm font-medium text-gray-600">{label}</h3>
|
|
<ItemList items={items} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|