368 lines
24 KiB
Markdown
368 lines
24 KiB
Markdown
# 🖼️ Aperçu de l'Interface Web OMOP Pipeline
|
|
|
|
## Navigation (Sidebar)
|
|
|
|
```
|
|
┌─────────────────────────┐
|
|
│ OMOP Pipeline │
|
|
│─────────────────────────│
|
|
│ 📊 Dashboard │
|
|
│ ⚙️ ETL Manager │
|
|
│ 🗄️ Schema │
|
|
│ ✅ Validation │
|
|
│ 📝 Logs │
|
|
└─────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 Dashboard
|
|
|
|
```
|
|
╔═══════════════════════════════════════════════════════════════╗
|
|
║ Dashboard OMOP Pipeline ║
|
|
║ Vue d'ensemble du système ETL ║
|
|
╠═══════════════════════════════════════════════════════════════╣
|
|
║ ║
|
|
║ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ║
|
|
║ │ PATIENTS │ │ VISITES │ │ CONDITIONS │ ║
|
|
║ │ OMOP │ │ │ │ │ ║
|
|
║ │ │ │ │ │ │ ║
|
|
║ │ 100 │ │ 194 │ │ 222 │ ║
|
|
║ └──────────────┘ └──────────────┘ └──────────────┘ ║
|
|
║ ║
|
|
║ ┌──────────────┐ ║
|
|
║ │ EN ATTENTE │ ║
|
|
║ │ │ ║
|
|
║ │ │ ║
|
|
║ │ 662 │ ║
|
|
║ └──────────────┘ ║
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Exécutions récentes (24h) │ ║
|
|
║ ├─────────────────────────────────────────────────────────┤ ║
|
|
║ │ Total: 5 Réussies: 4 Échouées: 1 │ ║
|
|
║ └─────────────────────────────────────────────────────────┘ ║
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Historique ETL │ ║
|
|
║ ├──────────┬──────────┬─────────┬──────────┬──────────────┤ ║
|
|
║ │ Pipeline │ Début │ Statut │ Records │ Durée (s) │ ║
|
|
║ ├──────────┼──────────┼─────────┼──────────┼──────────────┤ ║
|
|
║ │ person │ 14:30:22 │ ✓ OK │ 100 │ 2.34 │ ║
|
|
║ │ visits │ 14:25:10 │ ✓ OK │ 194 │ 3.12 │ ║
|
|
║ │ drugs │ 14:20:05 │ ✗ FAIL │ 0 │ 0.45 │ ║
|
|
║ └──────────┴──────────┴─────────┴──────────┴──────────────┘ ║
|
|
╚═══════════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
---
|
|
|
|
## ⚙️ ETL Manager
|
|
|
|
```
|
|
╔═══════════════════════════════════════════════════════════════╗
|
|
║ Gestionnaire ETL ║
|
|
║ Lancer et gérer les pipelines ETL ║
|
|
╠═══════════════════════════════════════════════════════════════╣
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Nouveau Pipeline ETL │ ║
|
|
║ ├─────────────────────────────────────────────────────────┤ ║
|
|
║ │ │ ║
|
|
║ │ Table source │ ║
|
|
║ │ [staging.raw_patients ▼] │ ║
|
|
║ │ │ ║
|
|
║ │ Table cible │ ║
|
|
║ │ [person ▼] │ ║
|
|
║ │ │ ║
|
|
║ │ Taille de batch │ ║
|
|
║ │ [1000] │ ║
|
|
║ │ │ ║
|
|
║ │ Nombre de workers │ ║
|
|
║ │ [8] │ ║
|
|
║ │ │ ║
|
|
║ │ ☐ Mode séquentiel (pas de parallélisation) │ ║
|
|
║ │ │ ║
|
|
║ │ [ 🚀 Lancer le pipeline ] │ ║
|
|
║ └─────────────────────────────────────────────────────────┘ ║
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Jobs en cours │ ║
|
|
║ ├──────────────┬─────────┬────────────┬──────────────────┤ ║
|
|
║ │ Job ID │ Statut │ Progression│ Détails │ ║
|
|
║ ├──────────────┼─────────┼────────────┼──────────────────┤ ║
|
|
║ │ etl_person_1 │ running │ 45% │ 450/1000 records │ ║
|
|
║ │ etl_visits_2 │ queued │ 0% │ En attente │ ║
|
|
║ └──────────────┴─────────┴────────────┴──────────────────┘ ║
|
|
╚═══════════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
---
|
|
|
|
## 🗄️ Schema Manager
|
|
|
|
```
|
|
╔═══════════════════════════════════════════════════════════════╗
|
|
║ Gestion des Schémas ║
|
|
║ Créer et valider les schémas de base de données ║
|
|
╠═══════════════════════════════════════════════════════════════╣
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Créer les schémas │ ║
|
|
║ ├─────────────────────────────────────────────────────────┤ ║
|
|
║ │ │ ║
|
|
║ │ [Créer tous les schémas] [Schéma OMOP] │ ║
|
|
║ │ [Schéma Staging] [Schéma Audit] │ ║
|
|
║ │ │ ║
|
|
║ └─────────────────────────────────────────────────────────┘ ║
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ État des schémas │ ║
|
|
║ ├─────────────────────────────────────────────────────────┤ ║
|
|
║ │ │ ║
|
|
║ │ ✓ Schema is valid │ ║
|
|
║ │ │ ║
|
|
║ │ ┌──────────┬────────────────┐ │ ║
|
|
║ │ │ Schéma │ Nombre tables │ │ ║
|
|
║ │ ├──────────┼────────────────┤ │ ║
|
|
║ │ │ omop │ 32 │ │ ║
|
|
║ │ │ staging │ 12 │ │ ║
|
|
║ │ │ audit │ 9 │ │ ║
|
|
║ │ └──────────┴────────────────┘ │ ║
|
|
║ │ │ ║
|
|
║ └─────────────────────────────────────────────────────────┘ ║
|
|
╚═══════════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Validation
|
|
|
|
```
|
|
╔═══════════════════════════════════════════════════════════════╗
|
|
║ Validation des données ║
|
|
║ Vérifier la qualité et la conformité OMOP ║
|
|
╠═══════════════════════════════════════════════════════════════╣
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Actions │ ║
|
|
║ ├─────────────────────────────────────────────────────────┤ ║
|
|
║ │ │ ║
|
|
║ │ [ ✅ Lancer la validation ] │ ║
|
|
║ │ │ ║
|
|
║ └─────────────────────────────────────────────────────────┘ ║
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Codes non mappés │ ║
|
|
║ ├────────────┬──────┬─────────────┬──────────┬───────────┤ ║
|
|
║ │ Vocabulaire│ Code │ Nom │ Fréquence│ Dernière │ ║
|
|
║ ├────────────┼──────┼─────────────┼──────────┼───────────┤ ║
|
|
║ │ ICD-10 │E11.9 │ Diabète T2 │ [42] │ 14:30:22 │ ║
|
|
║ │ ICD-10 │I10 │ HTA │ [38] │ 14:25:10 │ ║
|
|
║ │ ATC │A10BA │ Metformine │ [35] │ 14:20:05 │ ║
|
|
║ │ ICD-10 │J45.9 │ Asthme │ [28] │ 14:15:33 │ ║
|
|
║ └────────────┴──────┴─────────────┴──────────┴───────────┘ ║
|
|
╚═══════════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
---
|
|
|
|
## 📝 Logs
|
|
|
|
```
|
|
╔═══════════════════════════════════════════════════════════════╗
|
|
║ Logs système ║
|
|
║ Consulter les logs et erreurs ║
|
|
╠═══════════════════════════════════════════════════════════════╣
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Filtres │ ║
|
|
║ ├─────────────────────────────────────────────────────────┤ ║
|
|
║ │ Nombre de lignes: [100 ▼] Niveau: [ERROR ▼] │ ║
|
|
║ └─────────────────────────────────────────────────────────┘ ║
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Logs récents │ ║
|
|
║ ├─────────────────────────────────────────────────────────┤ ║
|
|
║ │ ┌─────────────────────────────────────────────────────┐ │ ║
|
|
║ │ │ 2024-02-07 14:30:22 - INFO - Starting ETL pipeline │ │ ║
|
|
║ │ │ 2024-02-07 14:30:23 - INFO - Extracted 100 records │ │ ║
|
|
║ │ │ 2024-02-07 14:30:24 - WARNING - Unmapped code E11.9 │ │ ║
|
|
║ │ │ 2024-02-07 14:30:25 - ERROR - Validation failed │ │ ║
|
|
║ │ │ 2024-02-07 14:30:26 - INFO - Pipeline completed │ │ ║
|
|
║ │ └─────────────────────────────────────────────────────┘ │ ║
|
|
║ └─────────────────────────────────────────────────────────┘ ║
|
|
║ ║
|
|
║ ┌─────────────────────────────────────────────────────────┐ ║
|
|
║ │ Erreurs de validation │ ║
|
|
║ ├────────┬──────────┬──────────┬─────────────┬───────────┤ ║
|
|
║ │ Table │ Record │ Type │ Message │ Date │ ║
|
|
║ ├────────┼──────────┼──────────┼─────────────┼───────────┤ ║
|
|
║ │ person │ PAT00042 │ [ERROR] │ Invalid DOB │ 14:30:22 │ ║
|
|
║ │ visits │ VIS00123 │ [ERROR] │ Missing FK │ 14:25:10 │ ║
|
|
║ └────────┴──────────┴──────────┴─────────────┴───────────┘ ║
|
|
╚═══════════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 Palette de couleurs
|
|
|
|
```
|
|
Primaire:
|
|
Bleu: #3498db ████ (Boutons, liens)
|
|
Bleu foncé: #2c3e50 ████ (Texte, sidebar)
|
|
|
|
Statuts:
|
|
Vert: #27ae60 ████ (Succès)
|
|
Jaune: #f39c12 ████ (Warning)
|
|
Rouge: #e74c3c ████ (Erreur)
|
|
Gris: #7f8c8d ████ (Texte secondaire)
|
|
|
|
Fond:
|
|
Blanc: #ffffff ████ (Cards)
|
|
Gris clair: #f5f7fa ████ (Background)
|
|
Noir: #1e1e1e ████ (Console logs)
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 Responsive
|
|
|
|
### Desktop (> 1024px)
|
|
```
|
|
┌────────────┬──────────────────────────────────────┐
|
|
│ │ │
|
|
│ Sidebar │ Main Content │
|
|
│ (250px) │ (Flexible) │
|
|
│ │ │
|
|
│ 📊 Dash │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
|
|
│ ⚙️ ETL │ │Stat│ │Stat│ │Stat│ │Stat│ │
|
|
│ 🗄️ Schema │ └────┘ └────┘ └────┘ └────┘ │
|
|
│ ✅ Valid │ │
|
|
│ 📝 Logs │ ┌──────────────────────────────┐ │
|
|
│ │ │ Table / Chart │ │
|
|
│ │ └──────────────────────────────┘ │
|
|
└────────────┴──────────────────────────────────────┘
|
|
```
|
|
|
|
### Mobile (< 768px)
|
|
```
|
|
┌──────────────────────────────────────┐
|
|
│ ☰ OMOP Pipeline │
|
|
├──────────────────────────────────────┤
|
|
│ │
|
|
│ ┌────────────────────────────────┐ │
|
|
│ │ Stat 1 │ │
|
|
│ └────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌────────────────────────────────┐ │
|
|
│ │ Stat 2 │ │
|
|
│ └────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌────────────────────────────────┐ │
|
|
│ │ Table │ │
|
|
│ │ (Scrollable horizontalement) │ │
|
|
│ └────────────────────────────────┘ │
|
|
│ │
|
|
└──────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 🔄 Flux de données
|
|
|
|
```
|
|
┌─────────────┐
|
|
│ React │
|
|
│ Frontend │
|
|
└──────┬──────┘
|
|
│ HTTP REST
|
|
│ (Axios)
|
|
▼
|
|
┌─────────────┐
|
|
│ FastAPI │
|
|
│ Backend │
|
|
└──────┬──────┘
|
|
│ SQLAlchemy
|
|
│
|
|
▼
|
|
┌─────────────┐
|
|
│ PostgreSQL │
|
|
│ Database │
|
|
└─────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Démarrage
|
|
|
|
```bash
|
|
$ cd omop
|
|
$ ./start_web.sh
|
|
|
|
🚀 Démarrage de l'interface web OMOP Pipeline
|
|
|
|
📦 Installation des dépendances...
|
|
✅ Démarrage des serveurs...
|
|
|
|
Backend API: http://localhost:8000
|
|
Documentation: http://localhost:8000/docs
|
|
Frontend: http://localhost:3000
|
|
|
|
✅ Serveurs démarrés!
|
|
API PID: 12345
|
|
Frontend PID: 12346
|
|
|
|
Appuyez sur Ctrl+C pour arrêter les serveurs
|
|
```
|
|
|
|
---
|
|
|
|
## 📊 Exemple d'utilisation
|
|
|
|
### Scénario : Lancer un pipeline ETL
|
|
|
|
1. **Ouvrir l'interface** : http://localhost:3000
|
|
2. **Aller dans ETL Manager** (menu gauche)
|
|
3. **Configurer le pipeline** :
|
|
- Source : `staging.raw_patients`
|
|
- Cible : `person`
|
|
- Batch : `1000`
|
|
- Workers : `8`
|
|
4. **Cliquer sur "Lancer le pipeline"**
|
|
5. **Suivre la progression** dans le tableau "Jobs en cours"
|
|
6. **Voir les résultats** dans le Dashboard
|
|
|
|
### Résultat attendu
|
|
|
|
```
|
|
Job ID: etl_staging.raw_patients_person
|
|
Statut: ✓ completed
|
|
Progression: 100%
|
|
Détails: 100 enregistrements traités en 2.34s
|
|
```
|
|
|
|
---
|
|
|
|
## ✨ Points forts
|
|
|
|
- ✅ **Interface intuitive** : Navigation claire et simple
|
|
- ✅ **Temps réel** : Refresh automatique des données
|
|
- ✅ **Responsive** : Fonctionne sur tous les écrans
|
|
- ✅ **Moderne** : Design professionnel et épuré
|
|
- ✅ **Complet** : Toutes les fonctionnalités ETL disponibles
|
|
- ✅ **Documenté** : Documentation complète et exemples
|
|
|
|
---
|
|
|
|
## 🎯 Prêt à l'emploi !
|
|
|
|
L'interface est **complète** et **fonctionnelle**. Tu peux :
|
|
1. Lancer les serveurs avec `./start_web.sh`
|
|
2. Ouvrir http://localhost:3000
|
|
3. Commencer à gérer ton pipeline OMOP !
|
|
|
|
**Bon développement ! 🚀**
|