From 502792c0c78c86366936c7ee16a29b3a631354fb Mon Sep 17 00:00:00 2001 From: Antoine Roy-Gobeil Date: Wed, 3 Mar 2021 23:29:35 -0500 Subject: [PATCH 1/6] In scattergl, selection's eventData returns values in data space --- src/traces/scattergl/select.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/traces/scattergl/select.js b/src/traces/scattergl/select.js index 93a5972a5ba..6cd16c34a49 100644 --- a/src/traces/scattergl/select.js +++ b/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); From 34c5858bcc5e7d7924275001260ec733d9926cb3 Mon Sep 17 00:00:00 2001 From: Antoine Roy-Gobeil Date: Thu, 4 Mar 2021 12:23:04 -0500 Subject: [PATCH 2/6] Test that scattergl select's eventData is the same as scatter's --- test/jasmine/tests/scattergl_select_test.js | 43 +++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/test/jasmine/tests/scattergl_select_test.js b/test/jasmine/tests/scattergl_select_test.js index af2bb572000..f1b0b43a048 100644 --- a/test/jasmine/tests/scattergl_select_test.js +++ b/test/jasmine/tests/scattergl_select_test.js @@ -349,6 +349,49 @@ describe('Test gl2d lasso/select:', function() { }) .then(done, done.fail); }); + + [ + ['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]; + var x = test[1]; + it('@gl should return the same eventData as scatter on ' + axType + ' axis', function(done) { + var _mock = { + data: [{type: 'scatter', x: x, y: [6, 5, 4]}], + layout: {dragmode: 'select', width: 400, height: 400, xaxis: {type: axType}} + }; + gd = createGraphDiv(); + var scatterEventData = {}; + var selectPath = [[150, 150], [250, 250]]; + + Plotly.newPlot(gd, _mock) + .then(delay(20)) + .then(function() { + expect(gd._fullLayout.xaxis.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.xaxis.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() { From 4fd7070bf83e7064e5fba90928de16419fb1ffc7 Mon Sep 17 00:00:00 2001 From: Antoine Roy-Gobeil Date: Thu, 4 Mar 2021 18:02:32 -0500 Subject: [PATCH 3/6] Test that scatterpolargl select's eventData is the same as scatterpolar --- test/jasmine/tests/scatterpolargl_test.js | 80 +++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/test/jasmine/tests/scatterpolargl_test.js b/test/jasmine/tests/scatterpolargl_test.js index d591ea13740..e86164f5d62 100644 --- a/test/jasmine/tests/scatterpolargl_test.js +++ b/test/jasmine/tests/scatterpolargl_test.js @@ -2,10 +2,12 @@ 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'); @@ -13,6 +15,31 @@ 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,47 @@ describe('Test scatterpolargl interactions:', function() { }) .then(done, done.fail); }); + + [ + ['linear', [0, 180]], + ['category', ['A', 'B']], + ].forEach(function(test) { + var axType = test[0]; + var x = test[1]; + it('@gl should return the same eventData as scatter on ' + axType + ' axis', function(done) { + var _mock = { + data: [{type: 'scatterpolar', r: [5, 10], theta: x}], + layout: {dragmode: 'select', width: 400, height: 400} + }; + gd = createGraphDiv(); + var scatterpolarEventData = {}; + var selectPath = [[200, 150], [400, 250]]; + + Plotly.newPlot(gd, _mock) + .then(delay(20)) + .then(function() { + expect(gd._fullLayout.polar.angularaxis.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.angularaxis.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() { From f2bcff538e1d53ef5b63043fd2bbfeb9110df3a6 Mon Sep 17 00:00:00 2001 From: Antoine Roy-Gobeil Date: Fri, 5 Mar 2021 11:26:20 -0500 Subject: [PATCH 4/6] Test both axes in scattergl to return same select's eventData as scatter --- test/jasmine/tests/scattergl_select_test.js | 84 +++++++++++---------- 1 file changed, 44 insertions(+), 40 deletions(-) diff --git a/test/jasmine/tests/scattergl_select_test.js b/test/jasmine/tests/scattergl_select_test.js index f1b0b43a048..44dfb38a34c 100644 --- a/test/jasmine/tests/scattergl_select_test.js +++ b/test/jasmine/tests/scattergl_select_test.js @@ -350,46 +350,50 @@ describe('Test gl2d lasso/select:', function() { .then(done, done.fail); }); - [ - ['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]; - var x = test[1]; - it('@gl should return the same eventData as scatter on ' + axType + ' axis', function(done) { - var _mock = { - data: [{type: 'scatter', x: x, y: [6, 5, 4]}], - layout: {dragmode: 'select', width: 400, height: 400, xaxis: {type: axType}} - }; - gd = createGraphDiv(); - var scatterEventData = {}; - var selectPath = [[150, 150], [250, 250]]; - - Plotly.newPlot(gd, _mock) - .then(delay(20)) - .then(function() { - expect(gd._fullLayout.xaxis.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.xaxis.type).toEqual(test[0]); - return select(gd, selectPath); - }) - .then(delay(20)) - .then(function(eventData) { - assertEventData(eventData, scatterEventData); - }) - .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); + }); }); }); }); From df484754426d63fe8623573fe4a219a039bdbac7 Mon Sep 17 00:00:00 2001 From: Antoine Roy-Gobeil Date: Fri, 5 Mar 2021 11:33:17 -0500 Subject: [PATCH 5/6] Test both axes in scatterpolargl to return same select eventData as non-gl --- test/jasmine/tests/scatterpolargl_test.js | 82 ++++++++++++----------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/test/jasmine/tests/scatterpolargl_test.js b/test/jasmine/tests/scatterpolargl_test.js index e86164f5d62..a0cf6df166d 100644 --- a/test/jasmine/tests/scatterpolargl_test.js +++ b/test/jasmine/tests/scatterpolargl_test.js @@ -298,46 +298,50 @@ describe('Test scatterpolargl interactions:', function() { .then(done, done.fail); }); - [ - ['linear', [0, 180]], - ['category', ['A', 'B']], - ].forEach(function(test) { - var axType = test[0]; - var x = test[1]; - it('@gl should return the same eventData as scatter on ' + axType + ' axis', function(done) { - var _mock = { - data: [{type: 'scatterpolar', r: [5, 10], theta: x}], - layout: {dragmode: 'select', width: 400, height: 400} - }; - gd = createGraphDiv(); - var scatterpolarEventData = {}; - var selectPath = [[200, 150], [400, 250]]; - - Plotly.newPlot(gd, _mock) - .then(delay(20)) - .then(function() { - expect(gd._fullLayout.polar.angularaxis.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.angularaxis.type).toEqual(test[0]); - return select(gd, selectPath); - }) - .then(delay(20)) - .then(function(eventData) { - assertEventData(eventData, scatterpolarEventData); - }) - .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() { From bfd95d823ed54f89cba14a3e3bbe42f0d892b3b4 Mon Sep 17 00:00:00 2001 From: Antoine Roy-Gobeil Date: Fri, 5 Mar 2021 11:41:06 -0500 Subject: [PATCH 6/6] Fix linter error in "scatterpolargl_test.js" --- test/jasmine/tests/scatterpolargl_test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/jasmine/tests/scatterpolargl_test.js b/test/jasmine/tests/scatterpolargl_test.js index a0cf6df166d..2e440456878 100644 --- a/test/jasmine/tests/scatterpolargl_test.js +++ b/test/jasmine/tests/scatterpolargl_test.js @@ -340,8 +340,7 @@ describe('Test scatterpolargl interactions:', function() { .then(done, done.fail); }); }); - }) - + }); }); describe('Test scatterpolargl autorange:', function() {