# Spécification : Amélioration de l'interface d'affichage des résultats TIM

## 1. Vue d'ensemble

L'interface actuelle affiche les résultats d'analyse de manière très basique et textuelle. Cette spécification vise à transformer cette interface en un outil professionnel et ergonomique pour les codeurs médicaux, avec une visualisation claire des codes, des preuves et des documents sources.

## 2. Analyse de l'interface actuelle (basée sur l'image fournie)

### 2.1 Ce qui existe
- Affichage du type de document et temps de traitement (10.8s)
- Informations démographiques du séjour (sexe M, âge 58 ans, dates, poids 72kg, taille 178cm, IMC 22.724)
- Alertes de codage (CIM-10 DAS M62.64 absent du dictionnaire)
- Diagnostic principal K80.0 avec libellé et badge "Sévère"

### 2.2 Problèmes identifiés
- **Présentation textuelle** : Tout est affiché en texte brut, peu visuel
- **Pas de vue d'ensemble** : Impossible de voir tous les codes (DP, DR, DAS, CCAM) en un coup d'œil
- **Pas de preuves visibles** : Aucun lien vers les documents sources qui justifient les codes
- **Navigation inexistante** : Impossible de naviguer entre codes et documents
- **Pas de contexte clinique** : Les faits cliniques extraits ne sont pas affichés
- **Alertes peu visibles** : Les alertes de codage sont noyées dans le texte
- **Pas d'actions possibles** : Pas de boutons pour corriger, valider ou commenter

## 3. Exigences fonctionnelles

### 3.1 Vue d'ensemble du séjour

**User Story** : En tant que codeur médical, je veux voir toutes les informations essentielles du séjour en un coup d'œil pour comprendre rapidement le contexte.

**Critères d'acceptation :**
- Afficher une carte récapitulative en haut de page
- Inclure : identifiant séjour, âge, sexe, IMC, dates entrée/sortie, durée, mode d'entrée, spécialité, temps de traitement
- Utiliser des icônes pour rendre l'information plus visuelle
- Afficher un indicateur de complétude du codage
- Mettre en évidence les alertes critiques avec un badge rouge

### 3.2 Affichage structuré des codes proposés

**User Story** : En tant que codeur médical, je veux voir tous les codes proposés (DP, DR, DAS, CCAM) organisés de manière claire pour valider rapidement le codage.

**Critères d'acceptation :**
- Créer 4 sections distinctes : DP, DR, DAS, CCAM
- Pour chaque code afficher : code, libellé, badge de confiance coloré, nombre de preuves, badge de sévérité, boutons d'action
- Utiliser des cartes visuelles avec bordure colorée selon le type
- Permettre de replier/déplier chaque section
- Afficher les alertes de codage directement sur les codes concernés


### 3.3 Visualisation des preuves et documents sources

**User Story** : En tant que codeur médical, je veux voir les preuves qui justifient chaque code pour valider la pertinence du codage.

**Critères d'acceptation :**
- Créer un panneau "Preuves" qui s'affiche au clic sur "Voir preuves"
- Pour chaque preuve afficher : type de document source, extrait de texte pertinent (±100 caractères), position, bouton "Voir dans le document"
- Mettre en évidence le texte extrait avec un fond jaune
- Permettre de naviguer entre les preuves avec des flèches ←/→
- Afficher un score de qualité de la preuve (directe, indirecte, inférée)

### 3.4 Affichage des documents sources

**User Story** : En tant que codeur médical, je veux consulter les documents sources complets pour vérifier le contexte des preuves.

**Critères d'acceptation :**
- Créer un panneau "Documents" qui liste tous les documents du séjour
- Pour chaque document afficher : type, date de création, auteur, badge avec nombre de preuves extraites
- Permettre d'ouvrir un document dans un panneau dédié
- Dans le document ouvert : mettre en évidence les zones citées comme preuves avec code couleur par type (DP=bleu, DR=vert, DAS=orange, CCAM=violet)
- Afficher des tooltips au survol des zones mises en évidence
- Permettre de faire défiler automatiquement vers une preuve spécifique

### 3.5 Affichage des faits cliniques extraits

**User Story** : En tant que codeur médical, je veux voir les faits cliniques extraits par le système pour comprendre son raisonnement.

**Critères d'acceptation :**
- Créer un endpoint API `/stays/{stay_id}/clinical-facts` qui retourne les faits cliniques extraits organisés par catégorie avec preuves et scores de confiance
- Créer une section "Faits cliniques" dans l'interface
- Afficher les faits organisés par catégorie avec : texte du fait, catégorie (avec icône), score de confiance, lien vers la preuve
- Permettre de filtrer par catégorie
- Mettre en évidence les faits utilisés pour le codage

### 3.6 Gestion des alertes de codage

**User Story** : En tant que codeur médical, je veux voir clairement les alertes de codage pour corriger les problèmes rapidement.

**Critères d'acceptation :**
- Créer une section "Alertes" en haut de page
- Pour chaque alerte afficher : type d'alerte, code concerné, description du problème, suggestion de correction, bouton "Corriger maintenant"
- Utiliser un code couleur : Rouge (alerte critique), Orange (avertissement), Jaune (information)
- Afficher un compteur d'alertes dans l'en-tête
- Permettre de masquer les alertes résolues

