Skip to content

Commit 3e17627

Browse files
etpinardetpinard
committed
fix #3957 - call _module.style(onSelect) passing rangePlot <g.trace>
... during selection mousemove. To do so, - make _module.styleOnSelect handle a 3rd argument (in practice, a d3 selection of <g.trace> of the main plot OR the range plot) - similarly for _module.style methods that get called during selections - N.B. has to "fix" one (wrong) finance select assertion
1 parent 6c030c0 commit 3e17627

File tree

9 files changed

+120
-26
lines changed

9 files changed

+120
-26
lines changed

‎src/plots/cartesian/select.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -734,7 +734,10 @@ function updateSelectedState(gd, searchTraces, eventData) {
734734

735735
var _module = searchInfo._module;
736736
var fn = _module.styleOnSelect || _module.style;
737-
if(fn) fn(gd, cd);
737+
if(fn) {
738+
fn(gd, cd, cd[0].node3);
739+
if(cd[0].nodeRangePlot3) fn(gd, cd, cd[0].nodeRangePlot3);
740+
}
738741
}
739742

740743
if(hasRegl) {

‎src/traces/bar/style.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,14 @@ function styleTextPoints(sel, trace, gd) {
6262
});
6363
}
6464

65-
function styleOnSelect(gd, cd) {
66-
var s = cd[0].node3;
65+
function styleOnSelect(gd, cd, sel) {
6766
var trace = cd[0].trace;
6867

6968
if(trace.selectedpoints) {
70-
stylePointsInSelectionMode(s, trace, gd);
69+
stylePointsInSelectionMode(sel, trace, gd);
7170
} else {
72-
stylePoints(s, trace, gd);
73-
74-
Registry.getComponentMethod('errorbars', 'style')(s);
71+
stylePoints(sel, trace, gd);
72+
Registry.getComponentMethod('errorbars', 'style')(sel);
7573
}
7674
}
7775

‎src/traces/box/style.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ var d3 = require('d3');
1212
var Color = require('../../components/color');
1313
var Drawing = require('../../components/drawing');
1414

15-
function style(gd, cd) {
16-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.boxes');
15+
function style(gd, cd, sel) {
16+
var s = sel ? sel : d3.select(gd).selectAll('g.trace.boxes');
1717

1818
s.style('opacity', function(d) { return d[0].trace.opacity; });
1919

@@ -55,10 +55,9 @@ function style(gd, cd) {
5555
});
5656
}
5757

58-
function styleOnSelect(gd, cd) {
59-
var s = cd[0].node3;
58+
function styleOnSelect(gd, cd, sel) {
6059
var trace = cd[0].trace;
61-
var pts = s.selectAll('path.point');
60+
var pts = sel.selectAll('path.point');
6261

6362
if(trace.selectedpoints) {
6463
Drawing.selectedPointStyle(pts, trace);

‎src/traces/funnel/style.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
1616

1717
var styleTextPoints = require('../bar/style').styleTextPoints;
1818

19-
function style(gd, cd) {
20-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.funnellayer').selectAll('g.trace');
19+
function style(gd, cd, sel) {
20+
var s = sel ? sel : d3.select(gd).selectAll('g.funnellayer').selectAll('g.trace');
2121

2222
s.style('opacity', function(d) { return d[0].trace.opacity; });
2323

‎src/traces/ohlc/style.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ var d3 = require('d3');
1212
var Drawing = require('../../components/drawing');
1313
var Color = require('../../components/color');
1414

15-
module.exports = function style(gd, cd) {
16-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.ohlclayer').selectAll('g.trace');
15+
module.exports = function style(gd, cd, sel) {
16+
var s = sel ? sel : d3.select(gd).selectAll('g.ohlclayer').selectAll('g.trace');
1717

1818
s.style('opacity', function(d) {
1919
return d[0].trace.opacity;

‎src/traces/scatter/style.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,15 @@ function styleText(sel, trace, gd) {
4949
Drawing.textPointStyle(sel.selectAll('text'), trace, gd);
5050
}
5151

52-
function styleOnSelect(gd, cd) {
53-
var s = cd[0].node3;
52+
function styleOnSelect(gd, cd, sel) {
5453
var trace = cd[0].trace;
5554

5655
if(trace.selectedpoints) {
57-
Drawing.selectedPointStyle(s.selectAll('path.point'), trace);
58-
Drawing.selectedTextStyle(s.selectAll('text'), trace);
56+
Drawing.selectedPointStyle(sel.selectAll('path.point'), trace);
57+
Drawing.selectedTextStyle(sel.selectAll('text'), trace);
5958
} else {
60-
stylePoints(s, trace, gd);
61-
styleText(s, trace, gd);
59+
stylePoints(sel, trace, gd);
60+
styleText(sel, trace, gd);
6261
}
6362
}
6463

‎src/traces/waterfall/style.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
1616

1717
var styleTextPoints = require('../bar/style').styleTextPoints;
1818

19-
function style(gd, cd) {
20-
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.waterfalllayer').selectAll('g.trace');
19+
function style(gd, cd, sel) {
20+
var s = sel ? sel : d3.select(gd).selectAll('g.waterfalllayer').selectAll('g.trace');
2121

2222
s.style('opacity', function(d) { return d[0].trace.opacity; });
2323

‎test/jasmine/tests/scatter_test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1452,7 +1452,7 @@ describe('Test Scatter.style', function() {
14521452
// make sure styleOnSelect (called during selection)
14531453
// gives same results as restyle
14541454
gd.calcdata.forEach(function(cd) {
1455-
Scatter.styleOnSelect(gd, cd);
1455+
Scatter.styleOnSelect(gd, cd, cd[0].node3);
14561456
});
14571457
assertPts(attr, getterFn, expectation, ' (' + msg + ' via Scatter.styleOnSelect)');
14581458
});

‎test/jasmine/tests/select_test.js

Lines changed: 96 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2802,7 +2802,7 @@ describe('Test select box and lasso per trace:', function() {
28022802
[tv, bv, bv, tv, tv]
28032803
]);
28042804
expect(countUnSelectedPaths('.cartesianlayer .trace path')).toBe(2);
2805-
expect(countUnSelectedPaths('.rangeslider-rangeplot .trace path')).toBe(0);
2805+
expect(countUnSelectedPaths('.rangeslider-rangeplot .trace path')).toBe(2);
28062806
},
28072807
null, LASSOEVENTS, type + ' lasso'
28082808
);
@@ -3123,6 +3123,101 @@ describe('Test that selections persist:', function() {
31233123
});
31243124
});
31253125

3126+
describe('Test that selection styles propagate to range-slider plot:', function() {
3127+
var gd;
3128+
3129+
beforeEach(function() {
3130+
gd = createGraphDiv();
3131+
});
3132+
3133+
afterEach(destroyGraphDiv);
3134+
3135+
function makeAssertFn(query) {
3136+
return function(msg, expected) {
3137+
var gd3 = d3.select(gd);
3138+
var mainPlot3 = gd3.select('.cartesianlayer');
3139+
var rangePlot3 = gd3.select('.rangeslider-rangeplot');
3140+
3141+
mainPlot3.selectAll(query).each(function(_, i) {
3142+
expect(this.style.opacity).toBe(String(expected[i]), msg + ' opacity for mainPlot pt ' + i);
3143+
});
3144+
rangePlot3.selectAll(query).each(function(_, i) {
3145+
expect(this.style.opacity).toBe(String(expected[i]), msg + ' opacity for rangePlot pt ' + i);
3146+
});
3147+
};
3148+
}
3149+
3150+
it('- svg points case', function(done) {
3151+
var _assert = makeAssertFn('path.point,.point>path');
3152+
3153+
Plotly.plot(gd, [
3154+
{ mode: 'markers', x: [1], y: [1] },
3155+
{ type: 'bar', x: [2], y: [2], },
3156+
{ type: 'histogram', x: [3, 3, 3] },
3157+
{ type: 'box', x: [4], y: [4], boxpoints: 'all' },
3158+
{ type: 'violin', x: [5], y: [5], points: 'all' },
3159+
{ type: 'waterfall', x: [6], y: [6]},
3160+
{ type: 'funnel', x: [7], y: [7], orientation: 'v'}
3161+
], {
3162+
dragmode: 'select',
3163+
xaxis: { rangeslider: {visible: true} },
3164+
width: 500,
3165+
height: 500,
3166+
margin: {l: 10, t: 10, r: 10, b: 10},
3167+
showlegend: false
3168+
})
3169+
.then(function() {
3170+
_assert('base', [1, 1, 1, 1, 1, 1, 1]);
3171+
})
3172+
.then(function() {
3173+
resetEvents(gd);
3174+
drag([[20, 20], [40, 40]]);
3175+
return selectedPromise;
3176+
})
3177+
.then(function() {
3178+
_assert('after empty selection', [0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2]);
3179+
})
3180+
.then(function() { return doubleClick(200, 200); })
3181+
.then(function() {
3182+
_assert('after double-click reset', [1, 1, 1, 1, 1, 1, 1]);
3183+
})
3184+
.catch(failTest)
3185+
.then(done);
3186+
});
3187+
3188+
it('- svg finance case', function(done) {
3189+
var _assert = makeAssertFn('path.box,.ohlc>path');
3190+
3191+
Plotly.plot(gd, [
3192+
{ type: 'ohlc', x: [6], open: [6], high: [6], low: [6], close: [6] },
3193+
{ type: 'candlestick', x: [7], open: [7], high: [7], low: [7], close: [7] },
3194+
], {
3195+
dragmode: 'select',
3196+
width: 500,
3197+
height: 500,
3198+
margin: {l: 10, t: 10, r: 10, b: 10},
3199+
showlegend: false
3200+
})
3201+
.then(function() {
3202+
_assert('base', [1, 1]);
3203+
})
3204+
.then(function() {
3205+
resetEvents(gd);
3206+
drag([[20, 20], [40, 40]]);
3207+
return selectedPromise;
3208+
})
3209+
.then(function() {
3210+
_assert('after empty selection', [0.3, 0.3]);
3211+
})
3212+
.then(function() { return doubleClick(200, 200); })
3213+
.then(function() {
3214+
_assert('after double-click reset', [1, 1]);
3215+
})
3216+
.catch(failTest)
3217+
.then(done);
3218+
});
3219+
});
3220+
31263221
// to make sure none of the above tests fail with extraneous invisible traces,
31273222
// add a bunch of them here
31283223
function addInvisible(fig, canHaveLegend) {

0 commit comments

Comments
 (0)