XYChart: AnimatedAnnotation animates incorrectly

[Kongkille]

Description

Ran into an issue where if I change my chart data using the XYChart, the AnimatedAnnotation seems to animate incorrectly.

Here's a video from the chart I'm working on, as you can see the annotation immediately jumps to the x position and animates to the y position

Screen.Recording.2023-11-01.at.09.38.47.mov

(slowed down version using a copy of the code)

Screen.Recording.2023-11-01.at.09.40.04.mov

Potential fix

I'm still not quite sure what's causing this to happen. However, to get this to work on my own project, I made my own annotation with a few changes related to these lines:

visx/packages/visx-xychart/src/components/annotation/AnimatedAnnotation.tsx

Lines 37 to 46 in 6a14177

	const animatedXY = useSpring({
	from: { x: lastXY.current.x - x, y: lastXY.current.y - y },
	to: { x: 0, y: 0 },
	reset: true,
	});
	useEffect(() => {
	lastXY.current = { x, y };
	}, [x, y]);

	const animatedXY = useSpring({
		from: {
			x: lastXY.current.x - x,
			y: lastXY.current.y - y,
		},
		to: { x: 0, y: 0 },
		immediate: lastXY.current.x === undefined || lastXY.current.y === undefined, // Ensures it starts at the correct position
		reset: true,
		onRest: () => {
			// Update the lastXY ref so that the next animation starts from the correct position.
			lastXY.current = { x, y };
			setIsAnimating(false);
		},
		onStart: () => {
			setIsAnimating(true);
		},
	});

	React.useEffect(() => {
		if (isAnimating) {
			// If we're already animating, update the lastXY ref so that the next animation
			// starts from the correct position.
			lastXY.current = { x, y };
		}
	}, [x, y, isAnimating]);

1. In the effect updating the reference, we only update the ref if it's currently animating
2. Use onRest to update the reference. Essentially waiting for the animation to finish before updating the last position.

I am not sure if that's the best fix though, I have yet to try to produce a minimum example but if relevant, I'm happy to do so.