feat(ui): redesign GeoIntel as Atlas Workbench
This commit is contained in:
@@ -10819,3 +10819,45 @@ Decision:
|
||||
|
||||
- RC-11 is complete subject only to binding the accepted final commit and
|
||||
immutable image in the signed/checksummed package. No RC-12 phase is used.
|
||||
|
||||
## 2026-07-19 - Stitch-guided complete Atlas Workbench redesign
|
||||
|
||||
Implemented:
|
||||
|
||||
- Created the private Stitch project `GeoIntel Complete Workbench Redesign`
|
||||
and the `GeoIntel Atlas Workbench` design system.
|
||||
- Generated production references for the Map Explorer, Sources catalog and
|
||||
local AI Questions workspaces.
|
||||
- Rebuilt the application shell so the brand lives in one compact navigation
|
||||
rail and the active work context lives in one 56-pixel top bar.
|
||||
- Added Lucide icons for the eight workspace destinations and removed the
|
||||
duplicate command navigation.
|
||||
- Restyled Map, Sources, AI Questions, Quality, Image Analysis, Downloads,
|
||||
Status and Administration under one restrained token system.
|
||||
- Restored the desktop map to a theme/map/insight row, allowed the map to
|
||||
absorb ultrawide width and bounded the mobile theme list.
|
||||
- Replaced the old `visual-polish.css` layer with the documented
|
||||
`atlas-workbench.css` implementation.
|
||||
|
||||
Validated during implementation:
|
||||
|
||||
- the complete readiness gate passed: 1,052 backend tests, 22 frontend tests,
|
||||
frontend TypeScript typecheck, the production build and Alembic head
|
||||
`202607160001`;
|
||||
- the browser UX audit passed at 390x844, 1366x768 and 2560x1080, including
|
||||
accessible control names, loading states, keyboard tabs, the advanced
|
||||
coverage flow, zero horizontal overflow, zero console errors and zero failed
|
||||
API requests;
|
||||
- all seven Belgium/North Sea release journeys passed against the live backend
|
||||
through the redesigned frontend;
|
||||
- browser review passed at 1280x720, 3440x1200 and 390x844 with no horizontal
|
||||
document overflow or clipped button/select text;
|
||||
- Map, Sources, AI Questions, Quality, Image Analysis, Downloads, Status and
|
||||
Administration were each reviewed against live backend data.
|
||||
|
||||
Behavior preservation:
|
||||
|
||||
- No API contract, migration, database model, provider behavior, GIS
|
||||
calculation, model runtime or persistence flow changed.
|
||||
- Existing map selection, source loading, local Ollama, QA, analysis and
|
||||
download actions remain wired through their original hooks and services.
|
||||
|
||||
@@ -99,6 +99,9 @@ geen open productroadmap meer.
|
||||
- [x] Maak de vijf bestaande officiële beleidsrasters veilig op aanvraag
|
||||
beschikbaar voor elke begrensde selectie in Vlaanderen, met Dataset-cache,
|
||||
semantische metrics en zonder 1.425 vooraf geladen rasters.
|
||||
- [x] Vervang de gegroeide dashboardpresentatie door de Stitch-gestuurde Atlas
|
||||
Workbench met een compacte navigatierail, vaste contextbalk, taakgerichte
|
||||
schermen en gevalideerde desktop-, ultrawide- en mobiele layouts.
|
||||
|
||||
Bewuste, niet-blokkerende grenzen:
|
||||
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
# GeoIntel Atlas Workbench
|
||||
|
||||
## Purpose
|
||||
|
||||
The Atlas Workbench is the visual and interaction system for GeoIntel. It
|
||||
keeps the product map-first, task-oriented and understandable without hiding
|
||||
source authority, observation time or GIS limitations.
|
||||
|
||||
The redesign was developed in Stitch under:
|
||||
|
||||
- project: `GeoIntel Complete Workbench Redesign`
|
||||
- project id: `18332842433441398219`
|
||||
- design system: `GeoIntel Atlas Workbench`
|
||||
- design-system asset: `4667932515738184526`
|
||||
- Map Explorer screen: `c24113d1f1474c91b332b2365be24993`
|
||||
- Sources screen: `239796f2d66a44e7983e5fc588305ff8`
|
||||
- AI Questions screen: `246aa57bbe974861885325ff9d10c6bd`
|
||||
|
||||
The React implementation remains the source of truth for behavior. Stitch is
|
||||
the design reference for hierarchy, spacing and component treatment.
|
||||
|
||||
## Product hierarchy
|
||||
|
||||
1. `Kaart` is the primary workspace.
|
||||
2. `Bronnen` explains available and missing official data.
|
||||
3. `AI-vragen` answers only from persisted area evidence.
|
||||
4. `Kwaliteit` reviews stored checks and provenance.
|
||||
5. `Beeldanalyse` contains detection and segmentation workflows.
|
||||
6. `Downloads` stores and previews traceable outputs.
|
||||
7. `Status` summarizes readiness and source freshness.
|
||||
8. `Beheer` exposes provider and technical administration.
|
||||
|
||||
The navigation rail is the only persistent workspace navigation. Duplicate
|
||||
command bars or competing shortcut rows must not be reintroduced.
|
||||
|
||||
## Layout rules
|
||||
|
||||
- Desktop uses an 88-pixel navigation rail and a 56-pixel context bar.
|
||||
- The normal map layout is `theme drawer / map / insight inspector`.
|
||||
- Theme and insight rails stay stable on ultrawide displays; the map receives
|
||||
the additional width.
|
||||
- Non-map workspaces use one task header and one primary work surface.
|
||||
- Panels scroll internally when their function requires stable surrounding
|
||||
context.
|
||||
- Mobile navigation is horizontally scrollable. The theme list is bounded so
|
||||
the map remains reachable early in the page flow.
|
||||
- Typography never scales with viewport width.
|
||||
|
||||
## Visual tokens
|
||||
|
||||
| Role | Value |
|
||||
| --- | --- |
|
||||
| Canvas | `#f3f6f5` |
|
||||
| Surface | `#ffffff` |
|
||||
| Ink | `#152522` |
|
||||
| Muted text | `#687773` |
|
||||
| Border | `#dce4e1` |
|
||||
| Primary teal | `#0b6b62` |
|
||||
| Context blue | `#315d73` |
|
||||
| Attention amber | `#a55c23` |
|
||||
| Error red | `#a33c39` |
|
||||
| Radius | `4px` |
|
||||
|
||||
The UI does not use gradients, decorative blobs, oversized hero sections,
|
||||
nested cards or pill-heavy status presentation.
|
||||
|
||||
## Interaction rules
|
||||
|
||||
- One primary action per task surface.
|
||||
- Use icons plus short labels for navigation and familiar commands.
|
||||
- `Laatste toestand / Evolutie` is a segmented control.
|
||||
- Rectangle drawing is the primary spatial-selection action.
|
||||
- Technical model, provider and provenance detail stays available through
|
||||
explicit disclosures.
|
||||
- Empty states state the next useful action in one short sentence.
|
||||
- Unavailable data or model states remain honest and are never replaced with
|
||||
fabricated output.
|
||||
|
||||
## Implementation boundaries
|
||||
|
||||
- Shared shell and navigation:
|
||||
`frontend/src/components/shell/WorkbenchNavigation.tsx`
|
||||
- Shared visual implementation:
|
||||
`frontend/src/styles/atlas-workbench.css`
|
||||
- Map workflow:
|
||||
`frontend/src/components/map/MapWorkspace.tsx`
|
||||
- API, persistence and GIS behavior remain outside the design system.
|
||||
|
||||
Any future visual change must retain the browser acceptance widths of
|
||||
390 pixels, 1280 pixels and 3440 pixels and must pass frontend typecheck,
|
||||
unit tests, production build and the UX browser audit.
|
||||
Reference in New Issue
Block a user