SVG trace on selection perf

src/plots/cartesian/select.js

@@ -404,18 +404,20 @@ function updateSelectedState(gd, searchTraces, eventData) {
         var len = items.length;
         var item0 = items[0];
         var trace0 = item0.cd[0].trace;
+        var _module = item0._module;
+        var fn = _module.styleOnSelect || _module.style;
 
         if(Registry.traceIs(trace0, 'regl')) {
             // plot regl traces per module
             var cds = new Array(len);
             for(j = 0; j < len; j++) {
                 cds[j] = items[j].cd;
             }
-            item0._module.style(gd, cds);
+            fn(gd, cds);
         } else {
             // plot svg trace per trace
             for(j = 0; j < len; j++) {
-                item0._module.style(gd, items[j].cd);
+                fn(gd, items[j].cd);
             }
         }
     }

src/plots/plots.js

@@ -834,7 +834,7 @@ plots.linkSubplots = function(newFullData, newFullLayout, oldFullData, oldFullLa
         }
         // Then look for a subplot with the counteraxis overlaying the anchor
         // If that fails just use the first subplot including this axis
-        if(!mainSubplotID || ids.indexOf(mainSubplotID) === -1) {
+        if(!mainSubplotID || !newSubplots[mainSubplotID]) {
             mainSubplotID = '';
             for(j = 0; j < ids.length; j++) {
                 id = ids[j];

src/traces/bar/index.js

@@ -20,7 +20,8 @@ Bar.setPositions = require('./set_positions');
 Bar.colorbar = require('../scatter/colorbar');
 Bar.arraysToCalcdata = require('./arrays_to_calcdata');
 Bar.plot = require('./plot');
-Bar.style = require('./style');
+Bar.style = require('./style').style;
+Bar.styleOnSelect = require('./style').styleOnSelect;
 Bar.hoverPoints = require('./hover');
 Bar.selectPoints = require('./select');
 

src/traces/bar/style.js

@@ -13,7 +13,7 @@ var d3 = require('d3');
 var Drawing = require('../../components/drawing');
 var Registry = require('../../registry');
 
-module.exports = function style(gd, cd) {
+function style(gd, cd) {
     var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.bars');
     var barcount = s.size();
     var fullLayout = gd._fullLayout;
@@ -35,34 +35,55 @@ module.exports = function style(gd, cd) {
 
     s.selectAll('g.points').each(function(d) {
         var sel = d3.select(this);
-        var pts = sel.selectAll('path');
-        var txs = sel.selectAll('text');
         var trace = d[0].trace;
+        stylePoints(sel, trace, gd);
+    });
 
-        Drawing.pointStyle(pts, trace, gd);
-        Drawing.selectedPointStyle(pts, trace);
+    Registry.getComponentMethod('errorbars', 'style')(s);
+}
 
-        txs.each(function(d) {
-            var tx = d3.select(this);
-            var textFont;
+function stylePoints(sel, trace, gd) {
+    var pts = sel.selectAll('path');
+    var txs = sel.selectAll('text');
 
-            if(tx.classed('bartext-inside')) {
-                textFont = trace.insidetextfont;
-            } else if(tx.classed('bartext-outside')) {
-                textFont = trace.outsidetextfont;
-            }
-            if(!textFont) textFont = trace.textfont;
+    Drawing.pointStyle(pts, trace, gd);
+    Drawing.selectedPointStyle(pts, trace);
 
-            function cast(k) {
-                var cont = textFont[k];
-                return Array.isArray(cont) ? cont[d.i] : cont;
-            }
+    txs.each(function(d) {
+        var tx = d3.select(this);
+        var textFont;
 
-            Drawing.font(tx, cast('family'), cast('size'), cast('color'));
-        });
+        if(tx.classed('bartext-inside')) {
+            textFont = trace.insidetextfont;
+        } else if(tx.classed('bartext-outside')) {
+            textFont = trace.outsidetextfont;
+        }
+        if(!textFont) textFont = trace.textfont;
+
+        function cast(k) {
+            var cont = textFont[k];
+            return Array.isArray(cont) ? cont[d.i] : cont;
+        }
 
-        Drawing.selectedTextStyle(txs, trace);
+        Drawing.font(tx, cast('family'), cast('size'), cast('color'));
     });
 
-    Registry.getComponentMethod('errorbars', 'style')(s);
+    Drawing.selectedTextStyle(txs, trace);
+}
+
+function styleOnSelect(gd, cd) {
+    var s = cd[0].node3;
+    var trace = cd[0].trace;
+
+    if(trace.selectedpoints) {
+        Drawing.selectedPointStyle(s.selectAll('path'), trace, gd);
+        Drawing.selectedPointStyle(s.selectAll('text'), trace, gd);
+    } else {
+        stylePoints(s, trace, gd);
+    }
+}
+
+module.exports = {
+    style: style,
+    styleOnSelect: styleOnSelect
 };

src/traces/box/index.js

@@ -17,7 +17,8 @@ Box.supplyLayoutDefaults = require('./layout_defaults').supplyLayoutDefaults;
 Box.calc = require('./calc');
 Box.setPositions = require('./set_positions').setPositions;
 Box.plot = require('./plot').plot;
-Box.style = require('./style');
+Box.style = require('./style').style;
+Box.styleOnSelect = require('./style').styleOnSelect;
 Box.hoverPoints = require('./hover').hoverPoints;
 Box.selectPoints = require('./select');
 

src/traces/box/style.js

@@ -12,7 +12,7 @@ var d3 = require('d3');
 var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 
-module.exports = function style(gd, cd) {
+function style(gd, cd) {
     var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.boxes');
 
     s.style('opacity', function(d) { return d[0].trace.opacity; });
@@ -53,4 +53,21 @@ module.exports = function style(gd, cd) {
             Drawing.selectedPointStyle(pts, trace);
         }
     });
+}
+
+function styleOnSelect(gd, cd) {
+    var s = cd[0].node3;
+    var trace = cd[0].trace;
+    var pts = s.selectAll('path.point');
+
+    if(trace.selectedpoints) {
+        Drawing.selectedPointStyle(pts, trace, gd);
+    } else {
+        Drawing.pointStyle(pts, trace, gd);
+    }
+}
+
+module.exports = {
+    style: style,
+    styleOnSelect: styleOnSelect
 };

src/traces/candlestick/index.js

@@ -36,7 +36,7 @@ module.exports = {
     supplyDefaults: require('./defaults'),
     calc: require('./calc'),
     plot: require('../box/plot').plot,
-    style: require('../box/style'),
+    style: require('../box/style').style,
     hoverPoints: require('../ohlc/hover'),
     selectPoints: require('../ohlc/select')
 };

src/traces/histogram/index.js

@@ -32,7 +32,8 @@ Histogram.supplyLayoutDefaults = require('../bar/layout_defaults');
 Histogram.calc = require('./calc');
 Histogram.setPositions = require('../bar/set_positions');
 Histogram.plot = require('../bar/plot');
-Histogram.style = require('../bar/style');
+Histogram.style = require('../bar/style').style;
+Histogram.styleOnSelect = require('../bar/style').styleOnSelect;
 Histogram.colorbar = require('../scatter/colorbar');
 Histogram.hoverPoints = require('./hover');
 Histogram.selectPoints = require('../bar/select');

src/traces/scatter/index.js

@@ -27,6 +27,7 @@ Scatter.arraysToCalcdata = require('./arrays_to_calcdata');
 Scatter.plot = require('./plot');
 Scatter.colorbar = require('./colorbar');
 Scatter.style = require('./style').style;
+Scatter.styleOnSelect = require('./style').styleOnSelect;
 Scatter.hoverPoints = require('./hover');
 Scatter.selectPoints = require('./select');
 Scatter.animatable = true;

src/traces/scatter/style.js

@@ -45,7 +45,20 @@ function stylePoints(sel, trace, gd) {
     Drawing.selectedTextStyle(txs, trace);
 }
 
+function styleOnSelect(gd, cd) {
+    var s = cd[0].node3;
+    var trace = cd[0].trace;
+
+    if(trace.selectedpoints) {
+        Drawing.selectedPointStyle(s.selectAll('path.point'), trace, gd);
+        Drawing.selectedPointStyle(s.selectAll('text'), trace, gd);
+    } else {
+        stylePoints(s, trace, gd);
+    }
+}
+
 module.exports = {
     style: style,
-    stylePoints: stylePoints
+    stylePoints: stylePoints,
+    styleOnSelect: styleOnSelect
 };

src/traces/scattercarpet/index.js

@@ -16,6 +16,7 @@ ScatterCarpet.colorbar = require('../scatter/colorbar');
 ScatterCarpet.calc = require('./calc');
 ScatterCarpet.plot = require('./plot');
 ScatterCarpet.style = require('../scatter/style').style;
+ScatterCarpet.styleOnSelect = require('../scatter/style').styleOnSelect;
 ScatterCarpet.hoverPoints = require('./hover');
 ScatterCarpet.selectPoints = require('../scatter/select');
 ScatterCarpet.eventData = require('./event_data');

src/traces/scatterternary/index.js

@@ -16,6 +16,7 @@ ScatterTernary.colorbar = require('../scatter/colorbar');
 ScatterTernary.calc = require('./calc');
 ScatterTernary.plot = require('./plot');
 ScatterTernary.style = require('../scatter/style').style;
+ScatterTernary.styleOnSelect = require('../scatter/style').styleOnSelect;
 ScatterTernary.hoverPoints = require('./hover');
 ScatterTernary.selectPoints = require('../scatter/select');
 ScatterTernary.eventData = require('./event_data');

src/traces/violin/index.js

@@ -17,6 +17,7 @@ module.exports = {
     setPositions: require('./set_positions'),
     plot: require('./plot'),
     style: require('./style'),
+    styleOnSelect: require('../scatter/style').styleOnSelect,
     hoverPoints: require('./hover'),
     selectPoints: require('../box/select'),