# DebugUMAP - Structure Modulaire

Ce composant a été refactorisé pour améliorer la maintenabilité et permettre l'ajout de fonctionnalités complexes sans compromettre les performances.

## Structure

```
DebugUMAP/
├── components/           # Composants UI réutilisables
│   ├── ConfigDisplay.js  # Affichage des informations de configuration
│   ├── MapContainer.js   # Conteneur SVG pour la carte
│   ├── ErrorDisplay.js   # Affichage des erreurs
│   ├── LoadingDisplay.js # Affichage du chargement
│   └── index.js         # Export centralisé
├── hooks/               # Hooks personnalisés
│   ├── useConfigs.js    # Gestion des configurations UMAP
│   ├── useVisualState.js # État visuel (couleurs, taille, mode sombre)
│   ├── useTweakpane.js  # Interface Tweakpane
│   ├── useZoom.js       # Comportement de zoom D3
│   ├── useGlyphRenderer.js # Rendu des glyphes
│   └── index.js         # Export centralisé
├── utils/               # Utilitaires
│   ├── constants.js     # Constantes de l'application
│   ├── mappingUtils.js  # Fonctions de mapping des coordonnées
│   ├── colorUtils.js    # Gestion des couleurs
│   └── index.js         # Export centralisé
├── styles/              # Styles CSS
│   └── index.css        # Styles principaux
├── DebugUMAP.js         # Composant principal
├── index.js             # Point d'entrée du module
└── README.md            # Cette documentation
```

## Avantages de cette structure

### 🚀 Performance
- **Hooks séparés** : Chaque hook gère une responsabilité spécifique
- **Rendu optimisé** : Les effets sont isolés et ne se déclenchent que quand nécessaire
- **Composants légers** : Chaque composant a une responsabilité unique

### 🔧 Maintenabilité
- **Séparation des responsabilités** : Chaque fichier a un rôle clair
- **Réutilisabilité** : Les hooks et composants peuvent être réutilisés
- **Testabilité** : Chaque partie peut être testée indépendamment

### 📈 Extensibilité
- **Ajout facile de fonctionnalités** : Nouveaux hooks/composants sans impact
- **Optimisations ciblées** : Amélioration des performances par module
- **Configuration flexible** : Constantes centralisées et modifiables

## Utilisation

```jsx
import DebugUMAP from './components/DebugUMAP';

// Le composant est prêt à l'emploi
<DebugUMAP />
```

## Ajout de nouvelles fonctionnalités

### Nouveau hook
1. Créer le fichier dans `hooks/`
2. Exporter dans `hooks/index.js`
3. Utiliser dans `DebugUMAP.js`

### Nouveau composant
1. Créer le fichier dans `components/`
2. Exporter dans `components/index.js`
3. Utiliser dans `DebugUMAP.js`

### Nouvelle constante
1. Ajouter dans `utils/constants.js`
2. Importer où nécessaire

## Optimisations futures possibles

- **Virtualisation** : Rendu uniquement des glyphes visibles
- **Web Workers** : Traitement des données en arrière-plan
- **Memoization** : Cache des calculs coûteux
- **Lazy loading** : Chargement progressif des glyphes
- **Canvas rendering** : Alternative SVG pour de meilleures performances