# 🚀 Commandes utiles - Wikilinks & Graph View

## 📦 Installation (déjà fait ✅)

Les dépendances sont déjà installées, mais si besoin :

```bash
npm install d3-force d3-zoom d3-selection
```

## 🧪 Tests

### Lancer les tests unitaires

```bash
# Tous les tests
ng test

# Seulement wikilink-parser
ng test --include='**/wikilink-parser.service.spec.ts'

# Avec coverage
ng test --code-coverage
```

### Tests E2E (à créer si besoin)

```bash
# Avec Playwright
npx playwright test

# Mode interactif
npx playwright test --ui
```

## 🏃 Développement

### Démarrer le serveur de développement

```bash
npm run dev
# ou
ng serve
```

### Build production

```bash
npm run build
# ou
ng build --configuration=production
```

### Vérifier les types TypeScript

```bash
npx tsc --noEmit
```

## 🔍 Debug & Inspection

### Vérifier que l'index est construit

```typescript
// Dans la console du navigateur (F12)
// Après le chargement d'une note

// 1. Vérifier les nœuds
const noteIndexService = document.querySelector('app-root')?.__ngContext__?.[8]?.get('NoteIndexService');
console.log('Nodes:', noteIndexService?.getAllNodes()?.length);

// 2. Vérifier un graphe
const graphData = noteIndexService?.buildFullGraphData();
console.log('Graph:', graphData);
```

### Inspecter les previews

```typescript
// Console navigateur
// Hover sur un wikilink puis :

const previewService = document.querySelector('app-root')?.__ngContext__?.[8]?.get('NotePreviewService');
console.log('Preview service:', previewService);
```

## 📊 Performance profiling

### Mesurer le parsing

```typescript
// Dans votre composant
const start = performance.now();
const links = this.wikiLinkParser.parseWikiLinks(markdown);
console.log('Parse time:', performance.now() - start, 'ms');
```

### Mesurer le scan du vault

```typescript
// Dans VaultService ou app.component
console.time('Vault scan');
this.noteIndexService.scanVault(notes);
console.timeEnd('Vault scan');
```

### Mesurer le rendu du graphe

```typescript
// Dans GraphViewComponent
console.time('Graph render');
this.restartSimulation();
console.timeEnd('Graph render');
```

### Chrome DevTools Performance

1. Ouvrir DevTools (F12)
2. Onglet "Performance"
3. Record pendant :
   - Hover sur wikilink
   - Basculer vers Graph View
   - Drag d'un nœud
4. Analyser les flamegraphs

## 🧹 Maintenance

### Linter

```bash
# Si ESLint est configuré
npm run lint

# Auto-fix
npm run lint -- --fix
```

### Formatter

```bash
# Si Prettier est configuré
npx prettier --write "src/**/*.{ts,html,css}"
```

## 🐛 Troubleshooting

### "Module not found: d3-force"

```bash
npm install d3-force d3-zoom d3-selection
```

### "Cannot find NoteIndexService"

Vérifier que le service est bien créé dans `src/services/note-index.service.ts`

### Réinitialiser node_modules

```bash
rm -rf node_modules package-lock.json
npm install
```

### Vider le cache Angular

```bash
rm -rf .angular/cache
ng serve
```

## 📝 Scripts NPM à ajouter (optionnel)

Ajouter dans `package.json` :

```json
{
  "scripts": {
    "test:wikilinks": "ng test --include='**/wikilink*.spec.ts'",
    "test:graph": "ng test --include='**/graph*.spec.ts'",
    "test:coverage": "ng test --code-coverage --watch=false",
    "build:stats": "ng build --stats-json",
    "analyze": "webpack-bundle-analyzer dist/stats.json"
  }
}
```

Puis :

```bash
npm run test:wikilinks
npm run test:coverage
```

## 🔍 Inspection des fichiers créés

### Lister tous les nouveaux fichiers

```bash
# Services
ls src/services/*wikilink* src/services/*note-index* src/services/*note-preview*

# Composants
ls -R src/components/note-preview-card/
ls -R src/components/graph-options-panel/
ls -R src/components/graph-view-container/

# Documentation
ls docs/WIKILINKS*
ls INTEGRATION_CHECKLIST.md IMPLEMENTATION_SUMMARY.md
```

### Compter les lignes de code

```bash
# Total
find src/services src/components -name "*.ts" -o -name "*.css" | xargs wc -l

# Seulement les nouveaux services
wc -l src/services/wikilink-parser.service.ts
wc -l src/services/note-index.service.ts
wc -l src/services/note-preview.service.ts
```

## 📚 Ouvrir la documentation

```bash
# Windows
start docs/WIKILINKS_README.md
start INTEGRATION_CHECKLIST.md

# macOS
open docs/WIKILINKS_README.md
open INTEGRATION_CHECKLIST.md

# Linux
xdg-open docs/WIKILINKS_README.md
```

## 🎨 Personnalisation rapide

### Changer les couleurs

Éditer `src/styles.css` :

```css
:root {
  --wiki-link: #votre-couleur;
}
```

### Ajuster les forces du graphe

Éditer `src/components/graph-view-container/graph-view-container.component.ts` :

```typescript
displayOptions = signal<GraphDisplayOptions>({
  chargeStrength: -150,  // Changer ici
  linkDistance: 120,     // Et ici
  // ...
});
```

## ✅ Validation finale

### Checklist rapide

```bash
# 1. Services existent ?
ls src/services/wikilink-parser.service.ts
ls src/services/note-index.service.ts
ls src/services/note-preview.service.ts

# 2. Composants existent ?
ls src/components/note-preview-card/note-preview-card.component.ts
ls src/components/graph-options-panel/graph-options-panel.component.ts
ls src/components/graph-view-container/graph-view-container.component.ts

# 3. Tests existent ?
ls src/services/wikilink-parser.service.spec.ts

# 4. Documentation existe ?
ls docs/WIKILINKS_README.md
ls INTEGRATION_CHECKLIST.md

# Si tous les fichiers existent : ✅ READY TO GO!
```

## 🚀 Lancer l'application

```bash
# Terminal 1 : Backend (si nécessaire)
cd server
node index.mjs

# Terminal 2 : Frontend
npm run dev
```

Puis ouvrir : `http://localhost:4200`

---

**Prêt à tester !** 🎉

Pour l'intégration complète, suivez : `INTEGRATION_CHECKLIST.md`