@coinbase/cds-web-visualization 3.3.2 → 3.4.0-beta.10

package/esm/chart/utils/path.js

@@ -0,0 +1,227 @@
+import { area as d3Area, curveBumpX, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore, line as d3Line } from 'd3-shape';
+import { projectPoint, projectPoints } from './point';
+import { isCategoricalScale } from './scale';
+/**
+ * Get the d3 curve function for a path.
+ * See https://d3js.org/d3-shape/curve
+ * @param curve - The curve type. Defaults to 'linear'.
+ * @returns The d3 curve function.
+ */
+export const getPathCurveFunction = function () {
+  let curve = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'linear';
+  switch (curve) {
+    case 'catmullRom':
+      return curveCatmullRom;
+    case 'monotone':
+      // When we support layout="vertical" this should dynamically switch to curveMonotoneY
+      return curveMonotoneX;
+    case 'natural':
+      return curveNatural;
+    case 'step':
+      return curveStep;
+    case 'stepBefore':
+      return curveStepBefore;
+    case 'stepAfter':
+      return curveStepAfter;
+    case 'bump':
+      // When we support layout="vertical" this should dynamically switch to curveBumpY
+      return curveBumpX;
+    case 'linearClosed':
+      return curveLinearClosed;
+    case 'linear':
+    default:
+      return curveLinear;
+  }
+};
+
+/**
+ * Generates an SVG line path string from data using chart scale functions.
+ *
+ * @example
+ * ```typescript
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
+ * const path = getLinePath({ data: [1, 2, 3], chartScale, curve: 'bump' });
+ * ```
+ */
+export const getLinePath = _ref => {
+  var _pathGenerator;
+  let {
+    data,
+    curve = 'bump',
+    xScale,
+    yScale,
+    xData,
+    connectNulls
+  } = _ref;
+  if (data.length === 0) {
+    return '';
+  }
+  const curveFunction = getPathCurveFunction(curve);
+  const dataPoints = projectPoints({
+    data,
+    xScale,
+    yScale,
+    xData
+  });
+
+  // When connectNulls is true, filter out null values before rendering
+  // When false, use defined() to create gaps in the line
+  const filteredPoints = connectNulls ? dataPoints.filter(d => d !== null) : dataPoints;
+  const pathGenerator = d3Line().x(d => d.x).y(d => d.y).curve(curveFunction).defined(d => connectNulls || d !== null);
+  return (_pathGenerator = pathGenerator(filteredPoints)) !== null && _pathGenerator !== void 0 ? _pathGenerator : '';
+};
+
+/**
+ * Generates an SVG area path string from data using chart scale functions.
+ * Supports both single values (area from baseline to value) and tuples ([baseline, value]).
+ *
+ * @example
+ * ```typescript
+ * // Single values - area from baseline to value
+ * const area = getAreaPath({
+ *   data: [1, 2, 3],
+ *   xScale,
+ *   yScale,
+ * });
+ *
+ * // Range values - area from low to high
+ * const rangeArea = getAreaPath({
+ *   data: [[0, 3], [2, 4], [1, 5]],
+ *   xScale,
+ *   yScale,
+ *   curve: 'monotone'
+ * });
+ * ```
+ */
+export const getAreaPath = _ref2 => {
+  let {
+    data,
+    curve = 'bump',
+    xScale,
+    yScale,
+    xData,
+    connectNulls
+  } = _ref2;
+  if (data.length === 0) {
+    return '';
+  }
+  const curveFunction = getPathCurveFunction(curve);
+  const yDomain = yScale.domain();
+  const yMin = Math.min(...yDomain);
+  const normalizedData = data.map((item, index) => {
+    if (item === null) {
+      return null;
+    }
+    if (Array.isArray(item)) {
+      if (item.length >= 2 && typeof item[0] === 'number' && typeof item[1] === 'number') {
+        return [item[0], item[1]];
+      }
+      return null;
+    }
+    if (typeof item === 'number') {
+      return [yMin, item];
+    }
+    return null;
+  });
+  const dataPoints = normalizedData.map((range, index) => {
+    if (range === null) {
+      return {
+        x: 0,
+        low: null,
+        high: null,
+        isValid: false
+      };
+    }
+    let xValue = index;
+    if (!isCategoricalScale(xScale) && xData && xData[index] !== undefined) {
+      xValue = xData[index];
+    }
+    const xPoint = projectPoint({
+      x: xValue,
+      y: 0,
+      xScale,
+      yScale
+    });
+    const lowPoint = projectPoint({
+      x: xValue,
+      y: range[0],
+      xScale,
+      yScale
+    });
+    const highPoint = projectPoint({
+      x: xValue,
+      y: range[1],
+      xScale,
+      yScale
+    });
+    return {
+      x: xPoint.x,
+      low: lowPoint.y,
+      high: highPoint.y,
+      isValid: true
+    };
+  });
+
+  // When connectNulls is true, filter out invalid points before rendering
+  // When false, use defined() to create gaps in the area
+  const filteredPoints = connectNulls ? dataPoints.filter(d => d.isValid) : dataPoints;
+  const areaGenerator = d3Area().x(d => d.x).y0(d => {
+    var _d$low;
+    return (_d$low = d.low) !== null && _d$low !== void 0 ? _d$low : 0;
+  }) // Bottom boundary (low values), fallback to 0
+  .y1(d => {
+    var _d$high;
+    return (_d$high = d.high) !== null && _d$high !== void 0 ? _d$high : 0;
+  }) // Top boundary (high values), fallback to 0
+  .curve(curveFunction).defined(d => connectNulls || d.isValid && d.low != null && d.high != null); // Only draw where both values exist
+
+  const result = areaGenerator(filteredPoints);
+  return result !== null && result !== void 0 ? result : '';
+};
+
+/**
+ * Converts line coordinates to an SVG path string.
+ * Useful for rendering axis lines and tick marks.
+ *
+ * @example
+ * ```typescript
+ * const path = lineToPath(0, 0, 100, 100);
+ * // Returns: "M 0 0 L 100 100"
+ * ```
+ */
+export const lineToPath = (x1, y1, x2, y2) => {
+  return "M".concat(x1, ",").concat(y1, " L").concat(x2, ",").concat(y2);
+};
+
+/**
+ * Creates an SVG path string for a rectangle with selective corner rounding.
+ * Useful for creating bars in charts with optional rounded corners.
+ *
+ * @example
+ * ```typescript
+ * // Simple rectangle bar
+ * const barPath = getBarPath(10, 20, 50, 100, 0, false, false);
+ *
+ * // Bar with rounded top corners
+ * const roundedPath = getBarPath(10, 20, 50, 100, 8, true, false);
+ * ```
+ */
+export const getBarPath = (x, y, width, height, radius, roundTop, roundBottom) => {
+  const roundBothSides = roundTop && roundBottom;
+  const r = Math.min(radius, width / 2, roundBothSides ? height / 2 : height);
+  const topR = roundTop ? r : 0;
+  const bottomR = roundBottom ? r : 0;
+
+  // Build path with selective rounding
+  let path = "M ".concat(x + (roundTop ? r : 0), " ").concat(y);
+  path += " L ".concat(x + width - topR, " ").concat(y);
+  path += " A ".concat(topR, " ").concat(topR, " 0 0 1 ").concat(x + width, " ").concat(y + topR);
+  path += " L ".concat(x + width, " ").concat(y + height - bottomR);
+  path += " A ".concat(bottomR, " ").concat(bottomR, " 0 0 1 ").concat(x + width - bottomR, " ").concat(y + height);
+  path += " L ".concat(x + bottomR, " ").concat(y + height);
+  path += " A ".concat(bottomR, " ").concat(bottomR, " 0 0 1 ").concat(x, " ").concat(y + height - bottomR);
+  path += " L ".concat(x, " ").concat(y + topR);
+  path += " A ".concat(topR, " ").concat(topR, " 0 0 1 ").concat(x + topR, " ").concat(y);
+  path += ' Z';
+  return path;
+};

