gridviz 3.0.39 → 3.0.41

package/package.json

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

package/src/core/Map.js

@@ -245,7 +245,11 @@ export class Map {
         //remove legend elements: the legends themselves only, not what is inside them
         //(a legend keeps its content while one of its swatches is hovered, see Style.updateLegends)
         //except the one being hovered, which would lose its mouseleave (see Legend.highlight)
-        if (this.legend) this.legend.selectAll(':scope > *:not([data-gridviz-hovered])').remove()
+        if (this.legend) {
+            this.legend.selectAll(':scope > *:not([data-gridviz-hovered])').remove()
+            // the legends of this draw are placed one after the other (see GridLayer.addLegends)
+            this.legend.node()._gridvizLegendCursor = null
+        }
 
         //clear
         this.geoCanvas.initCanvasTransform()

package/src/dataset/TiledGrid.js

@@ -10,6 +10,17 @@ import { Dataset } from '../core/Dataset.js'
 // external
 import { json, csv } from 'd3-fetch'
 
+// The tiles that are loaded are kept, so that going back to a place needs no new request. They are kept as lists of cell objects, which
+// take a lot of memory (the education grid of the Statistical Atlas reached 1.5 GB after some minutes of panning and zooming), so the
+// number of cells kept by all the TiledGrid together is limited (TiledGrid.maxCachedCells): when there are more, the tiles that were used
+// the longest time ago are dropped, and loaded again if the map needs them. The tiles of the view on the screen, and those used in the
+// last KEEP_MS ms, are never dropped.
+const KEEP_MS = 3000
+/** All the tiles kept, of every dataset. */
+const keptTiles = new Set()
+let keptCells = 0
+const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now())
+
 /**
  * A tiled dataset, composed of CSV tiles.
  *
@@ -152,6 +163,8 @@ export class TiledGrid extends Dataset {
 
                 // Skip already loaded tiles or retry failed ones
                 if (this.cache[xT][yT] && this.cache[xT][yT] !== 'failed') {
+                    // in the view: not to be dropped
+                    if (typeof this.cache[xT][yT] === 'object') this.cache[xT][yT].lastUsed = now()
                     ++processedTiles
                     continue
                 }
@@ -163,6 +176,7 @@ export class TiledGrid extends Dataset {
                     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
@@ -235,6 +249,45 @@ export class TiledGrid extends Dataset {
         }
     }
 
+    /**
+     * Counts a tile that was loaded in the cells kept, and drops the tiles used the longest time ago when there are too many.
+     *
+     * @param {any} tile
+     * @private
+     */
+    _keep(tile) {
+        // a failed tile is the string 'failed', not a tile
+        if (!tile || typeof tile !== 'object' || !tile.cells) return
+        tile.lastUsed = now()
+        tile.owner = this
+        keptTiles.add(tile)
+        keptCells += tile.cells.length
+        if (keptCells <= TiledGrid.maxCachedCells) return
+        const limit = now() - KEEP_MS
+        const unused = [...keptTiles].filter((t) => t.lastUsed < limit).sort((a, b) => a.lastUsed - b.lastUsed)
+        for (const t of unused) {
+            if (keptCells <= TiledGrid.maxCachedCells) break
+            t.owner._drop(t)
+        }
+    }
+
+    /**
+     * Forgets a tile: it is loaded again when the map needs it.
+     *
+     * @param {any} tile
+     * @private
+     */
+    _drop(tile) {
+        const column = this.cache[tile.x]
+        if (column && column[tile.y] === tile) {
+            delete column[tile.y]
+            if (!Object.keys(column).length) delete this.cache[tile.x]
+        }
+        if (keptTiles.delete(tile)) keptCells -= tile.cells.length
+        tile.owner = undefined
+        tile.cells = []
+    }
+
     /**
      * Fill the view cache with all cells which are within a geographical envelope.
      * @abstract
@@ -264,6 +317,7 @@ export class TiledGrid extends Dataset {
                 /** @type {object} */
                 const tile = this.cache[xT][yT]
                 if (!tile || typeof tile === 'string') continue
+                tile.lastUsed = now()
 
                 //get cells
                 //this.cellsViewCache = this.cellsViewCache.concat(tile.cells)
@@ -280,6 +334,14 @@ export class TiledGrid extends Dataset {
     }
 }
 
+/**
+ * The most cells kept in memory by the tiles of all the TiledGrid together (a cell is an object of the values of a place, some hundred
+ * bytes: about 250 MB for a million). It can be changed at any time.
+ *
+ * @type {number}
+ */
+TiledGrid.maxCachedCells = 1500000
+
 function getGridTile(cells, xT, yT, gridInfo) {
     const tile = {}
 

package/src/layer/GridLayer.js

@@ -137,8 +137,16 @@ export class GridLayer extends Layer {
             // so that hovering a swatch can highlight the cells of the style on the map
             lg.style_ = style
             lg.redraw = () => (geoCanvas.redraw ? geoCanvas.redraw() : undefined)
-            // a hovered legend is still in place (see Map.redrawNow): moving it would lose its mouseleave
-            if (lg.div.node().parentNode !== legendComp.node()) legendComp.node().append(lg.div.node())
+            // The legends go in the order they are drawn, after the one placed before them. A hovered legend is
+            // still in the container (see Map.redrawNow) and is left where it is: moving it would lose its mouseleave,
+            // and appending the others after it would put it above the legends that come before it.
+            const container = legendComp.node()
+            const el = lg.div.node()
+            const previous = container._gridvizLegendCursor
+            if (previous) {
+                if (el.previousSibling !== previous) previous.after(el)
+            } else if (container.firstChild !== el) container.prepend(el)
+            container._gridvizLegendCursor = el
         }
     }