aivanov_CIM/SOLUTION_INTERFACE_WEB.md

# Solution: Interface Web TIM - Problème d'Affichage

## Date: 2026-02-12

## ✅ Diagnostic Complet Effectué

### Tests Réussis

1. ✅ **Serveur API démarré** sur http://localhost:8001
2. ✅ **Endpoint de codage fonctionnel** - Retourne les données correctement
3. ✅ **Documents accessibles** - 3 documents disponibles pour le séjour 15_23096332
4. ✅ **Structure des données correcte**:
   - DP: F05.0 (Délirium)
   - DR: K80 (Cholélithiase)
   - 25 DAS
   - 29 CCAM

## 🎯 Solution: Ouvrir l'Interface et Diagnostiquer

### Étape 1: Accéder à l'Interface

Ouvrez votre navigateur et allez sur:
```
http://localhost:8001
```

### Étape 2: Charger le Séjour

1. Dans le champ de recherche, entrez: `15_23096332`
2. Cliquez sur "Charger le séjour"

### Étape 3: Diagnostiquer si Rien ne s'Affiche

Si l'interface affiche "Chargement des données..." indéfiniment:

1. **Ouvrir la Console du Navigateur**:
   - Appuyez sur `F12` (ou `Ctrl+Shift+I` sur Linux/Windows, `Cmd+Option+I` sur Mac)
   - Allez dans l'onglet "Console"

2. **Chercher les Erreurs JavaScript** (texte en rouge):
   - Erreurs de syntaxe
   - Erreurs de réseau (CORS, 404, etc.)
   - Erreurs de composants

3. **Vérifier les Logs de Diagnostic**:
   ```javascript
   // Vous devriez voir ces messages:
   "Application initialized, filters reset"
   "CodesPanel.render() called with stay: ..."
   "Stay codes: ..."
   ```

4. **Vérifier les Filtres** (dans la console):
   ```javascript
   // Taper dans la console:
   stateManager.getFilters()
   
   // Devrait afficher:
   { codeType: [], confidenceLevel: [], withoutEvidence: false }
   
   // Si les filtres sont incorrects, les réinitialiser:
   stateManager.setFilters({
     codeType: [],
     confidenceLevel: [],
     withoutEvidence: false
   });
   ```

## 🔧 Problèmes Courants et Solutions

### Problème 1: "Failed to fetch" ou "Network Error"

**Cause**: Le serveur API n'est pas accessible

**Solution**:
```bash
# Vérifier que le serveur est démarré
curl http://localhost:8001/

# Si pas de réponse, démarrer le serveur:
python -m uvicorn pipeline_mco_pmsi.api.tim_api:app --host 0.0.0.0 --port 8001
```

### Problème 2: "CORS policy" error

**Cause**: Le navigateur bloque les requêtes cross-origin

**Solution**: Le serveur API a déjà configuré CORS pour accepter toutes les origines. Si le problème persiste, vérifier que vous accédez bien à `http://localhost:8001` et non à `file:///...`

### Problème 3: "Cannot read property 'codes' of undefined"

**Cause**: La structure des données ne correspond pas à ce que le code attend

**Solution**: Vérifier dans la console que `stay.codes` existe:
```javascript
// Dans la console après avoir chargé le séjour:
stateManager.getCurrentStay()
// Devrait afficher un objet avec stay.codes.dp, stay.codes.dr, etc.
```

### Problème 4: Tous les filtres sont actifs

**Cause**: Le StateManager a des filtres actifs qui cachent tous les codes

**Solution**:
```javascript
// Dans la console:
stateManager.setFilters({
  codeType: [],
  confidenceLevel: [],
  withoutEvidence: false
});
```

## 📋 Checklist de Vérification

- [ ] Le serveur API est démarré (test avec `curl http://localhost:8001/`)
- [ ] L'interface est accessible dans le navigateur (`http://localhost:8001`)
- [ ] La console du navigateur est ouverte (F12)
- [ ] Aucune erreur JavaScript n'apparaît en rouge dans la console
- [ ] Les logs de diagnostic apparaissent dans la console
- [ ] Les filtres du StateManager sont réinitialisés

## 🚀 Si Tout Fonctionne

Vous devriez voir:

1. **En-tête Patient** (en haut):
   - Informations patient (ID anonymisé, âge, sexe, IMC)
   - Informations séjour (dates, durée, spécialité)

2. **Panneau Codes** (gauche):
   - Indicateur de complétude
   - DP: F05.0 - Délirium...
   - DR: K80 - Cholélithiase
   - 25 DAS
   - 29 CCAM

3. **Panneau Documents** (centre):
   - 3 documents disponibles
   - Contenu des documents

4. **Panneau Détails** (droite):
   - "Sélectionnez un code pour voir ses détails"

## 📞 Si le Problème Persiste

1. **Copier les erreurs de la console** et les partager
2. **Vérifier les logs du serveur**:
   ```bash
   tail -f api_server.log
   ```
3. **Tester avec l'interface de diagnostic**:
   ```bash
   firefox test_interface.html
   ```

## 🛠️ Scripts Utiles Créés

1. **start_api_server.sh** - Démarre le serveur API
2. **test_interface_api.py** - Teste que l'API fonctionne
3. **test_interface.html** - Interface de diagnostic simple
4. **DIAGNOSTIC_INTERFACE_WEB.md** - Documentation complète du diagnostic

## 📝 Commandes Rapides

```bash
# Démarrer le serveur
python -m uvicorn pipeline_mco_pmsi.api.tim_api:app --host 0.0.0.0 --port 8001

# Tester l'API
python test_interface_api.py

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

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

## ✅ Conclusion

L'API fonctionne parfaitement et retourne les bonnes données. Si l'interface ne s'affiche pas, c'est un problème JavaScript côté client. La console du navigateur (F12) vous donnera l'erreur exacte qui empêche l'affichage.

**Prochaine étape**: Ouvrir http://localhost:8001 dans votre navigateur et vérifier la console pour identifier l'erreur spécifique.