rpa_vision_v3/visual_workflow_builder/GUIDE_DIAGNOSTIC_DOCUMENTATION.md

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 :

   // 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

# 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 :

   // Forcer la réinitialisation du service
   if (window.documentationService) {
       window.documentationService.invalidateCache();
       window.documentationService.preloadDocumentation();
   }
   

Solution 4: Vérifier les Logs du Frontend

# 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é.