1. 31 déc., 2025 3 validations
    • Hamadou Ba's avatar
      Migration partielle vers Material-UI (MUI) · 904278cf
      Hamadou Ba a écrit
      Remplacement de Tailwind CSS par Material-UI pour un design plus professionnel.
      
      1. Installation MUI:
         - @mui/material @mui/icons-material
         - @emotion/react @emotion/styled (styling engine)
      
      2. Configuration theme (theme.ts):
         - Palette couleurs (primary=bleu, secondary=violet)
         - Typography (Roboto font family)
         - Components overrides (buttons, cards)
         - Border radius 8px
      
      3. Main.tsx:
         - ThemeProvider wrapping App
         - CssBaseline pour reset CSS Material
      
      4. Dashboard refactorise (100% MUI):
         - AppBar + Toolbar (header professionnel)
         - Container responsive (maxWidth xl)
         - Paper elevation pour cartes (ombres)
         - Typography pour textes (h6, caption, body2)
         - Alert avec IconButton pour erreurs
         - Stack + Box pour layout flexbox
         - Icons: ScienceIcon, CloseIcon
      
      Avantages MUI:
      - Design Material cohérent et professionnel
      - Composants accessibles (ARIA)
      - Animations fluides
      - Theme customizable
      - TypeScript support excellent
      - Document...
      904278cf
    • Hamadou Ba's avatar
      Phase 7: Visualisations - Charts et Diagrammes · ac7bebc6
      Hamadou Ba a écrit
      Implementation complete des visualisations interactives:
      
      1. Bibliotheques installees:
         - chart.js + react-chartjs-2 (graphiques)
         - d3 + @types/d3 (diagramme reseau)
      
      2. NetworkDiagram (D3.js):
         - Diagramme topologie du reseau
         - Visualisation coordinateur + serveurs + sortie
         - Fleches avec probabilites de routage (p, qi)
         - Taux de service affiches (λ, μc, μi)
         - Code couleur: bleu=coordinateur, violet=serveurs, rouge=sortie
         - Fleches pointillees pour feedback (serveur -> coord)
      
      3. UtilizationChart (Chart.js):
         - Graphique barres pour utilisation (ρ)
         - Comparaison simulation vs analytique
         - Ligne rouge a ρ=1.0 (seuil stabilite)
         - Tooltip avec valeurs precises
      
      4. MetricsComparisonChart (Chart.js):
         - Deux versions: L (nombre moyen clients) et W (temps moyen)
         - Barres comparatives simulation/analytique
         - Visualisation par file d'attente
      
      5. ResultsDisplay mis a jour:
         - Interface a onglets: Metriques | Visualisations | Comparaison
         - Onglet Metriques: tableaux metriques detailles
         - Onglet Visualisations:
           * Diagramme reseau
           * Graphique utilisation
           * Graphiques L et W cote a cote
         - Onglet Comparaison:
           * Table comparaison complete
           * Charts visualisation differences
      
      6. ExportButton:
         - Export JSON (config + tous resultats)
         - Export CSV (metriques formatees)
         - Boutons dans header resultats
         - Fichiers horodates automatiquement
      
      7. Dashboard integre:
         - Boutons export visibles en permanence
         - Layout responsive pour visualisations
         - Grille adaptative (1 ou 2 colonnes selon taille ecran)
      
      Toutes les visualisations requises pour le projet universitaire sont implementees.
      L'application est complete et prete pour execution des 5 scenarios.
      ac7bebc6
    • Hamadou Ba's avatar
      Phase 6: Frontend Core - Dashboard, Components et State Management · 698ecb50
      Hamadou Ba a écrit
      Implementation complete du frontend React avec:
      
      1. API Client Service (services/api.ts)
         - Axios client configure avec base URL
         - 12 endpoints mappes (simulation, scenarios, analytics)
         - Types TypeScript pour toutes les requetes/reponses
         - Gestion erreurs et timeouts
      
      2. Types TypeScript (types/simulation.ts)
         - Tous les modeles Pydantic mappes en TypeScript
         - SimulationConfig, SimulationResults
         - NetworkAnalytics, NetworkComparison
         - Interfaces completes pour API
      
      3. Zustand Store (store/simulationStore.ts)
         - Gestion d'etat centralisee
         - Actions: setConfig, startSimulation, computeAnalytical, etc.
         - State: config, results, analyticalResults, comparisonResults
         - Chargement automatique des scenarios
         - Calculs analytiques et comparaisons automatiques
      
      4. Dashboard Layout (components/Dashboard.tsx)
         - Layout principal avec header/footer
         - Grille responsive (sidebar + main content)
         - Notification d...
      698ecb50