# Wikilinks & Graph View - Guide de démarrage rapide ## 🚀 Intégration en 5 minutes ### Étape 1 : Scanner le vault Dans votre service principal de gestion du vault : ```typescript // vault.service.ts ou app.component.ts import { NoteIndexService } from './services/note-index.service'; export class VaultService { private noteIndexService = inject(NoteIndexService); loadVault() { this.http.get('/api/notes').subscribe(notes => { this.notes.set(notes); // Scanner pour construire l'index this.noteIndexService.scanVault(notes); }); } } ``` ### Étape 2 : Activer les previews dans note-viewer ```typescript // Votre composant de vue de note @Component({ selector: 'app-note-page', template: ` (wikiLinkActivated)="navigateToNote($event)"> ` }) export class NotePageComponent { note = signal(...); allNotes = signal(...); // Toutes les notes du vault navigateToNote(link: WikiLinkActivation) { this.router.navigate(['/note', link.target], { fragment: link.heading || link.block }); } } ``` ### Étape 3 : Ajouter le Graph View ```typescript // note-page.component.ts import { GraphViewContainerComponent } from './components/graph-view-container/graph-view-container.component'; @Component({ template: `
@if (viewMode() === 'document') { } @else { }
`, imports: [NoteViewerComponent, GraphViewContainerComponent] }) export class NotePageComponent { viewMode = signal<'document' | 'graph'>('document'); note = signal(...); allNotes = signal(...); navigateToNote(noteIdOrLink: string | WikiLinkActivation) { if (typeof noteIdOrLink === 'string') { this.router.navigate(['/note', noteIdOrLink]); } else { this.router.navigate(['/note', noteIdOrLink.target], { fragment: noteIdOrLink.heading || noteIdOrLink.block }); } } } ``` ## ✅ Vérification ### Test 1 : Wikilinks Créez une note avec ce contenu : ```markdown # Test Note Ce lien [[autre-note]] devrait être cliquable. Ce lien avec alias [[autre-note|Mon Alias]] aussi. Ce lien vers une section [[autre-note#Introduction]]. ``` **Attendu :** - Les liens sont bleus et soulignés - Hover → preview card apparaît - Clic → navigation ### Test 2 : Graph View 1. Ouvrez une note 2. Cliquez sur "Graph" 3. Vous devriez voir : - Le nœud central (note actuelle) mis en évidence - Les notes liées autour - Un panneau d'options à droite ### Test 3 : Preview au survol 1. Hovez sur un wikilink 2. Attendez 300ms 3. Une carte devrait apparaître avec : - Le titre de la note - Un extrait du contenu - Un bouton "↗" pour ouvrir ## 🎨 Personnalisation ### Changer les couleurs des wikilinks ```css /* styles.css */ :root { --wiki-link: #10b981; /* Vert pour les liens valides */ --wiki-link-hover: #059669; --wiki-link-orphan: #ef4444; /* Rouge pour les orphelins */ --wiki-link-orphan-hover: #dc2626; } ``` ### Ajuster les forces du graphe ```typescript ``` ## 🐛 Problèmes courants ### "Les previews ne fonctionnent pas" ```typescript // ❌ MAUVAIS // ✅ BON ``` ### "Le graphe est vide" ```typescript // Vérifiez que le scan a été fait ngOnInit() { this.noteIndexService.scanVault(this.allNotes()); // Vérifiez qu'il y a des nœuds const nodes = this.noteIndexService.getAllNodes(); console.log('Nodes:', nodes.length); } ``` ### "Les performances sont mauvaises" ```typescript // Limiter la profondeur du graphe buildGraphData(centerNoteId, 1) // Au lieu de 2 // Ou filtrer les orphelins const graphData = this.noteIndexService.buildGraphData(centerNoteId) .filter(node => node.backlinks.length > 0 || node.outlinks.length > 0); ``` ## 📖 Documentation complète Pour plus de détails, consultez : - [WIKILINKS_GRAPH_IMPLEMENTATION.md](./WIKILINKS_GRAPH_IMPLEMENTATION.md) - Documentation complète - [Architecture et API](./WIKILINKS_GRAPH_IMPLEMENTATION.md#architecture) - [Tests et benchmarks](./WIKILINKS_GRAPH_IMPLEMENTATION.md#tests) ## 🎯 Prochaines étapes 1. ✅ Intégration de base fonctionnelle 2. ⏭️ Ajouter le zoom/pan au graphe (d3-zoom) 3. ⏭️ Implémenter les groupes de nœuds 4. ⏭️ Export du graphe en PNG 5. ⏭️ Support mobile (long-press + bottom sheet)