Merge pull request #5534 from plotly/scattergl-fix-select

scattergl: make selection's eventData the same as in scatter traces

Author: archmoj

src/traces/scattergl/select.js

@@ -5,6 +5,8 @@ var styleTextSelection = require('./edit_style').styleTextSelection;
 
 module.exports = function select(searchInfo, selectionTester) {
     var cd = searchInfo.cd;
+    var xa = searchInfo.xaxis;
+    var ya = searchInfo.yaxis;
     var selection = [];
     var trace = cd[0].trace;
     var stash = cd[0].t;
@@ -33,8 +35,8 @@ module.exports = function select(searchInfo, selectionTester) {
                 els.push(i);
                 selection.push({
                     pointNumber: i,
-                    x: x[i],
-                    y: y[i]
+                    x: xa.c2d(x[i]),
+                    y: ya.c2d(y[i])
                 });
             } else {
                 unels.push(i);

test/jasmine/tests/scattergl_select_test.js

@@ -349,6 +349,53 @@ describe('Test gl2d lasso/select:', function() {
         })
         .then(done, done.fail);
     });
+
+    ['x', 'y'].forEach(function(ax) {
+        [
+          ['linear', [1, 2, 3]],
+          ['log', [1, 2, 3]],
+          ['category', ['A', 'B', 'C']],
+          ['date', ['1900-01-01', '2000-01-01', '2100-01-01']]
+        ].forEach(function(test) {
+            var axType = test[0];
+
+            it('@gl should return the same eventData as scatter on ' + axType + ' ' + ax + ' axis', function(done) {
+                var _mock = {
+                    data: [{type: 'scatter', x: [1, 2, 3], y: [6, 5, 4]}],
+                    layout: {dragmode: 'select', width: 400, height: 400, xaxis: {}, yaxis: {}}
+                };
+                _mock.data[0][ax] = test[1];
+                _mock.layout[ax + 'axis'].type = axType;
+                gd = createGraphDiv();
+                var scatterEventData = {};
+                var selectPath = [[150, 150], [250, 250]];
+
+                Plotly.newPlot(gd, _mock)
+                .then(delay(20))
+                .then(function() {
+                    expect(gd._fullLayout[ax + 'axis'].type).toEqual(test[0]);
+                    return select(gd, selectPath);
+                })
+                .then(delay(20))
+                .then(function(eventData) {
+                    scatterEventData = eventData;
+                    // Make sure we selected a point
+                    expect(eventData.points.length).toBe(1);
+                    return Plotly.restyle(gd, 'type', 'scattergl');
+                })
+                .then(delay(20))
+                .then(function() {
+                    expect(gd._fullLayout[ax + 'axis'].type).toEqual(test[0]);
+                    return select(gd, selectPath);
+                })
+                .then(delay(20))
+                .then(function(eventData) {
+                    assertEventData(eventData, scatterEventData);
+                })
+                .then(done, done.fail);
+            });
+        });
+    });
 });
 
 describe('Test displayed selections:', function() {

test/jasmine/tests/scatterpolargl_test.js

@@ -2,17 +2,44 @@ var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
 var ScatterPolarGl = require('@src/traces/scatterpolargl');
 
+var d3Select = require('../../strict-d3').select;
 var d3SelectAll = require('../../strict-d3').selectAll;
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 
+var delay = require('../assets/delay');
 var mouseEvent = require('../assets/mouse_event');
 var readPixel = require('../assets/read_pixel');
 
 var customAssertions = require('../assets/custom_assertions');
 var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
 var checkTextTemplate = require('../assets/check_texttemplate');
 
+function drag(gd, path) {
+    var len = path.length;
+    var el = d3Select(gd).select('rect.nsewdrag').node();
+    var opts = {element: el};
+
+    Lib.clearThrottle();
+    mouseEvent('mousemove', path[0][0], path[0][1], opts);
+    mouseEvent('mousedown', path[0][0], path[0][1], opts);
+
+    path.slice(1, len).forEach(function(pt) {
+        Lib.clearThrottle();
+        mouseEvent('mousemove', pt[0], pt[1], opts);
+    });
+
+    mouseEvent('mouseup', path[len - 1][0], path[len - 1][1], opts);
+}
+
+function select(gd, path) {
+    return new Promise(function(resolve, reject) {
+        gd.once('plotly_selected', resolve);
+        setTimeout(function() { reject('did not trigger *plotly_selected*');}, 200);
+        drag(gd, path);
+    });
+}
+
 describe('Test scatterpolargl hover:', function() {
     var gd;
 
@@ -132,6 +159,18 @@ describe('Test scatterpolargl interactions:', function() {
             .reduce(function(acc, v) { return acc + v; }, 0);
     }
 
+    function assertEventData(actual, expected) {
+        expect(actual.points.length).toBe(expected.points.length);
+
+        expected.points.forEach(function(e, i) {
+            var a = actual.points[i];
+            if(a) {
+                expect(a.r).toBe(e.r, 'r');
+                expect(a.theta).toBe(e.theta, 'theta');
+            }
+        });
+    }
+
     it('@gl should be able to toggle from svg to gl', function(done) {
         gd = createGraphDiv();
 
@@ -258,6 +297,50 @@ describe('Test scatterpolargl interactions:', function() {
         })
         .then(done, done.fail);
     });
+
+    ['r', 'theta'].forEach(function(ax) {
+        [
+          ['linear', [0, 180]],
+          ['category', ['A', 'B']],
+        ].forEach(function(test) {
+            var axType = test[0];
+            var axNames = {'r': 'radialaxis', 'theta': 'angularaxis'};
+            it('@gl should return the same eventData as scatter on ' + axType + ' ' + ax + ' axis', function(done) {
+                var _mock = {
+                    data: [{type: 'scatterpolar', r: [5, 10], theta: [0, 180]}],
+                    layout: {dragmode: 'select', width: 400, height: 400}
+                };
+                _mock.data[0][ax] = test[1];
+                gd = createGraphDiv();
+                var scatterpolarEventData = {};
+                var selectPath = [[185, 150], [400, 250]];
+
+                Plotly.newPlot(gd, _mock)
+                .then(delay(20))
+                .then(function() {
+                    expect(gd._fullLayout.polar[axNames[ax]].type).toEqual(test[0]);
+                    return select(gd, selectPath);
+                })
+                .then(delay(20))
+                .then(function(eventData) {
+                    scatterpolarEventData = eventData;
+                    // Make sure we selected a point
+                    expect(eventData.points.length).toBe(1);
+                    return Plotly.restyle(gd, 'type', 'scatterpolargl');
+                })
+                .then(delay(20))
+                .then(function() {
+                    expect(gd._fullLayout.polar[axNames[ax]].type).toEqual(test[0]);
+                    return select(gd, selectPath);
+                })
+                .then(delay(20))
+                .then(function(eventData) {
+                    assertEventData(eventData, scatterpolarEventData);
+                })
+                .then(done, done.fail);
+            });
+        });
+    });
 });
 
 describe('Test scatterpolargl autorange:', function() {