feat(graph): Phase 1+2 — full-vault, tag filter, backlinks, tooltips, depth slider
CI / lint (push) Has been cancelled
CI / test (push) Has been cancelled
CI / security (push) Has been cancelled
CI / build (push) Has been cancelled

Backend (main.py):
- GraphNode: added tags, incoming_count, outgoing_count
- GraphEdge: added 'backlink' relation
- GraphResponse: added 'scope' field
- api_graph: scope=full|directory, tag= filter, backlinks
- Full-vault tree walk with configurable depth 0-3
- Tag index from in-memory file index for fast filtering
- Incoming/outgoing link count per node

Frontend (graph.js + index.html):
- Theme-adaptive colors via CSS custom properties
- Depth slider (0-3) with live reload
- Full-vault toggle button (🌐 Tout / 📁 Dossier)
- Search input with tag filtering + visual highlighting
- Tooltip on hover (name, path, tags, link counts)
- Backlink edges rendered in red dashed
- Node size proportional to link count
- Larger modal (1000px, 85vh)
This commit is contained in:
2026-05-28 14:46:22 -04:00
parent c8e74bd39b
commit a373279b08
3 changed files with 313 additions and 107 deletions
+8 -2
View File
@@ -699,11 +699,15 @@
<!-- Graph View Modal -->
<div class="editor-modal" id="graph-modal">
<div class="editor-container" style="max-width:90vw;width:900px;height:80vh;display:flex;flex-direction:column;">
<div class="editor-container" style="max-width:95vw;width:1000px;height:85vh;display:flex;flex-direction:column;">
<div class="editor-header">
<div class="editor-title" id="graph-title">Vue Graphique</div>
<div class="editor-actions">
<span id="graph-info" style="font-size:0.75rem;color:var(--text-muted);margin-right:12px"></span>
<span id="graph-info" style="font-size:0.75rem;color:var(--text-muted);margin-right:8px"></span>
<label style="font-size:0.7rem;color:var(--text-muted);margin-right:4px">Profondeur:</label>
<input type="range" id="graph-depth" min="0" max="3" value="1" style="width:60px;margin-right:8px" title="Profondeur d'exploration">
<button class="editor-btn" id="graph-full-vault" title="Vue complète du vault" aria-label="Vault complet" style="font-size:0.7rem;margin-right:4px">🌐 Tout</button>
<input type="text" id="graph-search" placeholder="Rechercher..." style="width:100px;font-size:0.75rem;padding:2px 6px;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);margin-right:8px">
<button class="editor-btn" id="graph-zoom-in" title="Zoom avant" aria-label="Zoom avant">
<i data-lucide="zoom-in" style="width:16px;height:16px"></i>
</button>
@@ -720,12 +724,14 @@
</div>
<div class="editor-body" style="flex:1;overflow:hidden;position:relative;padding:0">
<canvas id="graph-canvas" style="width:100%;height:100%;cursor:grab"></canvas>
<div id="graph-tooltip" style="display:none;position:absolute;pointer-events:none;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:6px 10px;font-size:0.75rem;color:var(--text-primary);max-width:250px;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.3)"></div>
<div id="graph-legend" style="position:absolute;bottom:12px;left:12px;display:flex;gap:16px;font-size:0.7rem;color:var(--text-muted);background:var(--bg-primary);padding:6px 12px;border-radius:6px;border:1px solid var(--border-color)">
<span>🟦 Dossier</span>
<span>🟩 Fichier .md</span>
<span>⬜ Autre fichier</span>
<span style="color:var(--text-muted)">── Parent</span>
<span style="color:var(--accent-color,#2563eb)">┅┅ Wikilink</span>
<span style="color:#e74c3c">← Backlink</span>
</div>
</div>
</div>