gridviz 3.0.18 → 3.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.18",
+    "version": "3.0.19",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/core/GeoCanvas.js

@@ -78,54 +78,24 @@ export class GeoCanvas {
         this.extGeo = { xMin: NaN, xMax: NaN, yMin: NaN, yMax: NaN }
         this.updateExtentGeo()
 
-        //rely on d3 zoom for pan/zoom
+        //rely on d3 for zoom
         if (!opts.disableZoom) {
             let tP = zoomIdentity
+            // @ts-ignore
+            let debounceTimeout = null // Add a debounce timeout variable
             const z = d3zoom()
-                //to make the zooming a bit faster
+                // to make the zooming a bit faster
                 .wheelDelta((e) => -e.deltaY * (e.deltaMode === 1 ? 0.07 : e.deltaMode ? 1 : 0.004))
                 .on('zoom', (e) => {
                     const t = e.transform
-                    const f = tP.k / t.k
-
-                    // Get container's bounding rect to adjust for offsets
-                    const containerRect = this.canvas.getBoundingClientRect()
-
-                    // Adjust for container's offset and zoom center
-                    const offsetX = e.sourceEvent.offsetX - containerRect.left
-                    const offsetY = e.sourceEvent.offsetY - containerRect.top
-
-                    if (f === 1) {
-                        // Pan logic
+                    const zoomFactor = tP.k / t.k
+                    if (zoomFactor == 1) {
+                        //pan
                         const dx = tP.x - t.x
                         const dy = tP.y - t.y
                         this.pan(dx * this.view.z, -dy * this.view.z)
                     } else {
-                        const se = e.sourceEvent
-
-                        if (se instanceof WheelEvent) {
-                            // Zoom at mouse position, adjusted by container offset
-                            this.zoom(f, this.pixToGeoX(offsetX), this.pixToGeoY(offsetY))
-                        } else if (se instanceof TouchEvent) {
-                            if (!se.targetTouches.length) return
-
-                            // Compute average position of the touches
-                            let tx = 0,
-                                ty = 0
-                            for (let tt of se.targetTouches) {
-                                tx += tt.clientX
-                                ty += tt.clientY
-                            }
-                            tx /= se.targetTouches.length
-                            ty /= se.targetTouches.length
-
-                            // Adjust for container's offset
-                            tx -= containerRect.left
-                            ty -= containerRect.top
-
-                            // Zoom at the average touch position
-                            this.zoom(f, this.pixToGeoX(tx), this.pixToGeoY(ty))
-                        }
+                        handleZoom(e, zoomFactor)
                     }
                     tP = t
 
@@ -144,13 +114,48 @@ export class GeoCanvas {
                     if (this.onZoomStartFun) this.onZoomStartFun(e)
                 })
                 .on('end', (e) => {
-                    // end of zoom event
+                    // end of pan/zoom event
                     this.redraw()
                     this.canvasSave = { c: null, dx: 0, dy: 0, f: 1 }
 
                     if (this.onZoomEndFun) this.onZoomEndFun(e)
                 })
+            // @ts-ignore
             z(select(this.canvas))
+
+            const handleZoom = (event, zoomFactor) => {
+                // cancel ongoing data requests
+                this.cancelCurrentRequests()
+                const se = event.sourceEvent
+
+                if (se instanceof WheelEvent) {
+                    //zoom at the mouse position
+                    this.zoom(
+                        zoomFactor,
+                        // @ts-ignore
+                        this.pixToGeoX(se.offsetX),
+                        // @ts-ignore
+                        this.pixToGeoY(se.offsetY)
+                    )
+                } else if (se instanceof TouchEvent) {
+                    //compute average position of the touches
+                    let tx = 0,
+                        ty = 0
+                    for (let tt of se.targetTouches) {
+                        tx += tt.clientX
+                        ty += tt.clientY
+                    }
+                    tx /= se.targetTouches.length
+                    ty /= se.targetTouches.length
+
+                    // Adjust for container's offset
+                    // tx -= containerRect.left
+                    // ty -= containerRect.top
+
+                    //zoom at this average position
+                    this.zoom(zoomFactor, this.pixToGeoX(tx), this.pixToGeoY(ty))
+                }
+            }
         }
 
         //center extent
@@ -225,6 +230,11 @@ export class GeoCanvas {
         throw new Error('Method redraw not implemented.')
     }
 
+    /** When the zoom level changes, ensures that any ongoing requests are aborted before new ones are initiated. */
+    cancelCurrentRequests() {
+        throw new Error('Method cancelCurrentRequests not implemented.')
+    }
+
     /**
      * Clear. To be used before a redraw for example.
      * @param {string} color
@@ -320,6 +330,7 @@ export class GeoCanvas {
             this.canvasSave.f /= f
             this.canvasSave.dx = this.geoToPixX(xGeo) * (1 - this.canvasSave.f)
             this.canvasSave.dy = this.geoToPixY(yGeo) * (1 - this.canvasSave.f)
+            this.clear(this.backgroundColor)
             this.offscreenCtx.drawImage(
                 this.canvasSave.c,
                 this.canvasSave.dx,

package/src/core/Map.js

@@ -58,6 +58,19 @@ export class Map {
         this.geoCanvas.redraw = () => {
             this.redraw()
         }
+        this.geoCanvas.cancelCurrentRequests = () => {
+            // when the zoom level changes, avoid drawing outdated tiles, and ensure that requests are properly aborted when necessary
+            for (const layer of this.layers) {
+                //multires
+                if (layer.dataset?.datasets) {
+                    for (const dataset of layer.dataset?.datasets) {
+                        if (dataset?.cancelCurrentRequests) dataset.cancelCurrentRequests()
+                    }
+                }
+                //single res
+                if (layer.dataset?.cancelCurrentRequests) layer.dataset?.cancelCurrentRequests()
+            }
+        }
 
         // legend div
         this.legend = opts.legendContainer

package/src/core/Tooltip.js

@@ -69,6 +69,7 @@ export class Tooltip {
         this.tooltip.style('pointer-events', 'none')
         this.tooltip.style('opacity', '0')
         this.tooltip.style('text-wrap', 'nowrap')
+        this.tooltip.style('z-index', 99999999) // important for leaflet-gridviz etc
 
         // these placeholders are needed to prevent an infinite DOM resizeObserver loop:
         this.tooltip.style('left', '0')

package/src/dataset/TiledGrid.js

@@ -67,8 +67,7 @@ export class TiledGrid extends Dataset {
                     this.infoLoadingStatus = 'failed'
                 }
             })()
-        } else if (this.infoLoadingStatus === 'loaded' || this.infoLoadingStatus === 'failed')
-            this.map.redraw()
+        } else if (this.infoLoadingStatus === 'loaded' || this.infoLoadingStatus === 'failed') this.map.redraw()
         return this
     }
 
@@ -106,6 +105,10 @@ export class TiledGrid extends Dataset {
     async getData(extGeo) {
         if (!this.info) return this
 
+        // Create an AbortController for the current data request
+        this.abortController = new AbortController()
+        const signal = this.abortController.signal
+
         // Get the tiling envelope and check bounds
         const tb = this.getTilingEnvelope(extGeo)
         if (!tb) return this
@@ -117,10 +120,8 @@ export class TiledGrid extends Dataset {
         const yMin = Math.max(tb.yMin, gbYMin)
         const yMax = Math.min(tb.yMax, gbYMax)
 
-        // Count the total number of tiles
         const totalTiles = (xMax - xMin + 1) * (yMax - yMin + 1)
-
-        let processedTiles = 0 // Counter for loaded tiles
+        let processedTiles = 0
         const tilePromises = []
 
         // Iterate over tiles within bounds
@@ -128,8 +129,8 @@ export class TiledGrid extends Dataset {
             for (let yT = yMin; yT <= yMax; yT++) {
                 if (!this.cache[xT]) this.cache[xT] = {}
 
-                // Skip already loaded or loading tiles
-                if (this.cache[xT][yT]) {
+                // Skip already loaded tiles or retry failed ones
+                if (this.cache[xT][yT] && this.cache[xT][yT] !== 'failed') {
                     ++processedTiles
                     continue
                 }
@@ -137,21 +138,16 @@ export class TiledGrid extends Dataset {
                 // Mark tile as loading
                 this.cache[xT][yT] = 'loading'
 
-                // Prepare the tile request and store it in tilePromises
                 tilePromises.push(
-                    this.loadTile(xT, yT)
+                    this.loadTile(xT, yT, signal)
                         .then((tile) => {
-                            // Before we increment processedTiles, check if it's the last tile
-                            const isLastTile = ++processedTiles === totalTiles
-
-                            // Store the tile in the cache
                             this.cache[xT][yT] = tile
 
-                            // Pass the isLastTile argument to checkAndRedraw
+                            // Check if this is the last tile
+                            const isLastTile = ++processedTiles === totalTiles
                             this.checkAndRedraw(tile, isLastTile)
                         })
                         .catch(() => {
-                            // Mark as failed but allow processing to continue
                             this.cache[xT][yT] = 'failed'
                             ++processedTiles
                         })
@@ -159,30 +155,47 @@ export class TiledGrid extends Dataset {
             }
         }
 
-        // Handle all tile promises, including failures
         await Promise.allSettled(tilePromises)
         return this
     }
 
-    async loadTile(xT, yT) {
+    /**
+     * Load a tile.
+     *
+     * @param {number} xT
+     * @param {number} yT
+     * @param {AbortSignal} signal
+     * @returns {Promise<any>}
+     */
+    async loadTile(xT, yT, signal) {
         try {
-            const data = await csv(`${this.url}${xT}/${yT}.csv`)
+            const data = await csv(`${this.url}${xT}/${yT}.csv`, { signal })
 
-            // Preprocess or filter the data if needed
             const cells = this.preprocess ? data.filter((cell) => this.preprocess(cell) !== false) : data
 
             if (!this.info) throw new Error('Tile info unknown')
 
             return getGridTile(cells, xT, yT, this.info)
         } catch (error) {
-            console.warn(`Failed to load tile ${xT}, ${yT}:`, error)
+            if (error.name === 'AbortError') {
+                console.warn(`Tile request for ${xT}, ${yT} was aborted.`)
+            }
             throw error
         }
     }
 
+    /**
+     * Cancel ongoing data requests when zoom level changes.
+     */
+    cancelCurrentRequests() {
+        if (this.abortController) {
+            this.abortController.abort()
+        }
+    }
+
     checkAndRedraw(tile, isLastTile) {
         // Check if any visible layer depends on this dataset
-        //check if redraw is really needed, that is if:
+        // check if redraw is really needed, that is if:
         // 1. the dataset belongs to a layer which is visible at the current zoom level
         let needsRedraw = false
         //go through the layers

package/src/utils/ternary.js

@@ -15,7 +15,7 @@ export const ternaryClassifier = (properties, totalFunction, opts = {}) => {
     //parameter to decide wether to use mixed classes m0, m1, m2.
     const withMixedClasses = opts.withMixedClasses != undefined ? opts.withMixedClasses : true
 
-    //paramerter decide wether to use a central class, and the size of this central class.
+    //parameter to decide wether to use a central class, and the size of this central class.
     //set to 0 or undefined for not showing any central class. Set to 1 for a central class that contains the mix classes
     const cc = opts.centerCoefficient ? 1 - opts.centerCoefficient : undefined
 
@@ -130,6 +130,11 @@ export const ternaryColorClassifier = (properties, totalFunction, colors, opts =
     return fun
 }
 
+
+
+
+// OLD VERSIONS
+
 /*
 const orderedIndexesDec = arr => [...arr.keys()].sort((a, b) => arr[b] - arr[a]);
 const orderedIndexesInc = arr => [...arr.keys()].sort((a, b) => arr[a] - arr[b]);