ObsiViewer/docs/COMMANDS.md

🚀 Commandes utiles - Wikilinks & Graph View

📦 Installation (déjà fait ✅)

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

npm install d3-force d3-zoom d3-selection

🧪 Tests

Lancer les tests unitaires

# 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)

# Avec Playwright
npx playwright test

# Mode interactif
npx playwright test --ui

🏃 Développement

Démarrer le serveur de développement

npm run dev
# ou
ng serve

Build production

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

Vérifier les types TypeScript

npx tsc --noEmit

🔍 Debug & Inspection

Vérifier que l'index est construit

// 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

// 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

// 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

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

Mesurer le rendu du graphe

// 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

# Si ESLint est configuré
npm run lint

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

Formatter

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

🐛 Troubleshooting

"Module not found: d3-force"

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

rm -rf node_modules package-lock.json
npm install

Vider le cache Angular

rm -rf .angular/cache
ng serve

📝 Scripts NPM à ajouter (optionnel)

Ajouter dans package.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 :

npm run test:wikilinks
npm run test:coverage

🔍 Inspection des fichiers créés

Lister tous les nouveaux fichiers

# 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

# 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

# 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 :

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

Ajuster les forces du graphe

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

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

✅ Validation finale

Checklist rapide

# 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

# 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