TechradarDev/docs/app/guide-page-equipe.md

# Guide de la Page Équipe & Technologies

## Introduction

La page **Équipe & Technologies** (`/team`) est une interface de visualisation interactive qui permet d'analyser les compétences de l'équipe, d'identifier les congestions (technologies avec peu de personnes) et de composer une équipe de genèse pour un MVP.

Cette page est accessible depuis le radar via le lien **"👥 Équipe"** dans le header de navigation.

## Architecture Technique

La page utilise une architecture pure React/Next.js :
- **Page Next.js** : `/team` (vraie page React avec hooks et états)
- **Import dynamique** : Cytoscape.js et ECharts chargés côté client seulement (évite erreurs SSR)
- **État React** : Gestion des onglets, données et erreurs via useState/useEffect
- **Refs React** : Containers pour les graphiques gérés proprement
- **Navigation** : Lien intégré directement dans le composant React `Navigation.tsx` (modifié par script Python)

Cette approche moderne utilise pleinement les capacités de React tout en évitant les problèmes SSR avec les bibliothèques de visualisation.

### Fichiers impliqués

- **Page Next.js** : `.techradar/src/pages/team.tsx` (vraie page React créée par `Dockerfile.business`)
- **Données JSON** : `public/team-visualization-data.json` (généré par `scripts/generate-team-visualization-data.js`)
- **Navigation** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python)
- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement)

## Accès

- **URL** : `/team` (route Next.js avec vraie page React)
- **Lien de navigation** : Disponible dans le header du radar (bouton "👥 Équipe")
- **Authentification** : Même protection que le radar (mot de passe `laplank-radar`)

## Fonctionnalités

La page propose trois visualisations complémentaires :

### 1. Graphe Réseau

**Objectif** : Visualiser les connexions entre technologies et membres de l'équipe.

**Fonctionnalités** :
- **Nœuds technologies** : 
  - Couleur selon le ring (Adopt=vert, Trial=bleu, Assess=orange, Hold=rouge)
  - Taille proportionnelle au nombre de personnes maîtrisant la technologie
  - Label avec le nom de la technologie
- **Nœuds membres** :
  - Couleur verte
  - Taille proportionnelle à la disponibilité
  - Label avec le nom du membre
- **Liens** :
  - Connectent les technologies aux membres qui les maîtrisent
  - Épaisseur selon le niveau de compétence

**Utilisation** :
- Zoom : Molette de la souris ou pincement sur mobile
- Pan : Clic gauche + glisser
- Tooltip : Survol d'un nœud pour voir les détails

**Technologie** : Cytoscape.js avec le layout CoSE-Bilkent

### 2. Matrice de Congestion

**Objectif** : Identifier les technologies avec faible couverture d'équipe (congestions).

**Fonctionnalités** :
- **Axe X** : Membres de l'équipe
- **Axe Y** : Technologies (uniquement les technologies "adopt" - anciennement "core")
- **Couleurs** :
  - Vert : Technologie maîtrisée par le membre
  - Rouge : Technologie non maîtrisée
  - Intensité selon le niveau de compétence

**Utilisation** :
- Cliquer sur une cellule pour voir les détails
- Filtrer par technologie ou membre
- Identifier visuellement les technologies avec peu de personnes

**Note** : Seules les technologies avec `ring: adopt` sont affichées dans la matrice, car ce sont les technologies fondamentales en production (anciennement classées comme "core").

**Technologie** : ECharts (heatmap)

### 3. Équipe de Genèse MVP

**Objectif** : Composer automatiquement une équipe minimale pour un MVP en 2 mois avec mobilisation quotidienne.

**Fonctionnalités** :
- **Sélection automatique** : Algorithme qui sélectionne les membres selon :
  - Disponibilité >= 50%
  - Couverture maximale des technologies critiques (technologies avec `ring: adopt` - anciennement "core")
  - Équilibre des compétences
- **Statistiques** :
  - Nombre de membres sélectionnés
  - Pourcentage de technologies couvertes
  - Technologies critiques non couvertes
- **Recommandations** :
  - Technologies à former
  - Compétences manquantes
  - Risques identifiés

**Technologie** : Algorithme JavaScript avec affichage HTML/CSS

## Données

### Sources de données

1. **Profils équipe** : `docs/data/team/*.md` (fichiers Markdown avec métadonnées YAML)
2. **Technologies** : `radar-business/2025-01-15/*.md` (blips avec métadonnées)

