@truedat/core 8.11.5 → 8.11.7

package/src/components/graph/ColoredEdge.js

@@ -1,12 +1,40 @@
-import { memo, useState } from "react";
-import { BaseEdge, EdgeLabelRenderer } from "@xyflow/react";
+import {
+  createContext,
+  memo,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/react";
 import { getTargetSlotOffset } from "./edgeLayout";
 
+export const EdgeHoverContext = createContext(null);
+
 const MIN_CURVE_OFFSET = 14;
 const MAX_CURVE_OFFSET = 38;
+const ORTHOGONAL_EDGE_CLEARANCE = 24;
+const ORTHOGONAL_EDGE_RADIUS = 8;
+const ORTHOGONAL_LANE_GAP = 10;
+const PORT_VERTICAL_INSET = 16;
 const EDGE_ARROW_LENGTH = 10;
 const EDGE_ARROW_WIDTH = 8;
 const EDGE_START_DOT_RADIUS = 3.5;
+const EDGE_FLOW_SPEED_PX_PER_SECOND = 40;
+const clampNumber = (value, min, max) => Math.max(min, Math.min(max, value));
+
+export const edgeAnimationDuration = (
+  pathLength,
+  pixelsPerSecond = EDGE_FLOW_SPEED_PX_PER_SECOND,
+) => {
+  const length = Number(pathLength);
+  const speed = Number(pixelsPerSecond);
+
+  if (!Number.isFinite(length) || length <= 0) return null;
+  if (!Number.isFinite(speed) || speed <= 0) return null;
+
+  return length / speed;
+};
 
 const getCurveOffset = ({ sourceX, sourceY, targetX, targetY }) => {
   const horizontalDistance = Math.abs(targetX - sourceX);
@@ -52,120 +80,728 @@ const getBezierDerivative = (t, p0, p1, p2, p3) => {
   );
 };
 
+const portVector = (position) => {
+  switch (position) {
+    case "left":
+      return { x: -1, y: 0 };
+    case "right":
+      return { x: 1, y: 0 };
+    case "top":
+      return { x: 0, y: -1 };
+    case "bottom":
+      return { x: 0, y: 1 };
+    default:
+      return { x: 1, y: 0 };
+  }
+};
+
 const normalizeVector = (x, y) => {
   const length = Math.hypot(x, y) || 1;
 
   return { x: x / length, y: y / length };
 };
 
+const point = (x, y) => ({ x, y });
+
+const dedupePoints = (points) =>
+  points.filter(
+    (currentPoint, index) =>
+      index === 0 ||
+      currentPoint.x !== points[index - 1].x ||
+      currentPoint.y !== points[index - 1].y,
+  );
+
+const distance = (pointA, pointB) =>
+  Math.hypot(pointB.x - pointA.x, pointB.y - pointA.y);
+
+const pointToward = (from, to, amount) => {
+  const segmentLength = distance(from, to);
+
+  if (!segmentLength) return from;
+
+  const ratio = amount / segmentLength;
+
+  return {
+    x: from.x + (to.x - from.x) * ratio,
+    y: from.y + (to.y - from.y) * ratio,
+  };
+};
+
+const roundedOrthogonalPath = (points, radius) => {
+  if (points.length < 2) return "";
+
+  const start = `M ${points[0].x},${points[0].y}`;
+  const segments = points.slice(1, -1).map((corner, idx) => {
+    const previous = points[idx];
+    const next = points[idx + 2];
+    const cornerRadius = Math.min(
+      radius,
+      distance(previous, corner) / 2,
+      distance(corner, next) / 2,
+    );
+
+    if (!cornerRadius) {
+      return ` L ${corner.x},${corner.y}`;
+    }
+
+    const cornerStart = pointToward(corner, previous, cornerRadius);
+    const cornerEnd = pointToward(corner, next, cornerRadius);
+
+    return ` L ${cornerStart.x},${cornerStart.y} Q ${corner.x},${corner.y} ${cornerEnd.x},${cornerEnd.y}`;
+  });
+
+  const lastPoint = points[points.length - 1];
+  return [start, ...segments, ` L ${lastPoint.x},${lastPoint.y}`].join("");
+};
+
+const firstSegmentTangent = (points, fallback) => {
+  const firstValidIndex = points.findIndex((point, index) => {
+    if (index === 0) return false;
+    const previous = points[index - 1];
+    return previous.x !== point.x || previous.y !== point.y;
+  });
+
+  if (firstValidIndex === -1) return fallback;
+
+  const previous = points[firstValidIndex - 1];
+  const current = points[firstValidIndex];
+  return normalizeVector(current.x - previous.x, current.y - previous.y);
+};
+
+const lastSegmentTangent = (points, fallback) => {
+  const lastValidIndex = points.reduce((acc, point, index) => {
+    if (index === 0) return acc;
+    const previous = points[index - 1];
+    if (previous.x !== point.x || previous.y !== point.y) return index;
+    return acc;
+  }, -1);
+
+  if (lastValidIndex === -1) return fallback;
+
+  const previous = points[lastValidIndex - 1];
+  const current = points[lastValidIndex];
+  return normalizeVector(current.x - previous.x, current.y - previous.y);
+};
+
+export const getOrthogonalEdgePath = ({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition = "right",
+  targetPosition = "left",
+  clearance = ORTHOGONAL_EDGE_CLEARANCE,
+  borderRadius = ORTHOGONAL_EDGE_RADIUS,
+  laneOffset = 0,
+  routeIndex,
+  routeCount,
+  sourceNodeY,
+  targetNodeY,
+  routeGuide,
+}) => {
+  const sourceVector = portVector(sourcePosition);
+  const targetVector = portVector(targetPosition);
+  const sourcePoint = point(sourceX, sourceY);
+  const targetPoint = point(targetX, targetY);
+  const sourceStub = point(
+    sourceX + sourceVector.x * clearance,
+    sourceY + sourceVector.y * clearance,
+  );
+  const targetStub = point(
+    targetX + targetVector.x * clearance,
+    targetY + targetVector.y * clearance,
+  );
+  const forwardRoute =
+    (sourcePosition === "right" &&
+      targetPosition === "left" &&
+      targetX > sourceX + clearance * 2) ||
+    (sourcePosition === "left" &&
+      targetPosition === "right" &&
+      targetX < sourceX - clearance * 2);
+  const routeCenterX = (sourceStub.x + targetStub.x) / 2;
+  const maxLaneOffset = Math.max(
+    0,
+    Math.abs(targetStub.x - sourceStub.x) / 2 - borderRadius * 2,
+  );
+  const routeSpan =
+    Number.isFinite(routeIndex) && routeCount > 1
+      ? Math.min((routeCount - 1) * ORTHOGONAL_LANE_GAP, maxLaneOffset * 2)
+      : 0;
+  const distributedLaneOffset = routeSpan
+    ? -routeSpan / 2 + (routeIndex * routeSpan) / (routeCount - 1)
+    : laneOffset;
+  const routeX =
+    routeGuide?.laneX ??
+    routeCenterX +
+      clampNumber(distributedLaneOffset, -maxLaneOffset, maxLaneOffset);
+  const routeY =
+    routeGuide?.laneY ??
+    Math.min(sourceNodeY ?? sourceY, targetNodeY ?? targetY, sourceY, targetY) -
+      clearance -
+      Math.abs(distributedLaneOffset);
+  const guidedBypass = routeGuide?.kind === "bypass";
+  const sourceLaneX = routeGuide?.sourceLaneX ?? sourceStub.x;
+  const targetLaneX = routeGuide?.targetLaneX ?? targetStub.x;
+  const points = dedupePoints(
+    guidedBypass
+      ? [
+          sourcePoint,
+          sourceStub,
+          point(sourceLaneX, sourceStub.y),
+          point(sourceLaneX, routeY),
+          point(targetLaneX, routeY),
+          point(targetLaneX, targetStub.y),
+          targetStub,
+          targetPoint,
+        ]
+      : forwardRoute || routeGuide?.kind === "corridor"
+        ? [
+            sourcePoint,
+            sourceStub,
+            point(routeX, sourceStub.y),
+            point(routeX, targetStub.y),
+            targetStub,
+            targetPoint,
+          ]
+        : [
+            sourcePoint,
+            sourceStub,
+            point(sourceStub.x, routeY),
+            point(targetStub.x, routeY),
+            targetStub,
+            targetPoint,
+          ],
+  );
+  const path = roundedOrthogonalPath(points, borderRadius);
+  const labelPoint = routeGuide?.labelPoint
+    ? routeGuide.labelPoint
+    : forwardRoute || routeGuide?.kind === "corridor"
+      ? point(routeX, (sourceStub.y + targetStub.y) / 2)
+      : point((sourceStub.x + targetStub.x) / 2, routeY);
+
+  return {
+    path,
+    labelX: labelPoint.x,
+    labelY: labelPoint.y,
+    sourceTangent: firstSegmentTangent(points, sourceVector),
+    targetTangent: lastSegmentTangent(
+      points,
+      normalizeVector(-targetVector.x, -targetVector.y),
+    ),
+  };
+};
+
+export const getClassicArrowPoints = ({ targetX, targetY, targetTangent }) => {
+  const tangent = normalizeVector(targetTangent.x, targetTangent.y);
+  const normal = { x: -tangent.y, y: tangent.x };
+  const lineTargetX = targetX - tangent.x * EDGE_ARROW_LENGTH;
+  const lineTargetY = targetY - tangent.y * EDGE_ARROW_LENGTH;
+  const arrowLeftX = lineTargetX + normal.x * (EDGE_ARROW_WIDTH / 2);
+  const arrowLeftY = lineTargetY + normal.y * (EDGE_ARROW_WIDTH / 2);
+  const arrowRightX = lineTargetX - normal.x * (EDGE_ARROW_WIDTH / 2);
+  const arrowRightY = lineTargetY - normal.y * (EDGE_ARROW_WIDTH / 2);
+
+  return `${targetX},${targetY} ${arrowLeftX},${arrowLeftY} ${arrowRightX},${arrowRightY}`;
+};
+
+const offsetFromPort = ({ x, y, position, distance }) => {
+  const vector = portVector(position);
+
+  return {
+    x: x + vector.x * distance,
+    y: y + vector.y * distance,
+  };
+};
+
+export const getFlexibleEdgePath = ({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition = "right",
+  targetPosition = "left",
+  curvature = 0.32,
+  bundleSource = false,
+  bundleTarget = false,
+  bundleOffset = 40,
+}) => {
+  const sourceJunction = bundleSource
+    ? offsetFromPort({
+        x: sourceX,
+        y: sourceY,
+        position: sourcePosition,
+        distance: bundleOffset,
+      })
+    : point(sourceX, sourceY);
+  const targetJunction = bundleTarget
+    ? offsetFromPort({
+        x: targetX,
+        y: targetY,
+        position: targetPosition,
+        distance: bundleOffset,
+      })
+    : point(targetX, targetY);
+  const [branchPath, labelX, labelY] = getBezierPath({
+    sourceX: sourceJunction.x,
+    sourceY: sourceJunction.y,
+    sourcePosition,
+    targetX: targetJunction.x,
+    targetY: targetJunction.y,
+    targetPosition,
+    curvature,
+  });
+  const pathParts = [];
+
+  if (bundleSource) {
+    pathParts.push(
+      `M ${sourceX},${sourceY} L ${sourceJunction.x},${sourceJunction.y}`,
+    );
+  }
+
+  pathParts.push(branchPath);
+
+  if (bundleTarget) {
+    pathParts.push(
+      `M ${targetJunction.x},${targetJunction.y} L ${targetX},${targetY}`,
+    );
+  }
+
+  const targetVector = portVector(targetPosition);
+
+  return {
+    path: pathParts.join(" "),
+    labelX,
+    labelY,
+    targetTangent: normalizeVector(-targetVector.x, -targetVector.y),
+  };
+};
+
+export const getEdgeSlotOffsets = (data = {}) => ({
+  sourceSlotOffset: data.lockSourcePort
+    ? 0
+    : data.sourceFieldIndex === undefined
+      ? getTargetSlotOffset(data.sourceSlotIndex, data.sourceSlotCount)
+      : 0,
+  targetSlotOffset:
+    data.targetFieldIndex === undefined
+      ? getTargetSlotOffset(
+          data.targetSlotIndex,
+          data.targetSlotCount,
+          Number.isFinite(data.targetNodeHeight)
+            ? Math.max(0, data.targetNodeHeight - PORT_VERTICAL_INSET)
+            : Number.POSITIVE_INFINITY,
+        )
+      : 0,
+});
+
+export const getLineageEdgeVisualState = (data = {}, hovered = false) => {
+  const aggregatedCount = Number(data.aggregatedCount);
+  const aggregated = Number.isFinite(aggregatedCount) && aggregatedCount > 1;
+  const dimmed = Boolean(data.focusDimmed);
+
+  return {
+    aggregated,
+    highlighted:
+      !data.containment && !dimmed && (hovered || Boolean(data.focusFocused)),
+    showDecorations: !dimmed,
+    showHitArea: true,
+    showLabel:
+      !dimmed &&
+      (aggregated
+        ? Boolean(data.selectedEndpoint)
+        : hovered && Boolean(data.label)),
+  };
+};
+
 const ColoredEdge = ({
   id,
+  source,
+  target,
   sourceX,
   sourceY,
   targetX,
   targetY,
   sourcePosition,
   targetPosition,
+  markerEnd,
   style = {},
   data = {},
 }) => {
+  const hoverCtx = useContext(EdgeHoverContext);
+  const hoveredNodeId = hoverCtx?.hoveredNodeId;
+  const hoveredEdgeEndpoints = hoverCtx?.hoveredEdgeEndpoints;
   const [hovered, setHovered] = useState(false);
-  const targetSlotOffset = getTargetSlotOffset(
-    data.targetSlotIndex,
-    data.targetSlotCount,
+  const [motionTiming, setMotionTiming] = useState(null);
+  const gRef = useRef(null);
+  const hasMetadata =
+    data.metadata && typeof data.metadata === "object"
+      ? Object.keys(data.metadata).length > 0
+      : false;
+  const interactive = Boolean(data.onClick);
+  const { sourceSlotOffset, targetSlotOffset } = getEdgeSlotOffsets(data);
+  const useOrthogonalPath = data.edgePath === "orthogonal";
+  const useFlexibleBezierPath = data.edgePath === "bezier";
+  const useClassicEdgePath = !useOrthogonalPath && !useFlexibleBezierPath;
+  const adjustedSourceY = sourceY + (data.bundleSource ? 0 : sourceSlotOffset);
+  const adjustedTargetY = targetY + (data.bundleTarget ? 0 : targetSlotOffset);
+  const { aggregated, highlighted, showDecorations, showHitArea, showLabel } =
+    getLineageEdgeVisualState(data, hovered);
+  const dependenciesOnLeft =
+    data.selectedEndpoint === "source" ? targetX < sourceX : sourceX < targetX;
+  const setHoveredEdgeEndpoints = hoverCtx?.setHoveredEdgeEndpoints;
+  useEffect(() => {
+    if (!showHitArea) setHovered(false);
+    return () => {
+      setHoveredEdgeEndpoints?.((current) =>
+        current?.edgeId === id ? null : current,
+      );
+    };
+  }, [id, showHitArea, setHoveredEdgeEndpoints]);
+  const forceHorizontalPorts = Boolean(
+    useOrthogonalPath && data.forceHorizontalPorts,
   );
-  const adjustedTargetY = targetY + targetSlotOffset;
-  const curveOffset = getCurveOffset({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY: adjustedTargetY,
-  });
   const stroke = style.stroke || "var(--td-graph-edge-stroke, #b0b8c8)";
-  const sourceControl = getControlPoint(
-    sourceX,
-    sourceY,
-    sourcePosition,
-    curveOffset,
-  );
-  const targetControl = getControlPoint(
-    targetX,
-    adjustedTargetY,
-    targetPosition,
-    curveOffset,
-  );
-  const targetTangent = normalizeVector(
-    getBezierDerivative(1, sourceX, sourceControl.x, targetControl.x, targetX),
-    getBezierDerivative(
-      1,
-      sourceY,
-      sourceControl.y,
-      targetControl.y,
-      adjustedTargetY,
-    ),
-  );
-  const lineTargetX = targetX - targetTangent.x * EDGE_ARROW_LENGTH;
-  const lineTargetY = adjustedTargetY - targetTangent.y * EDGE_ARROW_LENGTH;
-  const edgePath = `M ${sourceX},${sourceY} C ${sourceControl.x},${sourceControl.y} ${targetControl.x},${targetControl.y} ${lineTargetX},${lineTargetY}`;
-  const labelX = getBezierPoint(
-    0.5,
-    sourceX,
-    sourceControl.x,
-    targetControl.x,
-    lineTargetX,
-  );
-  const labelY = getBezierPoint(
-    0.5,
-    sourceY,
-    sourceControl.y,
-    targetControl.y,
-    lineTargetY,
+  const markerPosition = data.markerPosition;
+  const showTargetMarker =
+    showDecorations &&
+    (useOrthogonalPath
+      ? markerPosition === "target" ||
+        markerPosition === "both" ||
+        (markerPosition === undefined && data.showTargetArrow !== false)
+      : data.showTargetArrow !== false);
+  const showSourceMarker =
+    showDecorations &&
+    (markerPosition === "source" || markerPosition === "both") &&
+    data.showTargetArrow !== false;
+  const effectiveSourcePosition = forceHorizontalPorts
+    ? data.sourcePortPosition || "right"
+    : sourcePosition || "right";
+  const effectiveTargetPosition = forceHorizontalPorts
+    ? data.targetPortPosition || "left"
+    : targetPosition || "left";
+  const sourcePortX = sourceX;
+  const sourcePortY = adjustedSourceY;
+  const targetPortX = targetX;
+  const targetPortY = adjustedTargetY;
+  const { edgePath, labelX, labelY, targetTangent, sourceTangent } = (() => {
+    if (useOrthogonalPath) {
+      const orthogonalEdge = getOrthogonalEdgePath({
+        sourceX: sourcePortX,
+        sourceY: sourcePortY,
+        targetX: targetPortX,
+        targetY: targetPortY,
+        sourcePosition: effectiveSourcePosition,
+        targetPosition: effectiveTargetPosition,
+        borderRadius: data.edgeBorderRadius ?? ORTHOGONAL_EDGE_RADIUS,
+        clearance: data.edgeOffset ?? ORTHOGONAL_EDGE_CLEARANCE,
+        routeIndex: data.routeIndex,
+        routeCount: data.routeCount,
+        sourceNodeY: data.sourceNodeY,
+        targetNodeY: data.targetNodeY,
+        routeGuide: data.routeGuide,
+      });
+
+      const sourceVector = portVector(effectiveSourcePosition);
+      return {
+        edgePath: orthogonalEdge.path,
+        labelX: orthogonalEdge.labelX,
+        labelY: orthogonalEdge.labelY,
+        targetTangent: orthogonalEdge.targetTangent,
+        sourceTangent: normalizeVector(sourceVector.x, sourceVector.y),
+      };
+    } else if (useFlexibleBezierPath) {
+      const flexibleEdge = getFlexibleEdgePath({
+        sourceX: sourcePortX,
+        sourceY: sourcePortY,
+        sourcePosition: effectiveSourcePosition,
+        targetX: targetPortX,
+        targetY: targetPortY,
+        targetPosition: effectiveTargetPosition,
+        curvature: data.edgeCurvature ?? 0.32,
+        bundleSource: data.bundleSource,
+        bundleTarget: data.bundleTarget,
+        bundleOffset: data.bundleOffset,
+      });
+
+      const bezierSourceVector = portVector(effectiveSourcePosition);
+      return {
+        edgePath: flexibleEdge.path,
+        labelX: flexibleEdge.labelX,
+        labelY: flexibleEdge.labelY,
+        targetTangent: flexibleEdge.targetTangent,
+        sourceTangent: normalizeVector(
+          bezierSourceVector.x,
+          bezierSourceVector.y,
+        ),
+      };
+    } else {
+      const curveOffset = getCurveOffset({
+        sourceX,
+        sourceY: adjustedSourceY,
+        targetX,
+        targetY: adjustedTargetY,
+      });
+      const sourceControl = getControlPoint(
+        sourceX,
+        adjustedSourceY,
+        sourcePosition,
+        curveOffset,
+      );
+      const targetControl = getControlPoint(
+        targetX,
+        adjustedTargetY,
+        targetPosition,
+        curveOffset,
+      );
+
+      const targetTangent = normalizeVector(
+        getBezierDerivative(
+          1,
+          sourceX,
+          sourceControl.x,
+          targetControl.x,
+          targetX,
+        ),
+        getBezierDerivative(
+          1,
+          adjustedSourceY,
+          sourceControl.y,
+          targetControl.y,
+          adjustedTargetY,
+        ),
+      );
+      const sourceTangent = normalizeVector(
+        getBezierDerivative(
+          0,
+          sourceX,
+          sourceControl.x,
+          targetControl.x,
+          targetX,
+        ),
+        getBezierDerivative(
+          0,
+          adjustedSourceY,
+          sourceControl.y,
+          targetControl.y,
+          adjustedTargetY,
+        ),
+      );
+      const lineTargetX = targetX - targetTangent.x * EDGE_ARROW_LENGTH;
+      const lineTargetY = adjustedTargetY - targetTangent.y * EDGE_ARROW_LENGTH;
+      const edgePath = `M ${sourceX},${adjustedSourceY} C ${sourceControl.x},${sourceControl.y} ${targetControl.x},${targetControl.y} ${lineTargetX},${lineTargetY}`;
+      const labelX = getBezierPoint(
+        0.5,
+        sourceX,
+        sourceControl.x,
+        targetControl.x,
+        lineTargetX,
+      );
+      const labelY = getBezierPoint(
+        0.5,
+        adjustedSourceY,
+        sourceControl.y,
+        targetControl.y,
+        lineTargetY,
+      );
+
+      return { edgePath, labelX, labelY, targetTangent, sourceTangent };
+    }
+  })();
+  useEffect(() => {
+    if (!data.animated || !gRef.current) return;
+
+    const pathElement = gRef.current.querySelector("path.td-graph-edge");
+
+    if (!pathElement?.getTotalLength) return;
+
+    const duration = edgeAnimationDuration(pathElement.getTotalLength());
+
+    if (!duration) return;
+
+    setMotionTiming((current) =>
+      current?.path === edgePath && current.duration === duration
+        ? current
+        : { duration, path: edgePath },
+    );
+  }, [data.animated, edgePath]);
+  const animationDuration =
+    motionTiming?.path === edgePath ? motionTiming.duration : null;
+  const nodeHovered = hoveredNodeId
+    ? (hoveredNodeId === source || hoveredNodeId === target) &&
+      !data.containment
+    : false;
+  const sourceBundleHovered = Boolean(
+    data.bundleSource &&
+      !data.containment &&
+      !data.focusDimmed &&
+      hoveredEdgeEndpoints?.source === source &&
+      hoveredEdgeEndpoints.sourceFieldIndex === data.sourceFieldIndex,
   );
-  const arrowNormalX = -targetTangent.y;
-  const arrowNormalY = targetTangent.x;
-  const arrowLeftX = lineTargetX + arrowNormalX * (EDGE_ARROW_WIDTH / 2);
-  const arrowLeftY = lineTargetY + arrowNormalY * (EDGE_ARROW_WIDTH / 2);
-  const arrowRightX = lineTargetX - arrowNormalX * (EDGE_ARROW_WIDTH / 2);
-  const arrowRightY = lineTargetY - arrowNormalY * (EDGE_ARROW_WIDTH / 2);
+  const effectiveStroke = data.connectionSelected
+    ? "var(--td-graph-edge-metadata, #7c3aed)"
+    : highlighted || nodeHovered || sourceBundleHovered
+      ? "var(--td-graph-edge-active, var(--td-graph-accent, #ed5c17))"
+      : stroke;
+  const handleClick = (event) => {
+    if (!interactive) return;
+    event.stopPropagation();
+    data.onClick(data.metadata);
+  };
+  const edgeClassName = [
+    "td-graph-edge",
+    data.connectionSelected ? "td-graph-edge--connection-selected" : "",
+    data.animated ? "td-graph-edge--animated" : "",
+    data.flowDirection ? `td-graph-edge--flow-${data.flowDirection}` : "",
+    data.containment ? "td-graph-edge--containment" : "",
+    hovered ? "td-graph-edge--hovered" : "",
+    data.restrictive ? "td-graph-edge--restrictive" : "",
+    data.focusFocused ? "td-graph-edge--focus-focused" : "",
+    data.focusDimmed ? "td-graph-edge--focus-dimmed" : "",
+    nodeHovered ? "td-graph-edge--node-hovered" : "",
+    sourceBundleHovered ? "td-graph-edge--source-bundle-hovered" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   return (
-    <>
-      <BaseEdge id={id} path={edgePath} style={style} />
-      <circle
-        cx={sourceX}
-        cy={sourceY}
-        r={EDGE_START_DOT_RADIUS}
-        fill={stroke}
-        pointerEvents="none"
+    <g ref={gRef}>
+      <BaseEdge
+        className={edgeClassName}
+        id={id}
+        path={edgePath}
+        style={{
+          ...style,
+          stroke: effectiveStroke,
+        }}
       />
-      {data.showTargetArrow !== false ? (
+      {data.animated && animationDuration ? (
+        <circle
+          aria-hidden="true"
+          className="td-graph-edge-flow-dot"
+          r={4}
+          fill={effectiveStroke}
+          opacity={1}
+          pointerEvents="none"
+        >
+          <animateMotion
+            calcMode="paced"
+            dur={`${animationDuration}s`}
+            repeatCount="indefinite"
+            begin="0s"
+            fill="freeze"
+            path={edgePath}
+          />
+        </circle>
+      ) : null}
+      {data.showSourceDot !== false ? (
+        <circle
+          cx={sourceX}
+          cy={adjustedSourceY}
+          r={EDGE_START_DOT_RADIUS}
+          fill={effectiveStroke}
+          pointerEvents="none"
+        />
+      ) : null}
+      {!useClassicEdgePath && showTargetMarker && markerEnd && targetTangent ? (
         <polygon
-          points={`${targetX},${adjustedTargetY} ${arrowLeftX},${arrowLeftY} ${arrowRightX},${arrowRightY}`}
-          fill={stroke}
+          className="td-graph-edge-arrow"
+          points={getClassicArrowPoints({
+            targetX: targetPortX,
+            targetY: targetPortY,
+            targetTangent,
+          })}
+          fill={effectiveStroke}
           pointerEvents="none"
         />
       ) : null}
-      <path
-        d={edgePath}
-        fill="none"
-        stroke="transparent"
-        strokeWidth={16}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-      />
-      {hovered && data.label && (
+      {!useClassicEdgePath && showSourceMarker && markerEnd && sourceTangent ? (
+        <polygon
+          className="td-graph-edge-arrow"
+          points={getClassicArrowPoints({
+            targetX: sourcePortX,
+            targetY: sourcePortY,
+            targetTangent: { x: -sourceTangent.x, y: -sourceTangent.y },
+          })}
+          fill={effectiveStroke}
+          pointerEvents="none"
+        />
+      ) : null}
+      {useClassicEdgePath &&
+      showDecorations &&
+      data.showTargetArrow !== false &&
+      targetTangent ? (
+        <polygon
+          points={getClassicArrowPoints({
+            targetX: targetPortX,
+            targetY: targetPortY,
+            targetTangent,
+          })}
+          fill={effectiveStroke}
+          pointerEvents="none"
+        />
+      ) : null}
+      {showHitArea ? (
+        <path
+          className="td-graph-edge-hit-area"
+          d={edgePath}
+          fill="none"
+          stroke="transparent"
+          strokeWidth={16}
+          onMouseEnter={() => {
+            setHovered(true);
+            hoverCtx?.setHoveredEdgeEndpoints({
+              edgeId: id,
+              source,
+              sourceFieldIndex: data.sourceFieldIndex,
+              target,
+              targetFieldIndex: data.targetFieldIndex,
+            });
+          }}
+          onMouseLeave={() => {
+            setHovered(false);
+            setHoveredEdgeEndpoints?.((current) =>
+              current?.edgeId === id ? null : current,
+            );
+          }}
+          onClick={handleClick}
+          cursor={interactive ? "pointer" : "default"}
+        />
+      ) : null}
+      {showLabel && (
+        <EdgeLabelRenderer>
+          <div
+            className={`td-graph-edge-label nodrag nopan${aggregated ? " td-graph-edge-label--aggregated" : ""}`}
+            style={{
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            }}
+          >
+            {aggregated ? (
+              <>
+                {dependenciesOnLeft ? <span aria-hidden="true">→</span> : null}
+                <span>{data.aggregatedCount}</span>
+                {!dependenciesOnLeft ? <span aria-hidden="true">→</span> : null}
+              </>
+            ) : (
+              data.label
+            )}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+      {showDecorations && hasMetadata && (
         <EdgeLabelRenderer>
           <div
-            className="td-graph-edge-label nodrag nopan"
+            className="td-graph-edge-metadata-badge nodrag nopan"
             style={{
               transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
             }}
+            title={interactive ? "Click for details" : undefined}
+            onClick={handleClick}
           >
-            {data.label}
+            <span className="td-graph-edge-metadata-badge__dot" />
           </div>
         </EdgeLabelRenderer>
       )}
-    </>
+    </g>
   );
 };