ipwatch/amelioration_onglet_architecture.md

# Amelioration Onglet Architecture - Brainstorming & Todo

## Analyse de l'existant

### Etat actuel (ArchitectureView.vue - 1543 lignes)
L'onglet Architecture est un editeur visuel de diagrammes reseau avec :

**Fonctionnel :**
- Canvas SVG avec drag-drop d'objets depuis une palette (7 types : world, home, computer, network, room, vm, service)
- Deplacement et redimensionnement des objets
- Systeme de connecteurs (4 cotes, 0-8 par cote)
- Splines (courbes de liaison) avec points de controle editables
- Relations parent-enfant (logiques, non visuelles)
- Integration IP : sync avec l'API pour recuperer les donnees reseau
- Panneau de proprietes complet (60+ proprietes editables)
- Persistence JSON (`data/architecture.json`)
- Edition inline de labels, verrouillage d'objets

**Limitations actuelles :**
- Pas d'imbrication visuelle (enfants non positionnes relativement au parent)
- Pas de zoom/pan natif (pas de navigation fluide dans grands diagrammes)
- Pas de minimap pour vue d'ensemble
- Pas de undo/redo
- Pas de multi-selection / group operations
- Pas de snap-to-grid ou alignement automatique
- Pas de bibliotheque d'objets reutilisables
- Pas de multi-diagrammes
- Code monolithique (1543 lignes dans un seul composant)
- Performance limitee au-dela de 100+ objets (pas de virtualisation)
- Splines basiques (quadratiques, pas de routage intelligent)

---

## Brainstorming : Vue Flow vs implementation actuelle

### Option A : Migrer vers Vue Flow (@vue-flow/core)

**Qu'est-ce que Vue Flow ?**
- Port Vue 3 de ReactFlow (reference React pour les node-based UIs)
- Librairie mature : v1.48.2, activement maintenue, 79+ projets dependants
- Site : https://vueflow.dev | GitHub : https://github.com/bcakmakoglu/vue-flow

