926872a082
- ai-service/convert.py: converts Office/PDF files to markdown with frontmatter - database/seeders/data/: folder structure for themas, projects, documents, etc. - database/seeders/data/raw/: drop zone for Office/PDF files to convert - wiki/: project architecture, concepts, and knowledge graph documentation - Remove unused Laravel example tests Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
122 lines
3.9 KiB
Markdown
122 lines
3.9 KiB
Markdown
---
|
|
title: Metro Map UI Architecture
|
|
created: 2026-04-08
|
|
updated: 2026-04-08
|
|
status: evolving
|
|
tags: [architecture, ui, d3, metro-map, retro]
|
|
sources: [resources/js/Components/MetroMap/MetroCanvas.vue, STYLE_GUIDE.md, resources/js/Components/Cli/CliBar.vue]
|
|
---
|
|
|
|
# Metro Map UI Architecture
|
|
|
|
The entire platform navigates via a **zoomable metro/transit map**. No sidebar, no traditional dashboard. Users explore the innovation landscape visually.
|
|
|
|
## Map Levels
|
|
|
|
| Level | What You See | Lines = | Stations = | Zoom Target |
|
|
|---|---|---|---|---|
|
|
| 1. Strategy | Full innovation landscape | Strategic themes (Thema) | Projects | Click station → Level 2 |
|
|
| 2. Project | Single project lifecycle | Lifecycle + Commitments + Documents | Phases, items | Click station → Level 3 |
|
|
| 3. Detail | Individual item | (not yet implemented) | — | Click to open |
|
|
|
|
## Technical Implementation
|
|
|
|
### MetroCanvas.vue (356 LOC)
|
|
|
|
- **Rendering**: D3.js 7.9 on SVG
|
|
- **Zoom**: `d3.zoom()` with `scaleExtent([0.3, 5])`, pan + zoom
|
|
- **Lines**: `d3.curveMonotoneX` paths connecting stations
|
|
- **Stations**: Two concentric circles (outer ring = line color, inner dot = status color)
|
|
- **Labels**: VT323 monospace font, positioned below stations
|
|
- **Interactions**: hover → glow effect + tooltip, click → emit node-click
|
|
- **Dependencies**: Dashed lines between connected stations across lines
|
|
|
|
### Data Contract (MapDataService → MetroCanvas)
|
|
|
|
```json
|
|
{
|
|
"lines": [
|
|
{ "id": "thema-1", "name": "Waterkwaliteit", "color": "#00d2ff" }
|
|
],
|
|
"nodes": [
|
|
{
|
|
"id": "project-1",
|
|
"entityId": 1,
|
|
"entityType": "project",
|
|
"name": "Sensor Netwerk",
|
|
"lineId": "thema-1",
|
|
"x": -200, "y": 0,
|
|
"order": 1,
|
|
"status": "verkenning",
|
|
"description": "...",
|
|
"owner": "Jan",
|
|
"badge": "Verkenning",
|
|
"children": 5
|
|
}
|
|
],
|
|
"connections": [
|
|
{ "from": "project-1", "to": "project-3" }
|
|
],
|
|
"level": 1
|
|
}
|
|
```
|
|
|
|
### Station Status Colors
|
|
|
|
| Status | Color | Hex |
|
|
|---|---|---|
|
|
| afgerond / completed | Neon green | `#00ff88` |
|
|
| actief / active | Vivid cyan | `#00d2ff` |
|
|
| geparkeerd | Warning yellow | `#ffd93d` |
|
|
| gestopt | Signal red | `#e94560` |
|
|
| default (pending) | Dark fill | `#16213e` |
|
|
|
|
### Visual Effects
|
|
|
|
- **Glow filter**: SVG `feGaussianBlur` with `stdDeviation=4`, applied on hover
|
|
- **Scanline pattern**: 4px repeating lines at 8% opacity (subtle CRT effect)
|
|
- **Hover transition**: 200ms radius 8→12 + glow filter
|
|
- **Zoom animation**: 500ms d3 zoom transition for `zoomTo()` method
|
|
|
|
## C64 CLI Bar (CliBar.vue)
|
|
|
|
Fixed at bottom of screen. Commodore 64 aesthetic:
|
|
- Monospace font (Press Start 2P / VT323)
|
|
- Blinking block cursor
|
|
- Dark background, cyan/green text
|
|
- Natural language input
|
|
- Responses slide up above bar with `[AI]` prefix
|
|
|
|
## Design System
|
|
|
|
### Color Palette
|
|
|
|
| Role | Hex | Usage |
|
|
|---|---|---|
|
|
| Background | `#1a1a2e` | Canvas, page background |
|
|
| Surface | `#16213e` | Cards, tooltips, panels |
|
|
| Primary | `#0f3460` | Metro lines, primary actions |
|
|
| Accent (cyan) | `#00d2ff` | Active states, highlights, CLI cursor |
|
|
| Accent (red) | `#e94560` | Warnings, deadlines |
|
|
| Accent (green) | `#00ff88` | Success, completed |
|
|
| Accent (purple) | `#7b68ee` | Knowledge, documentation |
|
|
| Text primary | `#e8e8e8` | Main text |
|
|
| Text secondary | `#8892b0` | Labels, secondary text |
|
|
|
|
### Fonts
|
|
|
|
| Use | Font | Fallback |
|
|
|---|---|---|
|
|
| Map labels | VT323 | monospace |
|
|
| CLI bar | Press Start 2P | VT323, monospace |
|
|
| Body text | IBM Plex Sans | Inter, sans-serif |
|
|
| Code | IBM Plex Mono | monospace |
|
|
|
|
## Planned Enhancements
|
|
|
|
- **Zoom-to-dimension**: scroll-zoom near a station gradually cross-fades into child dimension (no click needed)
|
|
- **Recursive dimensions**: every node can contain children forming a sub-metro-map, infinitely nestable
|
|
- **Right-click context menu**: canvas = "New node here", station = "Edit/Delete/Add child"
|
|
- **[+] FAB**: creates at current depth
|
|
- **Mobile**: list fallback with metro line colors preserved
|