### Génération des données

Le script `scripts/generate-team-visualization-data.js` :

1. **Lit les profils équipe** depuis `docs/data/team/*.md`
2. **Lit les technologies** depuis `radar-business/2025-01-15/*.md`
3. **Génère** `public/team-visualization-data.json` avec :
   - `network` : Données réseau (nodes/edges) pour Cytoscape.js
   - `congestionMatrix` : Matrice de congestion pour ECharts
   - `genesisTeam` : Équipe de genèse MVP avec statistiques
   - `technologies` : Liste des technologies avec métadonnées
   - `members` : Liste des membres avec compétences

### Exécuter la génération

```bash
node scripts/generate-team-visualization-data.js
```

**Important** : Régénérer les données après chaque modification des profils équipe ou des technologies.

## Structure des profils équipe

Les profils sont stockés dans `docs/data/team/*.md` avec le format suivant :

```markdown
---
name: "pseudo"
fullName: "Nom complet"
role: "Rôle"
availability: 50
seniorityLevel: expert
yearsExperience: 8
joinDate: "2016-01"
interests: ["Mobile", "Infrastructure"]
skills:
  - name: "Flutter"
    level: expert
    years: 4
    lastUsed: "2024-12"
  - name: "Python"
    level: intermediate
    years: 5
    lastUsed: "2024-11"
softSkills:
  - "Autonomie"
  - "Pédagogie"
projects:
  - "Projet1"
  - "Projet2"
---

Description du membre de l'équipe.
```

### Métadonnées

- **name** : Pseudo unique (utilisé comme identifiant)
- **fullName** : Nom complet
- **role** : Rôle dans l'équipe
- **availability** : Disponibilité en pourcentage (0-100)
- **seniorityLevel** : Niveau de séniorité (junior, intermediate, senior, expert)
- **yearsExperience** : Années d'expérience totales
- **joinDate** : Date d'arrivée (format YYYY-MM)
- **interests** : Centres d'intérêt
- **skills** : Liste des compétences techniques avec niveau, années et dernière utilisation
- **softSkills** : Compétences comportementales
- **projects** : Projets sur lesquels le membre a travaillé

## Processus de build

### Dans le Dockerfile

1. **Installation dépendances** : Installe `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react`
2. **Création de la page Next.js** : Génère `.techradar/src/pages/team.tsx` (vraie page React)
3. **Modification de Navigation** : Ajoute le lien "👥 Équipe" dans `.techradar/src/components/Navigation/Navigation.tsx` via script Python
4. **Copie des données** : Copie `public/team-visualization-data.json` vers `.techradar/public/`
5. **Build Next.js** : Génère les fichiers statiques dans `out/` avec la page React complète

### Script Python pour Navigation.tsx

Le script `/tmp/add_team_link.py` dans le Dockerfile :

1. **Supprime tous les liens Équipe existants** : Évite les doublons
2. **Ajoute un seul lien Équipe** : Après le lien "Vue d'ensemble"
3. **Vérifie le résultat** : S'assure qu'il n'y a qu'un seul lien

**Important** : Les scripts JavaScript (`strategie-script.js`, `strategie-link.js`) qui ajoutaient des liens dans le header ont été désactivés pour éviter les doublons.

## Technologies utilisées

### Bibliothèques JavaScript

- **Cytoscape.js** : Graphique réseau interactif (import dynamique)
- **Cytoscape CoSE-Bilkent** : Layout algorithm pour le graphique (import dynamique)
- **ECharts pour React** : Matrice de congestion (composant React)
- **React Hooks** : Gestion d'état (useState, useEffect, useRef)
- **Next.js dynamic import** : Chargement côté client seulement (évite erreurs SSR)

### Chargement des données

Les données sont chargées depuis `/team-visualization-data.json` via `fetch()` au chargement de la page.

## Utilisation

### Visualiser les compétences

1. Ouvrir l'onglet **"Graphe Réseau"**
2. Explorer les connexions entre technologies et membres
3. Identifier les technologies avec beaucoup de personnes (gros nœuds)
4. Identifier les technologies avec peu de personnes (petits nœuds = congestions)

### Identifier les congestions

1. Ouvrir l'onglet **"Matrice Congestion"**
2. Repérer les colonnes (technologies) avec beaucoup de cases rouges
3. Ces technologies ont une faible couverture d'équipe
4. Actions recommandées :
   - Former l'équipe
   - Recruter
   - Documenter