package/esm/chart/utils/point.js

@@ -0,0 +1,187 @@
+import { isCategoricalScale, isLogScale, isNumericScale } from './scale';
+
+/**
+ * Position a label should be placed relative to the point
+ *
+ * @example
+ * 'top' would have the label be located above the point itself,
+ * and thus the vertical alignment of that text would be bottom.
+ */
+
+/**
+ * Get a point from a data value and a scale.
+ * @note for categorical scales, the point will be centered within the band.
+ * @note for log scales, zero and negative values are clamped to a small positive value.
+ * @param data - the data value.
+ * @param scale - the scale function.
+ * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
+ */
+export const getPointOnScale = (dataValue, scale) => {
+  var _scale2;
+  if (isCategoricalScale(scale)) {
+    var _scale, _scale$bandwidth;
+    const bandStart = (_scale = scale(dataValue)) !== null && _scale !== void 0 ? _scale : 0;
+    const bandwidth = (_scale$bandwidth = scale.bandwidth()) !== null && _scale$bandwidth !== void 0 ? _scale$bandwidth : 0;
+    return bandStart + bandwidth / 2;
+  }
+
+  // For log scales, ensure the value is positive
+  let adjustedValue = dataValue;
+  if (isLogScale(scale) && dataValue <= 0) {
+    adjustedValue = 0.001; // Use a small positive value for log scales
+  }
+  return (_scale2 = scale(adjustedValue)) !== null && _scale2 !== void 0 ? _scale2 : 0;
+};
+
+/**
+ * Projects a data point to pixel coordinates using the chart scale.
+ * Automatically handles log scale transformations for zero/negative values.
+ *
+ * @example
+ * ```typescript
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
+ * const pixelCoord = projectPoint({ x: 5, y: 10, chartScale });
+ * ```
+ * @example
+ * ```typescript
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
+ * const pixelCoord = projectPoint({ x: 2, y: 10, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
+ * ```
+ */
+export const projectPoint = _ref => {
+  let {
+    x,
+    y,
+    xScale,
+    yScale
+  } = _ref;
+  return {
+    x: getPointOnScale(x, xScale),
+    y: getPointOnScale(y, yScale)
+  };
+};
+
+/**
+ * Projects multiple data points to pixel coordinates using chart scale functions.
+ * Handles both numeric and band scales automatically.
+ *
+ * @example
+ * ```typescript
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
+ * const pixelPoints = projectPoints({ data, chartScale });
+ * // For mixed scales
+ * const pixelPoints = projectPoints({ data, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
+ * ```
+ */
+export const projectPoints = _ref2 => {
+  let {
+    data,
+    xScale,
+    yScale,
+    xData,
+    yData
+  } = _ref2;
+  if (data.length === 0) {
+    return [];
+  }
+  return data.map((value, index) => {
+    if (value === null) {
+      return null;
+    }
+    if (typeof value === 'object' && 'x' in value && 'y' in value) {
+      return projectPoint({
+        x: value.x,
+        y: value.y,
+        xScale,
+        yScale
+      });
+    }
+
+    // For scales with axis data, determine the correct x value
+    let xValue = index;
+
+    // For band scales, always use the index
+    if (!isCategoricalScale(xScale)) {
+      // For numeric scales with axis data, use the axis data values instead of indices
+      if (xData && Array.isArray(xData) && xData.length > 0) {
+        // Check if it's numeric data
+        if (typeof xData[0] === 'number') {
+          var _numericXData$index;
+          const numericXData = xData;
+          xValue = (_numericXData$index = numericXData[index]) !== null && _numericXData$index !== void 0 ? _numericXData$index : index;
+        }
+      }
+    }
+    let yValue = value;
+    if (isNumericScale(yScale) && yData && Array.isArray(yData) && yData.length > 0 && typeof yData[0] === 'number' && typeof value === 'number') {
+      yValue = value;
+    }
+    return projectPoint({
+      x: xValue,
+      y: yValue,
+      xScale,
+      yScale
+    });
+  });
+};
+
+/**
+ * Determines text alignment based on label position.
+ * For example, a 'top' position needs the text aligned to the 'bottom' so it appears above the point.
+ */
+export const getAlignmentFromPosition = position => {
+  let horizontalAlignment = 'center';
+  let verticalAlignment = 'middle';
+  switch (position) {
+    case 'top':
+      verticalAlignment = 'bottom';
+      break;
+    case 'bottom':
+      verticalAlignment = 'top';
+      break;
+    case 'left':
+      horizontalAlignment = 'right';
+      break;
+    case 'right':
+      horizontalAlignment = 'left';
+      break;
+    case 'center':
+    default:
+      horizontalAlignment = 'center';
+      verticalAlignment = 'middle';
+      break;
+  }
+  return {
+    horizontalAlignment,
+    verticalAlignment
+  };
+};
+
+/**
+ * Calculates the final label coordinates by applying offset based on position.
+ */
+export const getLabelCoordinates = (x, y, position, offset) => {
+  let dx = 0;
+  let dy = 0;
+  switch (position) {
+    case 'top':
+      dy = -offset;
+      break;
+    case 'bottom':
+      dy = offset;
+      break;
+    case 'left':
+      dx = -offset;
+      break;
+    case 'right':
+      dx = offset;
+      break;
+    case 'center':
+    default:
+      break;
+  }
+  return {
+    x: x + dx,
+    y: y + dy
+  };
+};

