add step as dependency (#741)

* add step as dependency and switch `>` with `<`

* fix step update in place / at the end

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* do not commit pre-release version

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

app/src/components/api.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import * as THREE from "three";
 import * as znsocket from "znsocket";
 import { client } from "../socket";
@@ -326,6 +326,7 @@ export const setupFrames = (
 ) => {
 	const currentFrameUpdatedFromSocketRef = useRef(true);
 	const customRoomAvailRef = useRef(false); // Track whether listening to the default room
+	const [updateStepInPlace, setUpdateStepInPlace] = useState(0);
 
 	const setCurrentFrameFromObject = (frame: any) => {
 		frame = frame.value;
@@ -361,51 +362,35 @@ export const setupFrames = (
 			if (x?.start > step && frame_update) {
 				setStep(x.start);
 			} else if (x?.start === step) {
-				// this should never happen?
-				const frame = await defaultRoomCon.get(step);
-				setCurrentFrameFromObject(frame);
+				setUpdateStepInPlace((prev) => prev + 1);
 			} else if (x?.indices?.includes(step)) {
-				const frame = await defaultRoomCon.get(step);
-				setCurrentFrameFromObject(frame);
-			}
-			const length = await defaultRoomCon.length();
-			setLength(length);
-			if (length >= step) {
-				setStep(length - 1);
+				setUpdateStepInPlace((prev) => prev + 1);
 			}
 		});
 
 		return () => {
 			defaultRoomCon.offRefresh?.();
 		};
-	}, [defaultRoomCon, frame_update]);
+	}, [defaultRoomCon, frame_update, step]);
 
 	// custom room
 	useEffect(() => {
 		if (currentRoomCon === undefined) return;
 
 		currentRoomCon.onRefresh(async (x: any) => {
-			// how does this even work without a step deps?
 			if (x?.start > step && frame_update) {
 				setStep(x.start);
 			} else if (x?.start === step) {
-				const frame = await currentRoomCon.get(step);
-				setCurrentFrameFromObject(frame);
+				setUpdateStepInPlace((prev) => prev + 1);
 			} else if (x?.indices?.includes(step)) {
-				const frame = await currentRoomCon.get(step);
-				setCurrentFrameFromObject(frame);
-			}
-			const length = await currentRoomCon.length();
-			setLength(length);
-			if (length >= step) {
-				setStep(length - 1);
+				setUpdateStepInPlace((prev) => prev + 1);
 			}
 		});
 
 		return () => {
 			currentRoomCon.offRefresh?.();
 		};
-	}, [currentRoomCon, frame_update]);
+	}, [currentRoomCon, frame_update, step]);
 
 	const getFrameFromCon = useCallback(
 		async (step: number) => {
@@ -434,16 +419,23 @@ export const setupFrames = (
 		}
 
 		const updateFrame = async () => {
-			const frame = await getFrameFromCon(
-				Number.parseInt(step.toString(), 10) || 0,
-			);
-			if (frame === null) {
-				// Retry after 100 ms if still null
-				setTimeout(() => updateFrame(), 100);
-			}
+			// first we check the length
 			const length = await getLengthFromCon();
 			setLength(length);
-			setCurrentFrameFromObject(frame);
+			if (step >= length) {
+				setStep(Math.max(0, length - 1));
+				return;
+			}
+			// now we request the frame
+
+			const frame = await getFrameFromCon(step || 0);
+
+			if (frame === null) {
+				console.warn("Frame ", step, " is null, retrying after 100ms...");
+				setTimeout(updateFrame, 100); // Retry after 100 ms
+				return;
+			}
+			setCurrentFrameFromObject(frame); // Process the valid frame
 		};
 
 		// debounce by 8ms (roughly 120fps)
@@ -453,7 +445,7 @@ export const setupFrames = (
 		return () => {
 			clearTimeout(debounceTimeout);
 		};
-	}, [step]);
+	}, [step, updateStepInPlace]);
 
 	// Sending edits from ZnDraw to the server
 	useEffect(() => {

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "zndraw"
-version = "0.5.4a0"
+version = "0.5.4"
 description = "Display and Edit Molecular Structures and Trajectories in the Browser."
 authors = ["zincwarecode <[email protected]>"]
 license = "License :: OSI Approved :: Eclipse Public License 2.0 (EPL-2.0)"