### Composer une Équipe pour un Projet

1. Ouvrir l'onglet **"Équipe Genèse MVP"**
2. L'équipe est automatiquement sélectionnée selon :
   - Disponibilité >= 50%
   - Couverture maximale des technologies
3. Consulter les statistiques :
   - Technologies couvertes
   - Technologies manquantes
   - Recommandations

## Personnalisation

### Modifier le seuil de disponibilité

Pour l'équipe de genèse MVP, le seuil est fixé à **50%**. Pour le modifier :

1. Ouvrir `scripts/generate-team-visualization-data.js`
2. Modifier le filtre `m.availability >= 50` dans les fonctions `generateCongestionMatrix()` et `generateGenesisTeam()`
3. Régénérer les données : `node scripts/generate-team-visualization-data.js`

**Note** : Les technologies critiques utilisées pour la sélection sont celles avec `ring: adopt` (anciennement "core"). Pour modifier ce critère, changer le filtre `t.ring === 'adopt'` dans `generateGenesisTeam()`.

### Ajouter de nouvelles visualisations

1. Modifier `.techradar/src/pages/team.tsx` (généré par le Dockerfile)
2. Ajouter un nouvel état dans `useState` pour l'onglet
3. Ajouter un bouton dans la section des onglets
4. Implémenter la logique React pour charger et afficher les données
5. Utiliser des refs React pour les containers des nouvelles visualisations

## Maintenance

### Mettre à jour les profils équipe

1. Modifier les fichiers dans `docs/data/team/*.md`
2. Régénérer les données : `node scripts/generate-team-visualization-data.js`
3. Commiter les deux fichiers (profils + données JSON)

### Ajouter un nouveau membre

1. Créer un fichier `docs/data/team/pseudo.md`
2. Remplir toutes les métadonnées
3. Régénérer les données
4. Vérifier que le membre apparaît dans les visualisations

### Mettre à jour les compétences

1. Modifier la section `skills` dans le profil équipe
2. Régénérer les données
3. Vérifier que les connexions sont mises à jour dans le graphe

## Troubleshooting

### Le lien "👥 Équipe" n'apparaît pas dans le header

**Causes possibles** :
- Le script Python n'a pas été exécuté
- Le fichier Navigation.tsx n'a pas été trouvé
- Erreur dans le script Python

**Solutions** :
1. Vérifier les logs Docker lors du build
2. Vérifier que le fichier `.techradar/src/components/Navigation/Navigation.tsx` existe
3. Rebuild avec `--no-cache` pour forcer l'exécution du script

### La page `/team` retourne 404

**Causes possibles** :
- Le fichier `team.html` n'est pas dans `out/`
- La page Next.js `team.tsx` n'a pas été créée

**Solutions** :
1. Vérifier que `public/team.html` existe
2. Vérifier que le Dockerfile a bien créé `.techradar/src/pages/team.tsx`
3. Vérifier que `team.html` a été copié dans `out/`

### Les visualisations sont vides

**Causes possibles** :
- Le fichier `team-visualization-data.json` n'a pas été généré
- Le fichier n'est pas accessible depuis `/team.html`

**Solutions** :
1. Générer les données : `node scripts/generate-team-visualization-data.js`
2. Vérifier que le fichier existe dans `public/team-visualization-data.json`
3. Vérifier que le fichier a été copié dans `out/`
4. Vérifier la console du navigateur pour les erreurs JavaScript

### Les données ne sont pas à jour

**Solution** : Régénérer les données après chaque modification :
```bash
node scripts/generate-team-visualization-data.js
```

## Fichiers associés

- **Page React** : `.techradar/src/pages/team.tsx` (vraie page React avec hooks et états)
- **Données JSON** : `public/team-visualization-data.json` (généré)
- **Script de génération** : `scripts/generate-team-visualization-data.js`
- **Profils équipe** : `docs/data/team/*.md` (fichiers Markdown avec métadonnées YAML)
- **Technologies** : `radar-business/2025-01-15/*.md` (blips avec métadonnées)
- **Navigation modifiée** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python)
- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement)

## Ressources

- [Guide de développement](./developpement.md)
- [Guide de déploiement](./deploiement.md)
- [Guide de dépannage](./troubleshooting.md)
- Documentation Cytoscape.js : https://js.cytoscape.org/
- Documentation ECharts : https://echarts.apache.org/