mirror of
https://github.com/tiennm99/goclaw.git
synced 2026-10-14 20:17:20 +00:00
fix(ui): enable search filtering on knowledge graph view (#758)
Search box on /knowledge-graph only filtered table view. Add useMemo client-side filtering of graph entities by name/type/description, only show relations where both endpoints match. Closes #759
This commit is contained in:
1 parent
968599feeb
commit
417a437cc7
1 file changed
+21
-3
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useMemo } from "react";
|
||||
import { Network, Trash2, Search, GitFork, Sparkles, RefreshCw, LayoutGrid, Share2, Merge } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -42,6 +42,24 @@ export function KGEntitiesTab({ agentId, userId }: KGEntitiesTabProps) {
|
||||
const graphData = useKGGraph(agentId, userId);
|
||||
const showSkeleton = useDeferredLoading(loading && entities.length === 0);
|
||||
|
||||
// Filter graph data by search query (client-side)
|
||||
const filteredGraphData = useMemo(() => {
|
||||
if (!appliedQuery) return graphData;
|
||||
const q = appliedQuery.toLowerCase();
|
||||
const matchedIds = new Set<string>();
|
||||
const matched = graphData.entities.filter((e) => {
|
||||
const hit = e.name.toLowerCase().includes(q)
|
||||
|| e.entity_type.toLowerCase().includes(q)
|
||||
|| (e.description ?? "").toLowerCase().includes(q);
|
||||
if (hit) matchedIds.add(e.id);
|
||||
return hit;
|
||||
});
|
||||
const relations = graphData.relations.filter(
|
||||
(r) => matchedIds.has(r.source_entity_id) && matchedIds.has(r.target_entity_id),
|
||||
);
|
||||
return { entities: matched, relations };
|
||||
}, [graphData, appliedQuery]);
|
||||
|
||||
const handleSearch = () => setAppliedQuery(searchQuery.trim());
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") handleSearch();
|
||||
@@ -130,8 +148,8 @@ export function KGEntitiesTab({ agentId, userId }: KGEntitiesTabProps) {
|
||||
<div className="min-h-0 flex-1">
|
||||
{viewMode === "graph" ? (
|
||||
<KGGraphView
|
||||
entities={graphData.entities}
|
||||
relations={graphData.relations}
|
||||
entities={filteredGraphData.entities}
|
||||
relations={filteredGraphData.relations}
|
||||
onEntityClick={setViewEntity}
|
||||
/>
|
||||
) : showSkeleton ? (
|
||||
|
||||
Reference in new issue
Block a user