geo: make scattergeo use Fx.hover for hover / click interactions

- make Fx.hover pass subplot info to hoverPoints module
- add scattergeo hoverPoints and eventData modules
- mock xaxis and yaxis in geo instances
- factor out is-over-edge logic to use it in hoverPoints
- use 'mousemove' instead of 'mouseover' in test to trigger hover

Author: etpinard

src/plots/cartesian/graph_interact.js

@@ -379,6 +379,7 @@ function hover(gd, evt, subplot) {
         curvenum,
         cd,
         trace,
+        subplotId,
         subploti,
         mode,
         xval,
@@ -468,7 +469,8 @@ function hover(gd, evt, subplot) {
         if(!cd || !cd[0] || !cd[0].trace || cd[0].trace.visible !== true) continue;
 
         trace = cd[0].trace;
-        subploti = subplots.indexOf(getSubplot(trace));
+        subplotId = getSubplot(trace);
+        subploti = subplots.indexOf(subplotId);
 
         // within one trace mode can sometimes be overridden
         mode = hovermode;
@@ -495,6 +497,11 @@ function hover(gd, evt, subplot) {
             text: undefined
         };
 
+        // add ref to subplot object (non-cartesian case)
+        if(fullLayout[subplotId]) {
+            pointData.subplot = fullLayout[subplotId]._subplot;
+        }
+
         closedataPreviousLength = hoverData.length;
 
         // for a highlighting array, figure out what
@@ -545,7 +552,6 @@ function hover(gd, evt, subplot) {
             hoverData.splice(0, closedataPreviousLength);
             distance = hoverData[0].distance;
         }
-
     }
 
     // nothing left: remove all labels and quit
@@ -608,14 +614,10 @@ function hover(gd, evt, subplot) {
 
     if(!hoverChanged(gd, evt, oldhoverdata)) return;
 
-    /* Emit the custom hover handler. Bind this like:
-     *  gd.on('hover.plotly', function(extras) {
-     *      // do something with extras.data
-     *  });
-     */
     if(oldhoverdata) {
         gd.emit('plotly_unhover', { points: oldhoverdata });
     }
+
     gd.emit('plotly_hover', {
         points: gd._hoverdata,
         xaxes: xaArray,
@@ -628,7 +630,7 @@ function hover(gd, evt, subplot) {
 // look for either .subplot (currently just ternary)
 // or xaxis and yaxis attributes
 function getSubplot(trace) {
-    return trace.subplot || (trace.xaxis + trace.yaxis);
+    return trace.subplot || (trace.xaxis + trace.yaxis) || trace.geo;
 }
 
 fx.getDistanceFunction = function(mode, dx, dy, dxy) {
@@ -732,6 +734,7 @@ function cleanPoint(d, hovermode) {
         if(infomode.indexOf('text') === -1) d.text = undefined;
         if(infomode.indexOf('name') === -1) d.name = undefined;
     }
+
     return d;
 }
 

src/plots/geo/geo.js

@@ -16,6 +16,7 @@ var d3 = require('d3');
 var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 var Axes = require('../../plots/cartesian/axes');
+var Fx = require('../../plots/cartesian/graph_interact');
 
 var addProjectionsToD3 = require('./projections');
 var createGeoScale = require('./set_scale');
@@ -32,7 +33,6 @@ addProjectionsToD3(d3);
 
 
 function Geo(options, fullLayout) {
-
     this.id = options.id;
     this.graphDiv = options.graphDiv;
     this.container = options.container;
@@ -53,6 +53,9 @@ function Geo(options, fullLayout) {
     this.zoom = null;
     this.zoomReset = null;
 
+    this.xaxis = null;
+    this.yaxis = null;
+
     this.makeFramework();
     this.updateFx(fullLayout.hovermode);
 
@@ -88,6 +91,30 @@ proto.plot = function(geoCalcData, fullLayout, promises) {
         .call(_this.zoom)
         .on('dblclick.zoom', _this.zoomReset);
 
+    _this.framework.on('mousemove', function() {
+        var mouse = d3.mouse(this),
+            lonlat = _this.projection.invert(mouse);
+
+        if(isNaN(lonlat[0]) || isNaN(lonlat[1])) return;
+
+        var evt = {
+            target: true,
+            xpx: mouse[0],
+            ypx: mouse[1]
+        };
+
+        _this.xaxis.c2p = function() { return mouse[0]; };
+        _this.xaxis.p2c = function() { return lonlat[0]; };
+        _this.yaxis.c2p = function() { return mouse[1]; };
+        _this.yaxis.p2c = function() { return lonlat[1]; };
+
+        Fx.hover(_this.graphDiv, evt, _this.id);
+    });
+
+    _this.framework.on('click', function() {
+        Fx.click(_this.graphDiv, { target: true });
+    });
+
     topojsonNameNew = topojsonUtils.getTopojsonName(geoLayout);
 
     if(_this.topojson === null || topojsonNameNew !== _this.topojsonName) {
@@ -265,6 +292,8 @@ proto.makeFramework = function() {
         .attr('id', this.id)
         .style('position', 'absolute');
 
+    // only choropleth traces use this,
+    // scattergeo traces use Fx.hover and fullLayout._hoverlayer
     var hoverContainer = this.hoverContainer = geoDiv.append('svg');
     hoverContainer
         .attr(xmlnsNamespaces.svgAttrs)
@@ -294,14 +323,20 @@ proto.makeFramework = function() {
     framework.on('dblclick.zoom', null);
 
     // TODO use clip paths instead of nested SVG
+
+    this.xaxis = { _id: 'x' };
+    this.yaxis = { _id: 'y' };
 };
 
 proto.adjustLayout = function(geoLayout, graphSize) {
     var domain = geoLayout.domain;
 
+    var left = graphSize.l + graphSize.w * domain.x[0] + geoLayout._marginX,
+        top = graphSize.t + graphSize.h * (1 - domain.y[1]) + geoLayout._marginY;
+
     this.geoDiv.style({
-        left: graphSize.l + graphSize.w * domain.x[0] + geoLayout._marginX + 'px',
-        top: graphSize.t + graphSize.h * (1 - domain.y[1]) + geoLayout._marginY + 'px',
+        left: left + 'px',
+        top: top + 'px',
         width: geoLayout._width + 'px',
         height: geoLayout._height + 'px'
     });
@@ -322,6 +357,12 @@ proto.adjustLayout = function(geoLayout, graphSize) {
             height: geoLayout._height
         })
         .call(Color.fill, geoLayout.bgcolor);
+
+    this.xaxis._offset = left;
+    this.xaxis._length = geoLayout._width;
+
+    this.yaxis._offset = top;
+    this.yaxis._length = geoLayout._height;
 };
 
 proto.drawTopo = function(selection, layerName, geoLayout) {
@@ -445,27 +486,36 @@ proto.styleLayout = function(geoLayout) {
     }
 };
 
+proto.isLonLatOverEdges = function(lonlat) {
+    var clipAngle = this.clipAngle;
+
+    if(clipAngle === null) return false;
+
+    var p = this.projection.rotate(),
+        angle = d3.geo.distance(lonlat, [-p[0], -p[1]]),
+        maxAngle = clipAngle * Math.PI / 180;
+
+    return angle > maxAngle;
+};
+
 // [hot code path] (re)draw all paths which depend on the projection
 proto.render = function() {
-    var framework = this.framework,
+    var _this = this,
+        framework = _this.framework,
         gChoropleth = framework.select('g.choroplethlayer'),
         gScatterGeo = framework.select('g.scattergeolayer'),
-        projection = this.projection,
-        path = this.path,
-        clipAngle = this.clipAngle;
+        path = _this.path;
 
     function translatePoints(d) {
-        var lonlat = projection([d.lon, d.lat]);
-        if(!lonlat) return null;
-        return 'translate(' + lonlat[0] + ',' + lonlat[1] + ')';
+        var lonlatPx = _this.projection(d.lonlat);
+        if(!lonlatPx) return null;
+
+        return 'translate(' + lonlatPx[0] + ',' + lonlatPx[1] + ')';
     }
 
     // hide paths over edges of clipped projections
     function hideShowPoints(d) {
-        var p = projection.rotate(),
-            angle = d3.geo.distance([d.lon, d.lat], [-p[0], -p[1]]),
-            maxAngle = clipAngle * Math.PI / 180;
-        return (angle > maxAngle) ? '0' : '1.0';
+        return _this.isLonLatOverEdges(d.lonlat) ? '0' : '1.0';
     }
 
     framework.selectAll('path.basepath').attr('d', path);
@@ -476,7 +526,7 @@ proto.render = function() {
 
     gScatterGeo.selectAll('path.js-line').attr('d', path);
 
-    if(clipAngle !== null) {
+    if(_this.clipAngle !== null) {
         gScatterGeo.selectAll('path.point')
             .style('opacity', hideShowPoints)
             .attr('transform', translatePoints);

src/traces/scattergeo/event_data.js

@@ -0,0 +1,19 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+
+module.exports = function eventData(out, pt) {
+    out.lon = pt.lon;
+    out.lat = pt.lat;
+    out.location = pt.lon ? pt.lon : null;
+
+    return out;
+};

src/traces/scattergeo/hover.js

@@ -0,0 +1,105 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var Fx = require('../../plots/cartesian/graph_interact');
+var Axes = require('../../plots/cartesian/axes');
+
+var getTraceColor = require('../scatter/get_trace_color');
+var attributes = require('./attributes');
+
+
+module.exports = function hoverPoints(pointData) {
+    var cd = pointData.cd,
+        trace = cd[0].trace,
+        xa = pointData.xa,
+        ya = pointData.ya,
+        geo = pointData.subplot;
+
+    if(cd[0].placeholder) return;
+
+    function c2p(lonlat) {
+        return geo.projection(lonlat);
+    }
+
+    function distFn(d) {
+        var lonlat = d.lonlat;
+
+        // this handles the not-found location feature case
+        if(lonlat[0] === null || lonlat[1] === null) return Infinity;
+
+        if(geo.isLonLatOverEdges(lonlat)) return Infinity;
+
+        var pos = c2p(lonlat);
+
+        var xPx = xa.c2p(),
+            yPx = ya.c2p();
+
+        var dx = Math.abs(xPx - pos[0]),
+            dy = Math.abs(yPx - pos[1]),
+            rad = Math.max(3, d.mrc || 0);
+
+        return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
+    }
+
+    Fx.getClosest(cd, distFn, pointData);
+
+    // skip the rest (for this trace) if we didn't find a close point
+    if(pointData.index === false) return;
+
+    var di = cd[pointData.index],
+        lonlat = di.lonlat,
+        pos = c2p(lonlat),
+        rad = di.mrc || 1;
+
+    pointData.x0 = pos[0] - rad;
+    pointData.x1 = pos[0] + rad;
+    pointData.y0 = pos[1] - rad;
+    pointData.y1 = pos[1] + rad;
+
+    pointData.loc = di.loc;
+    pointData.lat = lonlat[0];
+    pointData.lon = lonlat[1];
+
+    pointData.color = getTraceColor(trace, di);
+    pointData.extraText = getExtraText(trace, di, geo.mockAxis);
+
+    return [pointData];
+};
+
+function getExtraText(trace, pt, axis) {
+    var hoverinfo = trace.hoverinfo;
+
+    var parts = (hoverinfo === 'all') ?
+        attributes.hoverinfo.flags :
+        hoverinfo.split('+');
+
+    var hasLocation = parts.indexOf('location') !== -1 && Array.isArray(trace.locations),
+        hasLon = (parts.indexOf('lon') !== -1),
+        hasLat = (parts.indexOf('lat') !== -1),
+        hasText = (parts.indexOf('text') !== -1);
+
+    var text = [];
+
+    function format(val) {
+        return Axes.tickText(axis, axis.c2l(val), 'hover').text + '\u00B0';
+    }
+
+    if(hasLocation) text.push(pt.loc);
+    else if(hasLon && hasLat) {
+        text.push('(' + format(pt.lonlat[0]) + ', ' + format(pt.lonlat[1]) + ')');
+    }
+    else if(hasLon) text.push('lon: ' + format(pt.lonlat[0]));
+    else if(hasLat) text.push('lat: ' + format(pt.lonlat[1]));
+
+    if(hasText) text.push(pt.tx || trace.text);
+
+    return text.join('<br>');
+}

src/traces/scattergeo/index.js

@@ -16,6 +16,8 @@ ScatterGeo.supplyDefaults = require('./defaults');
 ScatterGeo.colorbar = require('../scatter/colorbar');
 ScatterGeo.calc = require('./calc');
 ScatterGeo.plot = require('./plot');
+ScatterGeo.hoverPoints = require('./hover');
+ScatterGeo.eventData = require('./event_data');
 
 ScatterGeo.moduleType = 'trace';
 ScatterGeo.name = 'scattergeo';