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:
parent
c130bcff33
commit
e5a69d4e3e
2 changed files with 3 additions and 3 deletions
|
|
@ -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)">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue