Rangeslider style on select fix

src/lib/make_trace_groups.js

@@ -6,9 +6,10 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
+var d3 = require('d3');
+
 /**
  * General helper to manage trace groups based on calcdata
  *
@@ -31,5 +32,10 @@ module.exports = function makeTraceGroups(traceLayer, cdModule, cls) {
 
     traces.order();
 
+    // stash ref node to trace group in calcdata,
+    // useful for (fast) styleOnSelect
+    var k = traceLayer.classed('rangeplot') ? 'nodeRangePlot3' : 'node3';
+    traces.each(function(cd) { cd[0][k] = d3.select(this); });
+
     return traces;
 };

src/plots/cartesian/index.js

@@ -239,7 +239,8 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 
     layers.enter().append('g')
         .attr('class', function(d) { return d.className; })
-        .classed('mlayer', true);
+        .classed('mlayer', true)
+        .classed('rangeplot', plotinfo.isRangePlot);
 
     layers.exit().remove();
 

src/plots/cartesian/select.js

@@ -734,7 +734,10 @@ function updateSelectedState(gd, searchTraces, eventData) {
 
         var _module = searchInfo._module;
         var fn = _module.styleOnSelect || _module.style;
-        if(fn) fn(gd, cd);
+        if(fn) {
+            fn(gd, cd, cd[0].node3);
+            if(cd[0].nodeRangePlot3) fn(gd, cd, cd[0].nodeRangePlot3);
+        }
     }
 
     if(hasRegl) {

src/traces/bar/plot.js

@@ -78,8 +78,6 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts) {
 
         var isHorizontal = (trace.orientation === 'h');
 
-        if(!plotinfo.isRangePlot) cd[0].node3 = plotGroup;
-
         var pointGroup = Lib.ensureSingle(plotGroup, 'g', 'points');
 
         var bars = pointGroup.selectAll('g.point').data(Lib.identity);

src/traces/bar/style.js

@@ -20,8 +20,8 @@ var attributeInsideTextFont = attributes.insidetextfont;
 var attributeOutsideTextFont = attributes.outsidetextfont;
 var helpers = require('./helpers');
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.barlayer').selectAll('g.trace');
+function style(gd) {
+    var s = d3.select(gd).selectAll('g.barlayer').selectAll('g.trace');
     var barcount = s.size();
     var fullLayout = gd._fullLayout;
 
@@ -62,16 +62,14 @@ function styleTextPoints(sel, trace, gd) {
     });
 }
 
-function styleOnSelect(gd, cd) {
-    var s = cd[0].node3;
+function styleOnSelect(gd, cd, sel) {
     var trace = cd[0].trace;
 
     if(trace.selectedpoints) {
-        stylePointsInSelectionMode(s, trace, gd);
+        stylePointsInSelectionMode(sel, trace, gd);
     } else {
-        stylePoints(s, trace, gd);
-
-        Registry.getComponentMethod('errorbars', 'style')(s);
+        stylePoints(sel, trace, gd);
+        Registry.getComponentMethod('errorbars', 'style')(sel);
     }
 }
 

src/traces/barpolar/index.js

@@ -24,7 +24,9 @@ module.exports = {
 
     plot: require('./plot'),
     colorbar: require('../scatter/marker_colorbar'),
+
     style: require('../bar/style').style,
+    styleOnSelect: require('../bar/style').styleOnSelect,
 
     hoverPoints: require('./hover'),
     selectPoints: require('../bar/select'),

src/traces/barpolar/plot.js

@@ -23,8 +23,8 @@ module.exports = function plot(gd, subplot, cdbar) {
     var pathFn = makePathFn(subplot);
     var barLayer = subplot.layers.frontplot.select('g.barlayer');
 
-    Lib.makeTraceGroups(barLayer, cdbar, 'trace bars').each(function(cd) {
-        var plotGroup = cd[0].node3 = d3.select(this);
+    Lib.makeTraceGroups(barLayer, cdbar, 'trace bars').each(function() {
+        var plotGroup = d3.select(this);
         var pointGroup = Lib.ensureSingle(plotGroup, 'g', 'points');
         var bars = pointGroup.selectAll('g.point').data(Lib.identity);
 

src/traces/box/plot.js

@@ -26,7 +26,6 @@ function plot(gd, plotinfo, cdbox, boxLayer) {
         var cd0 = cd[0];
         var t = cd0.t;
         var trace = cd0.trace;
-        if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
 
         // whisker width
         t.wdPos = t.bdPos * trace.whiskerwidth;

src/traces/box/style.js

@@ -12,8 +12,8 @@ var d3 = require('d3');
 var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.boxes');
+function style(gd, cd, sel) {
+    var s = sel ? sel : d3.select(gd).selectAll('g.trace.boxes');
 
     s.style('opacity', function(d) { return d[0].trace.opacity; });
 
@@ -55,10 +55,9 @@ function style(gd, cd) {
     });
 }
 
-function styleOnSelect(gd, cd) {
-    var s = cd[0].node3;
+function styleOnSelect(gd, cd, sel) {
     var trace = cd[0].trace;
-    var pts = s.selectAll('path.point');
+    var pts = sel.selectAll('path.point');
 
     if(trace.selectedpoints) {
         Drawing.selectedPointStyle(pts, trace);

src/traces/choropleth/plot.js

@@ -24,7 +24,7 @@ function plot(gd, geo, calcData) {
 
     var choroplethLayer = geo.layers.backplot.select('.choroplethlayer');
     Lib.makeTraceGroups(choroplethLayer, calcData, 'trace choropleth').each(function(calcTrace) {
-        var sel = calcTrace[0].node3 = d3.select(this);
+        var sel = d3.select(this);
 
         var paths = sel.selectAll('path.choroplethlocation')
             .data(Lib.identity);

src/traces/choroplethmapbox/index.js

@@ -18,7 +18,7 @@ module.exports = {
     eventData: require('../choropleth/event_data'),
     selectPoints: require('../choropleth/select'),
 
-    style: function(_, cd) {
+    styleOnSelect: function(_, cd) {
         if(cd) {
             var trace = cd[0].trace;
             trace._glTrace.updateOnSelect(cd);

src/traces/funnel/style.js

@@ -12,11 +12,12 @@ var d3 = require('d3');
 
 var Drawing = require('../../components/drawing');
 var Color = require('../../components/color');
+var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
 
 var styleTextPoints = require('../bar/style').styleTextPoints;
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.funnellayer').selectAll('g.trace');
+function style(gd, cd, sel) {
+    var s = sel ? sel : d3.select(gd).selectAll('g.funnellayer').selectAll('g.trace');
 
     s.style('opacity', function(d) { return d[0].trace.opacity; });
 
@@ -32,7 +33,7 @@ function style(gd, cd) {
                     .call(Color.fill, di.mc || cont.color)
                     .call(Color.stroke, di.mlc || cont.line.color)
                     .call(Drawing.dashLine, cont.line.dash, di.mlw || cont.line.width)
-                    .style('opacity', trace.selectedpoints && !di.selected ? 0.3 : 1);
+                    .style('opacity', trace.selectedpoints && !di.selected ? DESELECTDIM : 1);
             }
         });
 

src/traces/ohlc/plot.js

@@ -21,7 +21,6 @@ module.exports = function plot(gd, plotinfo, cdOHLC, ohlcLayer) {
         var cd0 = cd[0];
         var t = cd0.t;
         var trace = cd0.trace;
-        if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
 
         if(trace.visible !== true || t.empty) {
             plotGroup.remove();

src/traces/ohlc/style.js

@@ -12,8 +12,8 @@ var d3 = require('d3');
 var Drawing = require('../../components/drawing');
 var Color = require('../../components/color');
 
-module.exports = function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.ohlclayer').selectAll('g.trace');
+module.exports = function style(gd, cd, sel) {
+    var s = sel ? sel : d3.select(gd).selectAll('g.ohlclayer').selectAll('g.trace');
 
     s.style('opacity', function(d) {
         return d[0].trace.opacity;

src/traces/scatter/plot.js

@@ -152,7 +152,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
     if(ownFillDir !== 'x' && ownFillDir !== 'y') ownFillDir = '';
 
     // store node for tweaking by selectPoints
-    if(!plotinfo.isRangePlot) cdscatter[0].node3 = tr;
+    cdscatter[0][plotinfo.isRangePlot ? 'nodeRangePlot3' : 'node3'] = tr;
 
     var prevRevpath = '';
     var prevPolygons = [];

src/traces/scatter/style.js

@@ -13,8 +13,8 @@ var d3 = require('d3');
 var Drawing = require('../../components/drawing');
 var Registry = require('../../registry');
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.scatter');
+function style(gd) {
+    var s = d3.select(gd).selectAll('g.trace.scatter');
 
     s.style('opacity', function(d) {
         return d[0].trace.opacity;
@@ -49,16 +49,15 @@ function styleText(sel, trace, gd) {
     Drawing.textPointStyle(sel.selectAll('text'), trace, gd);
 }
 
-function styleOnSelect(gd, cd) {
-    var s = cd[0].node3;
+function styleOnSelect(gd, cd, sel) {
     var trace = cd[0].trace;
 
     if(trace.selectedpoints) {
-        Drawing.selectedPointStyle(s.selectAll('path.point'), trace);
-        Drawing.selectedTextStyle(s.selectAll('text'), trace);
+        Drawing.selectedPointStyle(sel.selectAll('path.point'), trace);
+        Drawing.selectedTextStyle(sel.selectAll('text'), trace);
     } else {
-        stylePoints(s, trace, gd);
-        styleText(s, trace, gd);
+        stylePoints(sel, trace, gd);
+        styleText(sel, trace, gd);
     }
 }
 

src/traces/scattergeo/plot.js

@@ -37,7 +37,7 @@ module.exports = function plot(gd, geo, calcData) {
     gTraces.selectAll('*').remove();
 
     gTraces.each(function(calcTrace) {
-        var s = calcTrace[0].node3 = d3.select(this);
+        var s = d3.select(this);
         var trace = calcTrace[0].trace;
 
         if(subTypes.hasLines(trace) || trace.fill !== 'none') {

src/traces/scattermapbox/index.js

@@ -18,7 +18,7 @@ module.exports = {
     eventData: require('./event_data'),
     selectPoints: require('./select'),
 
-    style: function(_, cd) {
+    styleOnSelect: function(_, cd) {
         if(cd) {
             var trace = cd[0].trace;
             trace._glTrace.update(cd);

src/traces/scatterpolar/index.js

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

src/traces/violin/plot.js

@@ -38,7 +38,6 @@ module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
         var cd0 = cd[0];
         var t = cd0.t;
         var trace = cd0.trace;
-        if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
 
         if(trace.visible !== true || t.empty) {
             plotGroup.remove();

src/traces/violin/style.js

@@ -12,8 +12,8 @@ var d3 = require('d3');
 var Color = require('../../components/color');
 var stylePoints = require('../scatter/style').stylePoints;
 
-module.exports = function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.violins');
+module.exports = function style(gd) {
+    var s = d3.select(gd).selectAll('g.trace.violins');
 
     s.style('opacity', function(d) { return d[0].trace.opacity; });
 

src/traces/waterfall/style.js

@@ -12,11 +12,12 @@ var d3 = require('d3');
 
 var Drawing = require('../../components/drawing');
 var Color = require('../../components/color');
+var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
 
 var styleTextPoints = require('../bar/style').styleTextPoints;
 
-function style(gd, cd) {
-    var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.waterfalllayer').selectAll('g.trace');
+function style(gd, cd, sel) {
+    var s = sel ? sel : d3.select(gd).selectAll('g.waterfalllayer').selectAll('g.trace');
 
     s.style('opacity', function(d) { return d[0].trace.opacity; });
 
@@ -32,7 +33,7 @@ function style(gd, cd) {
                     .call(Color.fill, cont.color)
                     .call(Color.stroke, cont.line.color)
                     .call(Drawing.dashLine, cont.line.dash, cont.line.width)
-                    .style('opacity', trace.selectedpoints && !di.selected ? 0.3 : 1);
+                    .style('opacity', trace.selectedpoints && !di.selected ? DESELECTDIM : 1);
             }
         });
 

test/jasmine/tests/scatter_test.js

@@ -1452,7 +1452,7 @@ describe('Test Scatter.style', function() {
                 // make sure styleOnSelect (called during selection)
                 // gives same results as restyle
                 gd.calcdata.forEach(function(cd) {
-                    Scatter.styleOnSelect(gd, cd);
+                    Scatter.styleOnSelect(gd, cd, cd[0].node3);
                 });
                 assertPts(attr, getterFn, expectation, ' (' + msg + ' via Scatter.styleOnSelect)');
             });