864 lines
28 KiB
TypeScript
864 lines
28 KiB
TypeScript
import { Loader2, Network, RotateCcw, Tags, Undo2 } from "lucide-react";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { toast } from "sonner";
|
|
|
|
import {
|
|
GraphCanvas,
|
|
type GraphCanvasHandle,
|
|
} from "@/components/knowledge-graph/GraphCanvas";
|
|
import { GraphDetailPanel } from "@/components/knowledge-graph/GraphDetailPanel";
|
|
import { GraphFooter } from "@/components/knowledge-graph/GraphFooter";
|
|
import { GraphHeader } from "@/components/knowledge-graph/GraphHeader";
|
|
import { GraphSidebar } from "@/components/knowledge-graph/GraphSidebar";
|
|
import { GraphTooltip } from "@/components/knowledge-graph/GraphTooltip";
|
|
import type {
|
|
ExploreStep,
|
|
GraphMode,
|
|
LayoutType,
|
|
NodeKind,
|
|
TooltipState,
|
|
} from "@/components/knowledge-graph/graphTypes";
|
|
import {
|
|
computeDegrees,
|
|
computeGraphStats,
|
|
getEdgeId,
|
|
getEdgeLabel,
|
|
getNodeKind,
|
|
getNodeTitle,
|
|
} from "@/components/knowledge-graph/graphUtils";
|
|
import "@/components/knowledge-graph/graphStyles.css";
|
|
import { themeToBaseMode, useTheme } from "@/contexts/ThemeContext";
|
|
import {
|
|
useGraphBlacklist,
|
|
useGraphBlacklistActions,
|
|
useKnowledgeGraph,
|
|
useKnowledgeNote,
|
|
} from "@/core/knowledge/hooks";
|
|
|
|
/** 全量图谱默认只渲染度数最高的核心节点,超出可手动切换显示全部。 */
|
|
const FULL_GRAPH_NODE_LIMIT = 300;
|
|
|
|
/** 常见的低价值实体名(抽取噪声),用于"一键清理"候选。 */
|
|
const GENERIC_ENTITY_LABELS = new Set([
|
|
"用户",
|
|
"助手",
|
|
"系统",
|
|
"问题",
|
|
"回答",
|
|
"内容",
|
|
"信息",
|
|
"数据",
|
|
"功能",
|
|
"方法",
|
|
"结果",
|
|
"示例",
|
|
"例子",
|
|
"总结",
|
|
"文档",
|
|
"文件",
|
|
"其他",
|
|
"未知",
|
|
"对话",
|
|
"聊天",
|
|
"测试",
|
|
"工具",
|
|
"平台",
|
|
"项目",
|
|
"任务",
|
|
"报告",
|
|
"分析",
|
|
"none",
|
|
"null",
|
|
"unknown",
|
|
"test",
|
|
"todo",
|
|
]);
|
|
|
|
/** 单字符、纯数字/符号(日期等)或通用泛词视为低价值主题。 */
|
|
function isLowValueLabel(raw: string): boolean {
|
|
const label = raw.trim();
|
|
if (label.length <= 1) return true;
|
|
if (/^[\d\s\p{P}\p{S}]+$/u.test(label)) return true;
|
|
return GENERIC_ENTITY_LABELS.has(label.toLowerCase());
|
|
}
|
|
|
|
export default function KnowledgeGraphPage() {
|
|
const navigate = useNavigate();
|
|
const { theme } = useTheme();
|
|
const pageRef = useRef<HTMLDivElement>(null);
|
|
const canvasRef = useRef<GraphCanvasHandle>(null);
|
|
|
|
const { data, isLoading, isError, error, refetch, isFetching } =
|
|
useKnowledgeGraph();
|
|
const { data: blacklistItems = [] } = useGraphBlacklist();
|
|
const blacklistActions = useGraphBlacklistActions();
|
|
|
|
// ------------------------------------------------------------------ state
|
|
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
|
|
const [searchKeyword, setSearchKeyword] = useState("");
|
|
const [disabledNodeKinds, setDisabledNodeKinds] = useState<Set<NodeKind>>(
|
|
new Set(),
|
|
);
|
|
const [disabledEdgeLabels, setDisabledEdgeLabels] = useState<Set<string>>(
|
|
new Set(),
|
|
);
|
|
const [hiddenNodeIds, setHiddenNodeIds] = useState<Set<string>>(new Set());
|
|
const [showAllNodes, setShowAllNodes] = useState(false);
|
|
const [layoutType, setLayoutType] = useState<LayoutType>("force");
|
|
const [showLabels, setShowLabels] = useState(true);
|
|
const [showSidebar, setShowSidebar] = useState(true);
|
|
const [showDetail, setShowDetail] = useState(false);
|
|
const [zoomLevel, setZoomLevel] = useState(1);
|
|
const [tooltip, setTooltip] = useState<TooltipState | null>(null);
|
|
const [graphMode, setGraphMode] = useState<GraphMode>("full");
|
|
const [exploreRootId, setExploreRootId] = useState<string | null>(null);
|
|
const [expandedNodeIds, setExpandedNodeIds] = useState<Set<string>>(new Set());
|
|
const [visibleNodeIds, setVisibleNodeIds] = useState<Set<string>>(new Set());
|
|
const [visibleEdgeIds, setVisibleEdgeIds] = useState<Set<string>>(new Set());
|
|
const [nodeDepthMap, setNodeDepthMap] = useState<Map<string, number>>(new Map());
|
|
const [exploreHistory, setExploreHistory] = useState<ExploreStep[]>([]);
|
|
|
|
// Auto-collapse the side panels on narrow viewports.
|
|
useEffect(() => {
|
|
const detailQuery = window.matchMedia("(max-width: 1280px)");
|
|
const sidebarQuery = window.matchMedia("(max-width: 900px)");
|
|
const apply = () => {
|
|
if (detailQuery.matches) setShowDetail(false);
|
|
setShowSidebar(!sidebarQuery.matches);
|
|
};
|
|
apply();
|
|
detailQuery.addEventListener("change", apply);
|
|
sidebarQuery.addEventListener("change", apply);
|
|
return () => {
|
|
detailQuery.removeEventListener("change", apply);
|
|
sidebarQuery.removeEventListener("change", apply);
|
|
};
|
|
}, []);
|
|
|
|
// ---------------------------------------------------------------- derived
|
|
const allNodes = useMemo(() => data?.nodes ?? [], [data]);
|
|
const allEdges = useMemo(() => data?.edges ?? [], [data]);
|
|
|
|
const nodeById = useMemo(
|
|
() => new Map(allNodes.map((n) => [n.id, n])),
|
|
[allNodes],
|
|
);
|
|
const degrees = useMemo(
|
|
() => computeDegrees(allNodes, allEdges),
|
|
[allNodes, allEdges],
|
|
);
|
|
const stats = useMemo(
|
|
() => computeGraphStats(allNodes, allEdges),
|
|
[allNodes, allEdges],
|
|
);
|
|
|
|
const nodeKindCounts = useMemo(() => {
|
|
const counts = new Map<NodeKind, number>();
|
|
for (const n of allNodes) {
|
|
const kind = getNodeKind(n);
|
|
counts.set(kind, (counts.get(kind) ?? 0) + 1);
|
|
}
|
|
return counts;
|
|
}, [allNodes]);
|
|
|
|
const edgeLabelCounts = useMemo(() => {
|
|
const counts = new Map<string, number>();
|
|
for (const e of allEdges) {
|
|
const label = getEdgeLabel(e);
|
|
counts.set(label, (counts.get(label) ?? 0) + 1);
|
|
}
|
|
return counts;
|
|
}, [allEdges]);
|
|
|
|
const filteredNodes = useMemo(
|
|
() =>
|
|
allNodes.filter(
|
|
(n) => !disabledNodeKinds.has(getNodeKind(n)) && !hiddenNodeIds.has(n.id),
|
|
),
|
|
[allNodes, disabledNodeKinds, hiddenNodeIds],
|
|
);
|
|
|
|
const filteredEdges = useMemo(() => {
|
|
const visible = new Set(filteredNodes.map((n) => n.id));
|
|
return allEdges.filter(
|
|
(e) =>
|
|
visible.has(e.source) &&
|
|
visible.has(e.target) &&
|
|
!disabledEdgeLabels.has(getEdgeLabel(e)),
|
|
);
|
|
}, [allEdges, filteredNodes, disabledEdgeLabels]);
|
|
|
|
// 节点过多时全量模式默认只渲染度数最高的核心节点,避免布局/渲染卡顿。
|
|
const fullGraphTruncated =
|
|
!showAllNodes && filteredNodes.length > FULL_GRAPH_NODE_LIMIT;
|
|
const limitedNodes = useMemo(() => {
|
|
if (!fullGraphTruncated) return filteredNodes;
|
|
return [...filteredNodes]
|
|
.sort((a, b) => (degrees.get(b.id) ?? 0) - (degrees.get(a.id) ?? 0))
|
|
.slice(0, FULL_GRAPH_NODE_LIMIT);
|
|
}, [filteredNodes, fullGraphTruncated, degrees]);
|
|
const limitedEdges = useMemo(() => {
|
|
if (!fullGraphTruncated) return filteredEdges;
|
|
const visible = new Set(limitedNodes.map((n) => n.id));
|
|
return filteredEdges.filter(
|
|
(e) => visible.has(e.source) && visible.has(e.target),
|
|
);
|
|
}, [filteredEdges, fullGraphTruncated, limitedNodes]);
|
|
|
|
const resetExplore = useCallback(() => {
|
|
setExploreRootId(null);
|
|
setExpandedNodeIds(new Set());
|
|
setVisibleNodeIds(new Set());
|
|
setVisibleEdgeIds(new Set());
|
|
setNodeDepthMap(new Map());
|
|
setExploreHistory([]);
|
|
}, []);
|
|
|
|
const rebuildExploreState = useCallback((history: ExploreStep[]) => {
|
|
const nextVisibleNodeIds = new Set<string>();
|
|
const nextVisibleEdgeIds = new Set<string>();
|
|
const nextNodeDepthMap = new Map<string, number>();
|
|
const nextExpandedNodeIds = new Set<string>();
|
|
|
|
for (const step of history) {
|
|
for (const nodeId of step.addedNodeIds) {
|
|
nextVisibleNodeIds.add(nodeId);
|
|
if (!nextNodeDepthMap.has(nodeId)) nextNodeDepthMap.set(nodeId, step.depth);
|
|
}
|
|
for (const edgeId of step.addedEdgeIds) nextVisibleEdgeIds.add(edgeId);
|
|
if (step.depth > 0) nextExpandedNodeIds.add(step.nodeId);
|
|
}
|
|
|
|
setVisibleNodeIds(nextVisibleNodeIds);
|
|
setVisibleEdgeIds(nextVisibleEdgeIds);
|
|
setNodeDepthMap(nextNodeDepthMap);
|
|
setExpandedNodeIds(nextExpandedNodeIds);
|
|
}, []);
|
|
|
|
const startExploreFromNode = useCallback((nodeId: string) => {
|
|
setExploreRootId(nodeId);
|
|
setVisibleNodeIds(new Set([nodeId]));
|
|
setVisibleEdgeIds(new Set());
|
|
setExpandedNodeIds(new Set());
|
|
setNodeDepthMap(new Map([[nodeId, 0]]));
|
|
setExploreHistory([
|
|
{
|
|
nodeId,
|
|
depth: 0,
|
|
addedNodeIds: [nodeId],
|
|
addedEdgeIds: [],
|
|
timestamp: Date.now(),
|
|
},
|
|
]);
|
|
window.setTimeout(() => canvasRef.current?.focusNode(nodeId), 0);
|
|
}, []);
|
|
|
|
const expandOneHop = useCallback(
|
|
(nodeId: string) => {
|
|
const currentDepth = nodeDepthMap.get(nodeId) ?? 0;
|
|
const nextDepth = currentDepth + 1;
|
|
const addedNodeIds: string[] = [];
|
|
const addedEdgeIds: string[] = [];
|
|
const nextVisibleNodeIds = new Set(visibleNodeIds);
|
|
const nextVisibleEdgeIds = new Set(visibleEdgeIds);
|
|
const nextNodeDepthMap = new Map(nodeDepthMap);
|
|
|
|
for (const edge of filteredEdges) {
|
|
if (edge.source !== nodeId && edge.target !== nodeId) continue;
|
|
const edgeId = getEdgeId(edge);
|
|
const neighborId = edge.source === nodeId ? edge.target : edge.source;
|
|
if (!nodeById.has(neighborId)) continue;
|
|
|
|
if (!nextVisibleEdgeIds.has(edgeId)) {
|
|
nextVisibleEdgeIds.add(edgeId);
|
|
addedEdgeIds.push(edgeId);
|
|
}
|
|
if (!nextVisibleNodeIds.has(neighborId)) {
|
|
nextVisibleNodeIds.add(neighborId);
|
|
nextNodeDepthMap.set(neighborId, nextDepth);
|
|
addedNodeIds.push(neighborId);
|
|
}
|
|
}
|
|
|
|
nextVisibleNodeIds.add(nodeId);
|
|
nextNodeDepthMap.set(nodeId, currentDepth);
|
|
setVisibleNodeIds(nextVisibleNodeIds);
|
|
setVisibleEdgeIds(nextVisibleEdgeIds);
|
|
setNodeDepthMap(nextNodeDepthMap);
|
|
setExpandedNodeIds((prev) => new Set(prev).add(nodeId));
|
|
setExploreHistory((prev) => [
|
|
...prev,
|
|
{ nodeId, depth: nextDepth, addedNodeIds, addedEdgeIds, timestamp: Date.now() },
|
|
]);
|
|
},
|
|
[filteredEdges, nodeById, nodeDepthMap, visibleEdgeIds, visibleNodeIds],
|
|
);
|
|
|
|
const undoExploreStep = useCallback(() => {
|
|
if (exploreHistory.length <= 1) {
|
|
resetExplore();
|
|
return;
|
|
}
|
|
const nextHistory = exploreHistory.slice(0, -1);
|
|
setExploreHistory(nextHistory);
|
|
rebuildExploreState(nextHistory);
|
|
}, [exploreHistory, rebuildExploreState, resetExplore]);
|
|
|
|
useEffect(() => {
|
|
if (graphMode === "explore") resetExplore();
|
|
}, [
|
|
disabledNodeKinds,
|
|
disabledEdgeLabels,
|
|
hiddenNodeIds,
|
|
searchKeyword,
|
|
resetExplore,
|
|
]);
|
|
|
|
const displayedGraph = useMemo(() => {
|
|
if (graphMode === "full") return { nodes: limitedNodes, edges: limitedEdges };
|
|
if (!exploreRootId) return { nodes: limitedNodes, edges: [] };
|
|
return {
|
|
nodes: allNodes.filter((node) => visibleNodeIds.has(node.id)),
|
|
edges: allEdges.filter((edge) => visibleEdgeIds.has(getEdgeId(edge))),
|
|
};
|
|
}, [
|
|
allEdges,
|
|
allNodes,
|
|
exploreRootId,
|
|
limitedEdges,
|
|
limitedNodes,
|
|
graphMode,
|
|
visibleEdgeIds,
|
|
visibleNodeIds,
|
|
]);
|
|
|
|
const searchMatchIds = useMemo(() => {
|
|
const keyword = searchKeyword.trim().toLowerCase();
|
|
if (!keyword) return null;
|
|
const matches = new Set<string>();
|
|
for (const n of filteredNodes) {
|
|
if (getNodeTitle(n).toLowerCase().includes(keyword)) matches.add(n.id);
|
|
}
|
|
return matches;
|
|
}, [searchKeyword, filteredNodes]);
|
|
|
|
const topNodes = useMemo(() => {
|
|
// 搜索时核心节点榜单只保留命中的节点,与画布高亮保持一致。
|
|
const pool = searchMatchIds
|
|
? filteredNodes.filter((node) => searchMatchIds.has(node.id))
|
|
: allNodes;
|
|
return pool
|
|
.map((node) => ({ node, degree: degrees.get(node.id) ?? 0 }))
|
|
.sort((a, b) => b.degree - a.degree)
|
|
.slice(0, 8);
|
|
}, [allNodes, filteredNodes, searchMatchIds, degrees]);
|
|
|
|
const selectedNode = selectedNodeId ? (nodeById.get(selectedNodeId) ?? null) : null;
|
|
const selectedNeighbors = useMemo(() => {
|
|
if (!selectedNodeId) return [];
|
|
const items: Array<{ node: (typeof allNodes)[number]; relation: string }> = [];
|
|
const seen = new Set<string>();
|
|
for (const e of displayedGraph.edges) {
|
|
const otherId =
|
|
e.source === selectedNodeId
|
|
? e.target
|
|
: e.target === selectedNodeId
|
|
? e.source
|
|
: null;
|
|
if (!otherId || seen.has(otherId)) continue;
|
|
const other = nodeById.get(otherId);
|
|
if (!other) continue;
|
|
seen.add(otherId);
|
|
items.push({ node: other, relation: getEdgeLabel(e) });
|
|
}
|
|
return items.sort(
|
|
(a, b) => (degrees.get(b.node.id) ?? 0) - (degrees.get(a.node.id) ?? 0),
|
|
);
|
|
}, [selectedNodeId, displayedGraph.edges, nodeById, degrees, allNodes]);
|
|
|
|
// Note detail for note-type nodes (summary / tags / timestamps / status).
|
|
const noteId =
|
|
selectedNode && (selectedNode.type || "").toLowerCase() === "note"
|
|
? selectedNode.id
|
|
: undefined;
|
|
const { data: note, isLoading: noteLoading } = useKnowledgeNote(noteId);
|
|
|
|
// --------------------------------------------------------------- handlers
|
|
const handleSelectNode = useCallback(
|
|
(id: string | null) => {
|
|
if (!id) {
|
|
setSelectedNodeId(null);
|
|
setShowDetail(false);
|
|
return;
|
|
}
|
|
|
|
setSelectedNodeId(id);
|
|
setShowDetail(true);
|
|
|
|
if (graphMode !== "explore") return;
|
|
if (!exploreRootId) {
|
|
startExploreFromNode(id);
|
|
return;
|
|
}
|
|
if (!visibleNodeIds.has(id)) return;
|
|
if (!expandedNodeIds.has(id)) expandOneHop(id);
|
|
},
|
|
[
|
|
expandedNodeIds,
|
|
expandOneHop,
|
|
exploreRootId,
|
|
graphMode,
|
|
startExploreFromNode,
|
|
visibleNodeIds,
|
|
],
|
|
);
|
|
|
|
const handlePickNode = useCallback(
|
|
(id: string) => {
|
|
setSelectedNodeId(id);
|
|
setShowDetail(true);
|
|
if (graphMode === "explore" && !exploreRootId) startExploreFromNode(id);
|
|
canvasRef.current?.focusNode(id);
|
|
},
|
|
[exploreRootId, graphMode, startExploreFromNode],
|
|
);
|
|
|
|
const handleSearchEnter = useCallback(() => {
|
|
if (!searchMatchIds || searchMatchIds.size === 0) return;
|
|
const first = searchMatchIds.values().next().value;
|
|
if (first) handlePickNode(first);
|
|
}, [searchMatchIds, handlePickNode]);
|
|
|
|
const handleToggleNodeKind = useCallback((kind: NodeKind) => {
|
|
setDisabledNodeKinds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(kind)) next.delete(kind);
|
|
else next.add(kind);
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
const handleToggleEdgeLabel = useCallback((label: string) => {
|
|
setDisabledEdgeLabels((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(label)) next.delete(label);
|
|
else next.add(label);
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
const handleHideNode = useCallback(
|
|
(id: string) => {
|
|
setHiddenNodeIds((prev) => new Set(prev).add(id));
|
|
setSelectedNodeId((current) => (current === id ? null : current));
|
|
if (selectedNodeId === id) setShowDetail(false);
|
|
},
|
|
[selectedNodeId],
|
|
);
|
|
|
|
const handleRestoreHidden = useCallback(() => {
|
|
setHiddenNodeIds(new Set());
|
|
}, []);
|
|
|
|
// ------------------------------------------------------------- blacklist
|
|
const addToBlacklist = blacklistActions.add;
|
|
const removeFromBlacklist = blacklistActions.remove;
|
|
|
|
const handleBlacklistNode = useCallback(
|
|
(id: string) => {
|
|
const node = nodeById.get(id);
|
|
if (!node) return;
|
|
const label = getNodeTitle(node);
|
|
addToBlacklist.mutate([label], {
|
|
onSuccess: () => toast.success(`已将「${label}」加入黑名单`),
|
|
onError: (e) =>
|
|
toast.error(e instanceof Error ? e.message : "加入黑名单失败"),
|
|
});
|
|
setSelectedNodeId((current) => (current === id ? null : current));
|
|
if (selectedNodeId === id) setShowDetail(false);
|
|
},
|
|
[nodeById, addToBlacklist, selectedNodeId],
|
|
);
|
|
|
|
const handleRemoveBlacklist = useCallback(
|
|
(entryId: string) => {
|
|
removeFromBlacklist.mutate(entryId, {
|
|
onError: (e) =>
|
|
toast.error(e instanceof Error ? e.message : "移除黑名单失败"),
|
|
});
|
|
},
|
|
[removeFromBlacklist],
|
|
);
|
|
|
|
// 低价值主题候选:实体节点中的单字符 / 纯数字符号 / 通用泛词。
|
|
const junkCandidates = useMemo(() => {
|
|
const blocked = new Set(
|
|
blacklistItems.map((item) => item.label.trim().toLowerCase()),
|
|
);
|
|
const seen = new Set<string>();
|
|
const out: string[] = [];
|
|
for (const n of allNodes) {
|
|
if ((n.type || "").toLowerCase() !== "entity") continue;
|
|
const label = getNodeTitle(n).trim();
|
|
const key = label.toLowerCase();
|
|
if (!label || seen.has(key) || blocked.has(key)) continue;
|
|
if (!isLowValueLabel(label)) continue;
|
|
seen.add(key);
|
|
out.push(label);
|
|
}
|
|
return out;
|
|
}, [allNodes, blacklistItems]);
|
|
|
|
const handleCleanJunk = useCallback(() => {
|
|
if (junkCandidates.length === 0) {
|
|
toast.info("没有发现明显的低价值主题");
|
|
return;
|
|
}
|
|
const preview = junkCandidates.slice(0, 10).join("、");
|
|
const confirmed = window.confirm(
|
|
`将 ${junkCandidates.length} 个低价值主题加入黑名单?\n例如:${preview}${junkCandidates.length > 10 ? " 等" : ""}`,
|
|
);
|
|
if (!confirmed) return;
|
|
addToBlacklist.mutate(junkCandidates, {
|
|
onSuccess: (res) => toast.success(`已清理 ${res.added} 个低价值主题`),
|
|
onError: (e) =>
|
|
toast.error(e instanceof Error ? e.message : "清理失败"),
|
|
});
|
|
}, [junkCandidates, addToBlacklist]);
|
|
|
|
const handleRefresh = useCallback(() => {
|
|
void refetch().then((result) => {
|
|
if (result.isError) {
|
|
toast.error(
|
|
result.error instanceof Error ? result.error.message : "刷新图谱失败",
|
|
);
|
|
}
|
|
});
|
|
}, [refetch]);
|
|
|
|
const handleFullscreen = useCallback(() => {
|
|
const el = pageRef.current;
|
|
if (!el) return;
|
|
if (document.fullscreenElement) void document.exitFullscreen();
|
|
else void el.requestFullscreen();
|
|
}, []);
|
|
|
|
const handleViewSource = useCallback(
|
|
(id: string) => {
|
|
navigate(`/page/workspace/knowledge/${encodeURIComponent(id)}`);
|
|
},
|
|
[navigate],
|
|
);
|
|
|
|
const handleSetExploreRoot = useCallback(
|
|
(id: string) => {
|
|
setGraphMode("explore");
|
|
startExploreFromNode(id);
|
|
setSelectedNodeId(id);
|
|
setShowDetail(true);
|
|
},
|
|
[startExploreFromNode],
|
|
);
|
|
|
|
const exploreDepth = useMemo(() => {
|
|
let max = 0;
|
|
for (const depth of nodeDepthMap.values()) max = Math.max(max, depth);
|
|
return max;
|
|
}, [nodeDepthMap]);
|
|
|
|
const exploreRootTitle = exploreRootId
|
|
? getNodeTitle(nodeById.get(exploreRootId) ?? { id: exploreRootId })
|
|
: null;
|
|
|
|
const selectedExploreInfo =
|
|
graphMode === "explore" && selectedNodeId
|
|
? {
|
|
depth: nodeDepthMap.get(selectedNodeId) ?? null,
|
|
expanded: expandedNodeIds.has(selectedNodeId),
|
|
isRoot: selectedNodeId === exploreRootId,
|
|
}
|
|
: null;
|
|
|
|
// ---------------------------------------------------------------- overlay
|
|
let overlay: React.ReactNode = null;
|
|
if (isLoading) {
|
|
overlay = (
|
|
<div className="kg-canvas-status">
|
|
<Loader2 size={26} className="animate-spin" />
|
|
<div className="kg-canvas-status-title">正在加载知识图谱...</div>
|
|
</div>
|
|
);
|
|
} else if (isError) {
|
|
overlay = (
|
|
<div className="kg-canvas-status">
|
|
<Network size={30} />
|
|
<div className="kg-canvas-status-title">图谱加载失败</div>
|
|
<div className="kg-canvas-status-desc">
|
|
{error instanceof Error ? error.message : "请求失败,请稍后重试。"}
|
|
</div>
|
|
<button type="button" className="kg-icon-button" onClick={handleRefresh}>
|
|
重试
|
|
</button>
|
|
</div>
|
|
);
|
|
} else if (allNodes.length === 0) {
|
|
overlay = (
|
|
<div className="kg-canvas-status">
|
|
<Network size={30} />
|
|
<div className="kg-canvas-status-title">暂无知识图谱数据</div>
|
|
<div className="kg-canvas-status-desc">
|
|
请先导入知识文档,或从知识库中抽取实体、标签与关系后再查看图谱。
|
|
</div>
|
|
</div>
|
|
);
|
|
} else if (filteredNodes.length === 0) {
|
|
overlay = (
|
|
<div className="kg-canvas-status">
|
|
<Network size={30} />
|
|
<div className="kg-canvas-status-title">当前筛选没有可显示的节点</div>
|
|
<div className="kg-canvas-status-desc">
|
|
请在左侧勾选更多节点类型,或恢复已隐藏的节点。
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const toolbar = (
|
|
<>
|
|
<div className="kg-floating-pill">
|
|
<span className="kg-pill-label">模式</span>
|
|
<button
|
|
type="button"
|
|
className={`kg-pill-button${graphMode === "explore" ? " kg-pill-button-active" : ""}`}
|
|
onClick={() => setGraphMode("explore")}
|
|
>
|
|
探索模式
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`kg-pill-button${graphMode === "full" ? " kg-pill-button-active" : ""}`}
|
|
onClick={() => setGraphMode("full")}
|
|
>
|
|
全量图谱
|
|
</button>
|
|
</div>
|
|
{graphMode === "explore" ? (
|
|
<>
|
|
<div className="kg-floating-pill">
|
|
起点：{exploreRootTitle ? exploreRootTitle : "未选择"}
|
|
</div>
|
|
<div className="kg-floating-pill">
|
|
深度 {exploreDepth} · 已显示 {displayedGraph.nodes.length} 节点 /{" "}
|
|
{displayedGraph.edges.length} 关系
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="kg-explore-button"
|
|
disabled={exploreHistory.length === 0}
|
|
onClick={undoExploreStep}
|
|
>
|
|
<Undo2 size={13} /> 返回上一层
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="kg-explore-button"
|
|
disabled={!exploreRootId}
|
|
onClick={resetExplore}
|
|
>
|
|
<RotateCcw size={13} /> 重置探索
|
|
</button>
|
|
</>
|
|
) : null}
|
|
{graphMode === "full" && filteredNodes.length > FULL_GRAPH_NODE_LIMIT ? (
|
|
<div className="kg-floating-pill">
|
|
{fullGraphTruncated
|
|
? `节点较多,已显示核心 ${FULL_GRAPH_NODE_LIMIT} / ${filteredNodes.length}`
|
|
: `已显示全部 ${filteredNodes.length} 个节点`}
|
|
<button
|
|
type="button"
|
|
className="kg-pill-button"
|
|
title={
|
|
fullGraphTruncated
|
|
? "渲染全部节点(节点很多时可能卡顿)"
|
|
: "只渲染度数最高的核心节点"
|
|
}
|
|
onClick={() => setShowAllNodes((v) => !v)}
|
|
>
|
|
{fullGraphTruncated ? "显示全部" : "仅核心节点"}
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
<div className="kg-floating-pill">
|
|
<span className="kg-pill-label">布局</span>
|
|
<button
|
|
type="button"
|
|
className={`kg-pill-button${layoutType === "force" ? " kg-pill-button-active" : ""}`}
|
|
onClick={() => setLayoutType("force")}
|
|
>
|
|
力导向
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`kg-pill-button${layoutType === "circular" ? " kg-pill-button-active" : ""}`}
|
|
onClick={() => setLayoutType("circular")}
|
|
>
|
|
环形
|
|
</button>
|
|
</div>
|
|
<div className="kg-floating-pill">
|
|
<button
|
|
type="button"
|
|
className={`kg-pill-button${showLabels ? " kg-pill-button-active" : ""}`}
|
|
onClick={() => setShowLabels((v) => !v)}
|
|
>
|
|
<Tags size={13} /> 标签 {showLabels ? "开" : "关"}
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
const hint =
|
|
graphMode === "explore" ? (
|
|
<div className="kg-canvas-hint">
|
|
{!exploreRootId
|
|
? "点击任意节点作为起点，开始逐层探索知识关系。"
|
|
: "点击已显示节点，可继续展开它的一跳邻居。已展开的节点和路径会保留。"}
|
|
</div>
|
|
) : null;
|
|
|
|
return (
|
|
<div className="kg-page" ref={pageRef}>
|
|
<GraphHeader
|
|
nodeCount={displayedGraph.nodes.length}
|
|
edgeCount={displayedGraph.edges.length}
|
|
totalNodes={allNodes.length}
|
|
totalEdges={allEdges.length}
|
|
refreshing={isFetching}
|
|
onBack={() => navigate("/page/workspace/knowledge")}
|
|
onRelayout={() => canvasRef.current?.relayout()}
|
|
onFitView={() => canvasRef.current?.fitView()}
|
|
onZoomIn={() => canvasRef.current?.zoomIn()}
|
|
onZoomOut={() => canvasRef.current?.zoomOut()}
|
|
onExport={() => canvasRef.current?.exportImage()}
|
|
onFullscreen={handleFullscreen}
|
|
onRefresh={handleRefresh}
|
|
/>
|
|
|
|
<div
|
|
className={[
|
|
"kg-body",
|
|
showSidebar ? "" : "kg-hide-left",
|
|
showDetail ? "" : "kg-hide-right",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
>
|
|
{showSidebar ? (
|
|
<GraphSidebar
|
|
searchKeyword={searchKeyword}
|
|
searchMatchCount={searchMatchIds ? searchMatchIds.size : null}
|
|
nodeKindCounts={nodeKindCounts}
|
|
edgeLabelCounts={edgeLabelCounts}
|
|
disabledNodeKinds={disabledNodeKinds}
|
|
disabledEdgeLabels={disabledEdgeLabels}
|
|
stats={stats}
|
|
topNodes={topNodes}
|
|
hiddenCount={hiddenNodeIds.size}
|
|
blacklistItems={blacklistItems}
|
|
blacklistPending={addToBlacklist.isPending || removeFromBlacklist.isPending}
|
|
junkCandidateCount={junkCandidates.length}
|
|
onSearchChange={setSearchKeyword}
|
|
onSearchEnter={handleSearchEnter}
|
|
onToggleNodeKind={handleToggleNodeKind}
|
|
onToggleEdgeLabel={handleToggleEdgeLabel}
|
|
onRestoreHidden={handleRestoreHidden}
|
|
onRemoveBlacklist={handleRemoveBlacklist}
|
|
onCleanJunk={handleCleanJunk}
|
|
onPickNode={handlePickNode}
|
|
onClose={() => setShowSidebar(false)}
|
|
/>
|
|
) : null}
|
|
|
|
<div className="kg-canvas-shell">
|
|
{!showSidebar ? (
|
|
<button
|
|
type="button"
|
|
className="kg-side-rail-toggle kg-side-rail-toggle-left"
|
|
onClick={() => setShowSidebar(true)}
|
|
>
|
|
筛选
|
|
</button>
|
|
) : null}
|
|
<GraphCanvas
|
|
ref={canvasRef}
|
|
nodes={displayedGraph.nodes}
|
|
edges={displayedGraph.edges}
|
|
degrees={degrees}
|
|
selectedNodeId={selectedNodeId}
|
|
searchMatchIds={searchMatchIds}
|
|
layoutType={layoutType}
|
|
showLabels={showLabels}
|
|
theme={themeToBaseMode(theme)}
|
|
onSelectNode={handleSelectNode}
|
|
onTooltip={setTooltip}
|
|
onZoomChange={setZoomLevel}
|
|
explore={
|
|
graphMode === "explore"
|
|
? {
|
|
preview: !exploreRootId,
|
|
rootId: exploreRootId,
|
|
nodeDepthMap,
|
|
expandedNodeIds,
|
|
}
|
|
: null
|
|
}
|
|
toolbar={toolbar}
|
|
hint={hint}
|
|
overlay={overlay}
|
|
/>
|
|
{!showDetail ? (
|
|
<button
|
|
type="button"
|
|
className="kg-side-rail-toggle kg-side-rail-toggle-right"
|
|
onClick={() => setShowDetail(true)}
|
|
>
|
|
详情
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
{showDetail ? (
|
|
<GraphDetailPanel
|
|
node={selectedNode}
|
|
degree={selectedNodeId ? (degrees.get(selectedNodeId) ?? 0) : 0}
|
|
neighbors={selectedNeighbors}
|
|
note={noteId ? note : undefined}
|
|
noteLoading={Boolean(noteId) && noteLoading}
|
|
explore={selectedExploreInfo}
|
|
onViewSource={handleViewSource}
|
|
onLocate={(id) => canvasRef.current?.focusNode(id)}
|
|
onHide={handleHideNode}
|
|
onBlacklist={handleBlacklistNode}
|
|
onPickNeighbor={handlePickNode}
|
|
onExpandNode={expandOneHop}
|
|
onSetExploreRoot={handleSetExploreRoot}
|
|
onClose={() => setShowDetail(false)}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
|
|
<GraphFooter
|
|
nodeKindCounts={nodeKindCounts}
|
|
edgeLabels={[...edgeLabelCounts.keys()]}
|
|
zoomLevel={zoomLevel}
|
|
selectedTitle={selectedNode ? getNodeTitle(selectedNode) : null}
|
|
visibleNodes={displayedGraph.nodes.length}
|
|
visibleEdges={displayedGraph.edges.length}
|
|
/>
|
|
|
|
<GraphTooltip tooltip={tooltip} />
|
|
</div>
|
|
);
|
|
}
|