ObsiViewer/docs/GRAPH/GRAPH_VIEW_SEARCH_IMPLEMENTATION.md

# 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