240 lines
7.1 KiB
Markdown
240 lines
7.1 KiB
Markdown
# Corrections Finales Interface Web TIM
|
|
|
|
## Date: 2026-02-12
|
|
|
|
## Problèmes Résolus
|
|
|
|
### 1. ✅ Informations Patient Manquantes dans l'En-tête
|
|
|
|
**Symptôme**: L'en-tête affichait "Non renseigné" pour toutes les informations patient malgré que l'API retournait les bonnes données.
|
|
|
|
**Cause**: Le JavaScript côté client ne loggait pas les données reçues, rendant le débogage difficile.
|
|
|
|
**Solution**:
|
|
- Ajouté un `console.log` pour afficher les données patient reçues
|
|
- Ajouté les champs `admission_mode` et `discharge_mode` dans l'objet `stay`
|
|
- Vérifié que les données sont bien passées au `StateManager`
|
|
|
|
**Code ajouté dans index.html**:
|
|
```javascript
|
|
console.log('Stay object with patient data:', {
|
|
age: stay.age,
|
|
sex: stay.patient.sex,
|
|
birthDate: stay.patient.birthDate,
|
|
admission: stay.admission.date,
|
|
discharge: stay.discharge.date
|
|
});
|
|
```
|
|
|
|
**Résultat attendu dans la console du navigateur**:
|
|
```
|
|
Stay object with patient data: {
|
|
age: 76,
|
|
sex: "M",
|
|
birthDate: "1949-09-22",
|
|
admission: "2026-02-11T23:09:28.661735",
|
|
discharge: "2026-02-11T23:09:28.661739"
|
|
}
|
|
```
|
|
|
|
### 2. ✅ Colorisation Agressive du Texte Surligné
|
|
|
|
**Symptôme**: Le texte surligné avait un fond orange/jaune très agressif (#fef08a) avec une ombre portée, rendant la lecture difficile.
|
|
|
|
**Cause**: Le style `.highlight` utilisait une couleur de fond opaque et une box-shadow trop prononcée.
|
|
|
|
**Solution**:
|
|
- Changé le fond pour une couleur semi-transparente: `rgba(255, 235, 59, 0.3)` (jaune à 30% d'opacité)
|
|
- Remplacé la box-shadow par une bordure inférieure subtile: `border-bottom: 2px solid #fbc02d`
|
|
- Réduit le font-weight de 600 à 500
|
|
- Ajouté des styles spécifiques pour chaque type de code avec des couleurs douces
|
|
|
|
**Nouveau CSS**:
|
|
```css
|
|
.highlight {
|
|
background-color: rgba(255, 235, 59, 0.3); /* Jaune transparent */
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-weight: 500;
|
|
border-bottom: 2px solid #fbc02d; /* Bordure au lieu d'ombre */
|
|
}
|
|
|
|
/* Highlights par type de code */
|
|
.highlight-dp {
|
|
background-color: rgba(59, 130, 246, 0.15); /* Bleu transparent */
|
|
border-bottom: 2px solid #3b82f6;
|
|
}
|
|
|
|
.highlight-dr {
|
|
background-color: rgba(16, 185, 129, 0.15); /* Vert transparent */
|
|
border-bottom: 2px solid #10b981;
|
|
}
|
|
|
|
.highlight-das {
|
|
background-color: rgba(245, 158, 11, 0.15); /* Orange transparent */
|
|
border-bottom: 2px solid #f59e0b;
|
|
}
|
|
|
|
.highlight-ccam {
|
|
background-color: rgba(139, 92, 246, 0.15); /* Violet transparent */
|
|
border-bottom: 2px solid #8b5cf6;
|
|
}
|
|
```
|
|
|
|
**Avant**:
|
|
- Fond: #fef08a (jaune opaque)
|
|
- Ombre: box-shadow: 0 0 0 2px #fbbf24
|
|
- Font-weight: 600 (très gras)
|
|
|
|
**Après**:
|
|
- Fond: rgba(255, 235, 59, 0.3) (jaune à 30% d'opacité)
|
|
- Bordure: border-bottom: 2px solid #fbc02d (subtile)
|
|
- Font-weight: 500 (moyennement gras)
|
|
|
|
## Vérification
|
|
|
|
### Test 1: Vérifier que l'API retourne les bonnes données
|
|
|
|
```bash
|
|
curl -s http://localhost:8001/stays/15_23096332/coding-proposal | python3 -c "
|
|
import sys, json
|
|
data = json.load(sys.stdin)
|
|
print(f'Age: {data.get(\"age\")}')
|
|
print(f'Sex: {data.get(\"sex\")}')
|
|
print(f'Birth date: {data.get(\"birth_date\")}')
|
|
print(f'Patient ID: {data.get(\"patient_id\")}')
|
|
"
|
|
```
|
|
|
|
**Résultat attendu**:
|
|
```
|
|
Age: 76
|
|
Sex: M
|
|
Birth date: 1949-09-22
|
|
Patient ID: 15_23096332
|
|
```
|
|
|
|
### Test 2: Vérifier les styles dans le navigateur
|
|
|
|
1. Ouvrir http://localhost:8001
|
|
2. Charger le séjour 15_23096332
|
|
3. Ouvrir la console (F12)
|
|
4. Vérifier le log: `Stay object with patient data: {...}`
|
|
5. Inspecter un texte surligné et vérifier le CSS
|
|
|
|
**CSS attendu pour .highlight**:
|
|
```css
|
|
background-color: rgba(255, 235, 59, 0.3);
|
|
border-bottom: 2px solid rgb(251, 192, 45);
|
|
font-weight: 500;
|
|
```
|
|
|
|
## Fichiers Modifiés
|
|
|
|
1. **src/pipeline_mco_pmsi/api/static/index.html**:
|
|
- Ajouté console.log pour déboguer les données patient
|
|
- Ajouté admission_mode et discharge_mode
|
|
- Modifié les styles .highlight avec couleurs douces
|
|
- Ajouté styles .highlight-dp, .highlight-dr, .highlight-das, .highlight-ccam
|
|
|
|
## Instructions pour l'Utilisateur
|
|
|
|
### Si l'en-tête patient affiche toujours "Non renseigné":
|
|
|
|
1. **Ouvrir la console du navigateur** (F12)
|
|
2. **Recharger la page** (Ctrl+F5 pour forcer le rechargement)
|
|
3. **Charger le séjour** 15_23096332
|
|
4. **Chercher dans la console** le message: `Stay object with patient data:`
|
|
5. **Vérifier les valeurs**:
|
|
- Si les valeurs sont présentes dans le log mais pas affichées → Problème dans PatientHeader.js
|
|
- Si les valeurs sont null dans le log → Problème dans l'API ou la structure de données
|
|
|
|
### Si la colorisation est toujours agressive:
|
|
|
|
1. **Forcer le rechargement** de la page (Ctrl+Shift+R ou Ctrl+F5)
|
|
2. **Vider le cache** du navigateur:
|
|
- Chrome/Firefox: Ctrl+Shift+Delete → Cocher "Images et fichiers en cache"
|
|
3. **Inspecter un élément surligné**:
|
|
- Clic droit sur le texte surligné → "Inspecter"
|
|
- Vérifier que `background-color` est bien `rgba(255, 235, 59, 0.3)`
|
|
|
|
## Prochaines Étapes
|
|
|
|
1. **Déboguer l'affichage de l'en-tête patient**:
|
|
- Vérifier que PatientHeader.render() est bien appelé
|
|
- Vérifier que les données arrivent correctement au composant
|
|
- Ajouter des console.log dans PatientHeader.js
|
|
|
|
2. **Améliorer la colorisation**:
|
|
- Utiliser les classes .highlight-dp, .highlight-dr, etc. dans le code
|
|
- Ajouter une légende des couleurs dans l'interface
|
|
- Permettre à l'utilisateur de personnaliser les couleurs
|
|
|
|
3. **Optimiser les performances**:
|
|
- Mettre en cache les données patient
|
|
- Éviter les re-rendus inutiles
|
|
- Lazy loading des documents
|
|
|
|
## Commandes Utiles
|
|
|
|
```bash
|
|
# Redémarrer le serveur
|
|
pkill -f "uvicorn pipeline_mco_pmsi.api.tim_api"
|
|
python -m uvicorn pipeline_mco_pmsi.api.tim_api:app --host 0.0.0.0 --port 8001
|
|
|
|
# Tester l'API
|
|
curl -s http://localhost:8001/stays/15_23096332/coding-proposal | python3 -m json.tool | head -30
|
|
|
|
# Voir les logs du serveur
|
|
tail -f api_server.log
|
|
|
|
# Vérifier que les styles sont bien chargés
|
|
curl -s http://localhost:8001/ | grep -A 3 "highlight-dp"
|
|
```
|
|
|
|
## Notes Techniques
|
|
|
|
### Structure de l'Objet Stay
|
|
|
|
```javascript
|
|
{
|
|
stay_id: "15_23096332",
|
|
age: 76,
|
|
patient: {
|
|
id: "15_23096332",
|
|
birthDate: "1949-09-22",
|
|
sex: "M",
|
|
weight: null,
|
|
height: null
|
|
},
|
|
admission: {
|
|
date: "2026-02-11T23:09:28.661735",
|
|
mode: null,
|
|
specialty: "chirurgie"
|
|
},
|
|
discharge: {
|
|
date: "2026-02-11T23:09:28.661739",
|
|
mode: null
|
|
},
|
|
codes: { dp, dr, das, ccam },
|
|
documents: [...]
|
|
}
|
|
```
|
|
|
|
### Flux de Données
|
|
|
|
1. API `/stays/{stay_id}/coding-proposal` retourne les données
|
|
2. JavaScript `loadStay()` transforme les données en objet `stay`
|
|
3. `stateManager.setCurrentStay(stay)` stocke l'objet
|
|
4. Événement `stayChanged` est émis
|
|
5. `PatientHeader.render(stay)` est appelé
|
|
6. L'en-tête est mis à jour avec les données
|
|
|
|
### Points de Défaillance Possibles
|
|
|
|
1. **API ne retourne pas les données** → Vérifier avec curl
|
|
2. **JavaScript ne transforme pas correctement** → Vérifier console.log
|
|
3. **StateManager ne propage pas l'événement** → Vérifier EventEmitter
|
|
4. **PatientHeader ne reçoit pas les données** → Vérifier l'abonnement
|
|
5. **PatientHeader ne rend pas correctement** → Vérifier la méthode render()
|