diff --git a/components/journeys/SankeyDiagram.tsx b/components/journeys/SankeyDiagram.tsx index 70c4720..1d60beb 100644 --- a/components/journeys/SankeyDiagram.tsx +++ b/components/journeys/SankeyDiagram.tsx @@ -217,13 +217,14 @@ export default function SankeyDiagram({ const tgt = link.target as LayoutNode const linkId = `${src.id}->${tgt.id}` const isLinkHovered = hoveredLink === linkId + const srcId = String(src.id) + const tgtId = String(tgt.id) const isConnectedToNode = hoveredNode !== null && - (src.id === hoveredNode || tgt.id === hoveredNode) + (srcId === hoveredNode || tgtId === hoveredNode) const isHighlighted = isLinkHovered || isConnectedToNode - const isExitLink = tgt.id!.toString().startsWith('exit-') - const linkColor = isExitLink ? EXIT_GREY : src.color + const linkColor = src.color let opacity = isDark ? 0.45 : 0.5 if (isHighlighted) opacity = 0.75 @@ -251,13 +252,14 @@ export default function SankeyDiagram({ {/* Nodes */} {layout.nodes.map((node) => { - const isExit = node.id!.toString().startsWith('exit-') + const nodeId = String(node.id) + const isExit = nodeId.startsWith('exit-') const w = (node.x1 ?? 0) - (node.x0 ?? 0) const h = (node.y1 ?? 0) - (node.y0 ?? 0) return ( setHoveredNode(node.id!.toString())} + onMouseEnter={() => setHoveredNode(nodeId)} onMouseLeave={() => setHoveredNode(null)} onClick={() => { if (onNodeClick && !isExit) onNodeClick(node.label) @@ -310,8 +310,15 @@ export default function SankeyDiagram({ const bgX = isRight ? textX - textW - padX : textX - padX const bgY = textY - rectH / 2 + const nodeId = String(node.id) + const isExit = nodeId.startsWith('exit-') + return ( - + setHoveredNode(nodeId)} + onMouseLeave={() => setHoveredNode(null)} + > { - if ( - onNodeClick && - !node.id!.toString().startsWith('exit-') - ) - onNodeClick(node.label) + if (onNodeClick && !isExit) onNodeClick(node.label) }} > {label}