cameleer-server/ui/src/components/ProcessDiagram/DiagramEdge.tsx

import type { DiagramEdge as DiagramEdgeType } from '../../api/queries/diagrams';

interface DiagramEdgeProps {
  edge: DiagramEdgeType;
  offsetY?: number;
  /** undefined = no overlay (default gray solid), true = traversed (green solid), false = not traversed (gray dashed) */
  traversed?: boolean | undefined;
}

export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps) {
  const pts = edge.points;
  if (!pts || pts.length < 2) return null;

  // Build SVG path: move to first point, then line segments through all waypoints.
  // ELK bend points are waypoints, not bezier control points.
  let d = `M ${pts[0][0]} ${pts[0][1] + offsetY}`;
  for (let i = 1; i < pts.length; i++) {
    d += ` L ${pts[i][0]} ${pts[i][1] + offsetY}`;
  }

  return (
    <g className="diagram-edge">
      <path
        d={d}
        fill="none"
        stroke={traversed === true ? 'var(--success)' : 'var(--text-muted)'}
        strokeWidth={traversed === true ? 1.5 : traversed === false ? 1 : 1.5}
        strokeDasharray={traversed === false ? '4,3' : undefined}
        markerEnd={traversed === true ? 'url(#arrowhead-green)' : traversed === false ? undefined : 'url(#arrowhead)'}
      />
      {edge.label && pts.length >= 2 && (
        <text
          x={(pts[0][0] + pts[pts.length - 1][0]) / 2}
          y={(pts[0][1] + pts[pts.length - 1][1]) / 2 + offsetY - 6}
          fill="var(--text-muted)"
          fontSize={9}
          textAnchor="middle"
        >
          {edge.label}
        </text>
      )}
    </g>
  );
}