gridviz 3.0.36 → 3.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.36",
+    "version": "3.0.37",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -71,4 +71,4 @@
     "engines": {
         "node": ">=14"
     }
-}
+}

package/src/core/Dataset.js

@@ -120,6 +120,32 @@ export class Dataset {
 
         /** @type {number} */
         const r = this.getResolution()
+
+        // Look the cell up in an index of the cells by grid position, built once per cell
+        // list (the view cache is a new array after each redraw) instead of scanning every
+        // cell on every mouse move.
+        const index = this.cellIndex(cells, r)
+        if (index) {
+            const fx = (posGeo.x - index.ox) / r
+            const fy = (posGeo.y - index.oy) / r
+            const ix = Math.floor(fx)
+            const iy = Math.floor(fy)
+            // a position on a cell's right/top edge also belongs to that cell (inclusive
+            // bounds, as in the scan below): check the cells left of and below it too
+            for (const [dx, dy] of [
+                [0, 0],
+                [-1, 0],
+                [0, -1],
+                [-1, -1],
+            ]) {
+                if (dx && fx !== ix) continue
+                if (dy && fy !== iy) continue
+                const cell = index.cells.get(cellKey(ix + dx, iy + dy))
+                if (cell) return cell
+            }
+            return undefined
+        }
+
         for (const cell of cells) {
             if (posGeo.x < cell.x) continue
             else if (cell.x + r < posGeo.x) continue
@@ -130,6 +156,47 @@ export class Dataset {
         return undefined
     }
 
+    /**
+     * An index of cells by their position on the grid of resolution r, or null when some
+     * cell isn't on a common grid (then the caller scans the cells). Cached for the last
+     * cell list given.
+     *
+     * @param {Array.<Cell>} cells
+     * @param {number} r
+     * @returns {{cells: Map<number, Cell>, ox: number, oy: number} | null}
+     * @protected
+     */
+    cellIndex(cells, r) {
+        if (this._index && this._indexCells === cells && this._indexLength === cells.length && this._indexR === r)
+            return this._index
+        let index = null
+        if (cells.length && r > 0) {
+            const ox = +cells[0].x
+            const oy = +cells[0].y
+            const map = new Map()
+            index = { cells: map, ox, oy }
+            for (const cell of cells) {
+                const fx = (+cell.x - ox) / r
+                const fy = (+cell.y - oy) / r
+                const ix = Math.round(fx)
+                const iy = Math.round(fy)
+                // not on the grid: no index, scan instead
+                if (Math.abs(fx - ix) > 1e-6 || Math.abs(fy - iy) > 1e-6) {
+                    index = null
+                    break
+                }
+                const key = cellKey(ix, iy)
+                // the first cell at a position wins, as in the scan
+                if (!map.has(key)) map.set(key, cell)
+            }
+        }
+        this._index = index
+        this._indexCells = cells
+        this._indexLength = cells.length
+        this._indexR = r
+        return index
+    }
+
     //getters and setters
 
     /** @returns {number} */
@@ -152,3 +219,14 @@ export class Dataset {
         return this
     }
 }
+
+/**
+ * One number per grid position: cell positions relative to the first cell stay well
+ * within +-2^21, so x * 2^22 + y is exact.
+ * @param {number} ix
+ * @param {number} iy
+ * @returns {number}
+ */
+function cellKey(ix, iy) {
+    return ix * 4194304 + iy
+}

package/src/core/Map.js

@@ -30,6 +30,16 @@ export class Map {
          * */
         this.layers = opts.layers || []
 
+        /**
+         * When true, redraw() schedules one redraw for the next animation frame instead of
+         * drawing at once, so the many redraw requests of a busy moment (every tile that
+         * arrives, every info.json, every setting change) are drawn once. redrawNow() still
+         * draws at once. Off by default: redraw() stays synchronous, as it always was.
+         * @type {boolean} */
+        this.asyncRedraw = !!opts.asyncRedraw
+        /** @private @type {number|null} */
+        this._redrawFrame = null
+
         //get container element
         this.container = container || document.getElementById('gridviz')
         if (!this.container) {
@@ -96,10 +106,31 @@ export class Map {
          * @type {boolean} */
         this.digForTooltip = opts.digForTooltip || false
 
-        // add event listeners to container
-        this.mouseOverHandler = (e) => this.focusCell(e)
-        this.mouseMoveHandler = (e) => this.focusCell(e)
-        this.mouseOutHandler = (e) => this.tooltip.hide()
+        // add event listeners to the canvas. Mouse moves are handled at most once per
+        // animation frame (the latest one): finding the cell and redrawing the highlight
+        // for every intermediate event only delays the one that's shown.
+        /** @private */
+        this._focusFrame = null
+        /** @private */
+        this._focusEvent = null
+        const scheduleFocus = (e) => {
+            this._focusEvent = e
+            if (this._focusFrame) return
+            this._focusFrame = requestAnimationFrame(() => {
+                this._focusFrame = null
+                const ev = this._focusEvent
+                this._focusEvent = null
+                if (ev) this.focusCell(ev)
+            })
+        }
+        this.mouseOverHandler = scheduleFocus
+        this.mouseMoveHandler = scheduleFocus
+        this.mouseOutHandler = (e) => {
+            if (this._focusFrame) cancelAnimationFrame(this._focusFrame)
+            this._focusFrame = null
+            this._focusEvent = null
+            this.tooltip.hide()
+        }
         this.geoCanvas.canvas.addEventListener('mouseover', this.mouseOverHandler)
         this.geoCanvas.canvas.addEventListener('mousemove', this.mouseMoveHandler)
         this.geoCanvas.canvas.addEventListener('mouseout', this.mouseOutHandler)
@@ -176,8 +207,31 @@ export class Map {
         return this
     }
 
-    /** @returns {this} */
+    /**
+     * Redraws the map: at once, or, with the asyncRedraw option, once at the next
+     * animation frame however many times it's called before then.
+     * @returns {this} */
     redraw() {
+        if (this.asyncRedraw) {
+            if (!this._redrawFrame && !this._destroyed)
+                this._redrawFrame = requestAnimationFrame(() => {
+                    this._redrawFrame = null
+                    this.redrawNow()
+                })
+            return this
+        }
+        return this.redrawNow()
+    }
+
+    /**
+     * Redraws the map at once, whatever the asyncRedraw option (and cancels a scheduled redraw).
+     * @returns {this} */
+    redrawNow() {
+        if (this._redrawFrame) cancelAnimationFrame(this._redrawFrame)
+        this._redrawFrame = null
+        // a destroyed map can still be asked to redraw by a dataset it shared (see destroy)
+        if (this._destroyed) return this
+
         //remove legend elements
         if (this.legend) this.legend.selectAll('*').remove()
 
@@ -220,6 +274,8 @@ export class Map {
         this.geoCanvas.ctx.drawImage(this.geoCanvas.offscreenCanvas, 0, 0)
 
         this.canvasSave = null
+        // the canvas holds no focus rectangle any more
+        this._focusedCell = undefined
 
         return this
     }
@@ -246,6 +302,18 @@ export class Map {
         /** @type {{cell:import('./Dataset.js').Cell,html:string,resolution:number} | undefined} */
         const focus = this.getCellFocusInfo(mousePositionGeo)
 
+        // Same cell as the one already highlighted (or still no cell): the canvas is right
+        // as it is, only the tooltip follows the mouse. Saves a full-canvas copy per move.
+        const focusedCell = focus ? focus.cell : null
+        if (focusedCell === this._focusedCell) {
+            if (focus) {
+                this.tooltip.setPosition(e)
+                this.tooltip.show()
+            } else this.tooltip.hide()
+            return
+        }
+        this._focusedCell = focusedCell
+
         // Transparent background (Leaflet): redraw base, then draw focus rect directly on the visible canvas
         if (this.transparentBackground) {
             // Always restore the base (offscreen) into the visible canvas
@@ -536,6 +604,8 @@ export class Map {
         })
 
         resizeObserver.observe(this.container)
+        /** @private */
+        this._resizeObserver = resizeObserver
     }
 
     /**
@@ -544,14 +614,26 @@ export class Map {
      * @memberof App
      */
     destroy() {
+        this._destroyed = true
+
         // clear layers
         this.layers = []
         this.bgLayers = []
 
-        // remove event listeners from container
-        this.container.removeEventListener('mouseover', this.mouseOverHandler)
-        this.container.removeEventListener('mousemove', this.mouseMoveHandler)
-        this.container.removeEventListener('mouseout', this.mouseOutHandler)
+        // cancel scheduled work
+        if (this._redrawFrame) cancelAnimationFrame(this._redrawFrame)
+        this._redrawFrame = null
+        if (this._focusFrame) cancelAnimationFrame(this._focusFrame)
+        this._focusFrame = null
+
+        // stop observing the container: the observer would otherwise keep this map alive
+        if (this._resizeObserver) this._resizeObserver.disconnect()
+        this._resizeObserver = null
+
+        // remove event listeners, from the canvas they were added to
+        this.geoCanvas.canvas.removeEventListener('mouseover', this.mouseOverHandler)
+        this.geoCanvas.canvas.removeEventListener('mousemove', this.mouseMoveHandler)
+        this.geoCanvas.canvas.removeEventListener('mouseout', this.mouseOutHandler)
 
         // remove canvas
         this.geoCanvas.canvas.remove()

package/src/dataset/TiledGrid.js

@@ -55,22 +55,43 @@ export class TiledGrid extends Dataset {
      */
     loadInfo() {
         if (!this.info && this.infoLoadingStatus === 'notLoaded') {
+            // marked before the request, so the redraws that happen while it's under way
+            // don't request it again
+            this.infoLoadingStatus = 'loading'
             ;(async () => {
                 try {
                     const data = await json(this.url + 'info.json')
                     this.info = data
                     this.resolution = data.resolutionGeo
                     this.infoLoadingStatus = 'loaded'
-                    this.map.redraw()
+                    // all the resolutions of a multi-resolution dataset load their info at
+                    // once: only the one currently shown needs a redraw
+                    if (this.isShown()) this.map.redraw()
                 } catch (error) {
                     //mark as failed
                     this.infoLoadingStatus = 'failed'
                 }
             })()
-        } else if (this.infoLoadingStatus === 'loaded' || this.infoLoadingStatus === 'failed') this.map.redraw()
+        }
+        // (no redraw for a failed info.json: every redraw would ask again - an endless loop)
         return this
     }
 
+    /**
+     * True when a visible layer of the map shows this dataset at the current zoom.
+     * @returns {boolean}
+     */
+    isShown() {
+        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 (!lay.getDataset) continue
+            if (lay.getDataset(z) == this) return true
+        }
+        return false
+    }
+
     /**
      * Compute a tiling envelope from a geographical envelope.
      * This is the function to use to know which tiles to download for a geographical view.
@@ -197,19 +218,7 @@ export class TiledGrid extends Dataset {
         // Check if any visible layer depends on this dataset
         // 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
-        const z = this.map.getZoom()
-        for (const lay of this.map.layers) {
-            if (lay.visible && !lay.visible(z)) continue
-            if (!lay.getDataset) continue
-            if (lay.getDataset(z) != this) continue
-            //found one layer. No need to seek more.
-            needsRedraw = true
-            break
-        }
-
-        if (!needsRedraw) return
+        if (!this.isShown()) return
 
         // Check if tile intersects the current view
         const env = this.map.updateExtentGeo()

package/src/style/DotDensityStyle.js

@@ -3,7 +3,7 @@
 
 import { Style } from '../core/Style.js'
 import { randomNormal } from 'd3-random'
-import { checkWebGLSupport, makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { checkWebGLSupport, getSharedWebGLCanvas } from '../utils/webGLUtils.js'
 import { WebGLSquareColoring } from '../utils/WebGLSquareColoring.js'
 import { color } from 'd3-color'
 
@@ -62,8 +62,8 @@ export class DotDensityStyle extends Style {
         const ctx = geoCanvas.offscreenCtx
 
         if (checkWebGLSupport()) {
-            //create canvas and webgl renderer
-            const cvWGL = makeWebGLCanvas(geoCanvas.w + '', geoCanvas.h + '')
+            //the shared webgl canvas (one context for all styles, instead of a new one per draw)
+            const cvWGL = getSharedWebGLCanvas(geoCanvas.w, geoCanvas.h)
             if (!cvWGL) {
                 console.error('No webGL')
                 return

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -2,9 +2,36 @@
 'use strict'
 
 import { Style } from '../core/Style.js'
-import { initShaderProgram, createShader, makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { getSharedWebGLCanvas, getProgram, getBuffer, bufferOwner } from '../utils/webGLUtils.js'
 import { color } from 'd3-color'
 
+const VERTEX_SHADER = `
+        attribute vec2 pos;
+        uniform float sizePix;
+        uniform mat3 mat;
+        attribute float i;
+        varying float vi;
+        void main() {
+          gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+          gl_PointSize = sizePix;
+          vi = i;
+        }`
+
+const FRAGMENT_SHADER = `
+        precision highp float;
+        varying float vi;
+        uniform sampler2D colorLUT;
+        uniform float lutSize;
+        void main(void) {
+            float idx = floor(vi + 0.5);
+            float u = (idx + 0.5) / lutSize;
+            gl_FragColor = texture2D(colorLUT, vec2(u, 0.5));
+        }`
+
+// names of the buffers this style fills in the shared context (getBuffer)
+const POSITION_BUFFER = 'SquareColorCategoryWebGLStyle.pos'
+const INDEX_BUFFER = 'SquareColorCategoryWebGLStyle.i'
+
 /**
  * Style based on webGL
  * To show cells as colored squares, from categories.
@@ -45,9 +72,15 @@ export class SquareColorCategoryWebGLStyle extends Style {
          * @type {function(number,number):number} */
         this.size = opts.size // (resolution, z) => ...
 
-        /**  * @type {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext, width:number, height:number }}*/
+        /** The shared WebGL canvas this style last drew into (getSharedWebGLCanvas)
+         * @type {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext, width:number, height:number }}*/
         this.cvWGL = undefined
-        this.programm = undefined
+        /** @type {WebGLRenderingContext|undefined} */
+        this.gl = undefined
+        this.program = undefined
+        this.lutTexture = undefined
+        /** Number of points in the shared buffers, for drawArrays */
+        this.pointsNb = 0
 
         this.x = undefined
         this.y = undefined
@@ -55,88 +88,68 @@ export class SquareColorCategoryWebGLStyle extends Style {
         this.cellsNb = undefined
     }
 
+    /**
+     * Binds this style's program, colour lookup texture and uniforms in the shared WebGL
+     * context (getSharedWebGLCanvas): compiled once per context, so a new style instance
+     * (e.g. a setting change rebuilding the style) costs no new context or program.
+     * @returns {boolean} true when the context is new to this style (its data must be re-uploaded)
+     */
     init(w, h) {
-        this.cvWGL = makeWebGLCanvas(w + '', h + '')
-        if (!this.cvWGL) { console.error('No webGL'); return }
-
+        this.cvWGL = getSharedWebGLCanvas(w, h)
         const gl = this.cvWGL.gl
-
-        //draw
-        const vectorShader = `
-        attribute vec2 pos;
-        uniform float sizePix;
-        uniform mat3 mat;
-        attribute float i;
-        varying float vi;
-        void main() {
-          gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
-          gl_PointSize = sizePix;
-          vi = i;
-        }`
-        /** @type {WebGLShader} */
-        const vShader = createShader(gl, gl.VERTEX_SHADER, vectorShader)
-
-        const fragmentShader = `
-        precision highp float;
-        varying float vi;
-        uniform sampler2D colorLUT;
-        uniform float lutSize;
-        void main(void) {
-            float idx = floor(vi + 0.5);
-            float u = (idx + 0.5) / lutSize;
-            gl_FragColor = texture2D(colorLUT, vec2(u, 0.5));
-        }`
-        /** @type {WebGLShader} */
-        const fShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShader)
-
-        /** @type {WebGLProgram} */
-        this.program = initShaderProgram(gl, vShader, fShader)
+        const contextChanged = this.gl !== gl
+        if (contextChanged) {
+            this.gl = gl
+            this.program = getProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER)
+            this.lutTexture = undefined
+        }
         gl.useProgram(this.program)
+        this.bindColors()
+        return contextChanged
     }
 
     bindColors() {
         const gl = this.cvWGL.gl
-        const lutSize = this.colors.length;
-        const lutData = new Uint8Array(lutSize * 4); // RGBA for each entry
-
-        // Fill lutData with your color values (e.g., rainbow, grayscale, etc.)
-        for (let i = 0; i < lutSize; i++) {
-            const c = color(this.colors[i])
-            lutData[i * 4] = +c.r;     // R
-            lutData[i * 4 + 1] = c.g; // G
-            lutData[i * 4 + 2] = c.b; // B
-            lutData[i * 4 + 3] = c?.opacity * 255; // A
+        const lutSize = this.colors.length
+
+        // created once per style and context
+        if (!this.lutTexture) {
+            const lutData = new Uint8Array(lutSize * 4) // RGBA for each entry
+            for (let i = 0; i < lutSize; i++) {
+                const c = color(this.colors[i])
+                lutData[i * 4] = +c.r
+                lutData[i * 4 + 1] = c.g
+                lutData[i * 4 + 2] = c.b
+                lutData[i * 4 + 3] = c?.opacity * 255
+            }
+            this.lutTexture = gl.createTexture()
+            gl.bindTexture(gl.TEXTURE_2D, this.lutTexture)
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, lutSize, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, lutData)
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
         }
 
-        // Create and bind texture
-        const lutTexture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, lutTexture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, lutSize, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, lutData);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-
-        // Get uniform locations
-        const uColorLUT = gl.getUniformLocation(this.program, 'colorLUT');
-        const uLutSize = gl.getUniformLocation(this.program, 'lutSize');
-
-        // Set uniform values
-        gl.uniform1i(uColorLUT, 0); // Texture unit 0
-        gl.uniform1f(uLutSize, lutSize);
-
-        // Bind the texture to texture unit 0
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, lutTexture);
+        gl.uniform1i(gl.getUniformLocation(this.program, 'colorLUT'), 0) // Texture unit 0
+        gl.uniform1f(gl.getUniformLocation(this.program, 'lutSize'), lutSize)
+        gl.activeTexture(gl.TEXTURE0)
+        gl.bindTexture(gl.TEXTURE_2D, this.lutTexture)
     }
 
+    /**
+     * Fills the shared position and colour index buffers with the cells to draw.
+     * @returns {number} the number of points uploaded (cells without a category are left out)
+     */
     bindVertices(cells, resolution, z, viewScale) {
         const gl = this.cvWGL.gl
         //add vertice and fragment data
         const r2 = resolution / 2
-        let c, nb = cells.length
-        const verticesBuffer = []
-        const iBuffer = []
+        let c,
+            nb = cells.length
+        const verticesBuffer = new Float32Array(2 * nb)
+        const iBuffer = new Float32Array(nb)
+        let n = 0
         for (let i = 0; i < nb; i++) {
             c = cells[i]
             const cat = this.code(c, resolution, z, viewScale)
@@ -149,34 +162,33 @@ export class SquareColorCategoryWebGLStyle extends Style {
                 console.log('Unexpected category index: ' + cat + ' ' + i_)
                 continue
             }
-            verticesBuffer.push(c.x + r2, c.y + r2)
-            iBuffer.push(+i_)
+            verticesBuffer[2 * n] = c.x + r2
+            verticesBuffer[2 * n + 1] = c.y + r2
+            iBuffer[n] = +i_
+            n++
         }
 
-        //bind vertice data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.STATIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, POSITION_BUFFER))
+        gl.bufferData(gl.ARRAY_BUFFER, verticesBuffer.subarray(0, 2 * n), gl.DYNAMIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, INDEX_BUFFER))
+        gl.bufferData(gl.ARRAY_BUFFER, iBuffer.subarray(0, n), gl.DYNAMIC_DRAW)
+        bufferOwner(gl, POSITION_BUFFER, this)
+        return n
+    }
+
+    /** Points the program's attributes at the shared buffers (whatever another style left bound). */
+    bindAttributes() {
+        const gl = this.cvWGL.gl
         const position = gl.getAttribLocation(this.program, 'pos')
-        gl.vertexAttribPointer(
-            position,
-            2, //numComponents
-            gl.FLOAT, //type
-            false, //normalise
-            0, //stride
-            0 //offset
-        )
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, POSITION_BUFFER))
+        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0)
         gl.enableVertexAttribArray(position)
