gridviz 2.1.12 → 2.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.1.12",
+    "version": "2.1.14",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -39,7 +39,7 @@
     "scripts": {
         "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config webpack.config.dev.cjs",
         "start-dev": "webpack --config webpack.config.dev.cjs",
-        "server": "webpack serve -c webpack.config.dev.js --static ./",
+        "server": "webpack serve -c webpack.config.dev.cjs",
         "doc": "./node_modules/.bin/jsdoc src/ src/dataset src/legend src/style -d docs/jsdoc",
         "bp": "webpack --config webpack.config.prod.cjs",
         "test": "jest"
@@ -66,9 +66,9 @@
         "jshint": "^2.12.0",
         "prettier": "2.8.8",
         "puppeteer": "^9.1.1",
-        "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.0",
-        "webpack-dev-server": "^4.11.1",
+        "webpack": "^5.89.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1",
         "webpack-livereload-plugin": "^3.0.2"
     },
     "engines": {

package/src/App.js

@@ -14,6 +14,8 @@ import { BackgroundLayerWMS } from './BackgroundLayerWMS.js'
 import { LabelLayer } from './LabelLayer.js'
 import { LineLayer } from './LineLayer.js'
 import { monitor, monitorDuration } from './utils/Utils.js'
+import { ZoomButtons } from './button/ZoomButtons.js'
+import { FullscreenButton } from './button/FullscreenButton.js'
 
 // external imports
 import { select } from 'd3-selection'
@@ -326,7 +328,8 @@ export class App {
         //canvas.addEventListener("keydown", e => { console.log(arguments) });
 
         //set default globalCompositeOperation
-        this.defaultGlobalCompositeOperation = opts.defaultGlobalCompositeOperation || this.cg.ctx.globalCompositeOperation;
+        this.defaultGlobalCompositeOperation =
+            opts.defaultGlobalCompositeOperation || this.cg.ctx.globalCompositeOperation
     }
 
     /**
@@ -462,10 +465,7 @@ export class App {
      * @returns {Dataset}
      */
     makeLGridDataset(resolution, cells, opts) {
-        return new Dataset([new LGrid(resolution, cells),],
-            [],
-            opts
-        )
+        return new Dataset([new LGrid(resolution, cells)], [], opts)
     }
 
     /**
@@ -638,6 +638,55 @@ export class App {
         return this
     }
 
+    /**
+     * Adds a set of zoom buttons to the app
+     *
+     * @param {object} opts
+     * @returns {this}
+     */
+    addZoomButtons(opts) {
+        // * opts.id
+        // * opts.onZoom - custom event handler function
+        // * opts.x
+        // * opts.y
+        // * opts.delta - zoom delta applied on each click
+
+        this.zoomButtons = new ZoomButtons({
+            app: this,
+            id: opts?.id || 'gridviz-zoom-buttons',
+            class: opts?.class,
+            x: opts?.x || this.w - 50,
+            y: opts?.y || 10,
+            onZoom: opts?.onZoom,
+            delta: opts?.delta || 0.2
+        })
+
+        return this
+    }
+
+    /**
+     * Adds a fullscreen toggle button to the app
+     *
+     * @param {object} opts
+     * @returns {this}
+     */
+    addFullscreenButton(opts) {
+        // * opts.app - the gridviz app
+        // * opts.id
+        // * opts.x
+        // * opts.y
+
+        this.fullscreenButton = new FullscreenButton({
+            app: this,
+            id: opts?.id || 'gridviz-fullscreen-button',
+            class: opts?.class,
+            x: opts?.x || this.w - 50,
+            y: opts?.y || 85,
+        })
+
+        return this
+    }
+
     /** @returns {this} */
     setViewFromURL() {
         this.cg.setViewFromURL()
@@ -670,6 +719,10 @@ export class App {
                         canvas.setAttribute('width', '' + this.w)
                         canvas.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'
                     }
                 })
             }

package/src/Style.js

