Add document converter, seeder data structure, and project wiki
- 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>
This commit is contained in:
121
wiki/architecture/metro-map-ui.md
Normal file
121
wiki/architecture/metro-map-ui.md
Normal file
@@ -0,0 +1,121 @@
|
||||
---
|
||||
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
|
||||
Reference in New Issue
Block a user