ObsiViewer/docs/SEARCH_DEBUG_GUIDE.md

# Guide de Débogage de la Recherche Meilisearch

## 🔍 Problème Actuel

La recherche Meilisearch est activée mais les résultats ne s'affichent pas dans l'interface.

## ✅ Ce qui Fonctionne

### Backend API
- ✅ Meilisearch est actif (port 7700)
- ✅ Backend Express est actif (port 4000)
- ✅ Index Meilisearch contient 642 documents
- ✅ API `/api/search` retourne des résultats valides

**Test backend :**
```bash
curl "http://localhost:4000/api/search?q=test&limit=2"
# Retourne: {"hits":[...], "estimatedTotalHits":..., "processingTimeMs":...}
```

### Configuration
- ✅ `USE_MEILI: true` dans `environment.ts`
- ✅ Proxy Angular configuré (`/api` → `localhost:4000`)
- ✅ HttpClient configuré dans `index.tsx`

### Autres Fonctionnalités
- ✅ **Bookmarks** : Utilise `/api/vault/bookmarks` (backend)
- ✅ **Calendrier** : Utilise `/api/files/metadata` (backend)
- ✅ **Vault** : Utilise `/api/vault` (backend)

## 🐛 Logs de Débogage Ajoutés

### Frontend

#### 1. SearchMeilisearchService
```typescript
// src/core/search/search-meilisearch.service.ts
console.log('[SearchMeilisearchService] Sending request:', url);
console.log('[SearchMeilisearchService] Request completed');
```

#### 2. SearchOrchestratorService
```typescript
// src/core/search/search-orchestrator.service.ts
console.log('[SearchOrchestrator] Calling Meilisearch with query:', query);
console.log('[SearchOrchestrator] Raw Meilisearch response:', response);
console.log('[SearchOrchestrator] Transformed hit:', { id, matchCount, result });
```

#### 3. SearchPanelComponent
```typescript
// src/components/search-panel/search-panel.component.ts
console.log('[SearchPanel] Results received:', arr);
console.error('[SearchPanel] Search error:', e);
```

## 🧪 Tests à Effectuer

### 1. Vérifier les Logs Console

1. **Ouvrir DevTools** (F12)
2. **Aller dans Console**
3. **Taper une recherche** (ex: "test")
4. **Observer les logs** dans l'ordre :

```
[SearchOrchestrator] Calling Meilisearch with query: test
[SearchMeilisearchService] Sending request: /api/search?q=test&limit=20&highlight=true
[SearchMeilisearchService] Request completed
[SearchOrchestrator] Raw Meilisearch response: {hits: [...], ...}
[SearchOrchestrator] Transformed hit: {id: "...", matchCount: 1, result: {...}}
[SearchPanel] Results received: [{noteId: "...", matches: [...], ...}]
```

### 2. Vérifier l'Onglet Network

1. **Ouvrir DevTools** → **Network**
2. **Filtrer** : `search`
3. **Taper une recherche**
4. **Vérifier** :
   - ✅ Requête GET `/api/search?q=...`
   - ✅ Status: 200 OK
   - ✅ Response contient `hits` avec des données

### 3. Vérifier les Résultats Transformés

Dans la console, après une recherche :
```javascript
// Inspecter le signal results
// (nécessite Angular DevTools ou breakpoint)
```

## 🔧 Points de Vérification

### 1. Proxy Angular

**Fichier :** `proxy.conf.json`
```json
{
  "/api": {
    "target": "http://localhost:4000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "warn"
  }
}
```

**Vérifier :**
```bash
# Depuis le navigateur (port 3000)
curl http://localhost:3000/api/search?q=test

# Doit retourner les mêmes résultats que :
curl http://localhost:4000/api/search?q=test
```

### 2. Transformation des Résultats

**Code :** `src/core/search/search-orchestrator.service.ts`

Le mapping Meilisearch → SearchResult doit produire :
```typescript
{
  noteId: string,      // ID du document
  matches: [           // Au moins 1 match
    {
      type: 'content',
      text: string,
      context: string,  // Contenu avec <mark> ou texte brut
      ranges: []
    }
  ],
  score: 100,
  allRanges: []
}
```

**Problème potentiel :** Si `matches` est vide, rien ne s'affiche.

**Solution :** Le code a été modifié pour toujours créer au moins un match avec `excerpt` ou `content`.

### 3. Affichage des Résultats

**Composant :** `SearchResultsComponent`

**Vérifier dans le template :**
```html
@if (sortedGroups().length === 0) {
  <!-- Message "No results" -->
} @else {
  <!-- Liste des résultats -->
  @for (group of sortedGroups(); track group.noteId) {
    <!-- Affichage du groupe -->
  }
}
```

**Signal à inspecter :**
- `results()` : Doit contenir les SearchResult[]
- `sortedGroups()` : Doit contenir les ResultGroup[]

## 🚨 Problèmes Possibles

### Problème 1 : Requête HTTP ne part pas

**Symptômes :**
- Aucun log `[SearchMeilisearchService] Sending request`
- Aucune requête dans Network tab

**Causes possibles :**
- `USE_MEILI` n'est pas à `true`
- Service non injecté correctement
- Observable non souscrit

**Solution :**
```typescript
// Vérifier dans environment.ts
export const environment = {
  USE_MEILI: true, // ← Doit être true
  // ...
};
```

