ObsiViewer/docs/MARKDOWN/WIKILINKS_QUICK_START.md

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 :

// 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<Note[]>('/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

// Votre composant de vue de note
@Component({
  selector: 'app-note-page',
  template: `
    <app-note-viewer
      [note]="note()"
      [noteHtmlContent]="htmlContent()"
      [allNotes]="allNotes()"  <!-- IMPORTANT -->
      (wikiLinkActivated)="navigateToNote($event)">
    </app-note-viewer>
  `
})
export class NotePageComponent {
  note = signal<Note>(...);
  allNotes = signal<Note[]>(...); // 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

// note-page.component.ts
import { GraphViewContainerComponent } from './components/graph-view-container/graph-view-container.component';

@Component({
  template: `
    <div class="note-page">
      <!-- Toggle Document/Graph -->
      <div class="toolbar">
        <button (click)="viewMode.set('document')">Document</button>
        <button (click)="viewMode.set('graph')">Graph</button>
      </div>
      
      <!-- Content -->
      @if (viewMode() === 'document') {
        <app-note-viewer [note]="note()" [allNotes]="allNotes()">
        </app-note-viewer>
      } @else {
        <app-graph-view-container
          [centerNoteId]="note().id"
          (nodeSelected)="navigateToNote($event)">
        </app-graph-view-container>
      }
    </div>
  `,
  imports: [NoteViewerComponent, GraphViewContainerComponent]
})
export class NotePageComponent {
  viewMode = signal<'document' | 'graph'>('document');
  note = signal<Note>(...);
  allNotes = signal<Note[]>(...);
  
  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 :

# 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

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

<app-graph-view-container
  [centerNoteId]="note().id"
  [initialOptions]="{
    forces: {
      chargeStrength: -150,      // Plus de répulsion
      linkDistance: 120,         // Liens plus longs
      centerStrength: 0.1        // Plus de centrage
    }
  }">
</app-graph-view-container>

🐛 Problèmes courants

"Les previews ne fonctionnent pas"

// ❌ MAUVAIS
<app-note-viewer [note]="note()">
</app-note-viewer>

// ✅ BON
<app-note-viewer [note]="note()" [allNotes]="allNotes()">
</app-note-viewer>

"Le graphe est vide"

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

// 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 - Documentation complète
• Architecture et API
• Tests et benchmarks

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