Jens/geointel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add QA evidence drilldown
GeoIntel CI / docs-smoke (push) Has been cancelled
Details
GeoIntel CI / contract-smoke (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex
2026-06-22 02:45:42 +02:00
parent 978c55c979
commit f3ad9c3f4f
7 changed files with 294 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/quality/QualityResultsPanel.tsx
+113
View File
@@ -42,6 +42,14 @@ function qualityMetricValue(metric: MetricRead | undefined): string {
return Number.isInteger(value) ? String(value) : value.toFixed(3)
}
function metricByKey(check: QualityCheckRead | null, metricKey: string): MetricRead | undefined {
return check?.metrics.find((metric) => metric.metric_key === metricKey)
}
function formatQualityTimestamp(value?: string | null): string {
return value || 'n/a'
}
function qualityMatchesSearch(check: QualityCheckRead, query: string, datasetNameById: Map<string, string>): boolean {
const normalizedQuery = query.trim().toLowerCase()
if (!normalizedQuery) {
@@ -78,6 +86,7 @@ export function QualityResultsPanel({
const [qualityStatusFilter, setQualityStatusFilter] = useState('all')
const [qualityTypeFilter, setQualityTypeFilter] = useState('all')
const [qualitySearchQuery, setQualitySearchQuery] = useState('')
const [selectedQualityCheckId, setSelectedQualityCheckId] = useState<string | null>(null)
const completedChecks = qualityChecks.filter((check) => check.status === 'ok' || check.status === 'completed').length
const latestCheck = qualityChecks[0] ?? null
const datasetNameById = useMemo(() => {
@@ -89,6 +98,16 @@ export function QualityResultsPanel({
}, [candidateDatasets, referenceDatasets])
const latestCandidateName = latestCheck?.candidate_dataset_id ? datasetNameById.get(latestCheck.candidate_dataset_id) : null
const latestReferenceName = latestCheck?.reference_dataset_id ? datasetNameById.get(latestCheck.reference_dataset_id) : null
const selectedQualityCheck = useMemo(
() => qualityChecks.find((check) => check.id === selectedQualityCheckId) ?? latestCheck,
[latestCheck, qualityChecks, selectedQualityCheckId],
)
const selectedCandidateName = selectedQualityCheck?.candidate_dataset_id
? datasetNameById.get(selectedQualityCheck.candidate_dataset_id) ?? selectedQualityCheck.candidate_dataset_id
: 'n/a'
const selectedReferenceName = selectedQualityCheck
? datasetNameById.get(selectedQualityCheck.reference_dataset_id) ?? selectedQualityCheck.reference_dataset_id
: 'n/a'
const qualityStatuses = useMemo(() => Array.from(new Set(qualityChecks.map((check) => check.status))).sort(), [qualityChecks])
const qualityTypes = useMemo(() => Array.from(new Set(qualityChecks.map((check) => check.check_type))).sort(), [qualityChecks])
const filteredQualityChecks = useMemo(
@@ -154,6 +173,95 @@ export function QualityResultsPanel({
</div>
</div>
<div className="quality-drilldown-surface" aria-label="QA/QC evidence drilldown">
<div className="panel-title-row">
<div>
<h3>QA/QC evidence drilldown</h3>
<p className="muted">Inspect the persisted check, metric evidence and dataset handoff context before exporting or sharing results.</p>
</div>
<button
type="button"
className="secondary-action"
onClick={() => setSelectedQualityCheckId(latestCheck?.id ?? null)}
disabled={!latestCheck}
>
Inspect latest check
</button>
</div>
{selectedQualityCheck ? (
<>
<div className="quality-drilldown-grid">
<div>
<span>Selected check</span>
<strong>{selectedQualityCheck.check_type}</strong>
<p>{selectedQualityCheck.id}</p>
</div>
<div>
<span>Candidate layer</span>
<strong>{selectedCandidateName}</strong>
<p>{selectedQualityCheck.candidate_dataset_id ?? 'candidate not stored'}</p>
</div>
<div>
<span>Reference layer</span>
<strong>{selectedReferenceName}</strong>
<p>{selectedQualityCheck.reference_dataset_id}</p>
</div>
<div>
<span>Analysis run</span>
<strong>{selectedQualityCheck.analysis_run_id ?? 'n/a'}</strong>
<p>Job: {selectedQualityCheck.job_id ?? 'n/a'}</p>
</div>
<div>
<span>Status</span>
<strong>{selectedQualityCheck.status}</strong>
<p>Score: {selectedQualityCheck.score ?? 'n/a'}</p>
</div>
<div>
<span>Completed</span>
<strong>{formatQualityTimestamp(selectedQualityCheck.completed_at)}</strong>
<p>Created: {formatQualityTimestamp(selectedQualityCheck.created_at)}</p>
</div>
</div>
<div className="quality-evidence-token-grid">
<div>
<span>False positive evidence</span>
<strong>{qualityMetricValue(metricByKey(selectedQualityCheck, 'false_positive_count'))}</strong>
<p>Candidate geometries not matched to the reference layer.</p>
</div>
<div>
<span>False negative evidence</span>
<strong>{qualityMetricValue(metricByKey(selectedQualityCheck, 'false_negative_count'))}</strong>
<p>Reference geometries not matched by the candidate layer.</p>
</div>
<div className="quality-evidence-map-handoff">
<span>Map evidence handoff</span>
<strong>{selectedCandidateName} / {selectedReferenceName}</strong>
<p>Use the candidate and reference datasets as map layers for spatial review.</p>
</div>
</div>
<div className="quality-provenance-grid">
<div>
<span>Parameters</span>
<pre className="quality-provenance-pre">
{JSON.stringify(selectedQualityCheck.parameters_json ?? {}, null, 2)}
</pre>
</div>
<div>
<span>Findings</span>
<pre className="quality-provenance-pre">
{JSON.stringify(selectedQualityCheck.findings_json ?? {}, null, 2)}
</pre>
</div>
</div>
</>
) : (
<div className="result-state result-state-empty">
<strong>No QA/QC check selected.</strong>
<p>Run or load a persisted QA/QC check to inspect metric and map evidence.</p>
</div>
)}
</div>
<div className="quality-control-surface" aria-label="QA/QC refresh and filters">
<div className="button-row">
<button
@@ -273,6 +381,11 @@ export function QualityResultsPanel({
{check.status}
</span>
</div>
<div className="quality-check-actions">
<button type="button" className="secondary-action" onClick={() => setSelectedQualityCheckId(check.id)}>
Inspect check
</button>
</div>
<div className="quality-score-row">
<div>
<span>Score</span>
frontend/src/styles/app.css
+93
View File
@@ -1483,6 +1483,7 @@ button.entity-card {
.quality-summary-surface,
.quality-evidence-surface,
.quality-drilldown-surface,
.quality-control-surface,
.quality-history-surface {
min-width: 0;
@@ -1500,6 +1501,21 @@ button.entity-card {
background: #f8fbf9;
}
.quality-drilldown-surface {
display: grid;
gap: 0.72rem;
background: linear-gradient(180deg, #ffffff, #f7fbf8);
}
.quality-drilldown-surface .panel-title-row {
align-items: start;
}
.quality-drilldown-surface .panel-title-row button {
width: auto;
min-height: 2.35rem;
}
.quality-control-surface,
.quality-history-surface {
display: grid;
@@ -1600,6 +1616,14 @@ button.entity-card {
margin: 0;
}
.quality-drilldown-grid,
.quality-evidence-token-grid,
.quality-provenance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 0.58rem;
}
.quality-summary-grid > div {
border: 1px solid var(--line);
border-radius: 8px;
@@ -1615,8 +1639,31 @@ button.entity-card {
background: #ffffff;
}
.quality-drilldown-grid > div,
.quality-evidence-token-grid > div,
.quality-provenance-grid > div {
min-width: 0;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.68rem;
background: #ffffff;
}
.quality-evidence-token-grid > div {
border-color: rgba(15, 118, 110, 0.22);
background: linear-gradient(180deg, #f8fcfa, #ffffff);
}
.quality-evidence-map-handoff,
.quality-evidence-token-grid > div:nth-child(3) {
background: var(--accent-soft);
}
.quality-summary-grid span,
.quality-handoff-grid span,
.quality-drilldown-grid span,
.quality-evidence-token-grid span,
.quality-provenance-grid span,
.quality-score-row span,
.latest-export-card span,
.metric-list span {
@@ -1643,6 +1690,52 @@ button.entity-card {
line-height: 1.2;
}
.quality-drilldown-grid strong,
.quality-evidence-token-grid strong {
display: block;
margin-top: 0.22rem;
overflow: hidden;
color: var(--ink);
font-size: 0.9rem;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.quality-drilldown-grid p,
.quality-evidence-token-grid p {
margin: 0.24rem 0 0;
color: var(--muted);
font-size: 0.8rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.quality-provenance-pre {
max-height: 11rem;
margin: 0.38rem 0 0;
overflow: auto;
border: 1px solid var(--line);
border-radius: 7px;
padding: 0.58rem;
background: #0f172a;
color: #e2e8f0;
font-size: 0.75rem;
line-height: 1.35;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.quality-check-actions {
display: flex;
justify-content: flex-end;
}
.quality-check-actions button {
width: auto;
min-height: 2.15rem;
}
.quality-dataset-name,
.quality-check-dataset-link {
overflow-wrap: anywhere;