Improve data and map usability layout

CHANGELOG.md

@@ -7,6 +7,14 @@
 
 # Changelog
 
+## 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.
+- Rebalanced the Data workspace columns so catalog review has more room while setup panels remain available.
+- Made the Map workspace more map-first by placing the MapLibre frame before dense layer controls and increasing the desktop map height.
+- Reduced Map context, provenance, bbox selection and feature extraction density while keeping existing selection/export/QA actions unchanged.
+- Added static regression coverage for the compact Data catalog and map-first workspace ordering.
+
 ## Sprint 113 Calm workbench layout pass (2026-07-04)
 
 - Reduced visual density in the workbench shell without changing API contracts or workflows.

backend/tests/test_sprint114_data_map_usability_layout.py

@@ -0,0 +1,30 @@
+from pathlib import Path
+
+
+REPO_ROOT = Path(__file__).resolve().parents[2]
+
+
+def test_data_workspace_uses_compact_catalog_layout() -> None:
+    css = (REPO_ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8")
+
+    assert "Sprint 114 data/map usability pass" in css
+    assert ".workspace-grid-data" in css
+    assert "grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr)" in css
+    assert ".dataset-action-grid" in css
+    assert "grid-template-columns: repeat(4, minmax(0, 1fr))" in css
+    assert ".dataset-action-button small" in css
+    assert "display: none;" in css
+
+
+def test_map_workspace_prioritizes_map_before_dense_controls() -> None:
+    css = (REPO_ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8")
+
+    assert ".map-context-summary" in css
+    assert "order: 1;" in css
+    assert ".map-frame-surface" in css
+    assert "order: 2;" in css
+    assert ".map-control-surface" in css
+    assert "order: 3;" in css
+    assert ".map-inspection-surface" in css
+    assert "order: 6;" in css
+    assert "min-height: 34rem;" in css

docs/CODEX_EXECUTION_LOG.md

@@ -1,3 +1,28 @@
+## Sprint 114 Data and Map usability layout pass (2026-07-04)
+
+Changed:
+- Added a Data/Map usability layer to the frontend shell CSS to improve the core select-and-extract workflow without changing behavior.
+- Rebalanced the Data workspace columns and made dataset upload, role summaries, catalog cards, metrics and actions more compact.
+- Made the Map workspace more map-first by ordering the MapLibre frame before dense controls and increasing desktop map height.
+- Compressed map context, provenance, layer controls, bbox selection, selected-feature extraction and inspector surfaces.
+- Updated `CHANGELOG.md`, `docs/TODO.md` and `frontend/README.md`.
+- Added regression coverage in `backend/tests/test_sprint114_data_map_usability_layout.py`.
+
+Validation:
+- `cd frontend && npm run typecheck` passed.
+- `cd frontend && npm run build` passed.
+- `python -m pytest backend\tests\test_sprint113_calm_workbench_layout.py backend\tests\test_sprint114_data_map_usability_layout.py backend\tests\test_sprint74_data_map_mobile_polish.py backend\tests\test_sprint85_map_workspace_density.py -q` passed: 10 tests.
+- `python -m compileall backend/app` passed.
+- `cd backend && python -m pytest -q` passed: 360 tests.
+- `bash scripts/run_readiness_check.sh` passed: 360 backend tests plus frontend typecheck/build.
+
+Limitations:
+- This pass is visual/layout only; it does not change API contracts, persistence, map query behavior, exports or QA logic.
+- 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 and then refine QA/QC and Exports in the same quieter style.
+
 ## Sprint 113 calm workbench layout pass (2026-07-04)
 
 Changed:

docs/TODO.md

@@ -79,6 +79,7 @@ This file now starts with the current implementation status. Older preparation/b
 - [x] Add QA/QC workspace result hierarchy and filter density polish.
 - [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 AI Labs Detection/Segmentation hierarchy and result density polish.
 - [x] Add Export/System handoff hierarchy and provider registry density polish.
 

frontend/README.md

@@ -6,6 +6,8 @@ The workbench now uses a task-based shell instead of a single long panel stack.
 
 The shell has a calmer V1 workbench density pass: the duplicated workspace command bar is hidden, the sidebar is more compact, the top context bar is quieter, readiness tiles are smaller and panels use softer borders/shadows. This keeps the same workflows and API calls while reducing visual noise on desktop and mobile.
 
+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.
+
 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.

frontend/src/styles/app.css

@@ -4122,3 +4122,362 @@ section {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+/* Sprint 114 data/map usability pass: make the core select-and-extract flow calmer and map-first. */
+.workspace-grid-data {
+  grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr);
+  gap: 0.85rem;
+}
+
+.workspace-grid-data > section {
+  align-self: start;
+}
+
+.workspace-grid-data .workspace-panel {
+  padding: 0.85rem;
+}
+
+.data-selection-summary {
+  border-left-width: 3px;
+  padding: 0.55rem 0.65rem;
+  background: #ffffff;
+}
+
+.data-selection-summary strong {
+  font-size: 0.9rem;
+}
+
+.data-panel-form-block,
+.data-panel-list-block {
+  border-radius: 6px;
+  padding: 0.62rem;
+  background: #ffffff;
+}
+
+.dataset-upload-form {
+  grid-template-columns: repeat(3, minmax(8rem, 1fr)) minmax(11rem, 1.15fr) auto;
+  gap: 0.55rem;
+}
+
+.dataset-upload-form label {
+  margin-top: 0;
+}
+
+.dataset-upload-form button {
+  min-height: 2.35rem;
+  align-self: end;
+  white-space: nowrap;
+}
+
+.dataset-role-summary-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.42rem;
+  margin-top: 0.6rem;
+}
+
+.dataset-role-summary {
+  min-height: 3.1rem;
+  border-radius: 6px;
+  padding: 0.48rem 0.55rem;
+}
+
+.dataset-role-summary strong {
+  font-size: 1rem;
+}
+
+.dataset-role-summary span,
+.dataset-role-summary small {
+  font-size: 0.66rem;
+}
+
+.dataset-list {
+  gap: 0.52rem;
+}
+
+.dataset-card {
+  border-radius: 6px;
+  padding: 0.65rem;
+  background: #ffffff;
+}
+
+.dataset-card-active {
+  background: #f8fbf9;
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.dataset-card-header {
+  gap: 0.5rem;
+}
+
+.dataset-card-kicker {
+  margin-bottom: 0.18rem;
+  font-size: 0.68rem;
+}
+
+.dataset-role-badge {
+  min-height: 1.24rem;
+  padding: 0.12rem 0.42rem;
+  font-size: 0.64rem;
+}
+
+.dataset-card-title {
+  font-size: 0.95rem;
+}
+
+.dataset-card .entity-meta {
+  gap: 0.22rem 0.52rem;
+  font-size: 0.74rem;
+}
+
+.dataset-metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.35rem;
+  margin-top: 0.5rem;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font-size: 0.74rem;
+}
+
+.dataset-metrics span {
+  min-width: 0;
+  overflow: hidden;
+  border-radius: 5px;
+  padding: 0.32rem 0.42rem;
+  background: #f8fafc;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dataset-action-hint {
+  margin-top: 0.48rem;
+  font-size: 0.76rem;
+}
+
+.dataset-action-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.38rem;
+  margin-top: 0.52rem;
+}
+
+.dataset-action-button {
+  min-height: 2.45rem;
+  padding: 0.38rem 0.48rem;
+}
+
+.dataset-action-button span {
+  font-size: 0.78rem;
+}
+
+.dataset-action-button small {
+  display: none;
+}
+
+.map-workspace-shell {
+  gap: 0.62rem;
+}
+
+.map-workspace-shell .panel-title-row {
+  margin-bottom: 0;
+}
+
+.map-context-summary {
+  order: 1;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.45rem;
+}
+
+.map-context-summary > div {
+  border-left-width: 3px;
+  border-radius: 6px;
+  padding: 0.5rem 0.58rem;
+  background: #ffffff;
+}
+
+.map-context-summary span {
+  font-size: 0.6rem;
+}
+
+.map-context-summary strong {
+  margin-top: 0.12rem;
+  font-size: 0.82rem;
+}
+
+.map-context-summary small {
+  margin-top: 0.12rem;
+  font-size: 0.7rem;
+}
+
+.map-frame-surface {
+  order: 2;
+  padding: 0.35rem;
+  background: #eef4f1;
+}
+
+.workbench-main .map-container,
+.map-frame-surface .map-container {
+  min-height: 34rem;
+}
+
+.map-control-surface {
+  order: 3;
+  gap: 0.5rem;
+  padding: 0.58rem;
+}
+
+.map-workspace-shell .map-toolbar {
+  grid-template-columns: minmax(11rem, 1.1fr) repeat(2, minmax(9rem, 1fr)) minmax(11rem, 1.1fr);
+  gap: 0.5rem;
+}
+
+.map-workspace-shell .map-toolbar label {
+  margin-top: 0;
+}
+
+.layer-control-card,
+.map-status {
+  border-radius: 6px;
+  padding: 0.46rem 0.55rem;
+}
+
+.map-status strong {
+  font-size: 0.82rem;
+}
+
+.map-status span {
+  font-size: 0.72rem;
+}
+
+.layer-provenance-rail {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.45rem;
+}
+
+.layer-provenance-rail > div {
+  border-radius: 6px;
+  padding: 0.46rem 0.55rem;
+}
+
+.layer-provenance-rail span {
+  font-size: 0.6rem;
+}
+
+.layer-provenance-rail strong {
+  min-height: auto;
+  font-size: 0.74rem;
+  -webkit-line-clamp: 1;
+}
+
+.qa-evidence-map-status {
+  order: 4;
+  border-left-width: 3px;
+  border-radius: 6px;
+  padding: 0.58rem;
+}
+
+.map-empty-state {
+  order: 5;
+}
+
+.map-inspection-surface {
+  order: 6;
+  display: grid;
+  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
+  gap: 0.65rem;
+  padding: 0.62rem;
+}
+
+.bbox-select-surface,
+.feature-extract-surface,
+.map-inspection-surface .feature-inspector {
+  margin: 0;
+  border-radius: 6px;
+  padding: 0.62rem;
+}
+
+.bbox-select-surface {
+  border-left-width: 3px;
+}
+
+.map-inspection-surface .feature-inspector {
+  border: 1px solid var(--line);
+  background: #ffffff;
+}
+
+.bbox-select-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.bbox-select-grid label {
+  margin-top: 0;
+}
+
+.bbox-select-grid input {
+  min-height: 2.1rem;
+}
+
+.bbox-select-actions,
+.feature-extract-actions {
+  gap: 0.38rem;
+}
+
+.bbox-select-actions button,
+.feature-extract-actions button {
+  min-height: 2.15rem;
+  padding: 0.38rem 0.55rem;
+  font-size: 0.78rem;
+}
+
+.feature-extract-grid {
+  gap: 0.42rem;
+}
+
+.feature-extract-grid > div {
+  border-radius: 5px;
+  padding: 0.42rem 0.48rem;
+}
+
+.feature-extract-grid span {
+  font-size: 0.62rem;
+}
+
+.feature-extract-grid strong {
+  font-size: 0.82rem;
+}
+
+@media (max-width: 1180px) {
+  .workspace-grid-data,
+  .map-inspection-surface {
+    grid-template-columns: 1fr;
+  }
+
+  .dataset-upload-form,
+  .dataset-action-grid,
+  .map-context-summary,
+  .map-workspace-shell .map-toolbar,
+  .layer-provenance-rail {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .dataset-upload-form,
+  .dataset-role-summary-grid,
+  .dataset-metrics,
+  .dataset-action-grid,
+  .map-context-summary,
+  .map-workspace-shell .map-toolbar,
+  .layer-provenance-rail,
+  .bbox-select-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dataset-action-button small {
+    display: block;
+  }
+
+  .workbench-main .map-container,
+  .map-frame-surface .map-container {
+    min-height: 24rem;
+  }
+}