Merge pull request #3536 from 3dcl/master

Fix bug in scattergl text update

Author: etpinard

src/traces/scattergl/index.js

@@ -390,6 +390,19 @@ function plot(gd, subplot, cdata) {
 
         // update main marker options
         if(scene.glText) {
+            if(scene.count > scene.glText.length) {
+                // add gl text marker
+                var textsToAdd = scene.count - scene.glText.length;
+                for(i = 0; i < textsToAdd; i++) {
+                    scene.glText.push(new Text(regl));
+                }
+            } else if(scene.count < scene.glText.length) {
+                // remove gl text marker
+                var textsToRemove = scene.glText.length - scene.count;
+                var removedTexts = scene.glText.splice(scene.count, textsToRemove);
+                removedTexts.forEach(function(text) { text.destroy(); });
+            }
+
             for(i = 0; i < scene.count; i++) {
                 scene.glText[i].update(scene.textOptions[i]);
             }

test/jasmine/tests/scattergl_test.js

@@ -0,0 +1,97 @@
+var Plotly = require('@lib/index');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var failTest = require('../assets/fail_test');
+
+describe('end-to-end scattergl tests', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should create a plot with text labels', function(done) {
+        Plotly.react(gd, [{
+            type: 'scattergl',
+            mode: 'text+lines',
+            x: [1, 2, 3, 4, 5, 6, 7],
+            y: [2, 3, 4, 5, 6, 7, 8],
+            text: 'Test'
+        }]).then(function() {
+            var fullLayout = gd._fullLayout;
+            var subplot = fullLayout._plots.xy;
+            var scene = subplot._scene;
+            expect(scene.glText.length).toEqual(1);
+        }).catch(failTest).then(done);
+    });
+
+    it('should update a plot with text labels', function(done) {
+        Plotly.react(gd, [{
+            type: 'scattergl',
+            mode: 'text+lines',
+            x: [1, 2, 3, 4, 5, 6, 7],
+            y: [2, 3, 4, 5, 6, 7, 8],
+            text: 'Test'
+        }]).then(function() {
+            var fullLayout = gd._fullLayout;
+            var subplot = fullLayout._plots.xy;
+            var scene = subplot._scene;
+            expect(scene.glText.length).toEqual(1);
+
+            // add plots
+            return Plotly.react(gd, [
+                {
+                    type: 'scattergl',
+                    mode: 'text+lines',
+                    x: [1, 2, 3, 4, 5, 6, 7],
+                    y: [2, 3, 4, 5, 6, 7, 8],
+                    text: 'Test'
+                },
+                {
+                    type: 'scattergl',
+                    mode: 'text+lines',
+                    x: [1, 2, 3, 4, 5, 6, 7],
+                    y: [3, 4, 5, 6, 7, 8, 9],
+                    text: 'Test 2'
+                },
+                {
+                    type: 'scattergl',
+                    mode: 'text+lines',
+                    x: [1, 2, 3, 4, 5, 6, 7],
+                    y: [4, 5, 6, 7, 8, 9, 10],
+                    text: 'Test 3'
+                }
+            ]);
+        }).then(function() {
+            var fullLayout = gd._fullLayout;
+            var subplot = fullLayout._plots.xy;
+            var scene = subplot._scene;
+            expect(scene.glText.length).toEqual(3);
+
+            // remove plots
+            return Plotly.react(gd, [
+                {
+                    type: 'scattergl',
+                    mode: 'text+lines',
+                    x: [1, 2, 3, 4, 5, 6, 7],
+                    y: [2, 3, 4, 5, 6, 7, 8],
+                    text: 'Test'
+                },
+                {
+                    type: 'scattergl',
+                    mode: 'text+lines',
+                    x: [1, 2, 3, 4, 5, 6, 7],
+                    y: [3, 4, 5, 6, 7, 8, 9],
+                    text: 'Test 2'
+                }
+            ]);
+        }).then(function() {
+            var fullLayout = gd._fullLayout;
+            var subplot = fullLayout._plots.xy;
+            var scene = subplot._scene;
+            expect(scene.glText.length).toEqual(2);
+        }).catch(failTest).then(done);
+    });
+});