Merge pull request #2677 from plotly/scattergl-transform-fixes

Scattergl transform fixes

Author: etpinard

src/lib/index.js

@@ -478,6 +478,17 @@ lib.extractOption = function(calcPt, trace, calcKey, traceKey) {
     if(!Array.isArray(traceVal)) return traceVal;
 };
 
+function makePtIndex2PtNumber(indexToPoints) {
+    var ptIndex2ptNumber = {};
+    for(var k in indexToPoints) {
+        var pts = indexToPoints[k];
+        for(var j = 0; j < pts.length; j++) {
+            ptIndex2ptNumber[pts[j]] = +k;
+        }
+    }
+    return ptIndex2ptNumber;
+}
+
 /** Tag selected calcdata items
  *
  * N.B. note that point 'index' corresponds to input data array index
@@ -498,13 +509,7 @@ lib.tagSelected = function(calcTrace, trace, ptNumber2cdIndex) {
 
     // make pt index-to-number map object, which takes care of transformed traces
     if(indexToPoints) {
-        ptIndex2ptNumber = {};
-        for(var k in indexToPoints) {
-            var pts = indexToPoints[k];
-            for(var j = 0; j < pts.length; j++) {
-                ptIndex2ptNumber[pts[j]] = k;
-            }
-        }
+        ptIndex2ptNumber = makePtIndex2PtNumber(indexToPoints);
     }
 
     function isCdIndexValid(v) {
@@ -525,6 +530,30 @@ lib.tagSelected = function(calcTrace, trace, ptNumber2cdIndex) {
     }
 };
 
+lib.selIndices2selPoints = function(trace) {
+    var selectedpoints = trace.selectedpoints;
+    var indexToPoints = trace._indexToPoints;
+
+    if(indexToPoints) {
+        var ptIndex2ptNumber = makePtIndex2PtNumber(indexToPoints);
+        var out = [];
+
+        for(var i = 0; i < selectedpoints.length; i++) {
+            var ptIndex = selectedpoints[i];
+            if(lib.isIndex(ptIndex)) {
+                var ptNumber = ptIndex2ptNumber[ptIndex];
+                if(lib.isIndex(ptNumber)) {
+                    out.push(ptNumber);
+                }
+            }
+        }
+
+        return out;
+    } else {
+        return selectedpoints;
+    }
+};
+
 /** Returns target as set by 'target' transform attribute
  *
  * @param {object} trace : full trace object

src/plots/plots.js

@@ -2342,7 +2342,15 @@ plots.doCalcdata = function(gd, traces) {
             // we need one round of trace module calc before
             // the calc transform to 'fill in' the categories list
             // used for example in the data-to-coordinate method
-            if(_module && _module.calc) _module.calc(gd, trace);
+            if(_module && _module.calc) {
+                var cdi = _module.calc(gd, trace);
+
+                // must clear scene 'batches', so that 2nd
+                // _module.calc call starts from scratch
+                if(cdi[0] && cdi[0].t && cdi[0].t._scene) {
+                    delete cdi[0].t._scene.dirty;
+                }
+            }
 
             for(j = 0; j < trace.transforms.length; j++) {
                 var transform = trace.transforms[j];

src/traces/scattergl/convert.js

@@ -192,10 +192,10 @@ function convertMarkerStyle(trace) {
         // See  https://github.com/plotly/plotly.js/pull/1781#discussion_r121820798
         if(multiLineWidth) {
             for(i = 0; i < count; i++) {
-                borderSizes[i] = markerSizeFunc(optsIn.line.width[i]);
+                borderSizes[i] = optsIn.line.width[i] / 2;
             }
         } else {
-            s = markerSizeFunc(optsIn.line.width);
+            s = optsIn.line.width / 2;
             for(i = 0; i < count; i++) {
                 borderSizes[i] = s;
             }
@@ -219,7 +219,7 @@ function convertMarkerSelection(trace, target) {
     if(target.marker && target.marker.symbol) {
         optsOut = convertMarkerStyle(Lib.extendFlat({}, optsIn, target.marker));
     } else if(target.marker) {
-        if(target.marker.size) optsOut.sizes = target.marker.size;
+        if(target.marker.size) optsOut.sizes = target.marker.size / 2;
         if(target.marker.color) optsOut.colors = target.marker.color;
         if(target.marker.opacity !== undefined) optsOut.opacity = target.marker.opacity;
     }

src/traces/scattergl/index.js

@@ -492,12 +492,11 @@ function plot(gd, subplot, cdata) {
 
             // regenerate scene batch, if traces number changed during selection
             if(trace.selectedpoints) {
-                scene.selectBatch[id] = trace.selectedpoints;
+                var selPts = scene.selectBatch[id] = Lib.selIndices2selPoints(trace);
 
-                var selPts = trace.selectedpoints;
                 var selDict = {};
                 for(i = 0; i < selPts.length; i++) {
-                    selDict[selPts[i]] = true;
+                    selDict[selPts[i]] = 1;
                 }
                 var unselPts = [];
                 for(i = 0; i < stash.count; i++) {

test/image/baselines/gl2d_point-selection.png

@@ -0,0 +1,74 @@
+{
+  "data": [{
+    "type": "scattergl",
+    "mode": "lines+markers+text",
+    "x": [1, 2, 3, 4, 5, 6],
+    "y": [1, 3, 2, 4, 5, 7],
+    "ids": ["a", "b", "c", "d", "e", "f"],
+    "text": ["a", "b", "c", "d", "e", "f"],
+    "marker": {
+      "color": "#67353E",
+      "size": 12
+    },
+    "textposition": "top left",
+    "selectedpoints": [1, 2, 3],
+    "selected": {
+      "marker": {
+        "color": "blue",
+        "size": 20
+      }
+    },
+    "unselected": {
+      "marker": {
+        "color": "green",
+        "opacity": 0.5
+      }
+    },
+    "transforms": [{
+      "type": "filter",
+      "target": "x",
+      "operation": "][",
+      "value": [3.5, 4.5]
+    }]
+  }, {
+    "type": "scattergl",
+    "mode": "lines+markers+text",
+    "x": [1, 2, 3, 4, 5, 6],
+    "y": [6, 5, 6, 5, 4, 3],
+    "ids": ["a", "b", "c", "d", "e", "f"],
+    "text": ["a", "b", "c", "d", "e", "f"],
+    "marker": {
+      "color": "#34ABA2",
+      "size": 12
+    },
+    "textposition": "top left",
+    "selectedpoints": [],
+    "selected": {
+      "marker": {
+        "color": "green"
+      }
+    },
+    "unselected": {
+      "marker": {
+        "color": "blue",
+        "opacity": 0.5
+      }
+    },
+    "transforms": [{
+      "type": "filter",
+      "target": "x",
+      "operation": "][",
+      "value": [3.5, 4.5]
+    }]
+  }],
+  "layout": {
+    "dragmode": "lasso",
+    "legend": {
+      "x": 0,
+      "y": 1,
+      "xanchor": "left",
+      "yanchor": "bottom"
+    },
+    "width": 600
+  }
+}

test/image/baselines/gl2d_transforms.png

@@ -0,0 +1,75 @@
+{
+    "data": [{
+        "type": "scattergl",
+        "mode": "lines+markers",
+        "x": [1, -1, -2, 0, 1, 3, 3],
+        "y": [2, 1, 0, 1, 3, 4, 3],
+        "transforms": [{
+            "type": "groupby",
+            "groups": ["a", "a", "b", "a", "b", "b", "a"],
+            "styles": [
+                {"target": "a", "value": {"marker": {"color": "orange"}}},
+                {"target": "b", "value": {"marker": {"color": "blue"}}}
+            ]
+        }, {
+            "type": "filter",
+            "target": "x",
+            "operation": ">=",
+            "value": 0,
+            "preservegaps": true
+        }],
+        "name": "Groupby+filter"
+    },
+    {
+        "type": "scattergl",
+        "x": [1, 2, 3, 4, -3],
+        "y": [1.1, 2.2, 3.3, 4.4, 5.5],
+        "marker": {
+            "size": [0.3, 0.2, 0.1, 0.4, 0.5],
+            "sizeref": 0.01,
+            "color": [2, 4, 6, 10, 8],
+            "opacity": [0.9, 0.6, 0.2, 0.8, 1.0],
+            "line": {
+                "color": [2.2, 3.3, 4.4, 5.5, 1.1]
+            }
+        },
+        "transforms": [{
+            "type": "aggregate",
+            "groups": ["a", "b", "a", "a", "a"],
+            "aggregations": [
+                {"target": "x", "func": "sum"},
+                {"target": "y", "func": "avg"},
+                {"target": "marker.size", "func": "min"},
+                {"target": "marker.color", "func": "max"},
+                {"target": "marker.line.color", "func": "last"},
+                {"target": "marker.line.width", "func": "count"}
+            ]
+        }],
+        "name": "Aggregate"
+    },
+    {
+        "type": "scattergl",
+        "x": [1, 2, 3, 4, 5, 6],
+        "y": [1, 4, 2, 6, 5, 3],
+        "transforms": [{
+            "type": "sort",
+            "target": [1, 6, 2, 5, 3, 4]
+        }],
+        "name": "Sort"
+    },
+    {
+        "type": "scattergl",
+        "x":[4, 5, 6, 4, 5, 6],
+        "y": [1, 1, 1, 2, 2, 2],
+        "marker": {"color": [1, 2, 3, -1, -2, -3], "size": 20},
+        "mode": "lines+markers",
+        "transforms": [
+            {"type": "groupby", "groups": [1, 1, 1, 2, 2, 2]}
+        ]
+    }],
+    "layout": {
+        "width": 600,
+        "height": 400,
+        "title": "Transforms on scattergl traces"
+    }
+}