package/esm/chart/utils/scale.js

@@ -0,0 +1,48 @@
+import { scaleBand, scaleLinear, scaleLog } from 'd3-scale';
+
+// https://d3js.org/d3-scale - ideal next scale would be time
+
+export const isCategoricalScale = scale => {
+  return scale !== undefined && 'bandwidth' in scale && typeof scale.bandwidth === 'function';
+};
+export const isNumericScale = scale => {
+  return scale !== undefined && !isCategoricalScale(scale);
+};
+
+/**
+ * Type guard to check if a scale is logarithmic.
+ */
+export const isLogScale = scale => {
+  return scale !== undefined && 'base' in scale && typeof scale.base === 'function';
+};
+
+/**
+ * Create a numeric scale (linear or logarithmic)
+ * @returns A numeric scale function
+ */
+export const getNumericScale = _ref => {
+  let {
+    scaleType,
+    domain,
+    range
+  } = _ref;
+  const scale = scaleType === 'log' ? scaleLog() : scaleLinear();
+  return scale.domain([domain.min, domain.max]).range([range.min, range.max]);
+};
+
+/**
+ * Create a categorical scale (band)
+ * @returns A categorical scale function
+ */
+export const getCategoricalScale = _ref2 => {
+  let {
+    domain,
+    range,
+    padding = 0.1
+  } = _ref2;
+  const domainArray = Array.from({
+    length: domain.max - domain.min + 1
+  }, (_, i) => i);
+  const scale = scaleBand().domain(domainArray).range([range.min, range.max]).padding(padding);
+  return scale;
+};

