gridviz 3.0.17 → 3.0.19

package/package.json

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

package/src/button/Button.js

@@ -46,7 +46,7 @@ export class Button {
         this.style('display', 'flex')
         this.style('justify-content', 'center')
         this.style('align-items', 'center')
-        this.style('width', '30px')
+        this.style('width', '35px')
         this.style('height', '30px')
         // this.style(padding , '4px'
 

package/src/core/GeoCanvas.js

@@ -78,44 +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
-                    if (f == 1) {
+                    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 the mouse position
-                            this.zoom(
-                                f,
-                                this.pixToGeoX(e.sourceEvent.offsetX),
-                                this.pixToGeoY(e.sourceEvent.offsetY)
-                            )
-                        } else if (se instanceof TouchEvent) {
-                            if (!se.targetTouches.length) return
-                            //pinch zoom
-                            //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
-                            //zoom at this average position
-                            this.zoom(f, this.pixToGeoX(tx), this.pixToGeoY(ty))
-                        }
+                        handleZoom(e, zoomFactor)
                     }
                     tP = t
 
@@ -134,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
@@ -215,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
@@ -310,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,11 +58,25 @@ 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.legendDivId = opts.legendDivId || 'gvizLegend'
-        this.legend = select('#' + this.legendDivId)
-        if (this.legend.empty()) this.initialiseLegend()
+        this.legend = opts.legendContainer
+            ? select(opts.legendContainer) // Wrap the provided HTML node in a D3 selection
+            : null
+        if (!this.legend) this.initialiseLegend()
 
         //tooltip
 
