Scatterpolargl fixes

src/plots/polar/index.js

@@ -53,6 +53,9 @@ function plot(gd) {
 
 function clean(newFullData, newFullLayout, oldFullData, oldFullLayout) {
     var oldIds = oldFullLayout._subplots[name] || [];
+    var hadGl = (oldFullLayout._has && oldFullLayout._has('gl'));
+    var hasGl = (newFullLayout._has && newFullLayout._has('gl'));
+    var mustCleanScene = hadGl && !hasGl;
 
     for(var i = 0; i < oldIds.length; i++) {
         var id = oldIds[i];
@@ -66,6 +69,11 @@ function clean(newFullData, newFullLayout, oldFullData, oldFullLayout) {
                 oldSubplot.clipPaths[k].remove();
             }
         }
+
+        if(mustCleanScene && oldSubplot._scene) {
+            oldSubplot._scene.destroy();
+            oldSubplot._scene = null;
+        }
     }
 }
 

src/traces/scatterpolargl/index.js

@@ -13,6 +13,7 @@ var isNumeric = require('fast-isnumeric');
 
 var ScatterGl = require('../scattergl');
 var calcColorscales = require('../scatter/colorscale_calc');
+var calcMarkerSize = require('../scatter/calc').calcMarkerSize;
 var Axes = require('../../plots/cartesian/axes');
 var makeHoverPointText = require('../scatterpolar/hover').makeHoverPointText;
 var subTypes = require('../scatter/subtypes');
@@ -26,22 +27,28 @@ function calc(container, trace) {
     var angularAxis = layout[subplotId].angularaxis;
     var rArray = radialAxis.makeCalcdata(trace, 'r');
     var thetaArray = angularAxis.makeCalcdata(trace, 'theta');
+    var len = trace._length;
     var stash = {};
 
-    if(trace._length < rArray.length) rArray = rArray.slice(0, trace._length);
-    if(trace._length < thetaArray.length) thetaArray = thetaArray.slice(0, trace._length);
-
-    calcColorscales(trace);
+    if(len < rArray.length) rArray = rArray.slice(0, len);
+    if(len < thetaArray.length) thetaArray = thetaArray.slice(0, len);
 
     stash.r = rArray;
     stash.theta = thetaArray;
 
-    trace._extremes.x = Axes.findExtremes(radialAxis, rArray, {tozero: true});
+    // We could add TOO_MANY_POINTS logic like in Scattergl.calc,
+    // if users asks for scaterpolargl charts with > 1e5 pts
+    var ppad = calcMarkerSize(trace, len);
+    trace._extremes.x = Axes.findExtremes(radialAxis, rArray, {ppad: ppad});
+
+    calcColorscales(trace);
 
     return [{x: false, y: false, t: stash, trace: trace}];
 }
 
 function plot(container, subplot, cdata) {
+    if(!cdata.length) return;
+
     var radialAxis = subplot.radialAxis;
     var angularAxis = subplot.angularAxis;
 

test/jasmine/tests/scatterpolargl_test.js

@@ -1,10 +1,12 @@
 var Plotly = require('@lib');
 var Lib = require('@src/lib');
 
+var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
 var mouseEvent = require('../assets/mouse_event');
+var readPixel = require('../assets/read_pixel');
 
 var customAssertions = require('../assets/custom_assertions');
 var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
@@ -102,3 +104,69 @@ describe('Test scatterpolargl hover:', function() {
         });
     });
 });
+
+describe('Test scatterpolargl interactions:', function() {
+    var gd;
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+    });
+
+    function countCanvases() {
+        return d3.selectAll('canvas').size();
+    }
+
+    function totalPixels() {
+        return readPixel(gd.querySelector('.gl-canvas-context'), 0, 0, 400, 400)
+            .reduce(function(acc, v) { return acc + v; }, 0);
+    }
+
+    it('@gl should be able to toggle from svg to gl', function(done) {
+        gd = createGraphDiv();
+
+        var scene;
+
+        Plotly.plot(gd, [{
+            type: 'scatterpolar',
+            r: [1, 2, 1],
+        }], {
+            width: 400,
+            height: 400
+        })
+        .then(function() {
+            expect(countCanvases()).toBe(0);
+            expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(1);
+
+            return Plotly.restyle(gd, 'type', 'scatterpolargl');
+        })
+        .then(function() {
+            expect(countCanvases()).toBe(3);
+            expect(totalPixels()).not.toBe(0);
+            expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(0);
+
+            scene = gd._fullLayout.polar._subplot._scene;
+            spyOn(scene, 'destroy').and.callThrough();
+
+            return Plotly.restyle(gd, 'type', 'scatterpolar');
+        })
+        .then(function() {
+            expect(countCanvases()).toBe(0);
+            expect(scene.destroy).toHaveBeenCalledTimes(1);
+            expect(gd._fullLayout.polar._subplot._scene).toBe(null);
+            expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(1);
+
+            return Plotly.restyle(gd, 'type', 'scatterpolargl');
+        })
+        .then(function() {
+            expect(countCanvases()).toBe(3);
+            // this here was failing before
+            // https://github.com/plotly/plotly.js/issues/3094
+            // got fixed
+            expect(totalPixels()).not.toBe(0);
+            expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(0);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});