Commit b1c41406 authored by Webb, Jake's avatar Webb, Jake
Browse files

changed to prevent going too far into a simulation

parent ade800bc

src/components/simulations/details/timeline.tsx

+2 −1
Original line number Diff line number Diff line
@@ -10,6 +10,7 @@ export interface TimelineProps { 
   */

  value: number;

  maxValue?: number;

  maxTimelineValue: number;

  onChange: (value: number, index: number) => void;

  startDate: string;

  interval: number;
@@ -27,7 +28,7 @@ export function Timeline(props: TimelineProps) { 
        trackClassName="bg-neutral-200 dark:bg-neutral-700 cursor-pointer h-2 rounded-full top-1 [&.track-0]:bg-blue-500 track"

        thumbClassName="bg-blue-500 h-4 w-4 rounded-full cursor-pointer shadow-xl"

        min={0}

        max={props.maxValue}

        max={props.maxTimelineValue}

        value={props.value || 0}

        onAfterChange={props.onChange}

        renderThumb={(thumbProps, state) => (

src/components/simulations/list/SimulationsDataGridRow.tsx

+6 −1
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ import { Link } from "@tanstack/react-router"; 
import { Simulation } from "../../../models/Simulation.model";

import { convertDateTimeString } from "../../../util/datetime";

import { CSSProperties } from "react";

import { addSeconds, differenceInSeconds } from "date-fns";



function SimulationDataGridCell({

  value,
@@ -36,7 +37,11 @@ export function SimulationsDataGridRow({ 
      search={{

        start: simulation.start,

        end: simulation.end,

        currentTimestamp: simulation.end,

        currentTimestamp: addSeconds(

          simulation.start,

          simulation.progress *

            differenceInSeconds(simulation.end, simulation.start),

        ).toISOString(),

        initialTimestamp: simulation.end,

        playbackInterval: 15,

      }}

src/routes/simulations.$simulationId.tsx

+28 −20
Original line number Diff line number Diff line
@@ -61,6 +61,8 @@ function Simulation() { 
  const { data, isLoading } = useQuery(

    simulationConfigurationQueryOptions(simulationId),

  );

  const maxTimestamp =

    (data?.progress ?? 0) * differenceInSeconds(search.end, search.start);



  const [replayStatus, setReplayStatus] = useState<"play" | "pause" | "stop">(

    "stop",
@@ -160,7 +162,10 @@ function Simulation() { 
          }),

        });



        if (isEqual(newTimestamp, search.end)) {

        if (

          isEqual(newTimestamp, search.end) ||

          isEqual(newTimestamp, addSeconds(search.start, maxTimestamp))

        ) {

          setReplayStatus("stop");

        }

      }, 15000 / rate);
@@ -192,7 +197,7 @@ function Simulation() { 


  const onTimelineChange = (value: number) => {

    setReplayStatus("pause");



    if (data && value <= maxTimestamp) {

      const leftOver = value % playbackInterval;

      let snappedValue = value;

      if (leftOver > playbackInterval / 2) {
@@ -201,7 +206,8 @@ function Simulation() { 
        snappedValue = value - leftOver;

      }

      const newTimestamp =

      addSeconds(search.start, snappedValue).toISOString().split(".")[0] + "Z";

        addSeconds(search.start, snappedValue).toISOString().split(".")[0] +

        "Z";



      setCurrentTimestamp(newTimestamp);

      setInitialTimestamp(newTimestamp);
@@ -212,6 +218,7 @@ function Simulation() { 
          initialTimestamp: newTimestamp,

        }),

      });

    }

  };



  if (isLoading || !data) return <LoadingSpinner />;
@@ -304,7 +311,8 @@ function Simulation() { 
        <Timeline

          value={differenceInSeconds(currentTimestamp, search.start)}

          onChange={onTimelineChange}

          maxValue={differenceInSeconds(search.end, search.start)}

          maxValue={maxTimestamp}

          maxTimelineValue={differenceInSeconds(search.end, search.start)}

          startDate={search.start}

          interval={search.playbackInterval}

          onIntervalChange={(newInterval: number) => {