Allow only one preview in flight

Author: Pavol Klacansky

README.md

@@ -35,7 +35,6 @@ New dataset is added by following these steps:
 - Value range (or show example how to use Python to compute them)
 - Histogram (Python sample to compute them?)
 - Volume rendering (https://arxiv.org/abs/2406.15634)
-- If one preview is being downloaded and the user selects another preview, it may show the old preview (it will also jump the % progress display between the two)
 - render multiple surfaces (+ opacity)?
 - improve quality of previews (rendering)
 - render continuously instead of firing on events. Should make it smoother. (what about battery life?)

data/header.html

@@ -222,6 +222,10 @@
 let viewer
 let extent
 
+// Monotonically increasing counter that uniquely identifies the currently opened preview.
+// Previews being loaded with counter that is not equal to previewCounter are cancelled.
+let previewCounter = 0;
+
 
 function
 loadDataset(elem, name, width, height, depth, previewFileSize, previewWidth, previewHeight, previewDepth, boxWidth, boxHeight, boxDepth)
@@ -274,7 +278,9 @@
 		viewer = new Viewer(viewerElement.querySelector('canvas'))
 	}
 
-	const previewPrecision = 8
+	previewCounter++;
+	const thisPreviewCounter = previewCounter;
+
 	const previewUrl = `${name}/preview_${name}_${previewWidth}x${previewHeight}x${previewDepth}_float32.raw`
 	fetch(previewUrl)
 		.then(response => {
@@ -290,8 +296,13 @@
 
 			// stream the data into an array in chunks to allow for progress bar
 			return reader.read().then(function processChunk(result) {
+				if (thisPreviewCounter !== previewCounter) {
+					reader.cancel()
+					return null;
+				}
+
 				if (result.done) {
-					progress.textContent = `Downloading preview (100%)`
+					progressElement.textContent = `Downloading preview (100%)`
 					return array.buffer
 				}
 
@@ -304,6 +315,10 @@
 				return reader.read().then(processChunk)
 			})
 		}).then(data => {
+			if (data === null) {
+				return;
+			}
+
 			const array = new Float32Array(data);
 			viewer.uploadData(array, previewWidth, previewHeight, previewDepth, boxWidth, boxHeight, boxDepth)
 			viewer.isovalue(iso_select.value)

server.go

@@ -34,5 +34,5 @@ func wrapHandler(h http.Handler) http.HandlerFunc {
 
 func main() {
 	http.ListenAndServeTLS(":443", "fullchain.pem", "privkey.pem", wrapHandler(http.FileServer(http.Dir("./static"))))
-	//log.Fatal(http.ListenAndServe(":8000", wrapHandler(http.FileServer(http.Dir("./static")))))
+	//http.ListenAndServe(":8000", wrapHandler(http.FileServer(http.Dir("./static"))))
 }