306 lines
5.6 KiB
Markdown
306 lines
5.6 KiB
Markdown
# 🚀 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`
|