gridviz 3.0.37 → 3.0.39

package/src/layer/GridLayer.js

@@ -68,6 +68,9 @@ export class GridLayer extends Layer {
             if (this.blendOperation) ctx.globalCompositeOperation = this.blendOperation(z)
         }
 
+        // tell the legends where they are drawn, so that they can fit it (width:'fill')
+        if (legend) for (const s of this.styles) GridLayer.setLegendContainer(legend.node(), s.legends, s['styles'])
+
         //draw cells, style by style
         for (const s of this.styles) {
             //check if style is visible
@@ -102,14 +105,14 @@ export class GridLayer extends Layer {
             for (const s of this.styles) {
                 //check if style is visible
                 if (s.visible && !s.visible(z)) continue
-                GridLayer.addLegends(legend, s.legends)
+                GridLayer.addLegends(legend, s.legends, s, geoCanvas)
 
                 //case for styles of styles, like kernel smoothing
                 //TODO do better
                 if (s['styles']) {
                     for (const s2 of s['styles']) {
                         if (s2.visible && !s2.visible(z)) continue
-                        GridLayer.addLegends(legend, s2.legends)
+                        GridLayer.addLegends(legend, s2.legends, s2, geoCanvas)
                     }
                 }
             }
@@ -117,9 +120,26 @@ export class GridLayer extends Layer {
     }
 
     /** @private */
-    static addLegends(legendComp, lg) {
-        if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_)
-        else legendComp.node().append(lg.div.node())
+    static setLegendContainer(container, legends, subStyles) {
+        // legends can be nested in arrays, like in Style.updateLegendsRecursive
+        const set = (lg) => {
+            if (Array.isArray(lg)) lg.forEach(set)
+            else if (lg) lg.container = container
+        }
+        set(legends)
+        for (const s2 of subStyles || []) GridLayer.setLegendContainer(container, s2.legends, undefined)
+    }
+
+    /** @private */
+    static addLegends(legendComp, lg, style, geoCanvas) {
+        if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_, style, geoCanvas)
+        else {
+            // 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())
+        }
     }
 
     /**

package/src/legend/ColorCategoryLegend.js

@@ -28,6 +28,7 @@ export class ColorCategoryLegend extends Legend {
         this.dimension = opts.dimension || { r: 8 }
         this.strokeColor = opts.strokeColor || 'gray'
         this.strokeWidth = opts.strokeWidth || 1
+        this.setType('category')
     }
 
     /**
@@ -47,7 +48,12 @@ export class ColorCategoryLegend extends Legend {
             const cat = this.colorLabel[i]
 
             //make div for category
-            const d = this.div.append('div')
+            const d = this.div.append('div').classed('gridviz-legend-category', true)
+            // hovering a category shows only its cells on the map
+            this.bindHover(d, cat[0], {
+                enter: () => d.classed('gridviz-legend-category--active', true).select('svg').select('rect, circle').style('stroke', 'red'),
+                leave: () => d.classed('gridviz-legend-category--active', false).select('svg').select('rect, circle').style('stroke', this.strokeColor),
+            })
             //to enable vertical centering
             //.style("position", "relative")
 
@@ -58,13 +64,16 @@ export class ColorCategoryLegend extends Legend {
                 const h = this.dimension.h || 15
                 const w = this.dimension.w || 20
                 d.append('div')
+                    .classed('gridviz-legend-symbol-wrapper', true)
                     .style('display', 'inline')
 
                     .append('svg')
+                    .classed('gridviz-legend-graphic', true)
                     .attr('width', w + 2 * sw)
                     .attr('height', h + 2 * sw)
 
                     .append('rect')
+                    .classed('gridviz-legend-swatch', true)
                     .attr('x', sw)
                     .attr('y', sw)
                     .attr('width', w)
@@ -76,13 +85,16 @@ export class ColorCategoryLegend extends Legend {
                 const r = this.dimension.r || 8
                 const h = 2 * r + 2 * sw
                 d.append('div')
+                    .classed('gridviz-legend-symbol-wrapper', true)
                     .style('display', 'inline')
 
                     .append('svg')
+                    .classed('gridviz-legend-graphic', true)
                     .attr('width', h)
                     .attr('height', h)
 
                     .append('circle')
+                    .classed('gridviz-legend-swatch', true)
                     .attr('cx', r + sw)
                     .attr('cy', r + sw)
                     .attr('r', r)
@@ -94,16 +106,20 @@ export class ColorCategoryLegend extends Legend {
             }
 
             //write label text
-            d.append('div')
-                //show on right of graphic
-                .style('display', 'inline')
+            this.setText(
+                d
+                    .append('div')
+                    //show on right of graphic
+                    .style('display', 'inline')
 
-                //center vertically
-                //.style("position", "absolute").style("top", "0").style("bottom", "0")
+                    //center vertically
+                    //.style("position", "absolute").style("top", "0").style("bottom", "0")
 
-                .style('padding-left', '5px')
-                .style('font-size', this.labelFontSize)
-                .text(cat[1])
+                    .classed('gridviz-legend-label', true)
+                    .style('padding-left', '5px')
+                    .style('font-size', this.labelFontSizeCSS()),
+                cat[1]
+            )
         }
     }
 }

package/src/legend/ColorDiscreteLegend.js

@@ -21,8 +21,10 @@ export class ColorDiscreteLegend extends Legend {
         /** @private @type {function(import('../core/Style').ViewScale):Array.<number>} */
         this.breaks = opts.breaks
 
-        this.width = opts.width || 300
+        // a number of pixels, or 'fill' for the width of the container
+        this.width = opts.width === 'fill' ? 300 : opts.width || 300
         this.height = opts.height || 15
+        this.setType('discrete')
 
         this.tickSize = opts.tickSize || 3
 
@@ -48,27 +50,38 @@ export class ColorDiscreteLegend extends Legend {
         //classes
         const nb = colors.length
         if (nb == 0) return
-        const w = this.width / nb
+        const width = this.availableWidth(this.width)
+        const w = width / nb
 
         //make svg element
         const svg = this.div
             .append('svg')
-            .attr('width', this.width)
+            .classed('gridviz-legend-graphic', true)
+            .attr('width', width)
             .attr('height', this.height + this.tickSize + 2 + 10)
 
         //draw graphic elements
         for (let i = 0; i < nb; i++) {
-            svg.append('rect')
+            const rect = svg
+                .append('rect')
+                .classed('gridviz-legend-swatch', true)
                 .attr('x', i * w)
                 .attr('y', 0)
                 .attr('width', w)
                 .attr('height', this.height)
                 .style('fill', colors[i])
+            // hovering a class shows only its cells on the map
+            this.bindHover(rect, colors[i], {
+                // a presentation attribute, so that a stylesheet can restyle the active swatch
+                enter: () => rect.classed('gridviz-legend-swatch--active', true).attr('stroke', 'red'),
+                leave: () => rect.classed('gridviz-legend-swatch--active', false).attr('stroke', null),
+            })
         }
 
         //tick line
         for (let i = 1; i < nb; i++) {
             svg.append('line')
+                .classed('gridviz-legend-tick', true)
                 .attr('x1', w * i)
                 .attr('y1', 0)
                 .attr('x2', w * i)
@@ -84,10 +97,11 @@ export class ColorDiscreteLegend extends Legend {
 
             //label
             svg.append('text')
+                .classed('gridviz-legend-label', true)
                 .attr('id', 'ticklabel_' + i)
                 .attr('x', w * i)
                 .attr('y', this.height + this.tickSize + 2)
-                .style('font-size', this.labelFontSize)
+                .style('font-size', this.labelFontSizeCSS())
                 //.style("font-weight", "bold")
                 //.style("font-family", "Arial")
                 .style('text-anchor', 'middle')

package/src/legend/ColorLegend.js

@@ -35,8 +35,10 @@ export class ColorLegend extends Legend {
         this.fontSize = opts.fontSize || '0.8em'
         this.invert = opts.invert
 
-        this.width = opts.width || 300
+        // a number of pixels, or 'fill' for the width of the container
+        this.width = opts.width === 'fill' ? 300 : opts.width || 300
         this.height = opts.height || 15
+        this.setType('color')
     }
 
     /**
@@ -49,21 +51,23 @@ export class ColorLegend extends Legend {
         //title
         this.makeTitle()
 
-        const svgW = this.width + 2 * this.margin
+        const width = this.availableWidth(this.width)
+        const svgW = width + 2 * this.margin
         const svgH = this.height + this.margin + this.tickSize + 10
-        const svg = this.div.append('svg').attr('width', svgW).attr('height', svgH)
+        const svg = this.div.append('svg').classed('gridviz-legend-graphic', true).attr('width', svgW).attr('height', svgH)
         //  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
 
-        const g = svg.append('g').attr('transform', 'translate(' + this.margin + ' ' + 0 + ')')
+        const g = svg.append('g').classed('gridviz-legend-bar', true).attr('transform', 'translate(' + this.margin + ' ' + 0 + ')')
 
         //draw color bar
-        const w = this.width,
+        const w = width,
             h = this.height
         const step = 5
         for (let i = 0; i < w; i += step) {
             let t = i / (w - 1)
             if (this.invert) t = 1 - t
             g.append('rect')
+                .classed('gridviz-legend-swatch', true)
                 .attr('x', i)
                 .attr('y', 0)
                 .attr('width', step)
@@ -76,6 +80,7 @@ export class ColorLegend extends Legend {
 
             //tick line
             g.append('line')
+                .classed('gridviz-legend-tick', true)
                 .attr('x1', w * t)
                 .attr('y1', 0)
                 .attr('x2', w * t)
@@ -84,6 +89,7 @@ export class ColorLegend extends Legend {
 
             //prepare tick label
             g.append('text')
+                .classed('gridviz-legend-label', true)
                 .attr('id', 'ticklabel_' + i)
                 .attr('x', w * t)
                 .attr('y', h + this.tickSize + 2)

package/src/legend/OrientationLegend.js

@@ -13,6 +13,7 @@ export class OrientationLegend extends Legend {
     /** @param {Object} opts */
     constructor(opts) {
         super(opts)
+        this.setType('orientation')
         opts = opts || {}
 
         //orientation
@@ -38,7 +39,7 @@ export class OrientationLegend extends Legend {
         //title
         this.makeTitle()
 
-        const d = this.div.append('div')
+        const d = this.div.append('div').classed('gridviz-legend-category', true)
 
         //compute segment color, width and length
         const color = this.color(opts.resolution, opts.z, opts.viewScale)
@@ -47,13 +48,14 @@ export class OrientationLegend extends Legend {
 
         //draw SVG segment
         const svgS = Math.max(lengthPix, widthPix)
-        const svg = d.append('svg').attr('width', svgS).attr('height', svgS).style('', 'inline-block')
+        const svg = d.append('svg').classed('gridviz-legend-graphic', true).attr('width', svgS).attr('height', svgS).style('', 'inline-block')
 
         const cos = Math.cos((-this.orientation * Math.PI) / 180)
         const sin = Math.sin((-this.orientation * Math.PI) / 180)
         const dc = svgS * 0.5,
             l2 = lengthPix * 0.5
         svg.append('line')
+            .classed('gridviz-legend-symbol', true)
             .attr('x1', dc - cos * l2)
             .attr('y1', dc - sin * l2)
             .attr('x2', dc + cos * l2)
@@ -63,9 +65,10 @@ export class OrientationLegend extends Legend {
 
         //label
         d.append('div')
+            .classed('gridviz-legend-label', true)
             .style('display', 'inline')
             .style('padding-left', '5px')
-            .style('font-size', this.labelFontSize)
+            .style('font-size', this.labelFontSizeCSS())
             .text(this.label + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
     }
 }

package/src/legend/SizeLegend.js

@@ -15,6 +15,7 @@ export class SizeLegend extends Legend {
     /** @param {Object} opts */
     constructor(opts) {
         super(opts)
+        this.setType('size')
         opts = opts || {}
 
         /** A function returning the text label, from the view scale and list of cells, resolution and zoom
@@ -62,7 +63,7 @@ export class SizeLegend extends Legend {
         //format label, if specified and possible
         if (this.labelFormat && !isNaN(+label)) label = this.labelFormat(label)
 
-        const d = this.div.append('div')
+        const d = this.div.append('div').classed('gridviz-legend-category', true)
         //to enable vertical centering
         //.style("position", "relative")
 
@@ -70,6 +71,7 @@ export class SizeLegend extends Legend {
         const svg = () =>
             d
                 .append('svg')
+                .classed('gridviz-legend-graphic', true)
                 .attr('width', sizePix + this.strokeWidth + 2)
                 .attr('height', sizePix + this.strokeWidth + 2)
                 .style('', 'inline-block')
@@ -77,6 +79,7 @@ export class SizeLegend extends Legend {
         if (this.shape === 'square') {
             svg()
                 .append('rect')
+                .classed('gridviz-legend-symbol', true)
                 .attr('x', 0)
                 .attr('y', 0)
                 .attr('width', sizePix)
@@ -89,6 +92,7 @@ export class SizeLegend extends Legend {
             const r = (sizePix + this.strokeWidth) * 0.5
             svg()
                 .append('circle')
+                .classed('gridviz-legend-symbol', true)
                 .attr('cx', r + 1)
                 .attr('cy', r + 1)
                 .attr('r', r)
@@ -108,6 +112,7 @@ export class SizeLegend extends Legend {
 
             const svg = d
                 .append('svg')
+                .classed('gridviz-legend-graphic', true)
                 .attr('width', lengthPix)
                 .attr('height', sizePix)
                 .style('', 'inline-block')
@@ -115,6 +120,7 @@ export class SizeLegend extends Legend {
             //TODO orientation
             //<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
             svg.append('line')
+                .classed('gridviz-legend-symbol', true)
                 .attr('x1', 0)
                 .attr('y1', sizePix / 2)
                 .attr('x2', lengthPix)
@@ -127,9 +133,10 @@ export class SizeLegend extends Legend {
 
         //label
         d.append('div')
+            .classed('gridviz-legend-label', true)
             .style('display', 'inline')
             .style('padding-left', '5px')
-            .style('font-size', this.labelFontSize)
+            .style('font-size', this.labelFontSizeCSS())
             .text(label + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
     }
 }

package/src/legend/TernaryLegend.js

@@ -28,6 +28,7 @@ export class TernaryLegend extends Legend {
         this.rightText = opts.rightText || 'Category 2'
 
         this.centerCoefficient = opts.centerCoefficient || this.classifier.centerCoefficient
+        this.setType('ternary')
     }
 
     /**
@@ -51,10 +52,12 @@ export class TernaryLegend extends Legend {
 
         const padding = 2
         const fontSize = 12
+        const legend = this
 
         //make svg element
         const svg = this.div
             .append('svg')
+            .classed('gridviz-legend-graphic', true)
             .attr('width', w + selectionStrokeWidth)
             .attr('height', h + 4 * padding + 2 * fontSize)
 
@@ -62,6 +65,7 @@ export class TernaryLegend extends Legend {
         svg.append('text')
             .attr('x', w / 2)
             .attr('y', padding + fontSize)
+            .classed('gridviz-legend-label', true)
             .text(this.topText)
             .attr('font-size', fontSize)
             .attr('text-anchor', 'middle')
@@ -69,6 +73,7 @@ export class TernaryLegend extends Legend {
         svg.append('text')
             .attr('x', 0)
             .attr('y', 3 * padding + 2 * fontSize + h)
+            .classed('gridviz-legend-label', true)
             .text(this.leftText)
             .attr('font-size', fontSize)
             .attr('text-anchor', 'start')
@@ -76,6 +81,7 @@ export class TernaryLegend extends Legend {
         svg.append('text')
             .attr('x', w)
             .attr('y', 3 * padding + 2 * fontSize + h)
+            .classed('gridviz-legend-label', true)
             .text(this.rightText)
             .attr('font-size', fontSize)
             .attr('text-anchor', 'end')
@@ -83,6 +89,7 @@ export class TernaryLegend extends Legend {
         //triangle group
         const g = svg
             .append('g')
+            .classed('gridviz-legend-triangle', true)
             .attr(
                 'transform',
                 'translate(' +
@@ -96,12 +103,16 @@ export class TernaryLegend extends Legend {
         const setAttributes = (elt, color, text) => {
             //elt.raise();
             elt.attr('fill', color)
+                .classed('gridviz-legend-swatch', true)
                 //.attr("stroke", colorOver)
                 //.attr("stroke-width", 0)
                 //.attr("stroke-linejoin", "round")
+                .style('cursor', this.interactive ? 'pointer' : null)
                 .on('mouseover', function (e) {
                     /*this.parentNode.appendChild(this); select(this).attr("stroke-width", selectionStrokeWidth);*/
-                    select(this).attr('fill', selectionColor)
+                    select(this).classed('gridviz-legend-swatch--active', true).attr('fill', selectionColor)
+                    // show only the cells of this class on the map
+                    legend.highlight([color])
                     if (!tt || !text) return
                     tt.html(text)
                     tt.setPosition(e)
@@ -109,7 +120,8 @@ export class TernaryLegend extends Legend {
                 })
                 .on('mouseout', function () {
                     /*select(this).attr("stroke-width", 0);*/
-                    select(this).attr('fill', color)
+                    select(this).classed('gridviz-legend-swatch--active', false).attr('fill', color)
+                    legend.highlight(null)
                     if (tt) tt.hide()
                 })
             if (tt && text)

package/src/style/ShapeColorSizeStyle.js

@@ -45,6 +45,9 @@ export class ShapeColorSizeStyle extends Style {
 
         const r2 = resolution * 0.5
 
+        // the legend swatch hovered, if any: only the cells of its colour are drawn
+        const highlight = this.highlightColors
+
         // Precompute if color, size, and shape are functions, for efficiency
         const isColorFunction = typeof this.color === 'function'
         const isSizeFunction = typeof this.size === 'function'
@@ -64,6 +67,7 @@ export class ShapeColorSizeStyle extends Style {
             //@ts-ignore
             const col = colorFunction ? colorFunction(c, resolution, z, viewScale) : defaultColor
             if (!col || col === 'none') continue
+            if (highlight && !this.isHighlighted(col)) continue
 
             // Determine size
             //@ts-ignore

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -86,6 +86,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
         this.y = undefined
         this.z = undefined
         this.cellsNb = undefined
+        /** The highlight (see Style.setHighlight) the vertices were bound with @private */
+        this.highlightKey = ''
     }
 
     /**
@@ -149,6 +151,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
             nb = cells.length
         const verticesBuffer = new Float32Array(2 * nb)
         const iBuffer = new Float32Array(nb)
+        // categories shown while a legend swatch is hovered: those drawn in the colour of the swatch
+        const shown = this.highlightColors ? this.colors.map((c) => this.isHighlighted(c)) : null
         let n = 0
         for (let i = 0; i < nb; i++) {
             c = cells[i]
@@ -162,6 +166,7 @@ export class SquareColorCategoryWebGLStyle extends Style {
                 console.log('Unexpected category index: ' + cat + ' ' + i_)
                 continue
             }
+            if (shown && !shown[+i_]) continue
             verticesBuffer[2 * n] = c.x + r2
             verticesBuffer[2 * n + 1] = c.y + r2
             iBuffer[n] = +i_
@@ -228,7 +233,10 @@ export class SquareColorCategoryWebGLStyle extends Style {
         // 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)
+        const highlightKey = this.highlightColors ? this.highlightColors.join('|') : ''
+        const highlightChanged = highlightKey !== this.highlightKey
+        this.highlightKey = highlightKey
+        const contentChanged = this.mapContentChanged(geoCanvas.view, cells.length) || highlightChanged
         if (contentChanged || contextChanged || bufferOwner(gl, POSITION_BUFFER) !== this)
             this.pointsNb = this.bindVertices(cells, resolution, z, viewScale)
         this.bindAttributes()

package/src/utils/scale.js

@@ -16,10 +16,33 @@ import { scaleQuantile } from 'd3-scale'
  * @module utils
  */
 
+/**
+ * The inverse of a stretching function, within [0,1]: its own invert function if it has one,
+ * else found by bisection (a stretching is increasing).
+ * @param {function(number):number} stretching
+ * @param {number} t
+ * @returns {number}
+ */
+const invertStretching = (stretching, t) => {
+    // @ts-ignore
+    if (stretching.invert) return stretching.invert(t)
+    let lo = 0,
+        hi = 1
+    for (let i = 0; i < 50; i++) {
+        const mid = (lo + hi) / 2
+        if (stretching(mid) < t) lo = mid
+        else hi = mid
+    }
+    return (lo + hi) / 2
+}
+
 /**
  * Generic function for view scale - continuous or discrete
  *
  * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, minValue?:number, minSizePix?:number, maxSizeFactor?:number, range?:[number, number], domain?:[number, number], stretching?:function(number):number, classNumber?:number}} opts
+ * The scale has an invert(t) function, like the one of viewScaleColor: it returns the value of the domain
+ * for a t within [0,1] (what a legend needs to write its labels).
+ *
  * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
  */
 export const viewScale = (opts) => {
@@ -38,7 +61,7 @@ export const viewScale = (opts) => {
             domainMin = domain[0]
         const rangeSize = range[1] - range[0],
             rangeMin = range[0]
-        return (t) => {
+        const scale = (t) => {
             //scale to [0,1]
             t = (t - domainMin) / domainSize
             //stretch
@@ -48,6 +71,12 @@ export const viewScale = (opts) => {
             //scale to range
             return rangeMin + t * rangeSize
         }
+        //the domain value for a position t within [0,1], as the invert of viewScaleColor
+        scale.invert = (t) => {
+            if (stretching) t = invertStretching(stretching, t)
+            return domainMin + t * domainSize
+        }
+        return scale
     }
 }