diff --git a/web/src/components/KnowledgeGraphSection.vue b/web/src/components/KnowledgeGraphSection.vue index bfb11bfd..ca1e17ee 100644 --- a/web/src/components/KnowledgeGraphSection.vue +++ b/web/src/components/KnowledgeGraphSection.vue @@ -2,10 +2,7 @@
-
- 总节点: {{ graphStats.total_nodes || 0 }} - 总边: {{ graphStats.total_edges || 0 }} -
+
@@ -23,7 +20,6 @@ :initial-limit="graphLimit" :initial-depth="graphDepth" ref="graphViewerRef" - @update:stats="handleViewerStats" />
@@ -109,10 +105,6 @@ const store = useDatabaseStore(); const databaseId = computed(() => store.databaseId); const kbType = computed(() => store.database.kb_type); const kbTypeLabel = computed(() => getKbTypeLabel(kbType.value || 'lightrag')); -const graphStats = computed({ - get: () => store.graphStats, - set: (stats) => store.graphStats = stats -}); const graphViewerRef = ref(null); const showSettings = ref(false); @@ -254,19 +246,6 @@ const scheduleGraphLoad = (delay = 200) => { }, delay); }; -// 处理子组件(Viewer)上报的统计信息,将其写入 database store 的 graphStats -const handleViewerStats = (stats) => { - if (!stats) return; - - // 合并现有 store.graphStats,优先使用来自 viewer 的值 - store.graphStats = { - total_nodes: stats.total_nodes ?? store.graphStats.total_nodes ?? 0, - total_edges: stats.total_edges ?? store.graphStats.total_edges ?? 0, - displayed_nodes: stats.displayed_nodes ?? store.graphStats.displayed_nodes ?? 0, - displayed_edges: stats.displayed_edges ?? store.graphStats.displayed_edges ?? 0, - is_truncated: stats.is_truncated ?? store.graphStats.is_truncated ?? false, - } -} watch( () => props.active, @@ -279,14 +258,6 @@ watch( ); watch(databaseId, () => { - // 重置统计信息 - store.graphStats = { - total_nodes: 0, - total_edges: 0, - displayed_nodes: 0, - displayed_edges: 0, - is_truncated: false - }; clearGraph(); // 只有在新数据库支持图谱时才加载 @@ -297,13 +268,6 @@ watch(databaseId, () => { watch(isGraphSupported, (supported) => { if (!supported) { - store.graphStats = { - total_nodes: 0, - total_edges: 0, - displayed_nodes: 0, - displayed_edges: 0, - is_truncated: false - }; clearGraph(); return; } @@ -339,12 +303,6 @@ onUnmounted(() => { display: flex; align-items: center; gap: 12px; - - .graph-stats { - display: flex; - align-items: center; - gap: 8px; - } } .toolbar-right { diff --git a/web/src/components/KnowledgeGraphViewer.vue b/web/src/components/KnowledgeGraphViewer.vue index a4e60555..241127f4 100644 --- a/web/src/components/KnowledgeGraphViewer.vue +++ b/web/src/components/KnowledgeGraphViewer.vue @@ -698,13 +698,10 @@ const loadGraphData = async () => { // 设置图数据 graphStore.setRawGraph(rawGraph) - // 更新 displayed 计数(当前视图)以及来自后端的 total 计数(整个库) + // 更新当前显示的节点和边数量 graphStore.stats = { displayed_nodes: graphResponse.data.nodes.length, displayed_edges: graphResponse.data.edges.length, - // 从 statsResponse 填充整个知识库的统计信息(后端返回 total_nodes/total_edges) - total_nodes: statsResponse.data.total_nodes ?? graphStore.stats.total_nodes ?? 0, - total_edges: statsResponse.data.total_edges ?? graphStore.stats.total_edges ?? 0, is_truncated: graphResponse.data.is_truncated } diff --git a/web/src/stores/database.js b/web/src/stores/database.js index ef089f5d..ae320d91 100644 --- a/web/src/stores/database.js +++ b/web/src/stores/database.js @@ -17,14 +17,7 @@ export const useDatabaseStore = defineStore('database', () => { const queryParams = ref([]); const meta = reactive({}); - const graphStats = ref({ - total_nodes: 0, - total_edges: 0, - displayed_nodes: 0, - displayed_edges: 0, - is_truncated: false, - }); - const selectedRowKeys = ref([]); + const selectedRowKeys = ref([]); const state = reactive({ databaseLoading: false, @@ -377,7 +370,6 @@ export const useDatabaseStore = defineStore('database', () => { selectedFile, queryParams, meta, - graphStats, selectedRowKeys, state, getDatabaseInfo, diff --git a/web/src/stores/graphStore.js b/web/src/stores/graphStore.js index 870f3a63..d765a490 100644 --- a/web/src/stores/graphStore.js +++ b/web/src/stores/graphStore.js @@ -27,10 +27,9 @@ export const useGraphStore = defineStore('graph', { // 图统计信息 stats: { - total_nodes: 0, - total_edges: 0, displayed_nodes: 0, - displayed_edges: 0 + displayed_edges: 0, + is_truncated: false } }), @@ -44,9 +43,9 @@ export const useGraphStore = defineStore('graph', { // 获取选中边的详细信息 selectedEdgeData: (state) => { if (!state.selectedEdge || !state.rawGraph) return null - + console.log('查找边数据,选中边ID:', state.selectedEdge) - + // 首先尝试通过dynamicId匹配(Sigma使用的ID格式) let foundEdge = state.rawGraph.edges.find(edge => edge.dynamicId === state.selectedEdge) if (foundEdge) { @@ -66,7 +65,7 @@ export const useGraphStore = defineStore('graph', { const match = state.selectedEdge.match(dynamicIdPattern) if (match) { const [, source, target, index] = match - foundEdge = state.rawGraph.edges.find(edge => + foundEdge = state.rawGraph.edges.find(edge => edge.source === source && edge.target === target ) if (foundEdge) { @@ -204,10 +203,9 @@ export const useGraphStore = defineStore('graph', { updateStats() { if (this.rawGraph) { this.stats = { - total_nodes: this.rawGraph.nodes.length, - total_edges: this.rawGraph.edges.length, displayed_nodes: this.rawGraph.nodes.length, - displayed_edges: this.rawGraph.edges.length + displayed_edges: this.rawGraph.edges.length, + is_truncated: this.rawGraph.is_truncated ?? this.stats?.is_truncated ?? false } } }, @@ -417,10 +415,9 @@ export const useGraphStore = defineStore('graph', { this.moveToSelectedNode = false this.graphIsEmpty = false this.stats = { - total_nodes: 0, - total_edges: 0, displayed_nodes: 0, - displayed_edges: 0 + displayed_edges: 0, + is_truncated: false } } }