ObsiViewer/GRAPH_VIEW_SEARCH_IMPLEMENTATION.md

242 lines
8.3 KiB
Markdown

# Graph View & Search Assistant Implementation
## Résumé
Implémentation complète de la parité Graph View avec Obsidian et de l'assistant de requêtes dans les 3 barres de recherche.
## Modules Créés
### 1. Search Parser (`src/core/search/`)
- **`search-parser.types.ts`**: Types pour le parsing de requêtes Obsidian
- **`search-parser.ts`**: Parser complet avec support de:
- Préfixes: `path:`, `file:`, `tag:`, `line:`, `section:`, `[property]`
- Opérateurs: `OR`, `AND`, `-` (exclusion), `*` (wildcard), `""` (exact)
- Parenthèses pour groupes
- **`search-history.service.ts`**: Gestion de l'historique avec localStorage (10 dernières requêtes)
### 2. Graph Index Service (`src/core/graph/`)
- **`graph-index.service.ts`**:
- Indexation des fichiers, tags, paths, attachments
- Suggestions dynamiques pour l'autocomplétion
- Mise à jour automatique lors du chargement des notes
### 3. Search Query Assistant (`src/components/search-query-assistant/`)
- **`search-query-assistant.component.ts`**: Popover d'assistance avec:
- Options de recherche cliquables (path:, file:, tag:, etc.)
- Suggestions dynamiques selon le contexte
- Historique avec bouton "clear"
- Navigation clavier (↑↓ Enter Esc)
- Help inline avec opérateurs
### 4. Search Input Wrapper (`src/components/search-input-with-assistant/`)
- **`search-input-with-assistant.component.ts`**:
- Composant wrapper pour input + assistant
- Gestion focus/blur
- Clear button
- Intégration complète avec l'assistant
## Intégrations
### Graph Options Panel
- Ajout du composant `SearchInputWithAssistantComponent` dans le filtre "Search files"
- Synchronisation bidirectionnelle avec `GraphSettingsService`
- Gestion des Groups avec requêtes éditables
- Preview des couleurs de groupes
- Add/Remove/Update groups avec persistance JSON
### Graph Settings Service (déjà existant, amélioré)
- Lecture/écriture de `.obsidian/graph.json`
- Debounce 250ms sur les sauvegardes
- Polling pour changements externes (2s)
- Préservation des clés inconnues
### Graph Runtime Adapter (mise à jour)
- Utilisation du parser de recherche pour les filtres
- Query matching pour les color groups
- Support complet des filtres Obsidian
### App Component
- Intégration de `SearchInputWithAssistantComponent` dans:
1. **Sidebar search** (vue mobile) - context: `vault-sidebar`
2. **Header search** (vue desktop) - context: `vault-header`
3. **Graph search** (via graph-options-panel) - context: `graph`
- Effet automatique pour rebuild de l'index lors du chargement des notes
- Méthode `onSearchSubmit()` qui enregistre l'historique
## Fonctionnalités Implémentées
### ✅ A. Parité Graph View - Filters
- **Tags**: Toggle pour afficher/masquer les nœuds de tags
- **Attachments**: Toggle pour afficher/masquer les fichiers non-MD
- **Existing files only**: Toggle inversé de `hideUnresolved`
- **Orphans**: Toggle pour afficher/masquer les nœuds isolés
- **Search**: Utilise le parser Obsidian-compatible pour filtrage avancé
### ✅ B. Parité Graph View - Groups
- Liste des groupes avec couleurs
- Query éditable pour chaque groupe
- Add/Remove/Duplicate groups
- Color preview (RGB + alpha)
- Matching avec le search parser
- Priorité par ordre (premier match gagne)
### ✅ C. Assistant de Requêtes
**3 Emplacements:**
1. Barre latérale gauche (mobile/desktop)
2. Header central (desktop)
3. Graph settings → Filters
**Comportement:**
- Focus → ouvre le popover
- Options cliquables insèrent les préfixes
- Suggestions dynamiques:
- `path:` → liste des dossiers
- `tag:` → liste des tags indexés
- `file:` → liste des fichiers
- `[property]` → propriétés YAML communes
- Historique des 10 dernières requêtes (localStorage)
- Navigation clavier complète
- Help tooltip avec exemples d'opérateurs
### ✅ D. Moteur de Recherche Obsidian-Compatible
Supporte:
- `path:folder/` - chemin du fichier
- `file:name` - nom du fichier
- `tag:#todo` - tags
- `line:keyword` - mots sur la même ligne
- `section:heading` - sous le même heading
- `[property:value]` - propriétés frontmatter
- `OR` - union
- `AND` - intersection (implicite)
- `-term` - exclusion
- `"phrase"` - correspondance exacte
- `term*` - wildcard
- `()` - groupes avec parenthèses
### ✅ E. Persistence & Synchronisation
- **JSON**: `.obsidian/graph.json` lu/écrit avec debounce
- **localStorage**: Historique par contexte (vault-sidebar, vault-header, graph)
- **Polling**: Détection des changements externes (2s)
- **Atomic writes**: .tmp + rename
- **Préservation**: Toutes les clés inconnues sont conservées
## Architecture
```
src/
├── core/
│ ├── search/
│ │ ├── search-parser.types.ts # Types du parser
│ │ ├── search-parser.ts # Parser Obsidian
│ │ └── search-history.service.ts # Historique localStorage
│ └── graph/
│ └── graph-index.service.ts # Index tags/paths/files
├── components/
│ ├── search-query-assistant/
│ │ └── search-query-assistant.component.ts # Popover assistant
│ ├── search-input-with-assistant/
│ │ └── search-input-with-assistant.component.ts # Wrapper input
│ └── graph-options-panel/
│ └── graph-options-panel.component.ts # Panel avec groups
└── app/
└── graph/
├── graph-settings.service.ts # Persistence JSON
├── graph-settings.types.ts # Types & conversions
└── graph-runtime-adapter.ts # Application filtres/groups
```
## Tests Suggérés
### Graph View Parité
1. **Filtres de base:**
- Activer/désactiver Tags → vérifier apparition nœuds #tag
- Activer/désactiver Attachments → vérifier fichiers PDF/PNG
- Existing files only → masquer liens cassés
- Orphans → masquer nœuds isolés
2. **Search avec opérateurs:**
- `tag:#code` → uniquement fichiers avec #code
- `path:folder/` → fichiers dans folder/
- `tag:#todo OR tag:#urgent` → union
- `-tag:#done` → exclusion
- `"phrase exacte"` → match exact
3. **Groups:**
- Créer groupe avec query `file:test`
- Vérifier couleur appliquée aux nœuds matchant
- Tester priorité: premier groupe matché colore le nœud
### Assistant de Requêtes
1. **Popover:**
- Focus input → popover s'ouvre
- Clic sur `path:` → insère dans input
- Taper `path:` → suggestions de dossiers apparaissent
- Taper `tag:` → suggestions de tags apparaissent
2. **Historique:**
- Soumettre requête → apparaît dans historique
- Cliquer item historique → applique la requête
- "Clear history" → vide l'historique
- Recharger page → historique persiste
3. **Navigation clavier:**
- ↓ → sélectionner suggestion suivante
- ↑ → sélectionner suggestion précédente
- Enter → appliquer suggestion sélectionnée
- Esc → fermer popover
### Persistence
1. **JSON graph.json:**
- Modifier filtre → vérifier écriture fichier (debounce 250ms)
- Modifier JSON manuellement → vérifier rechargement UI (2s)
- Vérifier préservation de `scale`, `close`, etc.
2. **localStorage:**
- Vérifier 3 clés distinctes: `obsidian-search-history-vault-sidebar`, etc.
- Limité à 10 items par contexte
- Dernier en premier (LIFO)
## Commandes de Test
```bash
# Développement
npm start
# Build
npm run build
# Check types
npx tsc --noEmit
```
## Conformité Obsidian
### Image 1 vs Image 2 (Objectif)
- **Topologie identique**: Même nombre de nœuds/arêtes pour config identique
- **Entités visibles**: Tags, attachments, liens résolus/non résolus
- **Couleurs groups**: Matching précis des requêtes
### Syntaxe Search (Images 3-6)
- Options identiques à Obsidian
- Suggestions contextuelles (paths, tags, files)
- Historique avec clear
- UI moderne avec Tailwind
## Notes Techniques
### Performance
- Index rebuild: O(n) où n = nombre de notes
- Suggestions: Limitées à 50 items pour performance
- Debounce: 250ms sur sauvegardes pour éviter I/O excessif
### Compatibilité
- Angular 18+ (signals, effects)
- Tailwind CSS pour styling
- Standalone components
- SSR-safe (checks `typeof window`)
### Extensions Futures
- Support de `content:` pour recherche full-text
- `task:` pour tasks Obsidian
- Regex flags (case-sensitive)
- Synonymes/aliases dans suggestions