package/esm/chart/utils/scrubber.js

@@ -0,0 +1,132 @@
+/**
+ * Determines which side (left/right) to place scrubber labels based on available space.
+ * Prefers right side, switches to left when labels would overflow.
+ */
+export const getLabelPosition = function (beaconX, maxLabelWidth, drawingArea) {
+  let xOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 16;
+  if (drawingArea.width <= 0 || drawingArea.height <= 0) {
+    return 'right';
+  }
+  const availableRightSpace = drawingArea.x + drawingArea.width - beaconX;
+  const requiredSpace = maxLabelWidth + xOffset;
+  return requiredSpace <= availableRightSpace ? 'right' : 'left';
+};
+/**
+ * Calculates Y positions for all labels avoiding overlaps while maintaining order.
+ */
+export const calculateLabelYPositions = (dimensions, drawingArea, labelHeight, minGap) => {
+  if (dimensions.length === 0) {
+    return new Map();
+  }
+
+  // Sort by preferred Y values and create working labels
+  const sortedLabels = [...dimensions].sort((a, b) => a.preferredY - b.preferredY).map(dim => ({
+    seriesId: dim.seriesId,
+    preferredY: dim.preferredY,
+    finalY: dim.preferredY
+  }));
+
+  // Initial bounds fitting
+  const minY = drawingArea.y + labelHeight / 2;
+  const maxY = drawingArea.y + drawingArea.height - labelHeight / 2;
+  const requiredDistance = labelHeight + minGap;
+  for (const label of sortedLabels) {
+    // Clamp each label to the drawing area
+    label.finalY = Math.max(minY, Math.min(maxY, label.preferredY));
+  }
+
+  // First pass: push down any overlapping labels
+  for (let i = 1; i < sortedLabels.length; i++) {
+    const prev = sortedLabels[i - 1];
+    const current = sortedLabels[i];
+    const minAllowedY = prev.finalY + requiredDistance;
+    if (current.finalY < minAllowedY) {
+      current.finalY = minAllowedY;
+    }
+  }
+
+  // Find collision groups - groups of labels that are tightly packed (gap < minGap between them)
+  const collisionGroups = [];
+  let currentGroup = [sortedLabels[0]];
+  for (let i = 1; i < sortedLabels.length; i++) {
+    const prev = sortedLabels[i - 1];
+    const current = sortedLabels[i];
+    const gap = current.finalY - prev.finalY - labelHeight;
+    if (gap < minGap + 0.01) {
+      // Labels are touching or very close - part of same collision group
+      currentGroup.push(current);
+    } else {
+      // Gap is large enough - start new group
+      collisionGroups.push(currentGroup);
+      currentGroup = [current];
+    }
+  }
+  collisionGroups.push(currentGroup);
+
+  // Process each collision group - optimize positioning to minimize displacement
+  for (const group of collisionGroups) {
+    if (group.length === 1) {
+      // Single label, already at best position
+      continue;
+    }
+    const groupLastLabel = group[group.length - 1];
+    const groupFirstLabel = group[0];
+    const groupOverflow = groupLastLabel.finalY + labelHeight / 2 - (drawingArea.y + drawingArea.height);
+
+    // Calculate the ideal center point for this group
+    const groupPreferredCenter = group.reduce((sum, label) => sum + label.preferredY, 0) / group.length;
+    const groupTotalNeeded = group.length * labelHeight + (group.length - 1) * minGap;
+    if (groupOverflow <= 0) {
+      // Group fits, but let's center it better if possible
+      // Calculate how much we can shift up/down to center around preferred positions
+      const currentCenter = (groupFirstLabel.finalY + groupLastLabel.finalY) / 2;
+      const desiredShift = groupPreferredCenter - currentCenter;
+
+      // Calculate max shift in each direction
+      const maxShiftUp = groupFirstLabel.finalY - minY;
+      const maxShiftDown = maxY - groupLastLabel.finalY;
+
+      // Apply the shift, constrained by boundaries
+      const actualShift = Math.max(-maxShiftUp, Math.min(maxShiftDown, desiredShift));
+      if (Math.abs(actualShift) > 0.01) {
+        for (const label of group) {
+          label.finalY += actualShift;
+        }
+      }
+    } else {
+      // Group overflows - need to adjust
+      const groupStartY = groupFirstLabel.finalY - labelHeight / 2;
+      const availableSpace = drawingArea.y + drawingArea.height - groupStartY;
+      const maxShiftUp = groupFirstLabel.finalY - minY;
+      if (maxShiftUp >= groupOverflow) {
+        // Can shift entire group up to fit
+        for (const label of group) {
+          label.finalY -= groupOverflow;
+        }
+      } else if (groupTotalNeeded <= availableSpace) {
+        // Can't shift enough, but there's room - redistribute with proper spacing
+        let currentY = Math.max(minY, groupFirstLabel.finalY - maxShiftUp);
+        const gap = (availableSpace - group.length * labelHeight) / Math.max(1, group.length - 1);
+        for (const label of group) {
+          label.finalY = currentY;
+          currentY += labelHeight + gap;
+        }
+      } else {
+        // Not enough space even with compression - compress gaps and fit to bottom
+        const compressedGap = Math.max(1, (availableSpace - group.length * labelHeight) / Math.max(1, group.length - 1));
+        // Position so last label is at maxY
+        let currentY = maxY - (group.length - 1) * (labelHeight + compressedGap);
+        currentY = Math.max(minY, currentY);
+        for (const label of group) {
+          label.finalY = currentY;
+          currentY += labelHeight + compressedGap;
+        }
+      }
+    }
+  }
+  const result = new Map();
+  for (const label of sortedLabels) {
+    result.set(label.seriesId, label.finalY);
+  }
+  return result;
+};

