fix: 优化知识图谱测试api问题

This commit is contained in:
hhs
2026-04-05 15:14:50 +08:00
parent c500d75b12
commit 1d0fbde066
+54 -30
View File
@@ -23,7 +23,7 @@ export const GraphView = ({
const graphRef = useRef<Graph | null>(null);
useEffect(() => {
if (!containerRef.current || graphRef.current) return;
if (!containerRef.current) return;
try {
const graphData = {
@@ -39,11 +39,54 @@ export const GraphView = ({
})),
};
if (graphRef.current) {
graphRef.current.destroy();
graphRef.current = null;
}
const processedGraphData = {
nodes: graphData.nodes.map((node: any) => {
const typeColors: Record<string, Record<string, string>> = {
'概念': { fill: '#4ECDC4', stroke: '#45B7B0', text: '#2C3E50' },
'工具': { fill: '#FFA07A', stroke: '#FF7F50', text: '#2C3E50' },
'应用': { fill: '#2ECC71', stroke: '#27AE60', text: '#2C3E50' },
};
const colors = typeColors[node.type] || { fill: '#C6E5FF', stroke: '#5B8FF9', text: '#2C3E50' };
return {
...node,
type: 'circle',
style: {
size: 40,
fill: colors.fill,
stroke: colors.stroke,
lineWidth: 2,
cursor: 'pointer',
},
data: {
...node,
originalType: node.type,
colors,
},
};
}),
edges: graphData.edges.map((edge: any) => ({
...edge,
type: 'cubic-vertical',
style: {
stroke: '#95A5A6',
lineWidth: 2,
cursor: 'pointer',
},
})),
};
const graph = new Graph({
container: containerRef.current,
width: containerRef.current.clientWidth,
height: height,
data: graphData as any,
data: processedGraphData as any,
autoFit: 'view',
layout: {
type: layout.type,
@@ -52,51 +95,33 @@ export const GraphView = ({
linkDistance: layout.linkDistance || 100,
},
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'hover-activate'],
node: {
style: {
size: 40,
fill: '#C6E5FF',
stroke: '#5B8FF9',
lineWidth: 2,
},
},
edge: {
type: 'cubic',
style: {
stroke: '#e2e2e2',
lineWidth: 2,
},
},
});
graphRef.current = graph;
graph.render();
graph.on('node:click', (evt) => {
const eventData = evt as { itemId?: string };
if (eventData.itemId) {
const nodeData = data.nodes.find((n: Node) => n.id === eventData.itemId);
if (nodeData && onNodeClick) {
if (evt.itemId && onNodeClick) {
const nodeData = data.nodes.find((n: Node) => n.id === evt.itemId);
if (nodeData) {
onNodeClick(nodeData);
}
}
});
graph.on('edge:click', (evt) => {
const eventData = evt as { itemId?: string };
if (eventData.itemId) {
const edgeData = data.edges.find((e: Edge) => e.id === eventData.itemId);
if (edgeData && onEdgeClick) {
if (evt.itemId && onEdgeClick) {
const edgeData = data.edges.find((e: Edge) => e.id === evt.itemId);
if (edgeData) {
onEdgeClick(edgeData);
}
}
});
graph.on('node:mouseenter', (evt) => {
const eventData = evt as { itemId?: string };
if (eventData.itemId) {
const nodeData = data.nodes.find((n: Node) => n.id === eventData.itemId);
if (nodeData && onNodeHover) {
if (evt.itemId && onNodeHover) {
const nodeData = data.nodes.find((n: Node) => n.id === evt.itemId);
if (nodeData) {
onNodeHover(nodeData);
}
}
@@ -129,7 +154,6 @@ export const GraphView = ({
onNodeClick,
onEdgeClick,
onNodeHover,
data,
]);
useEffect(() => {