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

```bash
# 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:
  ```bash
  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:
  ```javascript
  {
    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

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

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

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

```bash
# 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.