From e4b12c46954c86101dd82ea6783c88f98d993143 Mon Sep 17 00:00:00 2001
From: MrTipson <gunfight7.gf@gmail.com>
Date: Mon, 30 Sep 2024 14:31:16 +0200
Subject: [PATCH] Timeline: forget future limit if a different thunk is entered

---
 src/components/Controls.tsx |  2 +-
 src/components/Timeline.tsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
index ff17b4d..a1842e8 100644
--- a/src/components/Controls.tsx
+++ b/src/components/Controls.tsx
@@ -170,7 +170,7 @@ export default function Controls(props: ControlsProps) {
 				<summary className="text-center">
 					Step <span className="font-semibold">{machine.step_number}</span>
 				</summary>
-				<Timeline className={"m-auto " + (isDesktop ? "w-[500px]" : "w-[300px]")} width={isDesktop ? 500 : 300} step={step} moveTo={moveTo} markers={[...markers.entries()]}></Timeline>
+				<Timeline className={"m-auto " + (isDesktop ? "w-[500px]" : "w-[300px]")} width={isDesktop ? 500 : 300} step={step} moveTo={moveTo} markers={[...markers.entries()]} enteredThunks={enteredThunks}></Timeline>
 			</details>
 			<div className="text-center p-2">
 				<details open>
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index ae1cff1..2dee67d 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -1,5 +1,5 @@
 import { Slider } from "@/components/ui/slider"
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 /**
  * Helper to calculate tick locations such that around 10 ticks will be on the timeline
@@ -44,6 +44,7 @@ type TimelineProps = {
 	readonly width: number,
 	readonly markers: [number, string][],
 	readonly step: number,
+	readonly enteredThunks: [number, number][],
 
 	moveTo: React.Dispatch<number>,
 }
@@ -56,7 +57,7 @@ type TimelineProps = {
  * @param props.moveTo Function that moves the machine to given step
  */
 export default function Timeline(props: TimelineProps) {
-	const { className, width, markers, step, moveTo } = props;
+	const { className, width, markers, step, moveTo, enteredThunks, } = props;
 
 	const [limit, setLimitOriginal] = useState(() => {
 		const searchParams = new URLSearchParams(location.search);
@@ -69,6 +70,12 @@ export default function Timeline(props: TimelineProps) {
 		const newUrl = `${location.pathname}?${searchParams.toString()}`;
 		history.replaceState(null, '', newUrl);
 	};
+	// If a different thunk is entered, 'forget' about the future timeline
+	useEffect(() => {
+		if (limit > step) {
+			setLimit(step);
+		}
+	}, [enteredThunks])
 
 	// Memoize ticks if limit doesn't change
 	const ticks = useMemo(() => calculateTicks(limit), [limit]);