347 lines
8.6 KiB
Markdown
347 lines
8.6 KiB
Markdown
# 📋 Checklist d'intégration - Wikilinks & Graph View
|
||
|
||
## ✅ Ce qui a été créé automatiquement
|
||
|
||
### Services (3 fichiers)
|
||
- ✅ `src/services/wikilink-parser.service.ts`
|
||
- ✅ `src/services/note-index.service.ts`
|
||
- ✅ `src/services/note-preview.service.ts`
|
||
|
||
### Composants (4 composants)
|
||
- ✅ `src/components/note-preview-card/`
|
||
- ✅ `src/components/graph-options-panel/`
|
||
- ✅ `src/components/graph-view-container/`
|
||
- ✅ `src/components/graph-view/` (modifié avec d3-force)
|
||
|
||
### Modifications
|
||
- ✅ `src/components/tags-view/note-viewer/note-viewer.component.ts` (hover preview)
|
||
- ✅ `src/styles.css` (styles wikilinks et overlays)
|
||
|
||
### Documentation (4 fichiers)
|
||
- ✅ `docs/WIKILINKS_README.md`
|
||
- ✅ `docs/WIKILINKS_GRAPH_IMPLEMENTATION.md`
|
||
- ✅ `docs/WIKILINKS_QUICK_START.md`
|
||
- ✅ `INTEGRATION_CHECKLIST.md` (ce fichier)
|
||
|
||
### Tests
|
||
- ✅ `src/services/wikilink-parser.service.spec.ts`
|
||
|
||
---
|
||
|
||
## 🔧 Étapes d'intégration manuelle
|
||
|
||
### Étape 1 : Identifier votre service de vault principal
|
||
|
||
Trouvez où vous chargez les notes dans votre application.
|
||
|
||
**Exemple possible** : `src/services/vault.service.ts` ou `src/app.component.ts`
|
||
|
||
```typescript
|
||
// Votre fichier actuel (à identifier)
|
||
export class VaultService {
|
||
notes = signal<Note[]>([]);
|
||
|
||
loadNotes() {
|
||
// Votre logique de chargement actuelle
|
||
this.http.get<Note[]>('/api/notes').subscribe(notes => {
|
||
this.notes.set(notes);
|
||
});
|
||
}
|
||
}
|
||
```
|
||
|
||
### Étape 2 : Ajouter le scan du vault
|
||
|
||
**Fichier à modifier** : Le service identifié à l'étape 1
|
||
|
||
```typescript
|
||
import { NoteIndexService } from './services/note-index.service';
|
||
|
||
export class VaultService {
|
||
private noteIndexService = inject(NoteIndexService);
|
||
notes = signal<Note[]>([]);
|
||
|
||
loadNotes() {
|
||
this.http.get<Note[]>('/api/notes').subscribe(notes => {
|
||
this.notes.set(notes);
|
||
|
||
// ✨ AJOUTER CETTE LIGNE
|
||
this.noteIndexService.scanVault(notes);
|
||
});
|
||
}
|
||
}
|
||
```
|
||
|
||
**Checkpoint** : ✅ L'index est construit au chargement du vault
|
||
|
||
---
|
||
|
||
### Étape 3 : Identifier votre composant de vue de note
|
||
|
||
Trouvez le composant qui affiche une note individuelle.
|
||
|
||
**Exemple possible** :
|
||
- `src/components/note-page/note-page.component.ts`
|
||
- `src/components/note-display/note-display.component.ts`
|
||
- `src/app/pages/note/note.component.ts`
|
||
|
||
### Étape 4 : Activer les previews dans note-viewer
|
||
|
||
**Fichier à modifier** : Le composant identifié à l'étape 3
|
||
|
||
```typescript
|
||
// AVANT
|
||
@Component({
|
||
template: `
|
||
<app-note-viewer
|
||
[note]="currentNote()"
|
||
[noteHtmlContent]="htmlContent()">
|
||
</app-note-viewer>
|
||
`
|
||
})
|
||
|
||
// APRÈS - Ajouter [allNotes]
|
||
@Component({
|
||
template: `
|
||
<app-note-viewer
|
||
[note]="currentNote()"
|
||
[noteHtmlContent]="htmlContent()"
|
||
[allNotes]="allNotes()"> <!-- ✨ AJOUTER -->
|
||
</app-note-viewer>
|
||
`
|
||
})
|
||
export class NotePageComponent {
|
||
private vaultService = inject(VaultService);
|
||
|
||
currentNote = signal<Note>(...);
|
||
allNotes = computed(() => this.vaultService.notes()); // ✨ AJOUTER
|
||
}
|
||
```
|
||
|
||
**Checkpoint** : ✅ Hover sur un wikilink affiche une preview card
|
||
|
||
---
|
||
|
||
### Étape 5 : Ajouter le toggle Document/Graph
|
||
|
||
**Fichier à modifier** : Le même composant qu'à l'étape 4
|
||
|
||
```typescript
|
||
import { GraphViewContainerComponent } from './components/graph-view-container/graph-view-container.component';
|
||
|
||
@Component({
|
||
template: `
|
||
<div class="note-page-container">
|
||
<!-- Toolbar avec toggle -->
|
||
<div class="toolbar flex gap-2 p-4 border-b">
|
||
<button
|
||
(click)="viewMode.set('document')"
|
||
[class.active]="viewMode() === 'document'"
|
||
class="px-4 py-2 rounded">
|
||
📄 Document
|
||
</button>
|
||
<button
|
||
(click)="viewMode.set('graph')"
|
||
[class.active]="viewMode() === 'graph'"
|
||
class="px-4 py-2 rounded">
|
||
🕸️ Graph
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Contenu conditionnel -->
|
||
<div class="content-area flex-1">
|
||
@if (viewMode() === 'document') {
|
||
<app-note-viewer
|
||
[note]="currentNote()"
|
||
[noteHtmlContent]="htmlContent()"
|
||
[allNotes]="allNotes()"
|
||
(wikiLinkActivated)="onWikiLinkClick($event)">
|
||
</app-note-viewer>
|
||
} @else {
|
||
<app-graph-view-container
|
||
[centerNoteId]="currentNote().id"
|
||
(nodeSelected)="onNodeSelected($event)">
|
||
</app-graph-view-container>
|
||
}
|
||
</div>
|
||
</div>
|
||
`,
|
||
imports: [NoteViewerComponent, GraphViewContainerComponent],
|
||
styles: [`
|
||
.note-page-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.toolbar button.active {
|
||
background-color: #4f46e5;
|
||
color: white;
|
||
}
|
||
|
||
.content-area {
|
||
overflow: auto;
|
||
}
|
||
`]
|
||
})
|
||
export class NotePageComponent {
|
||
viewMode = signal<'document' | 'graph'>('document'); // ✨ AJOUTER
|
||
currentNote = signal<Note>(...);
|
||
allNotes = computed(() => this.vaultService.notes());
|
||
|
||
onNodeSelected(nodeId: string) { // ✨ AJOUTER
|
||
// Naviguer vers la note sélectionnée
|
||
this.router.navigate(['/note', nodeId]);
|
||
}
|
||
|
||
onWikiLinkClick(link: WikiLinkActivation) { // ✨ AJOUTER
|
||
this.router.navigate(['/note', link.target], {
|
||
fragment: link.heading || link.block
|
||
});
|
||
}
|
||
}
|
||
```
|
||
|
||
**Checkpoint** : ✅ Bouton Graph affiche le graphe interactif
|
||
|
||
---
|
||
|
||
## 🧪 Tests de validation
|
||
|
||
### Test 1 : Wikilinks cliquables
|
||
1. Créer une note avec `[[test]]`
|
||
2. Vérifier que le lien est bleu et souligné
|
||
3. Clic → navigation fonctionne
|
||
|
||
### Test 2 : Preview au survol
|
||
1. Hover sur un wikilink
|
||
2. Attendre 300ms
|
||
3. Une carte apparaît avec titre + extrait
|
||
4. Quitter → carte disparaît
|
||
|
||
### Test 3 : Graph View
|
||
1. Cliquer sur "Graph"
|
||
2. Voir le graphe avec le nœud actuel au centre
|
||
3. Drag un nœud → il se déplace
|
||
4. Ajuster un slider → le graphe réagit
|
||
|
||
### Test 4 : Liens orphelins
|
||
1. Créer `[[note-inexistante]]`
|
||
2. Le lien doit être gris avec pointillés
|
||
3. Hover → pas de preview (normal)
|
||
|
||
---
|
||
|
||
## 🎨 Personnalisation optionnelle
|
||
|
||
### Couleurs des wikilinks
|
||
|
||
Ajouter dans `src/styles.css` :
|
||
|
||
```css
|
||
:root {
|
||
--wiki-link: #10b981; /* Vert */
|
||
--wiki-link-hover: #059669;
|
||
--wiki-link-orphan: #ef4444; /* Rouge */
|
||
--wiki-link-orphan-hover: #dc2626;
|
||
}
|
||
```
|
||
|
||
### Forces du graphe par défaut
|
||
|
||
Modifier `src/components/graph-view-container/graph-view-container.component.ts` :
|
||
|
||
```typescript
|
||
displayOptions = signal<GraphDisplayOptions>({
|
||
showArrows: true,
|
||
textFadeThreshold: 50,
|
||
nodeSize: 7, // Nœuds plus gros
|
||
linkThickness: 2, // Liens plus épais
|
||
chargeStrength: -150, // Plus de répulsion
|
||
linkDistance: 120, // Liens plus longs
|
||
centerStrength: 0.1, // Plus de centrage
|
||
centerNodeId: undefined
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Vérification finale
|
||
|
||
Cochez chaque élément :
|
||
|
||
### Fonctionnalités core
|
||
- [ ] Scanner du vault appelé au chargement
|
||
- [ ] Wikilinks sont cliquables
|
||
- [ ] Preview card s'affiche au hover (300ms)
|
||
- [ ] Graph View remplace le document
|
||
- [ ] Drag & drop des nœuds fonctionne
|
||
|
||
### Options du graphe
|
||
- [ ] Slider "Node size" modifie la taille
|
||
- [ ] Slider "Link thickness" modifie l'épaisseur
|
||
- [ ] Toggle "Arrows" affiche/cache les flèches
|
||
- [ ] Bouton "Animate" relance la simulation
|
||
- [ ] Forces ajustables fonctionnent
|
||
|
||
### Performance
|
||
- [ ] Graph avec 100 notes : fluide (60fps)
|
||
- [ ] Preview s'ouvre rapidement (<500ms)
|
||
- [ ] Pas d'erreur dans la console
|
||
|
||
### Responsive
|
||
- [ ] Desktop : Panneau options fixe à droite
|
||
- [ ] Mobile : Drawer coulissant pour options
|
||
- [ ] Preview cards s'adaptent à l'écran
|
||
|
||
---
|
||
|
||
## 🆘 Problèmes courants
|
||
|
||
### "Property 'allNotes' does not exist"
|
||
|
||
Vous avez oublié d'ajouter l'input dans votre composant parent :
|
||
|
||
```typescript
|
||
allNotes = computed(() => this.vaultService.notes());
|
||
```
|
||
|
||
### "Cannot find module 'graph-view-container'"
|
||
|
||
Vérifiez le chemin d'import relatif depuis votre composant.
|
||
|
||
### "Le graphe est vide"
|
||
|
||
```typescript
|
||
// Vérifier que le scan a été fait
|
||
console.log('Nodes:', this.noteIndexService.getAllNodes().length);
|
||
|
||
// Si 0, appeler scanVault()
|
||
this.noteIndexService.scanVault(this.allNotes());
|
||
```
|
||
|
||
### "Les previews ne s'affichent jamais"
|
||
|
||
Vérifiez que `[allNotes]` est bien passé au note-viewer.
|
||
|
||
---
|
||
|
||
## 📚 Ressources
|
||
|
||
- **Documentation complète** : `docs/WIKILINKS_GRAPH_IMPLEMENTATION.md`
|
||
- **Guide rapide** : `docs/WIKILINKS_QUICK_START.md`
|
||
- **Exemples de code** : Voir les docs ci-dessus
|
||
|
||
---
|
||
|
||
## ✅ C'est fait !
|
||
|
||
Une fois toutes les étapes complétées, vous avez :
|
||
|
||
✨ **Wikilinks cliquables** avec preview au survol
|
||
🕸️ **Graph View interactif** avec toutes les options
|
||
⚡ **Performance optimisée** pour 1000+ notes
|
||
📱 **Responsive** desktop et mobile
|
||
|
||
**Bon travail !** 🎉
|