Merge pull request plotly#245 from plotly/fix-geo-toggle

Bring back geo trace toggle [fixes plotly#244]

Author: etpinard

src/plots/geo/geo.js

@@ -15,8 +15,6 @@ var d3 = require('d3');
 
 var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
-
-var Plots = require('../../plots/plots');
 var Axes = require('../../plots/cartesian/axes');
 
 var addProjectionsToD3 = require('./projections');
@@ -139,6 +137,20 @@ proto.plot = function(geoData, fullLayout, promises) {
     // to avoid making multiple request while streaming
 };
 
+// filter out non-visible trace
+// geo plot routine use the classic join/enter/exit pattern to update traces
+function filterData(dataIn) {
+    var dataOut = [];
+
+    for(var i = 0; i < dataIn.length; i++) {
+        var trace = dataIn[i];
+
+        if(trace.visible === true) dataOut.push(trace);
+    }
+
+    return dataOut;
+}
+
 proto.onceTopojsonIsLoaded = function(geoData, geoLayout) {
     var traceData = {};
 
@@ -153,8 +165,10 @@ proto.onceTopojsonIsLoaded = function(geoData, geoLayout) {
 
     var traceKeys = Object.keys(traceData);
     for(var j = 0; j < traceKeys.length; j++){
-        var traceKey = traceKeys[j];
-        Plots.getModule(traceKey).plot(this, traceData[traceKey], geoLayout);
+        var moduleData = traceData[traceKeys[j]];
+        var _module = moduleData[0]._module;
+
+        _module.plot(this, filterData(moduleData), geoLayout);
     }
 
     this.render();

src/traces/choropleth/plot.js

@@ -68,7 +68,7 @@ plotChoropleth.plot = function(geo, choroplethData, geoLayout) {
 
     var gChoroplethTraces = gChoropleth
         .selectAll('g.trace.choropleth')
-        .data(choroplethData);
+        .data(choroplethData, function(trace) { return trace.uid; });
 
     gChoroplethTraces.enter().append('g')
         .attr('class', 'trace choropleth');
@@ -77,8 +77,6 @@ plotChoropleth.plot = function(geo, choroplethData, geoLayout) {
 
     gChoroplethTraces
         .each(function(trace) {
-            if(trace.visible !== true) return;
-
             var cdi = plotChoropleth.calcGeoJSON(trace, geo.topojson),
                 cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
                 eventDataFunc = makeEventDataFunc(trace);

src/traces/scattergeo/plot.js

@@ -31,7 +31,7 @@ plotScatterGeo.calcGeoJSON = function(trace, topojson) {
     var cdi = [],
         hasLocationData = Array.isArray(trace.locations);
 
-    var len, features, getLonLat, lonlat, locations, calcItem;
+    var len, features, getLonLat, locations;
 
     if(hasLocationData) {
         locations = trace.locations;
@@ -53,11 +53,11 @@ plotScatterGeo.calcGeoJSON = function(trace, topojson) {
     }
 
     for(var i = 0; i < len; i++) {
-        lonlat = getLonLat(trace, i);
+        var lonlat = getLonLat(trace, i);
 
         if(!lonlat) continue;  // filter the blank points here
 
-        calcItem = {
+        var calcItem = {
             lon: lonlat[0],
             lat: lonlat[1],
             location: hasLocationData ? trace.locations[i] : null
@@ -104,7 +104,7 @@ function makeLineGeoJSON(trace) {
     var N = trace.lon.length,
         coordinates = new Array(N);
 
-    for (var i = 0; i < N; i++) {
+    for(var i = 0; i < N; i++) {
         coordinates[i] = [trace.lon[i], trace.lat[i]];
     }
 
@@ -118,7 +118,7 @@ function makeLineGeoJSON(trace) {
 plotScatterGeo.plot = function(geo, scattergeoData) {
     var gScatterGeoTraces = geo.framework.select('.scattergeolayer')
         .selectAll('g.trace.scattergeo')
-        .data(scattergeoData);
+        .data(scattergeoData, function(trace) { return trace.uid; });
 
     gScatterGeoTraces.enter().append('g')
         .attr('class', 'trace scattergeo');
@@ -128,7 +128,8 @@ plotScatterGeo.plot = function(geo, scattergeoData) {
     // TODO add hover - how?
     gScatterGeoTraces
         .each(function(trace) {
-            if(!subTypes.hasLines(trace) || trace.visible !== true) return;
+            if(!subTypes.hasLines(trace)) return;
+
             d3.select(this)
                 .append('path')
                 .datum(makeLineGeoJSON(trace))
@@ -142,10 +143,7 @@ plotScatterGeo.plot = function(geo, scattergeoData) {
                 showMarkers = subTypes.hasMarkers(trace),
                 showText = subTypes.hasText(trace);
 
-            if((!showMarkers && !showText) || trace.visible !== true) {
-                s.remove();
-                return;
-            }
+            if((!showMarkers && !showText)) return;
 
             var cdi = plotScatterGeo.calcGeoJSON(trace, geo.topojson),
                 cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),

test/jasmine/tests/geo_interact_test.js

@@ -180,5 +180,43 @@ describe('Test geo interactions', function() {
             });
         });
 
+        describe('trace visibility toggle', function() {
+            function countTraces(type) {
+                return d3.selectAll('g.trace.' + type).size();
+            }
+
+            it('should toggle scattergeo elements', function(done) {
+                expect(countTraces('scattergeo')).toBe(1);
+                expect(countTraces('choropleth')).toBe(1);
+
+                Plotly.restyle(gd, 'visible', false, [0]).then(function() {
+                    expect(countTraces('scattergeo')).toBe(0);
+                    expect(countTraces('choropleth')).toBe(1);
+
+                    Plotly.restyle(gd, 'visible', true, [0]).then(function() {
+                        expect(countTraces('scattergeo')).toBe(1);
+                        expect(countTraces('choropleth')).toBe(1);
+                        done();
+                    });
+                });
+            });
+
+            it('should toggle choropleth elements', function(done) {
+                expect(countTraces('scattergeo')).toBe(1);
+                expect(countTraces('choropleth')).toBe(1);
+
+                Plotly.restyle(gd, 'visible', false, [1]).then(function() {
+                    expect(countTraces('scattergeo')).toBe(1);
+                    expect(countTraces('choropleth')).toBe(0);
+
+                    Plotly.restyle(gd, 'visible', true, [1]).then(function() {
+                        expect(countTraces('scattergeo')).toBe(1);
+                        expect(countTraces('choropleth')).toBe(1);
+                        done();
+                    });
+                });
+            });
+
+        });
     });
 });