Improve quality and export usability layout
This commit is contained in:
Codex
@@ -7,6 +7,14 @@
|
||||
|
||||
# Changelog
|
||||
|
||||
## Sprint 115 QA/QC and Exports usability layout pass (2026-07-04)
|
||||
|
||||
- Made the QA/QC workspace calmer by compacting summary, handoff, drilldown, feature evidence and metric history surfaces.
|
||||
- Reduced raw QA provenance height so JSON evidence remains available without dominating the screen.
|
||||
- Rebalanced QA/QC and Exports workspace columns for review-first usage.
|
||||
- Made export handoff cards, latest artifact cards and export history controls denser and easier to scan.
|
||||
- Added static regression coverage for compact QA evidence review and export handoff layouts.
|
||||
|
||||
## Sprint 114 Data and Map usability layout pass (2026-07-04)
|
||||
|
||||
- Made the Data workspace catalog more compact with quieter upload controls, denser role summaries and shorter dataset action buttons.
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
from pathlib import Path
|
||||
|
||||
|
||||
REPO_ROOT = Path(__file__).resolve().parents[2]
|
||||
|
||||
|
||||
def test_quality_workspace_uses_compact_evidence_review_layout() -> None:
|
||||
css = (REPO_ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8")
|
||||
|
||||
assert "Sprint 115 QA/Exports usability pass" in css
|
||||
assert ".workspace-grid-analysis" in css
|
||||
assert "grid-template-columns: minmax(19rem, 0.82fr) minmax(26rem, 1.18fr)" in css
|
||||
assert ".quality-drilldown-grid" in css
|
||||
assert "grid-template-columns: repeat(3, minmax(0, 1fr))" in css
|
||||
assert ".quality-provenance-pre" in css
|
||||
assert "max-height: 7.5rem" in css
|
||||
|
||||
|
||||
def test_export_workspace_uses_compact_handoff_layout() -> None:
|
||||
css = (REPO_ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8")
|
||||
|
||||
assert ".workspace-grid-exports" in css
|
||||
assert "grid-template-columns: minmax(28rem, 1.15fr) minmax(20rem, 0.85fr)" in css
|
||||
assert ".latest-artifact-grid" in css
|
||||
assert "grid-template-columns: repeat(5, minmax(0, 1fr))" in css
|
||||
assert ".handoff-action-grid" in css
|
||||
assert "grid-template-columns: repeat(3, minmax(0, 1fr))" in css
|
||||
@@ -1,3 +1,29 @@
|
||||
## Sprint 115 QA/QC and Exports usability layout pass (2026-07-04)
|
||||
|
||||
Changed:
|
||||
- Added a QA/Exports usability layer to the frontend shell CSS to reduce evidence/history density without changing behavior.
|
||||
- Rebalanced QA/QC and Exports workspace columns for review-first usage.
|
||||
- Made QA/QC summary, handoff, drilldown, feature evidence, metric history and raw provenance surfaces more compact.
|
||||
- Reduced raw QA provenance height so JSON evidence remains available but no longer dominates the page.
|
||||
- Made export handoff cards, latest-artifact cards, action cards and export history controls denser and easier to scan.
|
||||
- Updated `CHANGELOG.md`, `docs/TODO.md` and `frontend/README.md`.
|
||||
- Added regression coverage in `backend/tests/test_sprint115_quality_export_usability_layout.py`.
|
||||
|
||||
Validation:
|
||||
- `cd frontend && npm run typecheck` passed.
|
||||
- `cd frontend && npm run build` passed.
|
||||
- `python -m pytest backend\tests\test_sprint115_quality_export_usability_layout.py backend\tests\test_sprint86_quality_workspace_density.py backend\tests\test_sprint89_export_system_density.py backend\tests\test_sprint70_quality_handoff_polish.py backend\tests\test_sprint78_export_preview_readability.py -q` passed: 15 tests.
|
||||
- `python -m compileall backend/app` passed.
|
||||
- `cd backend && python -m pytest -q` passed: 362 tests.
|
||||
- `bash scripts/run_readiness_check.sh` passed: 362 backend tests plus frontend typecheck/build.
|
||||
|
||||
Limitations:
|
||||
- This pass is visual/layout only; it does not change API contracts, persistence, export generation, QA metrics or map behavior.
|
||||
- Live Tower redeploy still needs to be run after commit/push before the user sees this pass at `http://192.168.10.150:1202`.
|
||||
|
||||
Next recommended pass:
|
||||
- Run a live visual audit after redeploy, then refine AI Labs/System or address any remaining visual rough edges found in the browser.
|
||||
|
||||
## Sprint 114 Data and Map usability layout pass (2026-07-04)
|
||||
|
||||
Changed:
|
||||
|
||||
@@ -80,6 +80,7 @@ This file now starts with the current implementation status. Older preparation/b
|
||||
- [x] Add Change Detection panel hierarchy and analysis workspace density polish.
|
||||
- [x] Add calm workbench layout pass to reduce duplicate navigation, heavy card styling and shell density.
|
||||
- [x] Add Data and Map usability layout pass with compact catalog cards and map-first spatial review.
|
||||
- [x] Add QA/QC and Exports usability layout pass with calmer evidence review and handoff artifact scanning.
|
||||
- [x] Add AI Labs Detection/Segmentation hierarchy and result density polish.
|
||||
- [x] Add Export/System handoff hierarchy and provider registry density polish.
|
||||
|
||||
|
||||
@@ -8,6 +8,8 @@ The shell has a calmer V1 workbench density pass: the duplicated workspace comma
|
||||
|
||||
Data and Map have an additional usability layout pass for the core daily workflow. The Data workspace uses compact catalog cards, shorter action buttons and tighter role summaries. The Map workspace prioritizes the MapLibre frame before dense controls, gives the map more height on desktop and compresses context/provenance/bbox extraction surfaces while preserving the existing selection, export and QA actions.
|
||||
|
||||
QA/QC and Exports follow the same calmer density model. QA/QC keeps metric evidence, feature ids and raw findings available but compresses provenance and history surfaces so review starts from the selected check and map evidence actions. Exports uses denser handoff cards, latest-artifact cards and history filters so artifact creation and download paths are easier to scan.
|
||||
|
||||
When project data loads and no dataset is selected yet, the workbench auto-opens the first ready vector dataset. This gives Data, Map and Exports an immediately usable default context while preserving explicit user selection once the user picks another dataset.
|
||||
|
||||
Data and Map workspaces include mobile-density CSS for file inputs, dataset action buttons, map toolbar controls, range sliders and empty-map quick actions so narrow screens avoid accidental viewport overflow.
|
||||
|
||||
@@ -2831,6 +2831,338 @@ button.entity-card {
|
||||
}
|
||||
}
|
||||
|
||||
/* Sprint 115 QA/Exports usability pass: calmer evidence review and handoff artifact surfaces. */
|
||||
.workspace-grid-analysis,
|
||||
.workspace-grid-exports {
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.workspace-grid-analysis {
|
||||
grid-template-columns: minmax(19rem, 0.82fr) minmax(26rem, 1.18fr);
|
||||
}
|
||||
|
||||
.workspace-grid-exports {
|
||||
grid-template-columns: minmax(28rem, 1.15fr) minmax(20rem, 0.85fr);
|
||||
}
|
||||
|
||||
.quality-results-shell,
|
||||
.export-center-shell {
|
||||
gap: 0.62rem;
|
||||
}
|
||||
|
||||
.quality-summary-surface,
|
||||
.quality-evidence-surface,
|
||||
.quality-drilldown-surface,
|
||||
.quality-control-surface,
|
||||
.quality-history-surface,
|
||||
.export-summary-surface,
|
||||
.export-handoff-surface,
|
||||
.latest-artifact-surface,
|
||||
.export-actions-surface,
|
||||
.export-history-surface {
|
||||
border-radius: 6px;
|
||||
padding: 0.62rem;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.quality-summary-surface,
|
||||
.export-summary-surface {
|
||||
background: #f8fbf9;
|
||||
}
|
||||
|
||||
.quality-results-shell .quality-summary-grid,
|
||||
.export-center-shell .quality-summary-grid {
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-summary-grid > div,
|
||||
.quality-handoff-grid > div,
|
||||
.quality-drilldown-grid > div,
|
||||
.quality-evidence-token-grid > div,
|
||||
.quality-feature-evidence-grid > div,
|
||||
.quality-provenance-grid > div,
|
||||
.handoff-readiness-grid > div,
|
||||
.latest-artifact-card,
|
||||
.handoff-action-card,
|
||||
.export-card,
|
||||
.quality-check-card {
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.56rem;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.quality-results-shell .quality-handoff-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-summary-grid span,
|
||||
.quality-handoff-grid span,
|
||||
.quality-drilldown-grid span,
|
||||
.quality-evidence-token-grid span,
|
||||
.quality-feature-evidence-grid span,
|
||||
.quality-provenance-grid span,
|
||||
.quality-score-row span,
|
||||
.latest-export-card span,
|
||||
.metric-list span,
|
||||
.handoff-readiness-grid span,
|
||||
.handoff-action-card span,
|
||||
.latest-artifact-card span {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.055em;
|
||||
}
|
||||
|
||||
.quality-summary-grid strong,
|
||||
.quality-handoff-grid strong,
|
||||
.quality-drilldown-grid strong,
|
||||
.quality-evidence-token-grid strong,
|
||||
.handoff-readiness-grid strong,
|
||||
.handoff-action-card strong,
|
||||
.latest-artifact-card strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.quality-dataset-name,
|
||||
.quality-drilldown-grid p,
|
||||
.quality-evidence-token-grid p,
|
||||
.quality-feature-evidence-grid p,
|
||||
.handoff-action-card p,
|
||||
.latest-artifact-card p,
|
||||
.latest-artifact-card small,
|
||||
.export-card p {
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row .muted {
|
||||
margin: 0.18rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.quality-drilldown-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-evidence-token-grid {
|
||||
grid-template-columns: minmax(9rem, 0.75fr) minmax(9rem, 0.75fr) minmax(14rem, 1.5fr);
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-feature-evidence-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-feature-evidence-grid ul {
|
||||
max-height: 6.5rem;
|
||||
overflow: auto;
|
||||
padding-left: 0.95rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.quality-provenance-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.quality-provenance-pre {
|
||||
max-height: 7.5rem;
|
||||
border-radius: 5px;
|
||||
padding: 0.48rem;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.quality-history-controls,
|
||||
.export-history-controls {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
padding: 0.52rem;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-history-controls input,
|
||||
.quality-history-controls select,
|
||||
.export-history-controls input,
|
||||
.export-history-controls select {
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.quality-check-list,
|
||||
.export-list {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quality-check-header,
|
||||
.export-card-header {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.quality-check-actions {
|
||||
gap: 0.38rem;
|
||||
justify-content: flex-start;
|
||||
margin-top: 0.45rem;
|
||||
}
|
||||
|
||||
.quality-check-actions button,
|
||||
.export-card .button-row button,
|
||||
.latest-artifact-actions button,
|
||||
.handoff-action-card button {
|
||||
min-height: 2.05rem;
|
||||
padding: 0.34rem 0.5rem;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.quality-score-row {
|
||||
grid-template-columns: 5rem 4.5rem minmax(0, 1fr);
|
||||
gap: 0.42rem;
|
||||
margin-top: 0.52rem;
|
||||
}
|
||||
|
||||
.quality-score-row > div,
|
||||
.quality-metric-card,
|
||||
.metric-list li {
|
||||
border-radius: 5px;
|
||||
padding: 0.42rem 0.48rem;
|
||||
}
|
||||
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 0.36rem;
|
||||
}
|
||||
|
||||
.quality-metric-card span {
|
||||
font-size: 0.58rem;
|
||||
}
|
||||
|
||||
.quality-metric-card strong {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.metric-list {
|
||||
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
|
||||
gap: 0.38rem;
|
||||
margin-top: 0.48rem;
|
||||
}
|
||||
|
||||
.metric-list-label {
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
|
||||
.export-center-shell .quality-summary-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.export-handoff-surface .handoff-summary-card {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.handoff-readiness-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.latest-artifact-grid {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.latest-artifact-card {
|
||||
gap: 0.24rem;
|
||||
}
|
||||
|
||||
.latest-artifact-actions {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.export-action-grid {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.handoff-action-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.48rem;
|
||||
}
|
||||
|
||||
.handoff-action-card {
|
||||
gap: 0.24rem;
|
||||
}
|
||||
|
||||
.handoff-action-card p {
|
||||
min-height: 2.1rem;
|
||||
}
|
||||
|
||||
.export-state-stack {
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.export-card p {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.export-card .button-row {
|
||||
gap: 0.38rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.export-type-badge {
|
||||
padding: 0.12rem 0.42rem;
|
||||
font-size: 0.64rem;
|
||||
}
|
||||
|
||||
.list-limit-banner {
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
padding: 0.48rem 0.56rem;
|
||||
}
|
||||
|
||||
.list-limit-banner span {
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.workspace-grid-analysis,
|
||||
.workspace-grid-exports,
|
||||
.quality-drilldown-grid,
|
||||
.quality-evidence-token-grid,
|
||||
.quality-feature-evidence-grid,
|
||||
.quality-provenance-grid,
|
||||
.latest-artifact-grid,
|
||||
.handoff-action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.quality-results-shell .quality-summary-grid,
|
||||
.quality-results-shell .quality-handoff-grid,
|
||||
.export-center-shell .quality-summary-grid,
|
||||
.handoff-readiness-grid,
|
||||
.quality-score-row,
|
||||
.quality-metric-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quality-drilldown-surface .panel-title-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-extract-surface {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
|
||||
Reference in New Issue
Block a user