-
-        //i data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(iBuffer), gl.STATIC_DRAW)
         const i = gl.getAttribLocation(this.program, 'i')
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, INDEX_BUFFER))
         gl.vertexAttribPointer(i, 1, gl.FLOAT, false, 0, 0)
         gl.enableVertexAttribArray(i)
     }
 
-
-
     // check if the vertices have to be bound again
     mapContentChanged(v, cellsNb) {
         if (v.x == this.x && v.y == this.y && v.z == this.z && this.cellsNb == cellsNb) return false
@@ -203,13 +215,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
         //get view scale
         const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
-        //create canvas and webgl renderer
-        let contextRecreated = false
-        if (!this.cvWGL || geoCanvas.w != this.cvWGL.width || geoCanvas.h != this.cvWGL.height) {
-            contextRecreated = true
-            this.init(geoCanvas.w, geoCanvas.h)
-            this.bindColors()
-        }
+        //bind this style's program in the shared WebGL context
+        const contextChanged = this.init(geoCanvas.w, geoCanvas.h)
         const gl = this.cvWGL.gl
         const canvas = this.cvWGL.canvas
 
@@ -217,32 +224,29 @@ export class SquareColorCategoryWebGLStyle extends Style {
         const sizePix = this.size ? this.size(resolution, z) / z : resolution / z + 0.2
         gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * sizePix)
 
-        //
-        // mapContentChanged() is a cheap proxy for "did the content change" based
-        // on view x/y/z and cell count alone - it has no idea the WebGL context
-        // itself was just thrown away and recreated a few lines up (geoCanvas.w/h
-        // changing, e.g. from a browser/devtools resize, recreates cvWGL with a
-        // fresh, empty vertex buffer). A resize alone often leaves the geographic
-        // view and cell count identical to the previous draw, so without forcing
-        // a rebind here, mapContentChanged reports "unchanged" and the rebind gets
-        // skipped - leaving the new context's vertex buffer never populated and
-        // gl.drawArrays() drawing nothing, silently (confirmed via a resize-storm
-        // test: reinit-without-rebind happened on 5 of 9 context recreations).
-        const shouldRebind = this.mapContentChanged(geoCanvas.view, cells.length) || contextRecreated
-        if (shouldRebind)
-            //bind vertices
-            this.bindVertices(cells, resolution, z, viewScale)
-            //transformation
-            gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(geoCanvas.getWebGLTransform()))
-
-        // Enable the depth test
-        //gl.enable(gl.DEPTH_TEST);
+        // mapContentChanged() is a cheap proxy for "did the content change", based on view
+        // x/y/z and cell count alone. The upload is also needed when the shared buffers
+        // hold another style's data (bufferOwner), or the context is new to this style
+        // (e.g. replaced after being lost).
+        const contentChanged = this.mapContentChanged(geoCanvas.view, cells.length)
+        if (contentChanged || contextChanged || bufferOwner(gl, POSITION_BUFFER) !== this)
+            this.pointsNb = this.bindVertices(cells, resolution, z, viewScale)
+        this.bindAttributes()
+
+        //transformation
+        gl.uniformMatrix3fv(
+            gl.getUniformLocation(this.program, 'mat'),
+            false,
+            new Float32Array(geoCanvas.getWebGLTransform())
+        )
+
         // Clear the color buffer bit
+        gl.clearColor(0, 0, 0, 0)
         gl.clear(gl.COLOR_BUFFER_BIT)
-        // Set the view port
-        //gl.viewport(0, 0, cg.w, cg.h);
 
-        gl.drawArrays(gl.POINTS, 0, cells.length)
+        // only the points actually uploaded: cells without a category are left out, and
+        // drawing past the end of the buffer is a WebGL error that draws nothing at all
+        gl.drawArrays(gl.POINTS, 0, this.pointsNb)
 
         //draw in canvas geo
         geoCanvas.initCanvasTransform()