@@ -10,15 +10,12 @@
 /**
  * A style, to show a grid dataset.
  *
- * @abstract
- *
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Style {
     /**
      * @abstract
-     * @param {{filter?:function(import('./Dataset').Cell):boolean,offset?:function(import('./Dataset').Cell,number,number):{dx:number,dy:number},visible?:boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minZoom?:number,maxZoom?:number}} opts
-     *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
+     * @param {{filter?:function(import('./Dataset').Cell):boolean,offset?:function(import('./Dataset').Cell,number,number):{dx:number,dy:number},visible?:boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minZoom?:number,maxZoom?:number,drawFun?:function}} opts
      */
     constructor(opts) {
         opts = opts || {}
@@ -58,6 +55,10 @@ export class Style {
          * */
         this.maxZoom = opts.maxZoom || Infinity
 
+        /** A draw function for the style.
+         * @type {function} */
+        this.drawFun = opts.drawFun
+
         //ensure acceptable values for the zoom limits.
         if (this.minZoom >= this.maxZoom)
             throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
@@ -77,7 +78,8 @@ export class Style {
      * @abstract
      */
     draw(cells, resolution, cg) {
-        throw new Error('Method draw not implemented.')
+        if (this.drawFun) this.drawFun(cells, resolution, cg)
+        else throw new Error('Method draw not implemented.')
     }
 
     //getters and setters

package/src/button/Button.js

@@ -0,0 +1,54 @@
+/**
+ * Parent class for button elements used to interact with the gridviz viewer.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Button {
+    /**
+     * @param {Object} opts
+     * opts.parentNode
+     * opts.id
+     * opts.title
+     * opts.class
+     * opts.onClickFunction
+     * opts.x
+     * opts.y
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        this.app = opts.app
+        this.parentNode = opts.parentNode || opts.app.container
+        this.id = opts.id || 'button-' + Math.random()
+
+        // create HTML node
+        this.node = document.createElement('div')
+        this.node.id = this.id
+        if (opts.title) this.node.title = opts.title
+        if (opts.class) this.node.classList.add(opts.class) 
+
+        // add events
+        if (opts.onClickFunction) this.node.addEventListener('onclick', opts.onClickFunction)
+        this.node.addEventListener('mouseover', (e)=>{this.node.style.backgroundColor = 'lightgrey'})
+        this.node.addEventListener('mouseout', (e)=>{this.node.style.backgroundColor = '#ffffff'})
+
+        //set styles
+        this.node.classList.add(opts.class)
+        this.node.style.boxShadow =
+            '0 7px 8px rgba(0,47,103,.08), 0 0 22px rgba(0,47,103,.04), 0 12px 17px rgba(0,47,103,.04), 0 -4px 4px rgba(0,47,103,.04)' //.ecl-u-shadow-3
+        this.node.style.backgroundColor = '#ffffff' //.ecl-u-bg-white
+        this.node.style.position = 'absolute'
+        this.node.style.cursor = 'pointer'
+         this.node.style.display = 'flex'
+        this.node.style.justifyContent = 'center'
+        this.node.style.alignItems = 'center'
+        this.node.style.width = '30px'
+        this.node.style.height = '30px'
+        // this.node.style.padding = '4px'
+        this.node.style.top = opts.y + 'px'
+        this.node.style.left = opts.x + 'px'
+
+        // append to parent
+        this.parentNode.appendChild(this.node)
+    }
+}

package/src/button/FullscreenButton.js

@@ -0,0 +1,98 @@
+import { Button } from './Button.js'
+
+/**
+ * Button for toggling fullscreen mode
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class FullscreenButton extends Button {
+    /**
+     * @param {Object} opts
+     * opts.parentNode - the node that the button is appended to
+     * opts.canvas - the gridviz canvas
+     * opts.id
+     * opts.title - HTML title attribute
+     * opts.class - css class
+     * opts.onClickFunction
+     * opts.x - x position of the button
+     * opts.y - y position of the button
+     */
+
+    // default state
+    isFullscreen = false
+
+    constructor(opts) {
+        super(opts)
+
+        // append fullscreen icon to button container
+        this.node.innerHTML = `
+        <svg
+            style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
+            focusable="false"
+            aria-hidden="true"
+        >
+            <svg fill="#000000" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+            <title/>
+            <g>
+            <path d="M30,0H6A5.9966,5.9966,0,0,0,0,6V30a6,6,0,0,0,12,0V12H30A6,6,0,0,0,30,0Z"/>
+            <path d="M90,0H66a6,6,0,0,0,0,12H84V30a6,6,0,0,0,12,0V6A5.9966,5.9966,0,0,0,90,0Z"/>
+            <path d="M30,84H12V66A6,6,0,0,0,0,66V90a5.9966,5.9966,0,0,0,6,6H30a6,6,0,0,0,0-12Z"/>
+            <path d="M90,60a5.9966,5.9966,0,0,0-6,6V84H66a6,6,0,0,0,0,12H90a5.9966,5.9966,0,0,0,6-6V66A5.9966,5.9966,0,0,0,90,60Z"/>
+            </g>
+            </svg>
+        </svg>
+        `
+
+        //save initial app dimensions
+        this.defaultHeight = this.app.h
+        this.defaultWidth = this.app.w
+
+        // event handler
+        this.node.addEventListener('click', (e) => {
+            this.onClickFunction(e)
+        })
+
+    }
+
+    onClickFunction(e) {
+        if (this.isFullscreen) {
+            this.closeFullscreen(containerDiv)
+            //resize canvas to default
+            this.app.h = this.defaultHeight
+            this.app.w = this.defaultWidth
+            this.isFullscreen = false
+        } else {
+            this.openFullscreen(containerDiv)
+            //resize canvas to fullscreen
+            this.app.h = window.screen.height
+            this.app.w = window.screen.width
+            this.isFullscreen = true
+        }
+    }
+
+    /* Open fullscreen */
+    openFullscreen(elem) {
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen()
+        } else if (elem.webkitRequestFullscreen) {
+            /* Safari */
+            elem.webkitRequestFullscreen()
+        } else if (elem.msRequestFullscreen) {
+            /* IE11 */
+            elem.msRequestFullscreen()
+        }
+    }
+
+    /* Close fullscreen */
+    closeFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen()
+        } else if (document.webkitExitFullscreen) {
+            /* Safari */
+            document.webkitExitFullscreen()
+        } else if (document.msExitFullscreen) {
+            /* IE11 */
+            document.msExitFullscreen()
+        }
+    }
+}

