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) {
Step {machine.step_number}
-
+
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,
}
@@ -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]);