diff --git a/frontend/src/pages/KnowledgeGraph.tsx b/frontend/src/pages/KnowledgeGraph.tsx index e4adebd..9df7c00 100644 --- a/frontend/src/pages/KnowledgeGraph.tsx +++ b/frontend/src/pages/KnowledgeGraph.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useMemo, useState } from 'react'; import GraphView from '../components/GraphView/index'; import SearchBar from '../components/SearchBar/index'; import NodePanel from '../components/NodePanel/index'; @@ -28,6 +28,7 @@ export const KnowledgeGraph = () => { } = useGraphData(); const { layout } = useGraphLayout(); + const [isExpanded, setIsExpanded] = useState(false); const legendData = useMemo(() => { if (!graphData || graphData.nodes.length === 0) { @@ -36,6 +37,11 @@ export const KnowledgeGraph = () => { return generateLegendData(graphData); }, [graphData]); + const propertiesList = useMemo(() => { + if (!hoveredNode?.properties) return []; + return Object.entries(hoveredNode.properties); + }, [hoveredNode]); + return (
{loading ? ( @@ -72,10 +78,75 @@ export const KnowledgeGraph = () => { /> {hoveredNode && ( -
-
{hoveredNode.label}
- {hoveredNode.type && ( -
{hoveredNode.type}
+
+ {!isExpanded ? ( +
+
+
{hoveredNode.label}
+
+ {hoveredNode.type && ( +
+ {hoveredNode.type} +
+ )} + {propertiesList.length > 0 && ( +
+ {propertiesList.slice(0, 2).map(([key, value]) => ( +
+ {key}: + + {typeof value === 'object' ? JSON.stringify(value) : String(value)} + +
+ ))} + {propertiesList.length > 2 && ( +
还有 {propertiesList.length - 2} 项属性...
+ )} +
+ )} + {propertiesList.length > 0 && ( + + )} +
+ ) : ( +
+
+
{hoveredNode.label}
+ +
+ {hoveredNode.type && ( +
+ {hoveredNode.type} +
+ )} + {propertiesList.length > 0 && ( +
+
+ 属性 ({propertiesList.length}) +
+
+ {propertiesList.map(([key, value]) => ( +
+ {key}: + + {typeof value === 'object' ? JSON.stringify(value) : String(value)} + +
+ ))} +
+
+ )} +
)}
)}