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

- 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

View file

@ -468,7 +468,7 @@
</div>
<!-- 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">
<template x-for="cat in categories" :key="cat">
<label class="flex items-center gap-1 text-sm cursor-pointer" style="color: var(--text-secondary)">

View file

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