### Problème 2 : Requête part mais pas de réponse

**Symptômes :**
- Log `[SearchMeilisearchService] Sending request` présent
- Pas de log `Request completed`
- Erreur dans Network tab

**Causes possibles :**
- Backend non démarré
- Proxy mal configuré
- CORS

**Solution :**
```bash
# Vérifier backend
curl http://localhost:4000/api/search?q=test

# Vérifier proxy
# Redémarrer ng serve si nécessaire
```

### Problème 3 : Réponse reçue mais pas de résultats

**Symptômes :**
- Log `[SearchOrchestrator] Raw Meilisearch response` présent
- `hits.length > 0`
- Mais `matches.length === 0` dans transformed hit

**Causes possibles :**
- `_formatted` absent dans la réponse Meilisearch
- `excerpt` absent
- Mapping incorrect

**Solution :**
Le code a été modifié pour créer un match de fallback avec `excerpt` ou un extrait de `content`.

### Problème 4 : Résultats transformés mais pas affichés

**Symptômes :**
- Log `[SearchPanel] Results received` avec `arr.length > 0`
- Mais rien ne s'affiche dans l'UI

**Causes possibles :**
- Signal `results` non mis à jour
- Composant SearchResults ne reçoit pas les données
- Change detection non déclenchée

**Solution :**
```typescript
// Vérifier que results.set() est appelé
this.results.set(arr);
this.hasSearched.set(true);
```

### Problème 5 : Highlighting ne fonctionne pas

**Symptômes :**
- Résultats affichés
- Mais pas de surlignage (balises `<mark>`)

**Causes possibles :**
- `_formatted` absent
- HTML échappé
- Balises `<mark>` non rendues

**Solution :**
Le code a été modifié pour :
1. Détecter les balises `<mark>` dans `match.context`
2. Retourner le HTML tel quel (sans échappement) si présent
3. Sinon, utiliser le highlighter local

## 📋 Checklist de Débogage

- [ ] Backend démarré (`node server/index.mjs`)
- [ ] Frontend démarré (`npm run dev`)
- [ ] Meilisearch actif (`docker ps | grep meilisearch`)
- [ ] `USE_MEILI: true` dans `environment.ts`
- [ ] Hard refresh du navigateur (Ctrl+Shift+R)
- [ ] DevTools Console ouverte
- [ ] DevTools Network tab ouverte
- [ ] Taper une recherche (2+ caractères)
- [ ] Vérifier logs console (ordre attendu)
- [ ] Vérifier requête HTTP dans Network
- [ ] Vérifier réponse JSON (hits présents)
- [ ] Vérifier transformation (matches non vide)
- [ ] Vérifier affichage (liste de résultats visible)

## 🔄 Workflow de Test Complet

```bash
# 1. Vérifier Meilisearch
docker ps | grep meilisearch
curl http://127.0.0.1:7700/health

# 2. Vérifier Backend
curl "http://localhost:4000/api/search?q=test&limit=1"
# Doit retourner JSON avec hits

# 3. Démarrer Frontend (si pas déjà fait)
npm run dev

# 4. Ouvrir navigateur
# http://localhost:3000

# 5. Ouvrir DevTools (F12)
# - Console tab
# - Network tab

# 6. Taper recherche
# - Minimum 2 caractères
# - Observer logs console
# - Observer requête Network

# 7. Vérifier affichage
# - Liste de résultats doit apparaître
# - Cliquer sur un groupe pour voir les matches
# - Vérifier highlighting (balises <mark>)
```

## 🆘 Si Rien Ne Fonctionne

### Étape 1 : Vérifier Backend Isolé

```bash
curl -v "http://localhost:4000/api/search?q=test&limit=1"
```

**Attendu :**
- Status: 200 OK
- Content-Type: application/json
- Body: `{"hits":[...], ...}`

### Étape 2 : Vérifier Proxy

```bash
# Depuis un autre terminal
curl "http://localhost:3000/api/search?q=test&limit=1"
```

**Attendu :** Même réponse que backend direct

### Étape 3 : Vérifier Logs Backend

Dans le terminal où `node server/index.mjs` tourne :
```
[Meili] Search query: test
[Meili] Results: 1 hits in 15ms
```

### Étape 4 : Vérifier Logs Frontend

Dans la console du navigateur :
```
[SearchOrchestrator] Calling Meilisearch with query: test
[SearchMeilisearchService] Sending request: /api/search?q=test&limit=20&highlight=true
```

### Étape 5 : Breakpoint Debugging

1. Ouvrir DevTools → Sources
2. Trouver `search-panel.component.ts`
3. Mettre un breakpoint sur `this.results.set(arr)`
4. Taper une recherche
5. Inspecter `arr` quand le breakpoint est atteint

## 📊 Métriques de Performance

Une fois fonctionnel, vérifier :
- **Temps de recherche** : < 100ms (Meili + réseau)
- **Nombre de résultats** : Dépend de la requête
- **Highlighting** : Balises `<mark>` présentes
- **Pas de gel UI** : Interface reste réactive

## 🎯 Prochaines Étapes

Une fois la recherche fonctionnelle :
1. Retirer les `console.log` de débogage
2. Optimiser le mapping si nécessaire
3. Ajouter tests E2E
4. Documenter le comportement final