openreplay/frontend/app/components/shared/Insights/SankeyChart/CustomLink.tsx

import React from 'react';
import { Layer } from 'recharts';

interface CustomLinkProps {
  hoveredLinks: string[];
  activeLinks: string[];
  payload: any;
  sourceX: number;
  targetX: number;
  sourceY: number;
  targetY: number;
  sourceControlX: number;
  targetControlX: number;
  linkWidth: number;
  index: number;
  activeLink: any;
  onClick?: (payload: any) => void;
  onMouseEnter?: () => void;
  onMouseLeave?: () => void;
  strokeOpacity?: number;
}

const CustomLink: React.FC<CustomLinkProps> = (props) => {
  const [fill, setFill] = React.useState('url(#linkGradient)');
  const {
    hoveredLinks,
    activeLinks,
    payload,
    sourceX,
    targetX,
    sourceY,
    targetY,
    sourceControlX,
    targetControlX,
    linkWidth,
    index,
    activeLink,
  } = props;
  const isActive = activeLinks?.length > 0 && activeLinks.includes(payload.id);
  const isHover = hoveredLinks?.length > 0 && hoveredLinks.includes(payload.id);

  const onClick = () => {
    if (props.onClick) {
      props.onClick(props.payload);
    }
  };

  return (
    <Layer
      key={`CustomLink${index}`}
      onClick={onClick}
      onMouseEnter={props.onMouseEnter}
      onMouseLeave={props.onMouseLeave}
    >
      <path
        d={`
          M${sourceX},${sourceY + linkWidth / 2}
          C${sourceControlX},${sourceY + linkWidth / 2}
            ${targetControlX},${targetY + linkWidth / 2}
            ${targetX},${targetY + linkWidth / 2}
          L${targetX},${targetY - linkWidth / 2}
          C${targetControlX},${targetY - linkWidth / 2}
            ${sourceControlX},${sourceY - linkWidth / 2}
            ${sourceX},${sourceY - linkWidth / 2}
          Z
        `}
        fill={
          isActive
            ? 'rgba(57, 78, 255, 1)'
            : isHover
              ? 'rgba(57, 78, 255, 0.5)'
              : fill
        }
        strokeWidth="1"
        strokeOpacity={props.strokeOpacity}
        onMouseEnter={() => {
          setFill('rgba(57, 78, 255, 0.5)');
        }}
        onMouseLeave={() => {
          setFill('url(#linkGradient)');
        }}
      />
    </Layer>
  );
};

export default CustomLink;