package/src/button/ZoomButtons.js

@@ -0,0 +1,72 @@
+import { Button } from './Button.js'
+
+
+/**
+ * Button for toggling fullscreen mode
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ZoomButtons extends Button {
+    /**
+     * @param {Object} opts
+     */
+    constructor(opts) {
+        super(opts)
+
+        this.onZoom = opts.onZoom // custom user event handler
+        this.delta = opts.delta || 0.2
+
+        // zoom in btn
+        this.zoomInBtn = document.createElement('a')
+        this.zoomInBtn.innerHTML = `<a id="zoomin" class="gridviz-zoom-button" title="Zoom in">+</a>`
+        this.zoomInBtn.title = 'Zoom in';
+        this.zoomInBtn.addEventListener('click', (e)=>{this.zoomIn(e)})
+        this.zoomInBtn.addEventListener('mouseover', (e)=>{this.zoomInBtn.style.backgroundColor = 'lightgrey'})
+        this.zoomInBtn.addEventListener('mouseout', (e)=>{this.zoomInBtn.style.backgroundColor = '#ffffff'})
+
+        // zoom out btn
+        this.zoomOutBtn = document.createElement('a')
+        this.zoomOutBtn.innerHTML = `<a id="zoomin" class="gridviz-zoom-button" title="Zoom out">-</a>`
+        this.zoomOutBtn.title = 'Zoom out';
+        this.zoomOutBtn.addEventListener('click', (e)=>{this.zoomOut(e)})
+        this.zoomOutBtn.addEventListener('mouseover', (e)=>{this.zoomOutBtn.style.backgroundColor = 'lightgrey'})
+        this.zoomOutBtn.addEventListener('mouseout', (e)=>{this.zoomOutBtn.style.backgroundColor = '#ffffff'})
+
+        //set styles
+        let btns = [this.zoomInBtn, this.zoomOutBtn]
+        btns.forEach((btn, i)=>{
+            btn.style.alignItems = 'center';
+            btn.style.justifyContent = 'center';
+            btn.style.display = 'flex';
+            btn.style.border = 'none';
+            btn.style.color = 'black';
+            btn.style.textAlign = 'center';
+            btn.style.textDecoration = 'none';
+            btn.style.padding = '4px';
+            btn.style.fontSize = '20px';
+            btn.style.fontWeight = 'bold';
+            btn.style.userSelect = 'none';
+            if (i==0) btn.style.borderBottom = '1px solid grey'
+        })
+
+        // unset parent class height
+        this.node.style.height="unset"
+        this.node.style.display="unset"
+
+        // append to button container
+        this.node.appendChild(this.zoomInBtn)
+        this.node.appendChild(this.zoomOutBtn)
+    }
+
+    /* Zoom in */
+    zoomIn(e) {
+        this.app.setZoomFactor(this.app.getZoomFactor() * (1 - this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+    }
+
+    /* Zoom out */
+    zoomOut(e) {
+        this.app.setZoomFactor(this.app.getZoomFactor() * (1 + this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+    }
+}

package/src/legend/ColorLegend.js

@@ -32,10 +32,13 @@ export class ColorLegend extends Legend {
 
         this.fontSize = opts.fontSize || '0.8em'
         this.invert = opts.invert
+
+        //to be used as opts => opts.sAlpha to show legend on alpha channel
+        this.getStats = opts.getStats || (opts => opts.sColor)
     }
 
     /**
-     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat, sAlpha: import("../Style").Stat }} opts
      */
     update(opts) {
         //could happen when data is still loading
@@ -111,10 +114,11 @@ export class ColorLegend extends Legend {
 
         //label text format
         const f = this.tickFormat && this.tickFormat != 'text' ? format(this.tickFormat) : (v) => v
+        const stat = this.getStats(opts)
         for (let i = 0; i < this.ticks; i++) {
             let t = i / (this.ticks - 1)
 
-            const v = this.fun(t, opts.r, opts.sColor)
+            const v = this.fun(t, opts.r, stat)
             const text = (v ? f(v) : '0') + (this.tickUnit ? this.tickUnit : '')
 
             //tick label

package/src/legend/SegmentWidthLegend.js

@@ -21,16 +21,20 @@ export class SegmentWidthLegend extends Legend {
         this.titleFontWeight = opts.titleFontWeight || 'bold'
 
         //exageration
+        //if set to 1, the segment width in the legend will be the one of the maximum width on the map
         this.exaggerationFactor = opts.exaggerationFactor || 0.5
 
-        //color
+        //color of the segment in the legend
         this.color = opts.color || 'gray'
-        //orientation
+        //orientation of the segment in the legend
         this.orientation = opts.orientation || 0
 
         //label
         this.labelFontSize = opts.labelFontSize || '0.8em'
         this.labelUnitText = opts.labelUnitText || ''
+
+        //segment length in geo unit - a function of the resolution r and zoom level zf
+        this.lengthFun = opts.lengthExaggerationFactor || ((r, zf) => r)
     }
 
     /**
@@ -54,10 +58,9 @@ export class SegmentWidthLegend extends Legend {
                 .text(this.title)
         }
 
-        //get max value
+        //get segment max value
         const value_ = opts.sWidth.max * this.exaggerationFactor
-
-        //take 'nice' value (power of ten, or multiple)
+        //make 'nice' value (power of ten, or multiple)
         let pow10 = Math.log10(value_)
         pow10 = Math.floor(pow10)
         let value = Math.pow(10, pow10)
@@ -67,10 +70,11 @@ export class SegmentWidthLegend extends Legend {
         else if (value * 4 <= value_) value *= 4
         else if (value * 2.5 <= value_) value *= 2.5
         else if (value * 2 <= value_) value *= 2
+        else if (value * 1.5 <= value_) value *= 1.5
 
         //compute segment width and length, in pix
-        const sWidth = opts.style.width(value, opts.r, opts.sWidth, opts.zf) / opts.zf
-        const sLength = (1 * opts.r) / opts.zf
+        const sWidth = opts.widthFun(value, opts.r, opts.sWidth, opts.zf) / opts.zf
+        const sLength = this.lengthFun(opts.r, opts.zf) / opts.zf
 
         //TODO use orientation
 

package/src/style/SegmentStyle.js

@@ -131,11 +131,11 @@ export class SegmentStyle extends Style {
 
         //update legend, if any
         this.updateLegends({
-            style: this,
+            widthFun: this.width,
             r: r,
             zf: zf,
             sColor: statColor,
-            sLength: statLength,
+            //sLength: statLength,
             sWidth: statWidth,
         })
     }

package/src/style/ShapeColorSizeStyle.js

@@ -147,6 +147,6 @@ export class ShapeColorSizeStyle extends Style {
         }
 
         //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sSize: statSize, sColor: statColor })
+        this.updateLegends({ style: this, r: r, zf: zf, sSize: statSize, sColor: statColor, sAlpha: statAlpha })
     }
 }

package/src/style/TimeSeriesStyle.js

@@ -50,7 +50,6 @@ export class TimeSeriesStyle extends Style {
          * @type {function(number,number,import("../Style.js").Stat|undefined,number):number} */
         this.lineWidth = opts.lineWidth || ((v, r, s, zf) => 1.5 * zf)
 
-
         /**
          * @type {string} */
         this.colorCol = opts.colorCol
@@ -244,6 +243,16 @@ export class TimeSeriesStyle extends Style {
 
         }
 
+        //update legend, if any
+        this.updateLegends({
+            widthFun: this.lineWidth,
+            r: r,
+            zf: zf,
+            sColor: statColor,
+            //sLength: statLength,
+            sWidth: statWidth,
+        })
+
     }
 
 }