Skip to content

Commit 2b1713d

Browse files
etpinardetpinard
authored
Merge pull request #2583 from plotly/scatter-select-perf
SVG trace on selection perf
2 parents 776ddca + 3e32b23 commit 2b1713d

File tree

23 files changed

+417
-232
lines changed

23 files changed

+417
-232
lines changed

‎src/components/drawing/index.js

+205-148
Large diffs are not rendered by default.

‎src/components/legend/style.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@ module.exports = function style(s, gd) {
110110

111111
// constrain text, markers, etc so they'll fit on the legend
112112
if(showMarkers || showText || showLines) {
113-
var dEdit = {},
114-
tEdit = {};
113+
var dEdit = {};
114+
var tEdit = {};
115115

116116
if(showMarkers) {
117117
dEdit.mc = boundVal('marker.color', pickFirst);
@@ -142,6 +142,9 @@ module.exports = function style(s, gd) {
142142

143143
dMod = [Lib.minExtend(d0, dEdit)];
144144
tMod = Lib.minExtend(trace, tEdit);
145+
146+
// always show legend items in base state
147+
tMod.selectedpoints = null;
145148
}
146149

147150
var ptgroup = d3.select(this).select('g.legendpoints');

‎src/plots/cartesian/select.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -404,18 +404,20 @@ function updateSelectedState(gd, searchTraces, eventData) {
404404
var len = items.length;
405405
var item0 = items[0];
406406
var trace0 = item0.cd[0].trace;
407+
var _module = item0._module;
408+
var styleSelection = _module.styleOnSelect || _module.style;
407409

408410
if(Registry.traceIs(trace0, 'regl')) {
409411
// plot regl traces per module
410412
var cds = new Array(len);
411413
for(j = 0; j < len; j++) {
412414
cds[j] = items[j].cd;
413415
}
414-
item0._module.style(gd, cds);
416+
styleSelection(gd, cds);
415417
} else {
416418
// plot svg trace per trace
417419
for(j = 0; j < len; j++) {
418-
item0._module.style(gd, items[j].cd);
420+
styleSelection(gd, items[j].cd);
419421
}
420422
}
421423
}

‎src/plots/plots.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -819,7 +819,7 @@ plots.linkSubplots = function(newFullData, newFullLayout, oldFullData, oldFullLa
819819
}
820820
// Then look for a subplot with the counteraxis overlaying the anchor
821821
// If that fails just use the first subplot including this axis
822-
if(!mainSubplotID || ids.indexOf(mainSubplotID) === -1) {
822+
if(!mainSubplotID || !newSubplots[mainSubplotID]) {
823823
mainSubplotID = '';
824824
for(j = 0; j < ids.length; j++) {
825825
id = ids[j];

‎src/traces/bar/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ Bar.setPositions = require('./set_positions');
2020
Bar.colorbar = require('../scatter/colorbar');
2121
Bar.arraysToCalcdata = require('./arrays_to_calcdata');
2222
Bar.plot = require('./plot');
23-
Bar.style = require('./style');
23+
Bar.style = require('./style').style;
24+
Bar.styleOnSelect = require('./style').styleOnSelect;
2425
Bar.hoverPoints = require('./hover');
2526
Bar.selectPoints = require('./select');
2627

‎src/traces/bar/style.js

+40-22
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ var d3 = require('d3');
1313
var Drawing = require('../../components/drawing');
1414
var Registry = require('../../registry');
1515

16-
module.exports = function style(gd, cd) {
16+
function style(gd, cd) {
1717
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.bars');
1818
var barcount = s.size();
1919
var fullLayout = gd._fullLayout;
@@ -35,34 +35,52 @@ module.exports = function style(gd, cd) {
3535

3636
s.selectAll('g.points').each(function(d) {
3737
var sel = d3.select(this);
38-
var pts = sel.selectAll('path');
39-
var txs = sel.selectAll('text');
4038
var trace = d[0].trace;
39+
stylePoints(sel, trace, gd);
40+
});
41+
42+
Registry.getComponentMethod('errorbars', 'style')(s);
43+
}
4144

42-
Drawing.pointStyle(pts, trace, gd);
43-
Drawing.selectedPointStyle(pts, trace);
45+
function stylePoints(sel, trace, gd) {
46+
var pts = sel.selectAll('path');
47+
var txs = sel.selectAll('text');
4448

45-
txs.each(function(d) {
46-
var tx = d3.select(this);
47-
var textFont;
49+
Drawing.pointStyle(pts, trace, gd);
4850

49-
if(tx.classed('bartext-inside')) {
50-
textFont = trace.insidetextfont;
51-
} else if(tx.classed('bartext-outside')) {
52-
textFont = trace.outsidetextfont;
53-
}
54-
if(!textFont) textFont = trace.textfont;
51+
txs.each(function(d) {
52+
var tx = d3.select(this);
53+
var textFont;
5554

56-
function cast(k) {
57-
var cont = textFont[k];
58-
return Array.isArray(cont) ? cont[d.i] : cont;
59-
}
55+
if(tx.classed('bartext-inside')) {
56+
textFont = trace.insidetextfont;
57+
} else if(tx.classed('bartext-outside')) {
58+
textFont = trace.outsidetextfont;
59+
}
60+
if(!textFont) textFont = trace.textfont;
6061

61-
Drawing.font(tx, cast('family'), cast('size'), cast('color'));
62-
});
62+
function cast(k) {
63+
var cont = textFont[k];
64+
return Array.isArray(cont) ? cont[d.i] : cont;
65+
}
6366

64-
Drawing.selectedTextStyle(txs, trace);
67+
Drawing.font(tx, cast('family'), cast('size'), cast('color'));
6568
});
69+
}
6670

67-
Registry.getComponentMethod('errorbars', 'style')(s);
71+
function styleOnSelect(gd, cd) {
72+
var s = cd[0].node3;
73+
var trace = cd[0].trace;
74+
75+
if(trace.selectedpoints) {
76+
Drawing.selectedPointStyle(s.selectAll('path'), trace);
77+
Drawing.selectedTextStyle(s.selectAll('text'), trace);
78+
} else {
79+
stylePoints(s, trace, gd);
80+
}
81+
}
82+
83+
module.exports = {
84+
style: style,
85+
styleOnSelect: styleOnSelect
6886
};

‎src/traces/box/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ Box.supplyLayoutDefaults = require('./layout_defaults').supplyLayoutDefaults;
1717
Box.calc = require('./calc');
1818
Box.setPositions = require('./set_positions').setPositions;
1919
Box.plot = require('./plot').plot;
20-
Box.style = require('./style');
20+
Box.style = require('./style').style;
21+
Box.styleOnSelect = require('./style').styleOnSelect;
2122
Box.hoverPoints = require('./hover').hoverPoints;
2223
Box.selectPoints = require('./select');
2324

‎src/traces/box/style.js

+18-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ var d3 = require('d3');
1212
var Color = require('../../components/color');
1313
var Drawing = require('../../components/drawing');
1414

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

1818
s.style('opacity', function(d) { return d[0].trace.opacity; });
@@ -50,7 +50,23 @@ module.exports = function style(gd, cd) {
5050

5151
var pts = el.selectAll('path.point');
5252
Drawing.pointStyle(pts, trace, gd);
53-
Drawing.selectedPointStyle(pts, trace);
5453
}
5554
});
55+
}
56+
57+
function styleOnSelect(gd, cd) {
58+
var s = cd[0].node3;
59+
var trace = cd[0].trace;
60+
var pts = s.selectAll('path.point');
61+
62+
if(trace.selectedpoints) {
63+
Drawing.selectedPointStyle(pts, trace);
64+
} else {
65+
Drawing.pointStyle(pts, trace, gd);
66+
}
67+
}
68+
69+
module.exports = {
70+
style: style,
71+
styleOnSelect: styleOnSelect
5672
};

‎src/traces/candlestick/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ module.exports = {
3737
calc: require('./calc'),
3838
plot: require('../box/plot').plot,
3939
layerName: 'boxlayer',
40-
style: require('../box/style'),
40+
style: require('../box/style').style,
4141
hoverPoints: require('../ohlc/hover'),
4242
selectPoints: require('../ohlc/select')
4343
};

‎src/traces/choropleth/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ Choropleth.supplyDefaults = require('./defaults');
1616
Choropleth.colorbar = require('../heatmap/colorbar');
1717
Choropleth.calc = require('./calc');
1818
Choropleth.plot = require('./plot');
19-
Choropleth.style = require('./style');
19+
Choropleth.style = require('./style').style;
20+
Choropleth.styleOnSelect = require('./style').styleOnSelect;
2021
Choropleth.hoverPoints = require('./hover');
2122
Choropleth.eventData = require('./event_data');
2223
Choropleth.selectPoints = require('./select');

‎src/traces/choropleth/plot.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ var polygon = require('../../lib/polygon');
1515

1616
var getTopojsonFeatures = require('../../lib/topojson_utils').getTopojsonFeatures;
1717
var locationToFeature = require('../../lib/geo_location_utils').locationToFeature;
18-
var style = require('./style');
18+
var style = require('./style').style;
1919

2020
module.exports = function plot(gd, geo, calcData) {
2121
for(var i = 0; i < calcData.length; i++) {

‎src/traces/choropleth/style.js

+19-3
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ var Color = require('../../components/color');
1313
var Drawing = require('../../components/drawing');
1414
var Colorscale = require('../../components/colorscale');
1515

16-
module.exports = function style(gd, calcTrace) {
16+
function style(gd, calcTrace) {
1717
if(calcTrace) styleTrace(gd, calcTrace);
18-
};
18+
}
1919

2020
function styleTrace(gd, calcTrace) {
2121
var trace = calcTrace[0].trace;
@@ -40,5 +40,21 @@ function styleTrace(gd, calcTrace) {
4040
.style('opacity', marker.opacity);
4141
});
4242

43-
Drawing.selectedPointStyle(locs, trace);
43+
Drawing.selectedPointStyle(locs, trace, gd);
4444
}
45+
46+
function styleOnSelect(gd, calcTrace) {
47+
var s = calcTrace[0].node3;
48+
var trace = calcTrace[0].trace;
49+
50+
if(trace.selectedpoints) {
51+
Drawing.selectedPointStyle(s.selectAll('.choroplethlocation'), trace, gd);
52+
} else {
53+
styleTrace(gd, calcTrace);
54+
}
55+
}
56+
57+
module.exports = {
58+
style: style,
59+
styleOnSelect: styleOnSelect
60+
};

‎src/traces/histogram/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ Histogram.calc = require('./calc');
3333
Histogram.setPositions = require('../bar/set_positions');
3434
Histogram.plot = require('../bar/plot');
3535
Histogram.layerName = 'barlayer';
36-
Histogram.style = require('../bar/style');
36+
Histogram.style = require('../bar/style').style;
37+
Histogram.styleOnSelect = require('../bar/style').styleOnSelect;
3738
Histogram.colorbar = require('../scatter/colorbar');
3839
Histogram.hoverPoints = require('./hover');
3940
Histogram.selectPoints = require('../bar/select');

‎src/traces/scatter/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ Scatter.arraysToCalcdata = require('./arrays_to_calcdata');
2727
Scatter.plot = require('./plot');
2828
Scatter.colorbar = require('./colorbar');
2929
Scatter.style = require('./style').style;
30+
Scatter.styleOnSelect = require('./style').styleOnSelect;
3031
Scatter.hoverPoints = require('./hover');
3132
Scatter.selectPoints = require('./select');
3233
Scatter.animatable = true;

‎src/traces/scatter/plot.js

+13-11
Original file line numberDiff line numberDiff line change
@@ -407,14 +407,14 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
407407
function makePoints(d) {
408408
var join, selection, hasNode;
409409

410-
var trace = d[0].trace,
411-
s = d3.select(this),
412-
showMarkers = subTypes.hasMarkers(trace),
413-
showText = subTypes.hasText(trace);
410+
var trace = d[0].trace;
411+
var s = d3.select(this);
412+
var showMarkers = subTypes.hasMarkers(trace);
413+
var showText = subTypes.hasText(trace);
414414

415-
var keyFunc = getKeyFunc(trace),
416-
markerFilter = hideFilter,
417-
textFilter = hideFilter;
415+
var keyFunc = getKeyFunc(trace);
416+
var markerFilter = hideFilter;
417+
var textFilter = hideFilter;
418418

419419
if(showMarkers) {
420420
markerFilter = (trace.marker.maxdisplayed || trace._needsCull) ? visFilter : Lib.identity;
@@ -442,18 +442,20 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
442442
.style('opacity', 1);
443443
}
444444

445-
var markerScale = showMarkers && Drawing.tryColorscale(trace.marker, '');
446-
var lineScale = showMarkers && Drawing.tryColorscale(trace.marker, 'line');
447-
448445
join.order();
449446

447+
var styleFns;
448+
if(showMarkers) {
449+
styleFns = Drawing.makePointStyleFns(trace);
450+
}
451+
450452
join.each(function(d) {
451453
var el = d3.select(this);
452454
var sel = transition(el);
453455
hasNode = Drawing.translatePoint(d, sel, xa, ya);
454456

455457
if(hasNode) {
456-
Drawing.singlePointStyle(d, sel, trace, markerScale, lineScale, gd);
458+
Drawing.singlePointStyle(d, sel, trace, styleFns, gd);
457459

458460
if(plotinfo.layerClipId) {
459461
Drawing.hideOutsideRangePoint(d, sel, xa, ya, trace.xcalendar, trace.ycalendar);

‎src/traces/scatter/style.js

+15-7
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,24 @@ function style(gd, cd) {
3636
}
3737

3838
function stylePoints(sel, trace, gd) {
39-
var pts = sel.selectAll('path.point');
40-
var txs = sel.selectAll('text');
39+
Drawing.pointStyle(sel.selectAll('path.point'), trace, gd);
40+
Drawing.textPointStyle(sel.selectAll('text'), trace, gd);
41+
}
42+
43+
function styleOnSelect(gd, cd) {
44+
var s = cd[0].node3;
45+
var trace = cd[0].trace;
4146

42-
Drawing.pointStyle(pts, trace, gd);
43-
Drawing.textPointStyle(txs, trace, gd);
44-
Drawing.selectedPointStyle(pts, trace);
45-
Drawing.selectedTextStyle(txs, trace);
47+
if(trace.selectedpoints) {
48+
Drawing.selectedPointStyle(s.selectAll('path.point'), trace);
49+
Drawing.selectedTextStyle(s.selectAll('text'), trace);
50+
} else {
51+
stylePoints(s, trace, gd);
52+
}
4653
}
4754

4855
module.exports = {
4956
style: style,
50-
stylePoints: stylePoints
57+
stylePoints: stylePoints,
58+
styleOnSelect: styleOnSelect
5159
};

‎src/traces/scattercarpet/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ ScatterCarpet.colorbar = require('../scatter/colorbar');
1616
ScatterCarpet.calc = require('./calc');
1717
ScatterCarpet.plot = require('./plot');
1818
ScatterCarpet.style = require('../scatter/style').style;
19+
ScatterCarpet.styleOnSelect = require('../scatter/style').styleOnSelect;
1920
ScatterCarpet.hoverPoints = require('./hover');
2021
ScatterCarpet.selectPoints = require('../scatter/select');
2122
ScatterCarpet.eventData = require('./event_data');

‎src/traces/scattergeo/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ ScatterGeo.colorbar = require('../scatter/colorbar');
1717
ScatterGeo.calc = require('./calc');
1818
ScatterGeo.plot = require('./plot');
1919
ScatterGeo.style = require('./style');
20+
ScatterGeo.styleOnSelect = require('../scatter/style').styleOnSelect;
2021
ScatterGeo.hoverPoints = require('./hover');
2122
ScatterGeo.eventData = require('./event_data');
2223
ScatterGeo.selectPoints = require('./select');

0 commit comments

Comments
 (0)