32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { toCssPx } from "@/core/ui/page-zoom";
|
|
|
|
import type { TooltipState } from "./graphTypes";
|
|
import { getNodeTitle, NODE_KIND_META } from "./graphUtils";
|
|
|
|
interface GraphTooltipProps {
|
|
tooltip: TooltipState | null;
|
|
}
|
|
|
|
export function GraphTooltip({ tooltip }: GraphTooltipProps) {
|
|
if (!tooltip) return null;
|
|
const meta = NODE_KIND_META[tooltip.kind];
|
|
// Keep the tooltip inside the viewport.
|
|
const left = Math.min(toCssPx(tooltip.x) + 14, window.innerWidth - 336);
|
|
const top = Math.min(toCssPx(tooltip.y) + 14, window.innerHeight - 120);
|
|
|
|
return (
|
|
<div className="kg-tooltip" style={{ left, top }}>
|
|
<div className="kg-tooltip-title">{getNodeTitle(tooltip.node)}</div>
|
|
<div className="kg-tooltip-desc">
|
|
<span className="kg-legend-item">
|
|
<span className="kg-legend-dot" style={{ background: meta.color }} />
|
|
{meta.label}
|
|
</span>
|
|
{tooltip.node.category ? <span>· {tooltip.node.category}</span> : null}
|
|
<span>· 度数 {tooltip.degree}</span>
|
|
</div>
|
|
<div className="kg-tooltip-hint">单击查看详情 · 双击聚焦 · 拖拽固定位置</div>
|
|
</div>
|
|
);
|
|
}
|