Initial commit
This commit is contained in:
Dom
367
omop/INTERFACE_PREVIEW.md
Normal file
367
omop/INTERFACE_PREVIEW.md
Normal file
@@ -0,0 +1,367 @@
|
||||
# 🖼️ 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 ! 🚀**
|
||||
Reference in New Issue
Block a user