aivanov_database/omop/frontend

OMOP Pipeline - Frontend

Interface web React pour gérer le pipeline ETL OMOP CDM 5.4.

Technologies

• React 18.3 - Framework UI
• Vite 5.1 - Build tool rapide
• React Router 6.22 - Routing
• Axios - Client HTTP
• TanStack Query - State management et cache
• Recharts - Graphiques

Installation

npm install

Développement

npm run dev

L'application sera disponible sur http://localhost:3000

Build

npm run build

Les fichiers de production seront dans dist/

Structure

src/
├── api/
│   └── client.js          # Client API Axios
├── pages/
│   ├── Dashboard.jsx      # Page dashboard
│   ├── ETLManager.jsx     # Gestion ETL
│   ├── SchemaManager.jsx  # Gestion schémas
│   ├── Validation.jsx     # Validation
│   └── Logs.jsx           # Logs
├── App.jsx                # Application principale
├── App.css                # Styles
├── main.jsx               # Point d'entrée
└── index.css              # Styles de base

Configuration

API Backend

L'URL de l'API est configurée dans src/api/client.js :

const API_BASE_URL = 'http://localhost:8000/api'

Proxy Vite

Le proxy est configuré dans vite.config.js pour rediriger /api vers le backend.

Pages

Dashboard

• Statistiques en temps réel
• Historique des exécutions
• Métriques de performance

ETL Manager

• Lancer des pipelines ETL
• Configurer les paramètres
• Suivre les jobs en cours

Schema Manager

• Créer les schémas
• Valider les schémas
• Voir l'état des tables

Validation

• Lancer la validation
• Voir les codes non mappés
• Consulter les erreurs

Logs

• Logs système
• Filtres par niveau
• Erreurs de validation

Développement

Ajouter une nouvelle page

1. Créer le composant dans src/pages/
2. Ajouter la route dans App.jsx
3. Ajouter le lien dans la sidebar

Ajouter un endpoint API

1. Ajouter la fonction dans src/api/client.js
2. Utiliser avec TanStack Query dans le composant

Modifier les styles

• Styles globaux : App.css
• Styles de base : index.css
• Styles inline : Dans les composants

Scripts

• npm run dev - Serveur de développement
• npm run build - Build de production
• npm run preview - Prévisualiser le build

Dépendances

Production

• react
• react-dom
• react-router-dom
• axios
• recharts
• @tanstack/react-query

Développement

• @vitejs/plugin-react
• vite

Troubleshooting

Port déjà utilisé

Si le port 3000 est déjà utilisé, Vite proposera automatiquement le port 5173.

Erreur CORS

Vérifier que le backend autorise l'origine dans src/api/main.py :

allow_origins=["http://localhost:3000", "http://localhost:5173"]

Erreur de connexion API

Vérifier que le backend est démarré sur http://localhost:8000

Production

Build

npm run build

Servir les fichiers statiques

Option 1 - Serveur HTTP simple :

npm install -g serve
serve -s dist

Option 2 - Nginx :

server {
    listen 80;
    server_name example.com;
    root /path/to/dist;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8000;
    }
}

Option 3 - Depuis FastAPI :

from fastapi.staticfiles import StaticFiles
app.mount("/", StaticFiles(directory="frontend/dist", html=True))

License

MIT