### 3.7 Actions de correction et validation

**User Story** : En tant que codeur médical, je veux pouvoir corriger, commenter et valider les codes directement depuis l'interface.

**Critères d'acceptation :**
- Pour chaque code, afficher des boutons d'action : "Corriger", "Commenter", "Valider"
- Le formulaire de correction doit permettre de : saisir un nouveau code, saisir un nouveau libellé (auto-complété), ajouter un commentaire, enregistrer avec horodatage
- Afficher les corrections précédentes avec : code original → code corrigé, utilisateur et date, commentaire
- Ajouter des boutons de validation globale : "Valider le dossier" (vert), "Rejeter le dossier" (rouge), "Marquer à revoir" (orange)

### 3.8 Vue multi-panneaux (layout amélioré)

**User Story** : En tant que codeur médical, je veux voir simultanément les codes, les preuves et les documents pour travailler efficacement.

**Critères d'acceptation :**
- Créer une disposition en 3 colonnes : gauche (30% - codes et alertes), centrale (40% - documents sources), droite (30% - détails code, preuves, faits cliniques)
- Rendre les colonnes redimensionnables avec des séparateurs draggables
- Permettre de masquer/afficher chaque colonne
- Sauvegarder la disposition dans le localStorage
- Sur mobile/tablette, passer en mode onglets

### 3.9 Recherche et filtres

**User Story** : En tant que codeur médical, je veux pouvoir rechercher et filtrer les informations pour trouver rapidement ce que je cherche.

**Critères d'acceptation :**
- Ajouter une barre de recherche globale en haut de page
- Permettre de rechercher dans : codes (code ou libellé), documents sources, faits cliniques
- Mettre en évidence les résultats de recherche
- Ajouter des filtres pour : type de code, niveau de confiance, présence d'alertes, type de document
- Afficher le nombre de résultats trouvés

### 3.10 Export et impression

**User Story** : En tant que codeur médical, je veux pouvoir exporter et imprimer les résultats pour archivage ou partage.

**Critères d'acceptation :**
- Ajouter un bouton "Exporter" avec options : PDF (vue complète), JSON (données brutes), Excel (tableau des codes)
- Optimiser la mise en page pour l'impression : masquer éléments interactifs, ajuster couleurs pour N&B, ajouter sauts de page
- Inclure dans l'export : en-tête avec infos séjour, tous les codes avec preuves, alertes, corrections, pied de page avec date et utilisateur

## 4. Exigences non fonctionnelles

### 4.1 Performance
- Temps de chargement initial < 2 secondes
- Navigation entre codes instantanée (<100ms)
- Rendu fluide même avec 50+ documents
- Lazy loading des documents (chargement à la demande)

### 4.2 Ergonomie
- Interface intuitive, pas de formation nécessaire
- Raccourcis clavier pour les actions fréquentes
- Feedback visuel immédiat sur toutes les actions
- Messages d'erreur clairs et constructifs

### 4.3 Accessibilité
- Navigation au clavier complète
- Support des lecteurs d'écran (ARIA labels)
- Contraste suffisant (WCAG AA minimum)
- Taille de police ajustable

### 4.4 Compatibilité
- Support des navigateurs modernes (Chrome, Firefox, Safari, Edge)
- Interface responsive (desktop, tablette, mobile)
- Pas de dépendances externes lourdes

### 4.5 Maintenabilité
- Code JavaScript modulaire et documenté
- Séparation claire HTML/CSS/JS
- Composants réutilisables
- Tests unitaires pour les fonctions critiques

## 5. Contraintes techniques

### 5.1 Technologies imposées
- HTML5, CSS3, JavaScript vanilla (pas de framework lourd type React/Vue)
- API REST FastAPI existante
- Base de données SQLite existante
- Pas de modification du pipeline de traitement

### 5.2 Compatibilité avec l'existant
- Réutiliser les endpoints API existants autant que possible
- Ne pas casser les fonctionnalités actuelles
- Maintenir la compatibilité avec les données existantes
- Respecter le schéma de base de données actuel

### 5.3 Sécurité
- Pas d'exposition de données sensibles dans le HTML
- Validation côté serveur de toutes les entrées
- Respect des règles RGPD pour les données médicales
- Chiffrement des exports si nécessaire

## 6. Hors périmètre

Les éléments suivants ne sont PAS inclus dans cette spécification :
- Modification du pipeline de traitement (segmentation, extraction, codage)
- Ajout de nouveaux algorithmes de codage
- Modification du schéma de base de données
- Authentification et gestion des utilisateurs
- Intégration avec des systèmes externes (DPI, T2A, etc.)
- Traitement de nouveaux types de documents

## 7. Critères de succès

Le projet sera considéré comme réussi si :
- Tous les critères d'acceptation sont satisfaits
- L'interface permet de visualiser un séjour complet en moins de 30 secondes
- Le temps de validation d'un code est réduit de 50% par rapport à l'interface actuelle
- Les codeurs peuvent naviguer entre codes et preuves sans ouvrir de modals
- Aucune régression sur les fonctionnalités existantes
- Les tests d'interface passent à 100%