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();