v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution
- Frontend v4 accessible sur réseau local (192.168.1.40) - Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard) - Ollama GPU fonctionnel - Self-healing interactif - Dashboard confiance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Dom
140
docs/STABILISATION_INTERFACE_VWB_COMPLETE_09JAN2026.md
Normal file
140
docs/STABILISATION_INTERFACE_VWB_COMPLETE_09JAN2026.md
Normal file
@@ -0,0 +1,140 @@
|
||||
# Stabilisation Interface Visual Workflow Builder - Rapport Complet
|
||||
|
||||
**Auteur : Dom, Alice, Kiro - 09 janvier 2026**
|
||||
|
||||
## Résumé
|
||||
|
||||
Correction complète des problèmes d'interface du Visual Workflow Builder Frontend V2 :
|
||||
- Suppression des erreurs ResizeObserver
|
||||
- Correction du drag-and-drop
|
||||
- Stabilisation de la connexion API avec gestion du mode hors ligne
|
||||
- Ajout d'un indicateur de connexion dans l'interface
|
||||
- **NOUVEAU (09/01/2026)** : Correction de la boucle infinie de chargement
|
||||
|
||||
## Problèmes Résolus
|
||||
|
||||
### 1. Erreurs ResizeObserver (Tremblements d'interface)
|
||||
- **Cause** : Erreurs ResizeObserver loop limit exceeded provoquant des re-rendus constants
|
||||
- **Solution** : Suppression multi-couche des erreurs dans `index.html` et `suppressResizeObserverErrors.ts`
|
||||
|
||||
### 2. Drag-and-Drop Non Fonctionnel
|
||||
- **Cause** : Utilisation de la méthode `project()` inexistante dans ReactFlow v12
|
||||
- **Solution** : Remplacement par `getViewport()` avec calcul manuel de position
|
||||
|
||||
### 3. Page qui "Saute" et Erreurs JSON
|
||||
- **Cause** : Frontend contactant le backend non démarré, recevant du HTML au lieu de JSON
|
||||
- **Solution** :
|
||||
- Configuration du proxy dans `package.json`
|
||||
- Amélioration de l'apiClient avec gestion gracieuse du mode hors ligne
|
||||
- Ajout de l'endpoint `/api/health` au backend
|
||||
|
||||
### 4. Indicateur de Connexion API
|
||||
- **Nouveau composant** : `ConnectionIndicator` affichant l'état de connexion
|
||||
- **Hook dédié** : `useConnectionStatus` pour une gestion stable de l'état
|
||||
|
||||
### 5. Boucle Infinie de Chargement (CRITIQUE - 09/01/2026)
|
||||
- **Symptôme** : La page tournait en boucle infinie, les interactions étaient impossibles
|
||||
- **Cause** :
|
||||
1. L'état initial du client API était `'checking'` au lieu de `'offline'`
|
||||
2. `onConnectionStateChange()` notifiait immédiatement l'état actuel au montage
|
||||
3. Cette notification déclenchait un re-render, qui re-montait le hook, créant une boucle
|
||||
- **Solution** :
|
||||
- État initial `'offline'` dans `apiClient.ts` (pas de vérification automatique)
|
||||
- Suppression de la notification immédiate dans `onConnectionStateChange()`
|
||||
- Notifications asynchrones avec `setTimeout()` pour éviter les boucles
|
||||
- Constante `INITIAL_STATE` stable dans `useConnectionStatus.ts`
|
||||
- Utilisation de `useRef` pour les callbacks (évite les dépendances dans useCallback)
|
||||
|
||||
### 6. Re-renders Excessifs dans WorkflowManager (09/01/2026)
|
||||
- **Symptôme** : Le composant WorkflowManager se re-rendait en boucle
|
||||
- **Cause** : Le `useEffect` qui chargeait les workflows dépendait de `loadWorkflowList`, qui était recréé à chaque render car il dépendait de `workflowApi`
|
||||
- **Solution** :
|
||||
- Modification de la dépendance de `loadWorkflowList` pour ne dépendre que de `isOffline`
|
||||
- Ajout d'un `useRef` (`hasLoadedRef`) pour éviter les chargements multiples
|
||||
- Le chargement ne se fait qu'une seule fois au montage et quand on passe de offline à online
|
||||
|
||||
### 7. État Initial des Hooks de Connexion (09/01/2026)
|
||||
- **Symptôme** : Les hooks `useConnectionState` et `useConnectionStatus` pouvaient retourner 'checking' au montage
|
||||
- **Solution** :
|
||||
- État initial 'offline' pour les deux hooks (constante stable)
|
||||
- L'état est mis à jour via l'abonnement aux changements du client API
|
||||
- Évite les tentatives de connexion automatiques au montage
|
||||
- Utilisation de refs pour éviter les re-créations de callbacks
|
||||
|
||||
## Fichiers Modifiés
|
||||
|
||||
### Session initiale
|
||||
- `visual_workflow_builder/frontend/package.json` - Ajout du proxy
|
||||
- `visual_workflow_builder/frontend/src/services/apiClient.ts` - Gestion mode hors ligne
|
||||
- `visual_workflow_builder/frontend/src/hooks/useConnectionStatus.ts` - Nouveau hook
|
||||
- `visual_workflow_builder/frontend/src/components/ConnectionIndicator/index.tsx` - Nouveau composant
|
||||
- `visual_workflow_builder/frontend/src/components/Executor/index.tsx` - Correction imports
|
||||
- `visual_workflow_builder/frontend/src/App.tsx` - Intégration indicateur
|
||||
- `visual_workflow_builder/backend/app_lightweight.py` - Ajout endpoint /api/health
|
||||
|
||||
### Correction boucle infinie (09/01/2026)
|
||||
- `visual_workflow_builder/frontend/src/services/apiClient.ts` - État initial 'offline', notifications asynchrones
|
||||
- `visual_workflow_builder/frontend/src/hooks/useApiClient.ts` - État initial 'offline', suppression isInitialized
|
||||
- `visual_workflow_builder/frontend/src/hooks/useConnectionStatus.ts` - INITIAL_STATE constant, refs pour callbacks
|
||||
|
||||
## Tests de Validation
|
||||
|
||||
```bash
|
||||
# Exécuter les tests de stabilité
|
||||
python tests/integration/test_vwb_stability_simple.py
|
||||
|
||||
# Résultat attendu: 11 tests passés
|
||||
```
|
||||
|
||||
## Architecture de Gestion de Connexion
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ apiClient.ts │
|
||||
│ - Singleton avec initialisation paresseuse │
|
||||
│ - Gestion des abonnements aux changements d'état │
|
||||
│ - Vérifications de connexion périodiques (30s) │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ useConnectionState / useConnectionStatus │
|
||||
│ - État initial 'offline' (stable) │
|
||||
│ - Abonnement aux changements via callback │
|
||||
│ - Pas de polling actif au montage │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Composants (WorkflowManager, Executor, etc.) │
|
||||
│ - Utilisent les hooks pour l'état de connexion │
|
||||
│ - Gèrent gracieusement le mode hors ligne │
|
||||
│ - Pas de re-renders excessifs │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## État Actuel
|
||||
|
||||
- ✅ Frontend compile sans erreurs TypeScript
|
||||
- ✅ Backend Flask démarré sur port 5002
|
||||
- ✅ Proxy fonctionnel entre frontend (3000) et backend (5002)
|
||||
- ✅ Indicateur de connexion API intégré
|
||||
- ✅ Mode hors ligne géré gracieusement
|
||||
- ✅ Plus de boucle infinie de chargement
|
||||
- ✅ Interface stable et réactive
|
||||
|
||||
## Commandes de Démarrage
|
||||
|
||||
```bash
|
||||
# Backend VWB
|
||||
source venv_v3/bin/activate && python visual_workflow_builder/backend/app_lightweight.py
|
||||
|
||||
# Frontend VWB
|
||||
cd visual_workflow_builder/frontend && npm start
|
||||
```
|
||||
|
||||
## URLs
|
||||
|
||||
- Frontend : http://localhost:3000
|
||||
- Backend : http://localhost:5002
|
||||
- Health Check : http://localhost:5002/api/health
|
||||
Reference in New Issue
Block a user