Files

znetsixe 926872a082 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>

2026-04-08 08:33:42 +02:00

3.9 KiB

Raw Blame History

title, created, updated, status, tags, sources

title

created

updated

status

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)

{
  "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

3.9 KiB Raw Blame History