znetsixe d41ca76e0d Metro map interaction redesign: fit-to-view zoom, grid, branch handles, custom tracks
Phase 1 — Fit-to-view zoom:
- computeFitTransform() calculates bounding box and scales to fit all nodes
- Replaces hardcoded scale=1 reset in animateZoomReset() and initCanvas()
- Dim 1 no longer appears tiny after zooming out from dim 2

Phase 2 — Grid system:
- Shared gridConstants.js (GRID=50, GRID_STEP_X=200, GRID_STEP_Y=150)
- MapDataService snapToGrid() aligns all node positions server-side
- Canvas renders subtle grid lines (shown on interaction only, with fade)
- Line highlighting support via setHighlightedLine() for FAB hover

Phase 3 — Branch handles:
- Hover any station node → 3 "+" handles appear (0°/45°/315°)
- 0° extends the current line, 45°/315° fork to create new branch
- Ghost preview (dashed line + circle) on handle hover
- Handles only show at unoccupied grid positions
- Grid fades in during handle interaction, fades out after

Phase 4 — Custom tracks database:
- metro_lines table (project_id, naam, color, type, order)
- metro_nodes table (metro_line_id, naam, status, x, y, order)
- MetroLine + MetroNode models, controllers, routes
- Project.metroLines() relationship added

Phase 5+6 — FAB redesign + MetroMap wiring:
- FAB shows "Nieuw thema (lijn)" at root, "Nieuwe lijn" in project dim
- Track creation modal with retro-styled form
- MetroMap handles create-node events from branch handles
- Extend (0°) opens commitment/document form, fork opens track form
- Canvas context menu replaced with "hover to branch" hint

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-08 09:40:56 +02:00

Innovatieplatform

Innovation governance platform for the R&D Lab at Waterschap Brabantse Delta. Supports the full lifecycle of innovation trajectories — from signal to handover — with AI-powered search, summarization, and project assistance.

Tech Stack

  • Backend: Laravel 13 (PHP 8.3+) — service-oriented, event-driven, API-first
  • Frontend: Vue 3 + Inertia.js + Vite 8 + Tailwind CSS 4.2
  • Visualization: D3.js 7.9 (zoomable metro map)
  • Database: PostgreSQL 16 + pgvector
  • AI Service: Python FastAPI + LangGraph + RAG
  • Infrastructure: Docker Compose (nginx, php-fpm, worker, scheduler, ai-service, postgresql, redis)

Quick Start

# Clone and setup
git clone https://gitea.wbd-rd.nl/vps1_gitea_admin/innovatieplatform.git
cd innovatieplatform
composer setup

# Development (starts Laravel server, queue worker, logs, and Vite)
composer dev

Docker

docker compose up -d

Services: nginx (:80), postgresql (:5432), redis (:6379), ai-service (:8000)

Project Structure

app/
  Models/          21 Eloquent models (Project, Fase, Commitment, Document, ...)
  Enums/           14 status/type enums (ProjectStatus, FaseType, ...)
  Services/        Business logic (ProjectService, MapDataService, ThemaService)
  Http/Controllers/  API + Inertia controllers
resources/js/
  Pages/           Inertia page components (MetroMap, Auth, Dashboard)
  Components/      Vue components (MetroCanvas, CliBar, NodePreview, Breadcrumb)
  Layouts/         App layout wrapper
ai-service/        Python FastAPI AI service
wiki/              Project knowledge base (wiki-template schema)
docker/            Docker configs (php, nginx, scheduler)
.claude/agents/    10 Claude Code agent definitions

Documentation

  • CLAUDE.md — Architecture principles, build agents, MVP scope
  • STYLE_GUIDE.md — Metro map UI + retro-futurism design system
  • wiki/ — Knowledge base with structured data, architecture docs, and query tools

Wiki

python wiki/tools/query.py health          # Project health overview
python wiki/tools/query.py entity "project" # Everything about an entity
bash wiki/tools/search.sh "keyword"         # Full-text search
bash wiki/tools/lint.sh                     # Check wiki health

Tests

composer test
Description
No description provided
Readme 6.1 MiB
Languages
PHP 45.4%
Vue 31%
Blade 15.2%
Python 6.1%
Shell 1.4%
Other 0.9%