aivanov_CIM/DIAGNOSTIC_INTERFACE_WEB.md

Diagnostic Interface Web TIM - Problème d'Affichage

Date: 2026-02-12

Problème Rapporté

L'utilisateur rapporte que "Rien ne s'affiche, l'interface ne fonctionne toujours pas" malgré que l'API fonctionne correctement.

Diagnostic Effectué

1. ✅ Serveur API Fonctionnel

# Test de l'API
curl http://localhost:8001/stays/15_23096332/coding-proposal

# Résultat: ✅ L'API retourne correctement les données JSON
# - DP: F05.0 (Délirium)
# - DR: K80 (Cholélithiase)
# - 25 DAS
# - 29 CCAM

2. ✅ Architecture JavaScript Modulaire

L'interface utilise une architecture modulaire avec:

• EventEmitter - Système d'événements
• StateManager - Gestion d'état centralisée
• CodesPanel - Affichage des codes
• PatientHeader - En-tête patient
• DocumentsPanel - Affichage des documents
• DetailsPanel - Détails des codes

3. 🔍 Problèmes Identifiés

A. Serveur non démarré automatiquement

• L'utilisateur doit démarrer manuellement le serveur avec:

  python -m uvicorn pipeline_mco_pmsi.api.tim_api:app --host 0.0.0.0 --port 8001
  

B. Possible erreur JavaScript dans la console

• Les composants s'abonnent aux événements du StateManager
• Si une erreur se produit lors de l'initialisation, rien ne s'affiche
• L'utilisateur doit ouvrir la console du navigateur (F12) pour voir les erreurs

C. Structure de données attendue vs reçue

• Le code loadStay() crée un objet stay avec la structure:

  {
    stay_id: "15_23096332",
    age: null,
    patient: { id, birthDate, sex, weight, height },
    admission: { date, mode, specialty },
    discharge: { date, mode },
    codes: { dp, dr, das, ccam },
    documents: []
  }
  

• Cette structure est correcte et devrait fonctionner

Solutions Proposées

Solution 1: Démarrer le serveur API

# Méthode 1: Démarrage manuel
python -m uvicorn pipeline_mco_pmsi.api.tim_api:app --host 0.0.0.0 --port 8001

# Méthode 2: Utiliser le script fourni
./start_api_server.sh

Solution 2: Vérifier la console du navigateur

1. Ouvrir l'interface: http://localhost:8001
2. Appuyer sur F12 pour ouvrir les outils de développement
3. Aller dans l'onglet "Console"
4. Chercher les erreurs JavaScript (en rouge)
5. Chercher les logs de diagnostic:
   • "Application initialized, filters reset"
   • "CodesPanel.render() called with stay:"
   • "Stay codes:"

Solution 3: Tester avec l'interface de diagnostic

Ouvrir le fichier test_interface.html dans un navigateur pour vérifier que l'API fonctionne:

# Ouvrir dans le navigateur
firefox test_interface.html
# ou
google-chrome test_interface.html

Solution 4: Vérifier les filtres du StateManager

Le StateManager peut avoir des filtres actifs qui cachent tous les codes. Vérifier dans la console:

// Dans la console du navigateur
console.log(stateManager.getFilters());
// Devrait afficher: { codeType: [], confidenceLevel: [], withoutEvidence: false }

// Si les filtres sont incorrects, les réinitialiser:
stateManager.setFilters({
  codeType: [],
  confidenceLevel: [],
  withoutEvidence: false
});

Prochaines Étapes

1. Démarrer le serveur API (si ce n'est pas déjà fait)
2. Ouvrir l'interface dans le navigateur: http://localhost:8001
3. Entrer l'ID du séjour: 15_23096332
4. Cliquer sur "Charger le séjour"
5. Ouvrir la console (F12) pour voir les logs et erreurs
6. Rapporter les erreurs si l'interface ne fonctionne toujours pas

Commandes Utiles

# Vérifier si le serveur est démarré
curl http://localhost:8001/

# Tester l'endpoint de codage
curl http://localhost:8001/stays/15_23096332/coding-proposal | python3 -m json.tool

# Voir les logs du serveur
tail -f api_server.log

# Arrêter le serveur
pkill -f "uvicorn pipeline_mco_pmsi.api.tim_api"

# Redémarrer le serveur
python -m uvicorn pipeline_mco_pmsi.api.tim_api:app --host 0.0.0.0 --port 8001 --reload

Notes Techniques

Architecture de l'Interface

index.html
├── EventEmitter (base pour tous les composants)
├── StateManager (gestion d'état centralisée)
│   ├── currentStay
│   ├── selectedCode
│   ├── activeDocument
│   └── filters
├── PatientHeader (s'abonne à 'stayChanged')
├── CodesPanel (s'abonne à 'stayChanged', 'filtersChanged')
├── DocumentsPanel (s'abonne à 'stayChanged', 'documentChanged')
└── DetailsPanel (s'abonne à 'codeSelected')

Flux de Données

1. Utilisateur entre l'ID du séjour et clique sur "Charger"
2. loadStay() appelle l'API /stays/{stay_id}/coding-proposal
3. Les données sont transformées en objet stay
4. stateManager.setCurrentStay(stay) est appelé
5. L'événement stayChanged est émis
6. Tous les composants abonnés se mettent à jour:
   • PatientHeader.render(stay) affiche les infos patient
   • CodesPanel.render(stay) affiche les codes
   • DocumentsPanel charge les documents
7. L'interface passe de l'écran de recherche au layout 3 panneaux

Points de Défaillance Possibles

1. Erreur réseau: L'API ne répond pas (serveur non démarré)
2. Erreur CORS: Le navigateur bloque les requêtes cross-origin
3. Erreur JavaScript: Une exception empêche l'initialisation des composants
4. Filtres actifs: Les filtres du StateManager cachent tous les codes
5. Structure de données: Les données de l'API ne correspondent pas à la structure attendue

Conclusion

Le problème le plus probable est que le serveur API n'est pas démarré. Une fois démarré, l'interface devrait fonctionner correctement. Si ce n'est pas le cas, il faut vérifier la console du navigateur pour identifier l'erreur JavaScript spécifique.