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)