# Guide de Diagnostic - Documentation Visual Workflow Builder

## 🔍 Problème Identifié

Quand vous cliquez sur l'onglet "Documentation" dans les propriétés d'un outil, rien ne s'affiche.

## ✅ État Actuel

Nos tests montrent que :
- ✅ Tous les fichiers de documentation sont présents et corrects
- ✅ L'application se charge correctement
- ✅ Le build frontend est fonctionnel
- ✅ Les données de documentation sont complètes (54KB de données)

## 🛠️ Étapes de Diagnostic

### Étape 1: Vérifier les Erreurs JavaScript

1. **Ouvrez l'application** : http://localhost:3000
2. **Ouvrez les outils de développement** : Appuyez sur `F12`
3. **Allez dans l'onglet Console**
4. **Ajoutez un outil** (ex: "Cliquer") sur le canvas
5. **Cliquez sur l'outil** pour ouvrir le panneau de propriétés
6. **Cliquez sur l'onglet "Documentation"**
7. **Vérifiez s'il y a des erreurs** dans la console

### Étape 2: Vérifier le Chargement des Ressources

1. Dans les outils de développement, **allez dans l'onglet Network**
2. **Rechargez la page** (F5)
3. **Vérifiez que tous les fichiers se chargent** sans erreur 404
4. **Cherchez particulièrement** :
   - `bundle.js` (doit être ~800KB)
   - Aucune erreur rouge dans la liste

### Étape 3: Vérifier l'État du Service de Documentation

1. Dans la console des outils de développement, **tapez** :
   ```javascript
   // Vérifier si le service est initialisé
   console.log('Service ready:', window.documentationService?.isReady?.());
   
   // Tester le chargement d'un outil
   console.log('Click tool:', window.documentationService?.getToolDocumentation?.('click'));
   ```

### Étape 4: Vérifier l'État des Composants React

1. **Installez React Developer Tools** (extension navigateur)
2. **Ouvrez l'onglet React** dans les outils de développement
3. **Naviguez vers** `PropertiesPanel` → `DocumentationTab`
4. **Vérifiez les props** :
   - `nodeType` doit être défini (ex: "click")
   - `selectedNodeId` doit être défini
   - `currentConfiguration` doit contenir les paramètres

## 🔧 Solutions Possibles

### Solution 1: Redémarrer l'Application

```bash
# Dans visual_workflow_builder/
./frontend/stop.sh
./frontend/start.sh
```

### Solution 2: Vider le Cache du Navigateur

1. **Ouvrez les outils de développement** (F12)
2. **Clic droit sur le bouton de rechargement**
3. **Sélectionnez "Vider le cache et recharger"**

### Solution 3: Forcer la Réinitialisation

1. **Dans la console du navigateur**, tapez :
   ```javascript
   // Forcer la réinitialisation du service
   if (window.documentationService) {
       window.documentationService.invalidateCache();
       window.documentationService.preloadDocumentation();
   }
   ```

### Solution 4: Vérifier les Logs du Frontend

```bash
# Vérifier les logs du serveur frontend
tail -f visual_workflow_builder/frontend/frontend.log
```

## 🐛 Erreurs Communes et Solutions

### Erreur: "documentationService is not defined"

**Cause** : Le service n'est pas correctement initialisé
**Solution** : 
1. Vérifiez que l'import est correct dans `App.tsx`
2. Redémarrez l'application

### Erreur: "Cannot read property 'getToolDocumentation' of undefined"

**Cause** : Le service n'est pas encore chargé
**Solution** : 
1. Attendez quelques secondes après le chargement
2. Vérifiez l'initialisation dans `App.tsx`

### Erreur: "Documentation not found for tool: xxx"

**Cause** : L'outil n'est pas documenté ou le nom ne correspond pas
**Solution** :
1. Vérifiez que l'outil existe dans `toolDocumentation.ts`
2. Vérifiez que le `nodeType` correspond exactement

### L'onglet Documentation est grisé/désactivé

**Cause** : Aucun outil sélectionné
**Solution** :
1. Assurez-vous qu'un outil est bien sélectionné sur le canvas
2. Vérifiez que le panneau de propriétés s'ouvre correctement

## 📋 Checklist de Vérification

- [ ] L'application se charge sans erreur
- [ ] Un outil est ajouté sur le canvas
- [ ] L'outil est sélectionné (surligné)
- [ ] Le panneau de propriétés s'ouvre
- [ ] L'onglet "Documentation" est visible
- [ ] Aucune erreur dans la console JavaScript
- [ ] Le service de documentation est initialisé

## 🆘 Si le Problème Persiste

1. **Capturez une capture d'écran** de la console avec les erreurs
2. **Notez le navigateur utilisé** (Chrome, Firefox, etc.)
3. **Vérifiez la version** : les outils de développement peuvent montrer des warnings sur les versions React/JavaScript

## 🎯 Test Rapide

Pour tester rapidement si la documentation fonctionne :

1. **Ouvrez** http://localhost:3000
2. **Glissez** l'outil "Cliquer" sur le canvas
3. **Cliquez** sur l'outil pour le sélectionner
4. **Vérifiez** que le panneau de propriétés s'ouvre à droite
5. **Cliquez** sur l'onglet "Documentation" (icône d'aide)
6. **Vous devriez voir** :
   - Vue d'ensemble de l'outil "Cliquer"
   - Sections dépliables (Guide rapide, Paramètres, etc.)
   - Informations détaillées sur l'utilisation

## 📞 Support

Si vous continuez à avoir des problèmes :
- Vérifiez que vous utilisez un navigateur moderne (Chrome 90+, Firefox 88+)
- Essayez en mode navigation privée
- Vérifiez qu'aucun bloqueur de publicité n'interfère

---

**Note** : La documentation est entièrement côté client, donc elle devrait fonctionner même si le backend n'est pas démarré.