viktor/claude-memory-mcp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: graph visualization not rendering due to x-show timing

Browse source 
- Replace $nextTick with setTimeout(100) for D3 render (same fix as dashboard)
- Re-render graph when switching back to tab (not just on first load)
- Fallback width from parent element when container clientWidth is 0
This commit is contained in:
Viktor Barzin 2026-03-22 23:43:05 +02:00
parent c130bcff33
commit e5a69d4e3e
No known key found for this signature in database
GPG key ID: 0EB088298288D958
2 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/claude_memory/ui/static/index.html
View file

@ -468,7 +468,7 @@
</div> </div>
<!-- Tab: Graph --> <!-- Tab: Graph -->
<div x-show="$store.app.activeTab === 'graph'" x-data="graphComponent()" x-init="$watch('$store.app.activeTab', v => { if (v === 'graph' && memories.length === 0) init(); })"> <div x-show="$store.app.activeTab === 'graph'" x-data="graphComponent()" x-init="$watch('$store.app.activeTab', v => { if (v === 'graph') { if (memories.length === 0) init(); else setTimeout(() => render(), 100); } })">
<div class="flex flex-wrap gap-2 mb-4"> <div class="flex flex-wrap gap-2 mb-4">
<template x-for="cat in categories" :key="cat"> <template x-for="cat in categories" :key="cat">
<label class="flex items-center gap-1 text-sm cursor-pointer" style="color: var(--text-secondary)"> <label class="flex items-center gap-1 text-sm cursor-pointer" style="color: var(--text-secondary)">

4
src/claude_memory/ui/static/js/graph.js
View file

@ -18,7 +18,7 @@ function graphComponent() {
this.memories = memData.memories; this.memories = memData.memories;
this.categories = catData.categories; this.categories = catData.categories;
this.categories.forEach(c => this.selectedCategories[c] = true); this.categories.forEach(c => this.selectedCategories[c] = true);
this.$nextTick(() => this.render()); setTimeout(() => this.render(), 100);
} catch (e) { } catch (e) {
console.error('Failed to load graph data:', e); console.error('Failed to load graph data:', e);
} }
@ -45,7 +45,7 @@ function graphComponent() {
const memories = this.getFilteredMemories().slice(0, 300); const memories = this.getFilteredMemories().slice(0, 300);
if (memories.length === 0) return; if (memories.length === 0) return;
const width = container.clientWidth; const width = container.clientWidth || container.parentElement?.clientWidth || 800;
const height = container.clientHeight || 500; const height = container.clientHeight || 500;
// Build nodes and tag-based edges // Build nodes and tag-based edges