package/esm/chart/utils/transition.js

@@ -0,0 +1,111 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useEffect, useRef } from 'react';
+import { interpolatePath } from 'd3-interpolate-path';
+import { animate, useMotionValue, useTransform } from 'framer-motion';
+
+/**
+ * Default transition configuration used across all chart components.
+ */
+export const defaultTransition = {
+  type: 'spring',
+  stiffness: 900,
+  damping: 120,
+  mass: 4
+};
+
+/**
+ * Duration in seconds for accessory elements to fade in.
+ */
+export const accessoryFadeTransitionDuration = 0.15;
+
+/**
+ * Delay in seconds before accessory elements fade in.
+ */
+export const accessoryFadeTransitionDelay = 0.35;
+
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @param currentPath - Current target path to animate to
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
+ * @param transition - Transition configuration
+ * @returns MotionValue containing the current interpolated path string
+ *
+ * @example
+ * // Simple path transition
+ * const animatedPath = usePathTransition({
+ *   currentPath: d ?? '',
+ *   transition: {
+ *     type: 'spring',
+ *     stiffness: 300,
+ *     damping: 20
+ *   }
+ * });
+ *
+ * @example
+ * // Time based animation
+ * const animatedPath = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   transition: {
+ *     type: 'tween',
+ *     duration: 0.3,
+ *     ease: 'easeInOut'
+ *   }
+ * });
+ */
+export const usePathTransition = _ref => {
+  let {
+    currentPath,
+    initialPath,
+    transition = defaultTransition
+  } = _ref;
+  const isInitialRender = useRef(true);
+  const previousPathRef = useRef(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
+  const targetPathRef = useRef(currentPath);
+  const animationRef = useRef(null);
+  const progress = useMotionValue(0);
+
+  // Derive the interpolated path from progress using useTransform
+  const interpolatedPath = useTransform(progress, latest => {
+    const pathInterpolator = interpolatePath(previousPathRef.current, targetPathRef.current);
+    return pathInterpolator(latest);
+  });
+  useEffect(() => {
+    // Only proceed if the target path has actually changed
+    if (targetPathRef.current !== currentPath) {
+      // Cancel any ongoing animation before starting a new one
+      const wasAnimating = !!animationRef.current;
+      if (animationRef.current) {
+        animationRef.current.cancel();
+        animationRef.current = null;
+      }
+      const currentInterpolatedPath = interpolatedPath.get();
+
+      // If we were animating and the interpolated path is different from both start and end,
+      // use it as the starting point for the next animation (smooth interruption)
+      const isInterpolatedPosition = currentInterpolatedPath !== previousPathRef.current && currentInterpolatedPath !== currentPath;
+      if (wasAnimating && isInterpolatedPosition) {
+        previousPathRef.current = currentInterpolatedPath;
+      }
+      targetPathRef.current = currentPath;
+      progress.set(0);
+      animationRef.current = animate(progress, 1, _objectSpread(_objectSpread({}, transition), {}, {
+        onComplete: () => {
+          previousPathRef.current = currentPath;
+        }
+      }));
+      isInitialRender.current = false;
+    }
+    return () => {
+      if (animationRef.current) {
+        animationRef.current.cancel();
+      }
+    };
+  }, [currentPath, transition, progress, interpolatedPath]);
+  return interpolatedPath;
+};