Initial commit

omop/INTERFACE_FEATURES.md

@@ -0,0 +1,155 @@
+# Fonctionnalités de l'Interface Web OMOP
+
+## ✅ État Actuel
+
+L'interface web est **entièrement fonctionnelle** et connectée à l'API FastAPI.
+
+### 🔗 Connexions API Actives
+
+Toutes les pages sont connectées aux endpoints de l'API via React Query :
+
+#### 📊 Dashboard
+- **Endpoint**: `/api/stats/summary` - Statistiques globales (rafraîchissement auto toutes les 5s)
+- **Endpoint**: `/api/stats/etl?limit=10` - Historique des 10 dernières exécutions ETL
+- **Affichage**:
+  - Nombre de patients OMOP
+  - Nombre de visites médicales
+  - Nombre de conditions/diagnostics
+  - Enregistrements en attente dans staging
+  - Statistiques des exécutions 24h (total, réussies, échouées)
+  - Tableau détaillé de l'historique ETL
+
+#### ⚙️ ETL Manager
+- **Endpoint**: `POST /api/etl/run` - Lancer un pipeline ETL
+- **Endpoint**: `GET /api/etl/jobs` - Liste des jobs en cours (rafraîchissement auto toutes les 2s)
+- **Fonctionnalités**:
+  - Formulaire de configuration du pipeline
+  - Sélection table source (staging) et cible (OMOP)
+  - Configuration batch size et nombre de workers
+  - Mode séquentiel optionnel
+  - Suivi en temps réel des jobs actifs avec progression
+
+#### 🗄️ Schema Manager
+- **Endpoint**: `POST /api/schema/create` - Créer les schémas
+- **Endpoint**: `GET /api/schema/validate` - Valider les schémas
+- **Endpoint**: `GET /api/schema/info` - Informations sur les schémas
+- **Fonctionnalités**:
+  - Création de tous les schémas ou individuellement (OMOP, Staging, Audit)
+  - Validation automatique de la structure
+  - Affichage du nombre de tables par schéma
+
+#### ✅ Validation
+- **Endpoint**: `POST /api/validation/run` - Lancer la validation
+- **Endpoint**: `GET /api/validation/unmapped-codes?limit=50` - Codes non mappés
+- **Fonctionnalités**:
+  - Lancement de la validation des données
+  - Liste des codes sources non mappés vers OMOP
+  - Fréquence d'apparition et dernière occurrence
+
+#### 📝 Logs
+- **Endpoint**: `GET /api/logs/?lines=X&level=Y` - Logs système (rafraîchissement auto toutes les 3s)
+- **Endpoint**: `GET /api/logs/errors?limit=50` - Erreurs de validation
+- **Fonctionnalités**:
+  - Filtrage par nombre de lignes (50, 100, 200, 500)
+  - Filtrage par niveau (INFO, WARNING, ERROR, CRITICAL)
+  - Affichage console-style des logs
+  - Tableau des erreurs de validation avec détails
+
+## 🎯 Tooltips en Français
+
+Tous les éléments de l'interface disposent maintenant d'infobulles explicatives en français :
+
+### Dashboard
+- ℹ️ Vue d'ensemble en temps réel du pipeline OMOP CDM
+- ℹ️ Explication de chaque statistique (patients, visites, conditions, en attente)
+- ℹ️ Détails sur les exécutions récentes (24h)
+- ℹ️ Historique ETL avec statuts et durées
+
+### ETL Manager
+- ℹ️ Explication du concept ETL (Extract-Transform-Load)
+- ℹ️ Table source : données brutes du staging
+- ℹ️ Table cible : tables OMOP standardisées
+- ℹ️ Taille de batch : impact sur performances et mémoire
+- ℹ️ Nombre de workers : parallélisation et charge CPU
+- ℹ️ Mode séquentiel : pour débogage ou petits volumes
+- ℹ️ Jobs en cours : suivi temps réel avec rafraîchissement auto
+
+### Schema Manager
+- ℹ️ Gestion des 3 schémas (OMOP, Staging, Audit)
+- ℹ️ Création individuelle ou complète
+- ℹ️ Validation automatique de la structure OMOP CDM 5.4
+
+### Validation
+- ℹ️ Vérification qualité et conformité OMOP
+- ℹ️ Processus de validation (intégrité, valeurs, vocabulaires)
+- ℹ️ Codes non mappés : nécessitent attention pour qualité
+
+### Logs
+- ℹ️ Consultation logs et erreurs système
+- ℹ️ Filtres par lignes et niveau de sévérité
+- ℹ️ Rafraîchissement automatique toutes les 3s
+- ℹ️ Erreurs de validation détaillées
+
+## 🚀 Accès à l'Interface
+
+- **Frontend**: http://localhost:4400
+- **API**: http://localhost:8001
+- **Documentation API**: http://localhost:8001/docs
+
+## 🔧 Technologies Utilisées
+
+### Frontend
+- **React** 18 avec Vite
+- **React Router** pour la navigation
+- **React Query** (@tanstack/query) pour la gestion des appels API
+- **Axios** pour les requêtes HTTP
+- **Recharts** pour les graphiques
+- **CSS** personnalisé avec design moderne
+
+### Backend
+- **FastAPI** avec Uvicorn
+- **SQLAlchemy** pour l'ORM
+- **PostgreSQL** 16.11
+- **Pydantic** pour la validation
+
+## 📦 Composants Réutilisables
+
+### Tooltip.jsx
+Composant d'infobulle générique avec :
+- Affichage au survol
+- Style moderne avec ombre
+- Flèche de pointage
+- Support texte multiligne
+
+### HelpIcon.jsx
+Icône d'aide (?) avec tooltip intégré :
+- Design circulaire bleu
+- Curseur "help"
+- Intégration facile dans n'importe quel élément
+
+## 🎨 Design
+
+- Interface moderne et épurée
+- Navigation latérale avec icônes
+- Cartes pour regrouper les informations
+- Badges colorés pour les statuts
+- Grille responsive pour les statistiques
+- Tableaux stylisés pour les données
+- Console-style pour les logs
+
+## ✨ Fonctionnalités Avancées
+
+1. **Rafraîchissement automatique** : Dashboard, ETL jobs et logs se mettent à jour automatiquement
+2. **Gestion d'état optimisée** : React Query avec cache et invalidation intelligente
+3. **Feedback utilisateur** : Alertes pour succès/erreurs, états de chargement
+4. **Validation formulaires** : Contrôles côté client avant envoi
+5. **Accessibilité** : Tooltips informatifs pour tous les utilisateurs
+6. **Internationalisation** : Interface entièrement en français
+
+## 📝 Notes pour les Collaborateurs
+
+L'interface est conçue pour être **intuitive et auto-explicative** grâce aux tooltips en français. Chaque élément dispose d'une explication contextuelle accessible au survol de l'icône (?).
+
+Les données affichées sont **en temps réel** et se rafraîchissent automatiquement sans nécessiter de rechargement de page.
+
+Toutes les actions (création schémas, lancement ETL, validation) fournissent un **feedback immédiat** via des alertes et des mises à jour visuelles.