gridviz 3.0.41 → 3.1.1

package/src/core/Tooltip.js

@@ -1,185 +1,191 @@
-//@ts-check
-'use strict'
-
-import { select } from 'd3-selection'
-//import { transition } from "d3-transition";
-
-/**
- * A generic class to make a tooltip.
- * It is a div element, which can be moved under the mouse pointer and filled with some information in html.
- * @module core
- */
-export class Tooltip {
-    /**
-     * @param {object} opts
-     */
-    constructor(opts) {
-        opts = opts || {}
-
-        /** @type {string} */
-        this.maxWidth = opts.maxWidth || '20em'
-        /** @type {string} */
-        this.fontSize = opts.fontSize || '1.2em'
-        /** @type {string} */
-        this.background = opts.background || 'white'
-        /** @type {string} */
-        this.padding = opts.padding || '5px'
-        /** @type {string} */
-        this.border = opts.border || '0px'
-        /** @type {string} */
-        this['border-radius'] = opts['border-radius'] || '0px'
-        /** @type {string} */
-        this['box-shadow'] = opts['box-shadow'] || '5px 5px 5px grey'
-        /** @type {string} */
-        this['font-family'] = opts['font-family'] || 'Helvetica, Arial, sans-serif'
-
-        /** @type {number} */
-        this.transitionDuration = opts.transitionDuration || 100
-        /** @type {number} */
-        this.xOffset = opts.xOffset || 30
-        /** @type {number} */
-        this.yOffset = opts.yOffset || 20
-        /** @type {number} */ // e.g. to prevent mouse cursor covering cell being highlighted
-        this.yMouseOffset = opts.yMouseOffset || 0
-        /** @type {number} */
-        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 = 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)
-        this.tooltip.style('overflow', 'hidden')
-        this.tooltip.style('font-size', this.fontSize)
-        this.tooltip.style('background', this.background)
-        this.tooltip.style('padding', this.padding)
-        this.tooltip.style('border', this.border)
-        this.tooltip.style('border-radius', this['border-radius'])
-        this.tooltip.style('box-shadow', this['box-shadow'])
-        this.tooltip.style('font-family', this['font-family'])
-        this.tooltip.style('position', 'absolute')
-        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')
-
-        // a tooltip element given by the user gets the class too
-        this.tooltip.classed('gridviz-tooltip', true)
-
-        // aria-labels (thanks to wahlatlas)
-        this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
-    }
-
-    /** Show the tooltip */
-    show() {
-        // @ts-ignore
-        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 1)
-    }
-
-    /** Hide the tooltip */
-    hide() {
-        // @ts-ignore
-        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 0)
-    }
-
-    /**
-     * Set the content of the tooltip.
-     * @param {string} html
-     */
-    html(html) {
-        this.tooltip.html(html)
-    }
-
-    /**
-     * Set the position of the tooltip at the mouse event position.
-     * @param {MouseEvent} event
-     */
-    setPosition(event) {
-        // Get the bounding rect of the parent container (map2)
-        let parentRect = this.parentElement.getBoundingClientRect()
-
-        // 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')
-
-        // 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'
-        }
-    }
-
-    /*
-	my.mouseover = function (event, html) {
-		if (html) my.html(html);
-		my.setPosition(event);
-		my.show()
-		//this.ensureTooltipInsideContainer();
-	};
-	
-	my.mousemove = function (event) {
-		my.setPosition(event);
-		//this.ensureTooltipInsideContainer();
-	};
-	
-	my.mouseout = function () {
-		my.hide();
-	};*/
-
-    style(k, v) {
-        if (arguments.length == 1) return this.tooltip.style(k)
-        this.tooltip.style(k, v)
-        return this
-    }
-
-    attr(k, v) {
-        if (arguments.length == 1) return this.tooltip.attr(k)
-        this.tooltip.attr(k, v)
-        return this
-    }
-}
+//@ts-check
+'use strict'
+
+import { select } from 'd3-selection'
+//import { transition } from "d3-transition";
+
+/**
+ * A generic class to make a tooltip.
+ * It is a div element, which can be moved under the mouse pointer and filled with some information in html.
+ * @module core
+ */
+export class Tooltip {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** @type {string} */
+        this.maxWidth = opts.maxWidth || '20em'
+        /** @type {string} */
+        this.fontSize = opts.fontSize || '1rem'
+        /** @type {string} */
+        this.color = opts.color || '#171a22'
+        /** @type {string} */
+        this.lineHeight = opts.lineHeight || '1.5'
+        /** @type {string} */
+        this.background = opts.background || 'white'
+        /** @type {string} */
+        this.padding = opts.padding || '4px'
+        /** @type {string} */
+        this.border = opts.border || '1px solid #d5d5d5'
+        /** @type {string} */
+        this['border-radius'] = opts['border-radius'] || '6px'
+        /** @type {string} */
+        this['box-shadow'] = opts['box-shadow'] || '0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08)'
+        /** @type {string} */
+        this['font-family'] = opts['font-family'] || "'Helvetica Neue', Arial, Helvetica, sans-serif"
+
+        /** @type {number} */
+        this.transitionDuration = opts.transitionDuration || 100
+        /** @type {number} */
+        this.xOffset = opts.xOffset || 30
+        /** @type {number} */
+        this.yOffset = opts.yOffset || 20
+        /** @type {number} */ // e.g. to prevent mouse cursor covering cell being highlighted
+        this.yMouseOffset = opts.yMouseOffset || 0
+        /** @type {number} */
+        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 = 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)
+        this.tooltip.style('overflow', 'hidden')
+        this.tooltip.style('font-size', this.fontSize)
+        this.tooltip.style('color', this.color)
+        this.tooltip.style('line-height', this.lineHeight)
+        this.tooltip.style('background', this.background)
+        this.tooltip.style('padding', this.padding)
+        this.tooltip.style('border', this.border)
+        this.tooltip.style('border-radius', this['border-radius'])
+        this.tooltip.style('box-shadow', this['box-shadow'])
+        this.tooltip.style('font-family', this['font-family'])
+        this.tooltip.style('position', 'absolute')
+        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')
+
+        // a tooltip element given by the user gets the class too
+        this.tooltip.classed('gridviz-tooltip', true)
+
+        // aria-labels (thanks to wahlatlas)
+        this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
+    }
+
+    /** Show the tooltip */
+    show() {
+        // @ts-ignore
+        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 1)
+    }
+
+    /** Hide the tooltip */
+    hide() {
+        // @ts-ignore
+        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 0)
+    }
+
+    /**
+     * Set the content of the tooltip.
+     * @param {string} html
+     */
+    html(html) {
+        this.tooltip.html(html)
+    }
+
+    /**
+     * Set the position of the tooltip at the mouse event position.
+     * @param {MouseEvent} event
+     */
+    setPosition(event) {
+        // Get the bounding rect of the parent container (map2)
+        let parentRect = this.parentElement.getBoundingClientRect()
+
+        // 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')
+
+        // 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'
+        }
+    }
+
+    /*
+	my.mouseover = function (event, html) {
+		if (html) my.html(html);
+		my.setPosition(event);
+		my.show()
+		//this.ensureTooltipInsideContainer();
+	};
+	
+	my.mousemove = function (event) {
+		my.setPosition(event);
+		//this.ensureTooltipInsideContainer();
+	};
+	
+	my.mouseout = function () {
+		my.hide();
+	};*/
+
+    style(k, v) {
+        if (arguments.length == 1) return this.tooltip.style(k)
+        this.tooltip.style(k, v)
+        return this
+    }
+
+    attr(k, v) {
+        if (arguments.length == 1) return this.tooltip.attr(k)
+        this.tooltip.attr(k, v)
+        return this
+    }
+}

