diff --git a/frontend/index.html b/frontend/index.html index d6cc1b1..9109018 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -700,53 +700,43 @@
-
-
- - - - - - - - - - Ctrl+survol = aperçu + +
+
Vue Graphique
+
+
+ + + Ctrl+survol +
-
- - - - - - - +
+ + Prof. + + + + + + +
-
Vue Graphique
-
- - - - - ── Parent - ┅┅ Wikilink - ← Backlink + +
+ +
+ + + + + ── Parent + ┅┅ Wikilink + ← Backlink +
diff --git a/frontend/js/graph.js b/frontend/js/graph.js index ebdc989..d30551b 100644 --- a/frontend/js/graph.js +++ b/frontend/js/graph.js @@ -63,7 +63,7 @@ export const GraphViewManager = { const modal = document.getElementById('graph-modal'); const title = document.getElementById('graph-title'); - const info = document.getElementById('graph-info'); + const statusEl = document.getElementById('graph-status'); const canvas = document.getElementById('graph-canvas'); const depthSlider = document.getElementById('graph-depth'); @@ -74,7 +74,7 @@ export const GraphViewManager = { this._scope = 'directory'; title.textContent = `Vue Graphique — ${vault}${path ? '/' + path : ''}`; - info.textContent = 'Chargement...'; + statusEl.textContent = 'Chargement...'; modal.classList.add('active'); this._canvas = canvas; @@ -93,8 +93,8 @@ export const GraphViewManager = { }, async _fetchAndRender() { - const info = document.getElementById('graph-info'); - if (!info) return; + const statusEl = document.getElementById('graph-status'); + if (!statusEl) return; const cacheKey = this._getCacheKey(); @@ -105,7 +105,7 @@ export const GraphViewManager = { this._edges = cached.edges; this._scope = cached.scope; const scopeLabel = this._scope === 'full' ? 'Vault complet' : 'Dossier'; - info.textContent = `${this._nodes.length} nœuds, ${this._edges.length} liens · ${scopeLabel} · prof=${this._depth} (cache)`; + statusEl.textContent = `${this._nodes.length} nœuds, ${this._edges.length} liens · ${scopeLabel} · prof=${this._depth} (cache)`; this._initLayout(); this._startRender(); return; @@ -134,11 +134,11 @@ export const GraphViewManager = { this._cacheKey = cacheKey; const scopeLabel = this._scope === 'full' ? 'Vault complet' : 'Dossier'; - info.textContent = `${this._nodes.length} nœuds, ${this._edges.length} liens · ${scopeLabel} · prof=${this._depth}`; + statusEl.textContent = `${this._nodes.length} nœuds, ${this._edges.length} liens · ${scopeLabel} · prof=${this._depth}`; this._initLayout(); this._startRender(); } catch (err) { - info.textContent = 'Erreur de chargement'; + statusEl.textContent = 'Erreur de chargement'; console.error('Graph error:', err); } }, @@ -163,19 +163,30 @@ export const GraphViewManager = { setSearch(term) { this._searchTerm = term; - // For now, use tag filter on backend; client-side highlighting on draw - if (term && term.length >= 2) { - this.reload(); - } else if (!term && this._searchTerm !== term) { - this.reload(); + // Parse unified search: #tag → tag filter, otherwise → node search + if (term.startsWith('#')) { + const tag = term.substring(1).trim(); + if (tag && tag !== this._tagFilter) { + this._tagFilter = tag; + this.reload(); + } else if (!tag && this._tagFilter) { + this._tagFilter = ''; + this.reload(); + } + } else { + if (this._tagFilter) { + this._tagFilter = ''; + this.reload(); + return; + } + if (term && term.length >= 2) { + this.reload(); + } else if (!term && this._searchTerm !== term) { + this.reload(); + } } }, - setTagFilter(tag) { - this._tagFilter = tag; - this.reload(); - }, - close() { const modal = document.getElementById('graph-modal'); if (modal) modal.classList.remove('active'); @@ -801,16 +812,6 @@ export function initGraphView() { }); } - // Tag filter input - const tagFilterInput = document.getElementById('graph-tag-filter'); - if (tagFilterInput) { - let tagDebounce; - tagFilterInput.addEventListener('input', () => { - clearTimeout(tagDebounce); - tagDebounce = setTimeout(() => gm.setTagFilter(tagFilterInput.value.trim()), 400); - }); - } - // Export PNG const exportBtn = document.getElementById('graph-export'); if (exportBtn) exportBtn.addEventListener('click', () => gm.exportPNG());