# 🖼️ 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 ! 🚀**