Merge pull request #2499 from plotly/point-cluster-dev

Point cluster dev

Author: dy

package-lock.json

@@ -86,7 +86,6 @@
     "glslify": "^6.1.1",
     "has-hover": "^1.0.1",
     "has-passive-events": "^1.0.0",
-    "kdgrass": "^1.0.1",
     "mapbox-gl": "0.44.1",
     "matrix-camera-controller": "^2.1.3",
     "mouse-change": "^1.4.0",
@@ -96,11 +95,12 @@
     "ndarray-fill": "^1.0.2",
     "ndarray-homography": "^1.0.0",
     "ndarray-ops": "^1.2.2",
+    "point-cluster": "^3.1.2",
     "polybooljs": "^1.2.0",
     "regl": "^1.3.1",
     "regl-error2d": "^2.0.3",
     "regl-line2d": "^2.1.5",
-    "regl-scatter2d": "^2.1.17",
+    "regl-scatter2d": "^3.0.0",
     "right-now": "^1.0.0",
     "robust-orientation": "^1.1.3",
     "sane-topojson": "^2.0.0",

package.json

@@ -21,6 +21,7 @@ var subTypes = require('../scatter/subtypes');
 var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 
 var constants = require('./constants');
+var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
 
 function convertStyle(gd, trace) {
     var i;
@@ -41,6 +42,14 @@ function convertStyle(gd, trace) {
         opts.marker = convertMarkerStyle(trace);
         opts.selected = convertMarkerSelection(trace, trace.selected);
         opts.unselected = convertMarkerSelection(trace, trace.unselected);
+
+        if(!trace.unselected && Array.isArray(trace.marker.opacity)) {
+            var mo = trace.marker.opacity;
+            opts.unselected.opacity = new Array(mo.length);
+            for(i = 0; i < mo.length; i++) {
+                opts.unselected.opacity[i] = DESELECTDIM * mo[i];
+            }
+        }
     }
 
     if(subTypes.hasLines(trace)) {

src/traces/scattergl/convert.js

@@ -12,7 +12,7 @@ var createRegl = require('regl');
 var createScatter = require('regl-scatter2d');
 var createLine = require('regl-line2d');
 var createError = require('regl-error2d');
-var kdtree = require('kdgrass');
+var cluster = require('point-cluster');
 var arrayRange = require('array-range');
 
 var Registry = require('../../registry');
@@ -72,7 +72,7 @@ function calc(gd, trace) {
     // and it is also
     if(xa.type !== 'log' && ya.type !== 'log') {
         // FIXME: delegate this to webworker
-        stash.tree = kdtree(positions, 512);
+        stash.tree = cluster(positions);
     } else {
         var ids = stash.ids = new Array(count);
         for(i = 0; i < count; i++) {
@@ -104,6 +104,12 @@ function calc(gd, trace) {
     if(opts.line && !scene.line2d) scene.line2d = true;
     if((opts.errorX || opts.errorY) && !scene.error2d) scene.error2d = true;
 
+    // FIXME: organize it in a more appropriate manner, probably in sceneOptions
+    // put point-cluster instance for optimized regl calc
+    if(opts.marker && count >= TOO_MANY_POINTS) {
+        opts.marker.cluster = stash.tree;
+    }
+
     // save scene opts batch
     scene.lineOptions.push(opts.line);
     scene.errorXOptions.push(opts.errorX);
@@ -547,10 +553,7 @@ function plot(gd, subplot, cdata) {
         // create select2d
         if(!scene.select2d) {
             // create scatter instance by cloning scatter2d
-            scene.select2d = createScatter(
-                fullLayout._glcanvas.data()[1].regl,
-                {clone: scene.scatter2d}
-            );
+            scene.select2d = createScatter(fullLayout._glcanvas.data()[1].regl);
         }
 
         if(scene.scatter2d && scene.selectBatch && scene.selectBatch.length) {

src/traces/scattergl/index.js

@@ -8,7 +8,7 @@
 
 'use strict';
 
-var kdtree = require('kdgrass');
+var cluster = require('point-cluster');
 var isNumeric = require('fast-isnumeric');
 
 var ScatterGl = require('../scattergl');
@@ -17,6 +17,8 @@ var Axes = require('../../plots/cartesian/axes');
 var makeHoverPointText = require('../scatterpolar/hover').makeHoverPointText;
 var subTypes = require('../scatter/subtypes');
 
+var TOO_MANY_POINTS = require('../scattergl/constants').TOO_MANY_POINTS;
+
 function calc(container, trace) {
     var layout = container._fullLayout;
     var subplotId = trace.subplot;
@@ -106,6 +108,13 @@ function plot(container, subplot, cdata) {
         if(options.line && !scene.line2d) scene.line2d = true;
         if((options.errorX || options.errorY) && !scene.error2d) scene.error2d = true;
 
+        stash.tree = cluster(positions);
+
+        // FIXME: see scattergl.js#109
+        if(options.marker && count >= TOO_MANY_POINTS) {
+            options.marker.cluster = stash.tree;
+        }
+
         // bring positions to selected/unselected options
         if(subTypes.hasMarkers(trace)) {
             options.selected.positions = options.unselected.positions = options.marker.positions;
@@ -132,7 +141,6 @@ function plot(container, subplot, cdata) {
         stash.theta = thetaArray;
         stash.positions = positions;
         stash.count = count;
-        stash.tree = kdtree(positions, 512);
     });
 
     return ScatterGl.plot(container, subplot, cdata);

src/traces/scatterpolargl/index.js

@@ -282,7 +282,7 @@ function assertES5() {
     });
 
     var files = constants.partialBundlePaths.map(function(f) { return f.dist; });
-    files.unshift(constants.pathToPlotlyDist);
+    files.unshift(constants.pathToPlotlyBuild, constants.pathToPlotlyDist);
 
     var report = cli.executeOnFiles(files);
     var formatter = cli.getFormatter();

tasks/test_syntax.js

@@ -0,0 +1,33 @@
+{
+  "data": [{
+    "name": "array marker opacity edge case",
+    "type": "scattergl",
+    "mode": "markers",
+    "x": [1, 2, 3, 4, 5, 6],
+    "y": [1, 3, 2, 4, 5, 7],
+    "marker": {
+      "size": 20,
+      "opacity": [0.9, 0.8, 0.7, 1, 0.6, 0.8]
+    },
+    "selectedpoints": [1, 4, 2]
+  }, {
+    "name": "array marker opacity + set unselected.marker.opacity",
+    "type": "scattergl",
+    "mode": "markers",
+    "x": [1, 2, 3, 4, 5, 6],
+    "y": [3, 5, 4, 6, 7, 9],
+    "marker": {
+      "size": 20,
+      "opacity": [0.9, 0.8, 0.7, 1, 0.6, 0.8]
+    },
+    "unselected": {
+      "marker": {
+        "opacity": 0
+      }
+    },
+    "selectedpoints": [1, 4, 2]
+  }],
+  "layout": {
+    "showlegend": false
+  }
+}

test/image/baselines/gl2d_14.png

@@ -64,7 +64,7 @@ var mock4 = {
     layout: {}
 };
 
-describe('@gl Test hover and click interactions', function() {
+describe('@gl @flaky Test hover and click interactions', function() {
     var gd;
 
     function makeHoverFn(gd, x, y) {

test/image/baselines/gl2d_17.png

@@ -518,7 +518,7 @@ describe('@gl Test gl2d plots', function() {
         .then(done);
     });
 
-    it('supports 1D and 2D Zoom', function(done) {
+    it('@flaky supports 1D and 2D Zoom', function(done) {
         var centerX;
         var centerY;
 
@@ -571,7 +571,7 @@ describe('@gl Test gl2d plots', function() {
         .then(done);
     });
 
-    it('supports axis constraints with zoom', function(done) {
+    it('@flaky supports axis constraints with zoom', function(done) {
         var centerX;
         var centerY;
 
@@ -638,7 +638,7 @@ describe('@gl Test gl2d plots', function() {
         .then(done);
     });
 
-    it('should change plot type with incomplete data', function(done) {
+    it('@flaky should change plot type with incomplete data', function(done) {
         Plotly.plot(gd, [{}]);
         expect(function() {
             Plotly.restyle(gd, {type: 'scattergl', x: [[1]]}, 0);
@@ -651,7 +651,7 @@ describe('@gl Test gl2d plots', function() {
         done();
     });
 
-    it('data-referenced annotations should update on drag', function(done) {
+    it('@flaky data-referenced annotations should update on drag', function(done) {
         function assertAnnotation(xy) {
             var ann = d3.select('g.annotation-text-g').select('g');
             var translate = Drawing.getTranslate(ann);
@@ -694,7 +694,7 @@ describe('@gl Test gl2d plots', function() {
         .then(done);
     });
 
-    it('should not scroll document while panning', function(done) {
+    it('@flaky should not scroll document while panning', function(done) {
         var mock = {
             data: [
                 { type: 'scattergl', y: [1, 2, 3], x: [1, 2, 3] }
@@ -856,7 +856,7 @@ describe('@gl Test gl2d plots', function() {
         .then(done);
     });
 
-    it('should remove fill2d', function(done) {
+    it('@flaky should remove fill2d', function(done) {
         var mock = require('@mocks/gl2d_axes_labels2.json');
 
         Plotly.plot(gd, mock.data, mock.layout)