ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: link color from source node, fix hover dimming, labels trigger hover

Browse Source
This commit is contained in:
Usman Baig
2026-03-12 22:48:31 +01:00
parent 3bde3fd4e1
commit 3df93bb227
1 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/journeys/SankeyDiagram.tsx
View File

@@ -217,13 +217,14 @@ export default function SankeyDiagram({
const tgt = link.target as LayoutNode const tgt = link.target as LayoutNode
const linkId = `${src.id}->${tgt.id}` const linkId = `${src.id}->${tgt.id}`
const isLinkHovered = hoveredLink === linkId const isLinkHovered = hoveredLink === linkId
const srcId = String(src.id)
const tgtId = String(tgt.id)
const isConnectedToNode = const isConnectedToNode =
hoveredNode !== null && hoveredNode !== null &&
(src.id === hoveredNode || tgt.id === hoveredNode) (srcId === hoveredNode || tgtId === hoveredNode)
const isHighlighted = isLinkHovered || isConnectedToNode const isHighlighted = isLinkHovered || isConnectedToNode
const isExitLink = tgt.id!.toString().startsWith('exit-') const linkColor = src.color
const linkColor = isExitLink ? EXIT_GREY : src.color
let opacity = isDark ? 0.45 : 0.5 let opacity = isDark ? 0.45 : 0.5
if (isHighlighted) opacity = 0.75 if (isHighlighted) opacity = 0.75
@@ -251,13 +252,14 @@ export default function SankeyDiagram({
{/* Nodes */} {/* Nodes */}
<g> <g>
{layout.nodes.map((node) => { {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 w = (node.x1 ?? 0) - (node.x0 ?? 0)
const h = (node.y1 ?? 0) - (node.y0 ?? 0) const h = (node.y1 ?? 0) - (node.y0 ?? 0)
return ( return (
<rect <rect
key={node.id} key={nodeId}
x={node.x0} x={node.x0}
y={node.y0} y={node.y0}
width={w} width={w}
@@ -266,12 +268,10 @@ export default function SankeyDiagram({
stroke={nodeStroke} stroke={nodeStroke}
strokeWidth={1} strokeWidth={1}
rx={2} rx={2}
opacity={1}
style={{ transition: 'opacity 0.15s ease' }}
className={ className={
onNodeClick && !isExit ? 'cursor-pointer' : 'cursor-default' onNodeClick && !isExit ? 'cursor-pointer' : 'cursor-default'
} }
onMouseEnter={() => setHoveredNode(node.id!.toString())} onMouseEnter={() => setHoveredNode(nodeId)}
onMouseLeave={() => setHoveredNode(null)} onMouseLeave={() => setHoveredNode(null)}
onClick={() => { onClick={() => {
if (onNodeClick && !isExit) onNodeClick(node.label) if (onNodeClick && !isExit) onNodeClick(node.label)
@@ -310,8 +310,15 @@ export default function SankeyDiagram({
const bgX = isRight ? textX - textW - padX : textX - padX const bgX = isRight ? textX - textW - padX : textX - padX
const bgY = textY - rectH / 2 const bgY = textY - rectH / 2
const nodeId = String(node.id)
const isExit = nodeId.startsWith('exit-')
return ( return (
<g key={`label-${node.id}`}> <g
key={`label-${nodeId}`}
onMouseEnter={() => setHoveredNode(nodeId)}
onMouseLeave={() => setHoveredNode(null)}
>
<rect <rect
x={bgX} x={bgX}
y={bgY} y={bgY}
@@ -329,16 +336,10 @@ export default function SankeyDiagram({
fontSize={12} fontSize={12}
fontFamily="system-ui, -apple-system, sans-serif" fontFamily="system-ui, -apple-system, sans-serif"
className={ className={
onNodeClick && !node.id!.toString().startsWith('exit-') onNodeClick && !isExit ? 'cursor-pointer' : 'cursor-default'
? 'cursor-pointer'
: 'cursor-default'
} }
onClick={() => { onClick={() => {
if ( if (onNodeClick && !isExit) onNodeClick(node.label)
onNodeClick &&
!node.id!.toString().startsWith('exit-')
)
onNodeClick(node.label)
}} }}
> >
{label} {label}