update scattermapbox convert & hover

- so that it handles BADNUM items
- does colorscale / size fn item conversions
- these were handled in scattermapbox/calc.js previously

Author: etpinard

src/traces/scattermapbox/convert.js

@@ -10,8 +10,11 @@
 'use strict';
 
 var Lib = require('../../lib');
+var BADNUM = require('../../constants/numerical').BADNUM;
 var geoJsonUtils = require('../../lib/geojson_utils');
 
+var Colorscale = require('../../components/colorscale');
+var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 var subTypes = require('../scatter/subtypes');
 var convertTextOpts = require('../../plots/mapbox/convert_text_opts');
 
@@ -43,16 +46,16 @@ module.exports = function convert(calcTrace) {
     };
 
     // early return if not visible or placeholder
-    if(!isVisible || calcTrace[0].placeholder) return opts;
+    if(!isVisible) return opts;
 
     // fill layer and line layer use the same coords
-    var coords;
+    var lineCoords;
     if(hasFill || hasLines) {
-        coords = geoJsonUtils.calcTraceToLineCoords(calcTrace);
+        lineCoords = geoJsonUtils.calcTraceToLineCoords(calcTrace);
     }
 
     if(hasFill) {
-        fill.geojson = geoJsonUtils.makePolygon(coords);
+        fill.geojson = geoJsonUtils.makePolygon(lineCoords);
         fill.layout.visibility = 'visible';
 
         Lib.extendFlat(fill.paint, {
@@ -61,7 +64,7 @@ module.exports = function convert(calcTrace) {
     }
 
     if(hasLines) {
-        line.geojson = geoJsonUtils.makeLine(coords);
+        line.geojson = geoJsonUtils.makeLine(lineCoords);
         line.layout.visibility = 'visible';
 
         Lib.extendFlat(line.paint, {
@@ -155,12 +158,30 @@ function initContainer() {
 //
 // The solution prove to be more robust than trying to generate
 // `stops` arrays from scale functions.
+//
+// TODO axe this when we bump mapbox-gl and rewrite this using
+// "identity" property functions.
+// See https://github.com/plotly/plotly.js/pull/1543
+//
 function makeCircleGeoJSON(calcTrace, hash) {
     var trace = calcTrace[0].trace;
+    var marker = trace.marker;
+
+    var colorFn;
+    if(Colorscale.hasColorscale(trace, 'marker')) {
+        colorFn = Colorscale.makeColorScaleFunc(
+             Colorscale.extractScale(marker.colorscale, marker.cmin, marker.cmax)
+         );
+    } else if(Array.isArray(marker.color)) {
+        colorFn = Lib.identity;
+    }
 
-    var marker = trace.marker,
-        hasColorArray = Array.isArray(marker.color),
-        hasSizeArray = Array.isArray(marker.size);
+    var sizeFn;
+    if(subTypes.isBubble(trace)) {
+        sizeFn = makeBubbleSizeFn(trace);
+    } else if(Array.isArray(marker.size)) {
+        sizeFn = Lib.identity;
+    }
 
     // Translate vals in trace arrayOk containers
     // into a val-to-index hash object
@@ -174,16 +195,19 @@ function makeCircleGeoJSON(calcTrace, hash) {
 
     for(var i = 0; i < calcTrace.length; i++) {
         var calcPt = calcTrace[i];
+        var lonlat = calcPt.lonlat;
+
+        if(isBADNUM(lonlat)) continue;
 
         var props = {};
-        if(hasColorArray) translate(props, COLOR_PROP, calcPt.mcc, i);
-        if(hasSizeArray) translate(props, SIZE_PROP, calcPt.mrc, i);
+        if(colorFn) translate(props, COLOR_PROP, colorFn(calcPt.mc), i);
+        if(sizeFn) translate(props, SIZE_PROP, sizeFn(calcPt.ms), i);
 
         features.push({
             type: 'Feature',
             geometry: {
                 type: 'Point',
-                coordinates: calcPt.lonlat
+                coordinates: lonlat
             },
             properties: props
         });
@@ -215,6 +239,8 @@ function makeSymbolGeoJSON(calcTrace) {
     for(var i = 0; i < calcTrace.length; i++) {
         var calcPt = calcTrace[i];
 
+        if(isBADNUM(calcPt.lonlat)) continue;
+
         features.push({
             type: 'Feature',
             geometry: {
@@ -305,3 +331,8 @@ function getFillFunc(attr) {
 }
 
 function blankFillFunc() { return ''; }
+
+// only need to check lon (OR lat)
+function isBADNUM(lonlat) {
+    return lonlat[0] === BADNUM;
+}

src/traces/scattermapbox/hover.js

@@ -11,16 +11,14 @@
 
 var Fx = require('../../plots/cartesian/graph_interact');
 var getTraceColor = require('../scatter/get_trace_color');
-
+var BADNUM = require('../../constants/numerical').BADNUM;
 
 module.exports = function hoverPoints(pointData, xval, yval) {
     var cd = pointData.cd,
         trace = cd[0].trace,
         xa = pointData.xa,
         ya = pointData.ya;
 
-    if(cd[0].placeholder) return;
-
     // compute winding number about [-180, 180] globe
     var winding = (xval >= 0) ?
             Math.floor((xval + 180) / 360) :
@@ -31,10 +29,13 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     var xval2 = xval - lonShift;
 
     function distFn(d) {
-        var lonlat = d.lonlat,
-            dx = Math.abs(xa.c2p(lonlat) - xa.c2p([xval2, lonlat[1]])),
-            dy = Math.abs(ya.c2p(lonlat) - ya.c2p([lonlat[0], yval])),
-            rad = Math.max(3, d.mrc || 0);
+        var lonlat = d.lonlat;
+
+        if(lonlat[0] === BADNUM) return Infinity;
+
+        var dx = Math.abs(xa.c2p(lonlat) - xa.c2p([xval2, lonlat[1]]));
+        var dy = Math.abs(ya.c2p(lonlat) - ya.c2p([lonlat[0], yval]));
+        var rad = Math.max(3, d.mrc || 0);
 
         return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
     }

test/jasmine/tests/scattermapbox_test.js

@@ -239,7 +239,7 @@ describe('scattermapbox convert', function() {
             return f.properties.text;
         });
 
-        expect(actualText).toEqual(['A', 'B', 'C', 'F', '']);
+        expect(actualText).toEqual(['A', 'B', 'C', 'F', undefined]);
     });
 
     it('should generate correct output for lines traces with trailing gaps', function() {
@@ -314,7 +314,9 @@ describe('scattermapbox convert', function() {
             fill: 'toself'
         }));
 
-        assertVisibility(opts, ['none', 'none', 'none', 'none']);
+        // not optimal, but doesn't break anything as mapbox-gl accepts empty
+        // coordinate arrays
+        assertVisibility(opts, ['visible', 'visible', 'none', 'none']);
 
         expect(opts.line.geojson.coordinates).toEqual([], 'line coords');
         expect(opts.fill.geojson.coordinates).toEqual([], 'fill coords');