package/src/dataset/TiledGrid.js

@@ -5,6 +5,7 @@
 
 // internal
 import { Dataset } from '../core/Dataset.js'
+import { isVisibleAt } from '../core/Drawable.js'
 //import { monitor, monitorDuration } from '../utils/Utils.js'
 
 // external
@@ -96,7 +97,7 @@ export class TiledGrid extends Dataset {
         if (!this.map || !this.map.layers) return false
         const z = this.map.getZoom()
         for (const lay of this.map.layers) {
-            if (lay.visible && !lay.visible(z)) continue
+            if (!isVisibleAt(lay, z)) continue
             if (!lay.getDataset) continue
             if (lay.getDataset(z) == this) return true
         }
@@ -152,8 +153,6 @@ export class TiledGrid extends Dataset {
         const yMin = Math.max(tb.yMin, gbYMin)
         const yMax = Math.min(tb.yMax, gbYMax)
 
-        const totalTiles = (xMax - xMin + 1) * (yMax - yMin + 1)
-        let processedTiles = 0
         const tilePromises = []
 
         // Iterate over tiles within bounds
@@ -161,11 +160,13 @@ export class TiledGrid extends Dataset {
             for (let yT = yMin; yT <= yMax; yT++) {
                 if (!this.cache[xT]) this.cache[xT] = {}
 
-                // Skip already loaded tiles or retry failed ones
-                if (this.cache[xT][yT] && this.cache[xT][yT] !== 'failed') {
+                // Skip the tiles loaded, under way, or that failed recently
+                const kept = this.cache[xT][yT]
+                const retry =
+                    kept && kept.failed && !kept.missing && now() - kept.failed >= TiledGrid.retryFailedAfterMs
+                if (kept && !retry) {
                     // in the view: not to be dropped
-                    if (typeof this.cache[xT][yT] === 'object') this.cache[xT][yT].lastUsed = now()
-                    ++processedTiles
+                    if (kept.cells) kept.lastUsed = now()
                     continue
                 }
 
@@ -173,19 +174,40 @@ export class TiledGrid extends Dataset {
                 this.cache[xT][yT] = 'loading'
 
                 tilePromises.push(
-                    this.loadTile(xT, yT, signal)
-                        .then((tile) => {
+                    this.loadTile(xT, yT, signal).then(
+                        (tile) => {
                             this.cache[xT][yT] = tile
                             this._keep(tile)
 
                             // Check if this is the last tile
-                            const isLastTile = ++processedTiles === totalTiles
+                            // (tiles under way for another request count: the one that ends last is the one that draws)
+                            const isLastTile = !this._anyLoading(xMin, xMax, yMin, yMax)
                             this.checkAndRedraw(tile, isLastTile)
-                        })
-                        .catch(() => {
-                            this.cache[xT][yT] = 'failed'
-                            ++processedTiles
-                        })
+                        },
+                        (error) => {
+                            if (error && error.name === 'AbortError') {
+                                // cancelled, not failed: the next request loads it
+                                delete this.cache[xT][yT]
+                                return
+                            }
+                            // Most of the time a tile that fails is one the server doesn't have (the tiles of a grid are
+                            // often sparse). It is remembered as failed, and not asked for again at every redraw.
+                            // A 404 is final ('missing'). Any other failure is tried again after retryFailedAfterMs: a
+                            // browser doesn't give the status of a response without CORS headers, so a 404 from such a
+                            // server can't be told from a network error.
+                            this.cache[xT][yT] = {
+                                failed: now(),
+                                missing: /^(404|410)\b/.test(error && error.message),
+                            }
+                            // it changes nothing on the map, except when it was waited for to draw
+                            if (
+                                this.onlyDrawWhenAllTilesReady &&
+                                !this._anyLoading(xMin, xMax, yMin, yMax) &&
+                                this.isShown()
+                            )
+                                this.map.redraw()
+                        }
+                    )
                 )
             }
         }
@@ -194,6 +216,25 @@ export class TiledGrid extends Dataset {
         return this
     }
 
+    /**
+     * Tells if some tiles of a tiling envelope are still being loaded, by this request or any other one.
+     *
+     * @param {number} xMin
+     * @param {number} xMax
+     * @param {number} yMin
+     * @param {number} yMax
+     * @returns {boolean}
+     * @private
+     */
+    _anyLoading(xMin, xMax, yMin, yMax) {
+        for (let xT = xMin; xT <= xMax; xT++) {
+            const column = this.cache[xT]
+            if (!column) continue
+            for (let yT = yMin; yT <= yMax; yT++) if (column[yT] === 'loading') return true
+        }
+        return false
+    }
+
     /**
      * Load a tile.
      *
@@ -234,19 +275,20 @@ export class TiledGrid extends Dataset {
         // 1. the dataset belongs to a layer which is visible at the current zoom level
         if (!this.isShown()) return
 
+        // Waiting for all the tiles: drawn when the last one arrives, wherever it is (the tiles asked for are those of the
+        // view and of a margin around it, so the last one to arrive may be outside the view)
+        if (this.onlyDrawWhenAllTilesReady) {
+            if (isLastTile) this.map.redraw()
+            return
+        }
+
         // Check if tile intersects the current view
         const env = this.map.updateExtentGeo()
         const { xMin, xMax, yMin, yMax } = tile.extGeo
         if (env.xMax <= xMin || env.xMin >= xMax || env.yMax <= yMin || env.yMin >= yMax) return
 
         // Trigger redraw
-        if (this.onlyDrawWhenAllTilesReady) {
-            if (isLastTile) {
-                this.map.redraw()
-            }
-        } else {
-            this.map.redraw()
-        }
+        this.map.redraw()
     }
 
     /**
@@ -256,7 +298,7 @@ export class TiledGrid extends Dataset {
      * @private
      */
     _keep(tile) {
-        // a failed tile is the string 'failed', not a tile
+        // a failed tile is not a tile
         if (!tile || typeof tile !== 'object' || !tile.cells) return
         tile.lastUsed = now()
         tile.owner = this
@@ -316,7 +358,7 @@ export class TiledGrid extends Dataset {
                 //get tile
                 /** @type {object} */
                 const tile = this.cache[xT][yT]
-                if (!tile || typeof tile === 'string') continue
+                if (!tile || !tile.cells) continue
                 tile.lastUsed = now()
 
                 //get cells
@@ -342,6 +384,14 @@ export class TiledGrid extends Dataset {
  */
 TiledGrid.maxCachedCells = 1500000
 
+/**
+ * How long, in ms, a tile that failed to load is remembered, before it is requested again. It doesn't apply to a tile the
+ * server answered 404 or 410 for: that one isn't requested again. It can be changed at any time.
+ *
+ * @type {number}
+ */
+TiledGrid.retryFailedAfterMs = 30000
+
 function getGridTile(cells, xT, yT, gridInfo) {
     const tile = {}