# 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