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.