aivanov_database/omop/INTERFACE_FEATURES.md

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