ObsiViewer/docs/GRAPH/GRAPH_VIEW_SEARCH_IMPLEMENTATION.md

8.3 KiB

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