From e5a69d4e3e0cd3744b706c898fbcebb9b44eefe9 Mon Sep 17 00:00:00 2001
From: Viktor Barzin <viktorbarzin@meta.com>
Date: Sun, 22 Mar 2026 23:43:05 +0200
Subject: [PATCH] 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
---
 src/claude_memory/ui/static/index.html  | 2 +-
 src/claude_memory/ui/static/js/graph.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/claude_memory/ui/static/index.html b/src/claude_memory/ui/static/index.html
index ecb26fc..c28d499 100644
--- a/src/claude_memory/ui/static/index.html
+++ b/src/claude_memory/ui/static/index.html
@@ -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)">
diff --git a/src/claude_memory/ui/static/js/graph.js b/src/claude_memory/ui/static/js/graph.js
index 6fa4d60..0072e03 100644
--- a/src/claude_memory/ui/static/js/graph.js
+++ b/src/claude_memory/ui/static/js/graph.js
@@ -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