**Fonctionnalites cles :**
- Zoom et pan fluides (natifs, optimises)
- Minimap integree (vue d'ensemble en bas a droite)
- Controls integres (zoom in/out/fit, panel en bas a gauche)
- Background configurable (dots, lines, cross)
- Nodes personnalisables (Custom Nodes = composants Vue complets)
- Edges personnalisables (Custom Edges = SVG custom)
- Handles (points de connexion sur les nodes, equivalent des connecteurs actuels)
- Drag-and-drop natif
- Selection simple et multiple
- Evenements riches (onConnect, onNodeDrag, onEdgeUpdate, etc.)
- State management integre (useVueFlow composable)
- Types de nodes inclus : default, input, output
- Types d'edges inclus : bezier, straight, step, smoothstep
- Sub-flows (nodes imbriques dans d'autres nodes = groupes)
- Snap-to-grid
- Performant (virtualisation des nodes hors viewport)

**Avantages pour IPWatch :**
| Fonctionnalite | Actuel (custom SVG) | Avec Vue Flow |
|----------------|---------------------|---------------|
| Zoom/Pan | Non | Natif, fluide |
| Minimap | Non | Composant inclus |
| Snap-to-grid | Non | Option native |
| Sub-flows (groupes) | Non | Nodes imbriques |
| Multi-selection | Non | Natif |
| Performance 100+ nodes | Problematique | Virtualisation |
| Routing edges | Quadratique simple | Bezier, step, smoothstep, custom |
| Undo/Redo | Non | Via plugin/composable |
| Maintenance | 1543 lignes custom | Communaute active |

**Inconvenients / Risques :**
- Migration significative : recrire la logique d'affichage
- Les connecteurs actuels (multi-connecteurs par cote) devront etre adaptes aux "Handles" de Vue Flow
- Les splines avec points de controle editables sont plus avancees que les edges standard de Vue Flow (mais possible via Custom Edges)
- Le panneau de proprietes devra etre refait (mais c'est l'occasion de l'ameliorer)
- Dependance a une librairie tierce (risque de maintenance)
- Courbe d'apprentissage pour l'API Vue Flow

### Option B : Ameliorer l'implementation actuelle

**Avantages :**
- Pas de migration, evolution progressive
- Controle total sur le code
- Deja fonctionnel pour le cas d'usage actuel

**Inconvenients :**
- Reimplementer zoom/pan/minimap/snap = beaucoup de travail
- Maintenance lourde du code custom SVG
- Performance difficile a optimiser sans virtualisation

### Option C : Approche hybride

Utiliser Vue Flow pour le canvas principal (zoom, pan, nodes, edges, minimap) tout en conservant :
- Le panneau de proprietes actuel (adapte)
- La palette d'outils actuelle
- Le systeme de persistence JSON existant
- L'integration IP existante

**C'est l'option recommandee.** Vue Flow gere le "moteur graphique" et IPWatch garde le controle sur la logique metier.

---

### Autres frameworks evalues

| Framework | Type | Vue 3 | Avantages | Inconvenients |
|-----------|------|-------|-----------|---------------|
| **Vue Flow** | Node graph | Natif | Complet, actif, ReactFlow-like | Courbe d'apprentissage |
| **Cytoscape.js** | Graphe generique | Wrapper | Tres puissant, algorithmes de layout | Lourd, API complexe, pas Vue-natif |
| **D3.js** | Bas niveau | Non | Ultra-flexible | Enorme effort d'implementation |
| **Drawflow** | Node editor | Oui | Simple | Trop basique, peu maintenu |
| **JointJS** | Diagrammes | Non | Professionnel | Payant (rapperd), pas Vue |
| **GoJS** | Diagrammes | Non | Tres complet | Payant, pas Vue-natif |
| **jsPlumb** | Connexions | Wrapper | Bon pour les connexions | Pas de gestion de nodes |
| **Mermaid** | Diagrammes texte | Non | Declaratif | Pas interactif |

**Verdict : Vue Flow est le meilleur choix pour IPWatch** - natif Vue 3, fonctionnalites proches de l'existant, communaute active.

---

## Ameliorations identifiees

### Phase 1 : Migration vers Vue Flow (fondations)
- [ ] Installer `@vue-flow/core`, `@vue-flow/minimap`, `@vue-flow/controls`, `@vue-flow/background`
- [ ] Creer un composant `ArchitectureCanvas.vue` base sur Vue Flow
- [ ] Adapter le format de donnees `architecture.json` (items → nodes, splines → edges)
- [ ] Ecrire un adaptateur de migration pour convertir les donnees existantes
- [ ] Implementer les Custom Nodes pour chaque type (world, home, computer, network, room, vm, service)
- [ ] Implementer les Custom Edges pour reproduire le style des splines actuelles
- [ ] Activer minimap, controls et background
- [ ] Conserver le panneau de proprietes (adapte a la nouvelle structure)

### Phase 2 : Nouvelles fonctionnalites Vue Flow
- [ ] Zoom/Pan fluide avec raccourcis clavier (Ctrl+scroll, espace+drag)
- [ ] Snap-to-grid configurable
- [ ] Multi-selection (Shift+click, rectangle de selection)
- [ ] Sub-flows : grouper des nodes dans un node parent (imbrication visuelle)
- [ ] Undo/Redo (Ctrl+Z / Ctrl+Y)
- [ ] Copier/Coller de nodes
- [ ] Auto-layout : algorithme de positionnement automatique (dagre, elkjs)

### Phase 3 : Ameliorations UX
- [ ] Bibliotheque d'objets : sauvegarder et reutiliser des configurations de nodes
- [ ] Templates de diagrammes predéfinis (reseau maison, datacenter, etc.)
- [ ] Export en image (PNG/SVG) du diagramme
- [ ] Mode lecture seule (partage de vue)
- [ ] Recherche de nodes (par nom, IP, type)
- [ ] Filtrage par type de node (afficher/masquer categories)
- [ ] Legende dynamique

### Phase 4 : Integrations avancees
- [ ] Sync temps reel avec les scans reseau (nodes changent de couleur selon l'etat online/offline)
- [ ] Affichage du trafic sur les edges (epaisseur proportionnelle au trafic via OPNsense API)
- [ ] Integration OPNsense : noeud firewall avec interfaces et regles
- [ ] Multi-diagrammes : gestion de plusieurs vues (physique, logique, par etage, par VLAN)
- [ ] Animation des flux reseau sur les edges

---

## Todo

*(deplacer ici les elements valides a realiser)*

## Done

*(deplacer ici les elements termines)*