8000 SVG trace on selection perf by etpinard · Pull Request #2583 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

SVG trace on selection perf #2583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
May 1, 2018
Merged

SVG trace on selection perf #2583

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
53a5a64
lookup in _plots instead of indexOf in array of ids
etpinard Apr 19, 2018
b6d4ebc
add 'styleOnSelect' method to Scatter* module
etpinard Apr 26, 2018
6c86e08
split Box & Bar .style + add .styleOnSelect
etpinard Apr 26, 2018
0a50295
use Scatter.selectOnStyle directly for violin traces
etpinard Apr 26, 2018
7103fab
add styleOnSelect for geo traces
etpinard Apr 27, 2018
01df2d2
style selected text nodes with selectedTextStyle + add test
etpinard Apr 30, 2018
3776e8f
refactor selected points drawing methods
etpinard Apr 30, 2018
4adc091
add styleOnSelect test
etpinard Apr 30, 2018
46858a7
Merge branch 'master' into scatter-select-perf
etpinard Apr 30, 2018
0e91c6e
lint (fn rename)
etpinard Apr 30, 2018
84ca51f
fixup merge master commit (candlestick can't use Box.styleOnSelect)
etpinard Apr 30, 2018
3e32b23
minor perf boost in Drawing.selectedPointStyle
etpinard Apr 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
split Box & Bar .style + add .styleOnSelect
  • Loading branch information
@etpinard
etpinard committed Apr 26, 2018
commit 6c86e08e3f1eef63b57553033236fbd518401e1f
3 changes: 2 additions & 1 deletion src/traces/bar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down
65 changes: 43 additions & 22 deletions src/traces/bar/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need this else? I don't see a corresponding case in the previous code...

BTW, I'm hesitant to suggest this after the .select().select() data-mangling mess, but does it work to do Drawing.selectedPointStyle(s.selectAll('path,text'), trace, gd)? Is that any faster?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah oops, this should be Drawing.selectedTextStyle(s.selectAll('text'), trace, gd). I'll add a test.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need this else? I

To get back to the original state after double-click. Drawing.selectedPointStyle and Drawing.selectedTextStyle only handle selected / unselected styling off a "base" state given by stylePoints.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add a test.

added in 01df2d2

}
}

module.exports = {
style: style,
styleOnSelect: styleOnSelect
};
3 changes: 2 additions & 1 deletion src/traces/box/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down
19 changes: 18 additions & 1 deletion src/traces/box/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
< 10000 svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-fold-up"> Expand Up @@ -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; });
Expand Down Expand Up @@ -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
};
2 changes: 1 addition & 1 deletion src/traces/candlestick/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
};
3 changes: 2 additions & 1 deletion src/traces/histogram/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
0