From 989e4f31235b053a2f2886761eb3fc5a44b1da83 Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Mon, 30 Mar 2026 16:53:14 +0700
Subject: [PATCH] =?UTF-8?q?fix(ui):=20KG=20graph=20review=20fixes=20?=
 =?UTF-8?q?=E2=80=94=20edge=20colors,=20fetch=20limit,=20double=20fitView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix hardcoded dark edge color on deselect — use neutral #64748b
- Reduce graph fetch limit 200→50 to match component render cap
- Fix O(n*m) node lookup on theme change — use Map for O(1)
- Remove double fitView (prop + manual call)
---
 ui/web/src/pages/memory/hooks/use-knowledge-graph.ts | 2 +-
 ui/web/src/pages/memory/kg-graph-view.tsx            | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/web/src/pages/memory/hooks/use-knowledge-graph.ts b/ui/web/src/pages/memory/hooks/use-knowledge-graph.ts
index db27cc97..5ac1d33d 100644
--- a/ui/web/src/pages/memory/hooks/use-knowledge-graph.ts
+++ b/ui/web/src/pages/memory/hooks/use-knowledge-graph.ts
@@ -141,7 +141,7 @@ export function useKGGraph(agentId: string, userId?: string) {
     queryKey: queryKeys.kg.graph(agentId, userId),
     queryFn: async () => {
       if (!agentId) return { entities: [], relations: [] };
-      const params: Record<string, string> = { limit: "200" };
+      const params: Record<string, string> = { limit: "50" };
       if (userId) params.user_id = userId;
       return http.get<KGGraphData>(`/v1/agents/${agentId}/kg/graph`, params);
     },
diff --git a/ui/web/src/pages/memory/kg-graph-view.tsx b/ui/web/src/pages/memory/kg-graph-view.tsx
index d2ab87d3..1940330b 100644
--- a/ui/web/src/pages/memory/kg-graph-view.tsx
+++ b/ui/web/src/pages/memory/kg-graph-view.tsx
@@ -179,9 +179,10 @@ function KGGraphViewInner({ entities: allEntities, relations: allRelations, onEn
   useEffect(() => {
     if (dataKey === layoutKey) {
       // Theme change only — update node colors without re-layout
+      const freshMap = new Map(rawNodes.map((r) => [r.id, r.data]));
       setNodes((prev) => prev.map((n) => {
-        const fresh = rawNodes.find((r) => r.id === n.id);
-        return fresh ? { ...n, data: fresh.data } : n;
+        const data = freshMap.get(n.id);
+        return data ? { ...n, data } : n;
       }));
       return;
     }
@@ -207,7 +208,7 @@ function KGGraphViewInner({ entities: allEntities, relations: allRelations, onEn
     if (!selectedNodeId) {
       setEdges((eds) => eds.map((e) => ({
         ...e, label: undefined, animated: false,
-        style: { stroke: "#334155", strokeWidth: 1, opacity: 0.4 },
+        style: { stroke: "#64748b", strokeWidth: 2, opacity: 0.6 },
         labelStyle: undefined, labelBgStyle: undefined, labelBgPadding: undefined, labelShowBg: undefined,
       })));
       return;
@@ -261,7 +262,7 @@ function KGGraphViewInner({ entities: allEntities, relations: allRelations, onEn
           onNodesChange={onNodesChange} onEdgesChange={onEdgesChange}
           onNodeClick={handleNodeClick} onPaneClick={handlePaneClick}
           nodeTypes={nodeTypes} colorMode={colorMode}
-          fitView minZoom={0.1} maxZoom={3}
+          minZoom={0.1} maxZoom={3}
           nodesConnectable={false} nodesDraggable={true} elementsSelectable={true}
           proOptions={{ hideAttribution: true }}
         >