Timeline: forget future limit if a different thunk is entered

MrTipson · Sep 30, 2024 · e4b12c4 · e4b12c4
1 parent 96fad67
commit e4b12c4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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]);