ObsiViewer/docs/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

# 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