@@ -122,9 +136,9 @@ export class Map {
     }
 
     initialiseLegend() {
-        this.legend = select(this.container.id && this.container.id != '' ? '#' + this.container.id : 'body')
-            .append('div')
-            .attr('id', this.legendDivId)
+        this.legend = select(this.container)
+            .append('div') // Create a new container
+            .attr('id', 'gridviz-legend')
             .style('position', 'absolute')
             .style('width', 'auto')
             .style('height', 'auto')
@@ -432,35 +446,43 @@ export class Map {
      * @memberof App
      */
     defineResizeObserver() {
-        // listen to resize events
+        // Track whether the observer is currently processing a resize event
+        let resizePending = false
+
         const resizeObserver = new ResizeObserver((entries) => {
+            if (!Array.isArray(entries) || !entries.length) return
+
             let container = this.container
-            // make sure canvas has been built
+
+            // Ensure the container has valid dimensions
             if (container.clientWidth > 0 && container.clientHeight > 0) {
-                // make sure we dont exceed loop limit first
-                // see: https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
-                window.requestAnimationFrame(() => {
-                    if (!Array.isArray(entries) || !entries.length) {
-                        return
-                    }
-                    // update the map and canvas size
-                    if (this.h !== container.clientHeight || this.w !== container.clientWidth) {
-                        this.h = container.clientHeight
-                        this.w = container.clientWidth
-                        this.geoCanvas.h = container.clientHeight
-                        this.geoCanvas.w = container.clientWidth
-                        this.geoCanvas.canvas.setAttribute('width', '' + this.w)
-                        this.geoCanvas.canvas.setAttribute('height', '' + this.h)
-                        // offscreen canvas
-                        this.geoCanvas.offscreenCanvas.setAttribute('width', '' + this.w)
-                        this.geoCanvas.offscreenCanvas.setAttribute('height', '' + this.h)
-                        this.redraw()
-
-                        //update button positions
-                        // if (this.zoomButtons) this.zoomButtons.node.style.left = this.w - 50 + 'px'
-                        // if (this.fullscreenButton) this.fullscreenButton.node.style.left = this.w - 50 + 'px'
-                    }
-                })
+                if (!resizePending) {
+                    resizePending = true // Prevent overlapping resize triggers
+
+                    window.requestAnimationFrame(() => {
+                        resizePending = false // Reset the flag after processing
+
+                        // Check for size changes
+                        if (this.h !== container.clientHeight || this.w !== container.clientWidth) {
+                            this.h = container.clientHeight
+                            this.w = container.clientWidth
+
+                            // Update geoCanvas sizes
+                            this.geoCanvas.h = this.h
+                            this.geoCanvas.w = this.w
+                            this.geoCanvas.canvas.setAttribute('width', String(this.w))
+                            this.geoCanvas.canvas.setAttribute('height', String(this.h))
+                            this.geoCanvas.offscreenCanvas.setAttribute('width', String(this.w))
+                            this.geoCanvas.offscreenCanvas.setAttribute('height', String(this.h))
+
+                            this.redraw()
+
+                            // Optionally reposition UI elements
+                            // if (this.zoomButtons) this.zoomButtons.node.style.left = this.w - 50 + 'px';
+                            // if (this.fullscreenButton) this.fullscreenButton.node.style.left = this.w - 50 + 'px';
+                        }
+                    })
+                }
             }
         })
 

package/src/core/Tooltip.js

@@ -16,8 +16,6 @@ export class Tooltip {
     constructor(opts) {
         opts = opts || {}
 
-        /** @type {string} */
-        this.div = opts.div || 'tooltip_eurostat'
         /** @type {string} */
         this.maxWidth = opts.maxWidth || '20em'
         /** @type {string} */
@@ -47,21 +45,15 @@ export class Tooltip {
         this.xMouseOffset = opts.xMouseOffset || 0
         /** @type {HTMLElement} */
         this.parentElement = opts.parentElement || document.body
+        /** @type {HTMLElement} */
+        this.tooltipElement = opts.tooltipElement || null
 
         /**
          * @public
          * @type {import("d3-selection").Selection} */
-        this.tooltip = select('#' + this.div)
-
-        if (this.tooltip.empty()) {
-            //create tooltip DOM node
-            // this.tooltip = select(
-            //     '#' + this.parentElement.id && this.parentElement.id != ''
-            //         ? '#' + this.parentElement.id
-            //         : 'body'
-            // )
-            this.tooltip = select('body').append('div').attr('id', this.div)
-        }
+        this.tooltip = opts.tooltipElement
+            ? select(opts.tooltipElement) // Wrap the provided HTML node in a D3 selection
+            : select(this.parentElement).append('div').attr('id', 'gridviz-tooltip').attr('class', 'gridviz-tooltip') // create default element
 
         //initialise
         this.tooltip.style('max-width', this.maxWidth)
@@ -77,6 +69,11 @@ 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')
+        this.tooltip.style('top', '0')
 
         // aria-labels (thanks to wahlatlas)
         this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
@@ -107,14 +104,51 @@ export class Tooltip {
      * @param {MouseEvent} event
      */
     setPosition(event) {
+        // Get the bounding rect of the parent container (map2)
         let parentRect = this.parentElement.getBoundingClientRect()
 
-        let x = event.pageX + this.xOffset
-        let y = event.pageY - this.yOffset
+        // Get the mouse position (relative to the parent container)
+        let x = event.clientX - parentRect.left + this.xOffset // Relative to parent
+        let y = event.clientY - parentRect.top - this.yOffset // Relative to parent
 
+        // Now, apply the position to the tooltip
         this.tooltip.style('left', x + 'px').style('top', y + 'px')
 
-        this.ensureTooltipInsideContainer(event, parentRect)
+        // Ensure the tooltip stays inside the parent container
+        this.ensureTooltipInsideContainer(event, parentRect, this.tooltip.node())
+    }
+    /**
+     * @function ensureTooltipInsideContainer
+     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
+     * @param {MouseEvent} event
+     * @param {DOMRect} parentRect
+     * @param {HTMLElement} tooltipNode
+     */
+    ensureTooltipInsideContainer(event, parentRect, tooltipNode) {
+        let node = tooltipNode
+        let parentWidth = parentRect.width
+        let parentHeight = parentRect.height
+
+        // Ensure tooltip doesn't go beyond the right edge
+        if (node.offsetLeft + node.clientWidth > parentWidth) {
+            let left = event.clientX - node.clientWidth - this.xOffset
+            node.style.left = left + 'px'
+        }
+
+        // Ensure tooltip doesn't go beyond the bottom edge
+        if (node.offsetTop + node.clientHeight > parentHeight) {
+            node.style.top = parentHeight - node.clientHeight + 'px'
+        }
+
+        // Ensure tooltip doesn't go above the top edge
+        if (node.offsetTop < 0) {
+            node.style.top = 0 + 'px'
+        }
+
+        // Ensure tooltip doesn't go beyond the left edge
+        if (node.offsetLeft < 0) {
+            node.style.left = 0 + 'px'
+        }
     }
 
     /*
@@ -145,39 +179,4 @@ export class Tooltip {
         this.tooltip.attr(k, v)
         return this
     }
-
-    /**
-     * @function ensureTooltipInsideContainer
-     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
-     * @param {MouseEvent} event
-     * @param {DOMRect} parentRect
-     */
-    ensureTooltipInsideContainer = function (event, parentRect) {
-        let node = this.tooltip.node()
-        let parentWidth = parentRect.width
-        let parentHeight = parentRect.height
-
-        //too far right
-        if (node.offsetLeft > parentRect.left + parentWidth - node.clientWidth) {
-            let left = event.x - node.clientWidth - this.xOffset
-            node.style.left = left + 'px'
-            // check if mouse covers tooltip
-            if (node.offsetLeft + node.clientWidth > event.x) {
-                //move tooltip left so it doesnt cover mouse
-                let left2 = event.x - node.clientWidth - this.xOffset
-                node.style.left = left2 + 'px'
-            }
-            // node.style.top = node.offsetTop + config.yOffset + "px";
-        }
-
-        //too far down
-        if (node.offsetTop + node.clientHeight > parentRect.top + parentHeight) {
-            node.style.top = node.offsetTop - node.clientHeight + 'px'
-        }
-
-        //too far up
-        if (node.offsetTop < parentRect.top) {
-            node.style.top = parentRect.top + this.yOffset + 'px'
-        }
-    }
 }

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]);