fix(ui): KG graph review fixes — edge colors, fetch limit, double fitView

- 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)
This commit is contained in:
viettranx committed 2026-03-30 16:53:14 +07:00
1 parent 88f4fa264a
commit 989e4f3123
2 files changed
+6 -5

No files matched your search

@@ -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);
},
+5 -4
View File
@@ -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 }}
>