Skip to content
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

Perf drawFramwork #2474

Merged
merged 17 commits into from
Mar 26, 2018
Merged

Perf drawFramwork #2474

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d305564
perf makeSubplotData
etpinard Mar 13, 2018
7d881f6
replace selectAll().data([0]) with select() + .size()
etpinard Mar 13, 2018
5cc9af9
add ensureSingle & ensureSingleById lib methods
etpinard Mar 14, 2018
e32434e
replace selectAll().data([0]) with ensureSingle(ById)
etpinard Mar 14, 2018
e810c1e
:hocho: layoutStyles call in drawFramework step
etpinard Mar 14, 2018
8e6032d
bring back d3-esque method chains
etpinard Mar 14, 2018
b974eab
add toBeClassed custom matcher
etpinard Mar 14, 2018
fc8c386
fixup typo
etpinard Mar 14, 2018
5887104
stash base url on Drawing module object
etpinard Mar 15, 2018
42ec6a0
clear stashed base url off Drawing module on replot
etpinard Mar 16, 2018
928ff6d
do not try to clear ax layers on first render
etpinard Mar 19, 2018
a2c5c3d
use ensureSingle in plot bg lsInner routine
etpinard Mar 20, 2018
49177a2
lint in axes.js
etpinard Mar 20, 2018
8cf99a6
stash tickLabels selection in doTicks scope
etpinard Mar 20, 2018
5307125
fixup typo in select query & remove neccessary branch
etpinard Mar 26, 2018
4059764
:hocho: unnecessary scoped var
etpinard Mar 26, 2018
50ab638
Merge pull request #2487 from plotly/perf-drawFramwork-more
etpinard Mar 26, 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
9 changes: 5 additions & 4 deletions src/components/colorbar/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,10 +245,9 @@ module.exports = function draw(gd, id) {
cbAxisOut.setScale();

// now draw the elements
var container = fullLayout._infolayer.selectAll('g.' + id).data([0]);
container.enter().append('g').classed(id, true)
.classed(cn.colorbar, true)
.each(function() {
var container = Lib.ensureSingle(fullLayout._infolayer, 'g', id, function(s) {
s.classed(cn.colorbar, true);
s.each(function() {
Copy link
Collaborator

Choose a reason for hiding this comment

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

you don't like chaining here? ie

s.classed(...)
    .each(...)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good catch. Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done in -> 8e6032d

var s = d3.select(this);
s.append('rect').classed(cn.cbbg, true);
s.append('g').classed(cn.cbfills, true);
Expand All @@ -259,6 +258,8 @@ module.exports = function draw(gd, id) {
s.append('rect').classed(cn.cboutline, true);
s.select('.cbtitle').datum(0);
});
});

container.attr('transform', 'translate(' + Math.round(gs.l) +
',' + Math.round(gs.t) + ')');
// TODO: this opposite transform is a hack until we make it
Expand Down
25 changes: 9 additions & 16 deletions src/components/drawing/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,9 +415,7 @@ drawing.gradient = function(sel, gd, gradientID, type, color1, color2) {
* The upside of this is arbitrary points can share gradient defs
*/
drawing.initGradients = function(gd) {
var gradientsGroup = gd._fullLayout._defs.selectAll('.gradients').data([0]);
gradientsGroup.enter().append('g').classed('gradients', true);

var gradientsGroup = Lib.ensureSingle(gd._fullLayout._defs, 'g', 'gradients');
gradientsGroup.selectAll('linearGradient,radialGradient').remove();
};

Expand Down Expand Up @@ -729,33 +727,28 @@ drawing.steps = function(shape) {
// off-screen svg render testing element, shared by the whole page
// uses the id 'js-plotly-tester' and stores it in drawing.tester
drawing.makeTester = function() {
var tester = d3.select('body')
.selectAll('#js-plotly-tester')
.data([0]);

tester.enter().append('svg')
.attr('id', 'js-plotly-tester')
.attr(xmlnsNamespaces.svgAttrs)
.style({
var tester = Lib.ensureSingleById(d3.select('body'), 'svg', 'js-plotly-tester', function(s) {
s.attr(xmlnsNamespaces.svgAttrs);
s.style({
position: 'absolute',
left: '-10000px',
top: '-10000px',
width: '9000px',
height: '9000px',
'z-index': '1'
});
});

// browsers differ on how they describe the bounding rect of
// the svg if its contents spill over... so make a 1x1px
// reference point we can measure off of.
var testref = tester.selectAll('.js-reference-point').data([0]);
testref.enter().append('path')
.classed('js-reference-point', true)
.attr('d', 'M0,0H1V1H0Z')
.style({
var testref = Lib.ensureSingle(tester, 'path', 'js-reference-point', function(s) {
s.attr('d', 'M0,0H1V1H0Z');
s.style({
'stroke-width': 0,
fill: 'black'
});
});

drawing.tester = tester;
drawing.testref = testref;
Expand Down
20 changes: 9 additions & 11 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -696,23 +696,21 @@ function createHoverText(hoverData, opts, gd) {
commonLabel.exit().remove();

commonLabel.each(function() {
var label = d3.select(this),
lpath = label.selectAll('path').data([0]),
ltext = label.selectAll('text').data([0]);

lpath.enter().append('path')
.style({'stroke-width': '1px'});
var label = d3.select(this);
var lpath = Lib.ensureSingle(label, 'path', '', function(s) {
s.style({'stroke-width': '1px'});
});
var ltext = Lib.ensureSingle(label, 'text', '', function(s) {
// prohibit tex interpretation until we can handle
// tex and regular text together
s.attr('data-notex', 1);
});

lpath.style({
fill: commonLabelOpts.bgcolor || Color.defaultLine,
stroke: commonLabelOpts.bordercolor || Color.background,
});

ltext.enter().append('text')
// prohibit tex interpretation until we can handle
// tex and regular text together
.attr('data-notex', 1);

ltext.text(t0)
.call(Drawing.font,
commonLabelOpts.font.family || fontFamily,
Expand Down
69 changes: 22 additions & 47 deletions src/components/legend/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,52 +53,35 @@ module.exports = function draw(gd) {
return;
}

var legend = fullLayout._infolayer.selectAll('g.legend')
.data([0]);

legend.enter().append('g')
.attr({
'class': 'legend',
'pointer-events': 'all'
});

var clipPath = fullLayout._topdefs.selectAll('#' + clipId)
.data([0]);

clipPath.enter().append('clipPath')
.attr('id', clipId)
.append('rect');
var firstRender = false;
var legend = Lib.ensureSingle(fullLayout._infolayer, 'g', 'legend', function(s) {
s.attr('pointer-events', 'all');
firstRender = true;
});

var bg = legend.selectAll('rect.bg')
.data([0]);
var clipPath = Lib.ensureSingleById(fullLayout._topdefs, 'clipPath', clipId, function(s) {
s.append('rect');
});

bg.enter().append('rect').attr({
'class': 'bg',
'shape-rendering': 'crispEdges'
var bg = Lib.ensureSingle(legend, 'rect', 'bg', function(s) {
s.attr('shape-rendering', 'crispEdges');
});

bg.call(Color.stroke, opts.bordercolor)
.call(Color.fill, opts.bgcolor)
.style('stroke-width', opts.borderwidth + 'px');

var scrollBox = legend.selectAll('g.scrollbox')
.data([0]);

scrollBox.enter().append('g')
.attr('class', 'scrollbox');

var scrollBar = legend.selectAll('rect.scrollbar')
.data([0]);
var scrollBox = Lib.ensureSingle(legend, 'g', 'scrollbox');

scrollBar.enter().append('rect')
.attr({
'class': 'scrollbar',
var scrollBar = Lib.ensureSingle(legend, 'rect', 'scrollbar', function(s) {
s.attr({
rx: 20,
ry: 3,
width: 0,
height: 0
})
.call(Color.fill, '#808BA4');
});
s.call(Color.fill, '#808BA4');
});

var groups = scrollBox.selectAll('g.groups')
.data(legendData);
Expand Down Expand Up @@ -129,7 +112,6 @@ module.exports = function draw(gd) {
.call(setupTraceToggle, gd);
});

var firstRender = legend.enter().size() !== 0;
if(firstRender) {
computeLegendDimensions(gd, groups, traces);
expandMargin(gd);
Expand Down Expand Up @@ -378,10 +360,7 @@ function drawTexts(g, gd) {
traceIndex = trace.index,
name = isPie ? legendItem.label : trace.name;

var text = g.selectAll('text.legendtext')
.data([0]);

text.enter().append('text').classed('legendtext', true);
var text = Lib.ensureSingle(g, 'text', 'legendtext');

text.attr('text-anchor', 'start')
.classed('user-select-none', true)
Expand Down Expand Up @@ -446,15 +425,11 @@ function setupTraceToggle(g, gd) {
var newMouseDownTime,
numClicks = 1;

var traceToggle = g.selectAll('rect')
.data([0]);

traceToggle.enter().append('rect')
.classed('legendtoggle', true)
.style('cursor', 'pointer')
.attr('pointer-events', 'all')
.call(Color.fill, 'rgba(0,0,0,0)');

var traceToggle = Lib.ensureSingle(g, 'rect', 'legendtoggle', function(s) {
s.style('cursor', 'pointer');
s.attr('pointer-events', 'all');
s.call(Color.fill, 'rgba(0,0,0,0)');
});

traceToggle.on('mousedown', function() {
newMouseDownTime = (new Date()).getTime();
Expand Down
7 changes: 1 addition & 6 deletions src/components/legend/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
* LICENSE file in the root directory of this source tree.
*/


'use strict';

var d3 = require('d3');
Expand All @@ -19,15 +18,11 @@ var Color = require('../color');
var subTypes = require('../../traces/scatter/subtypes');
var stylePie = require('../../traces/pie/style_one');


module.exports = function style(s, gd) {
s.each(function(d) {
var traceGroup = d3.select(this);

var layers = traceGroup.selectAll('g.layers')
.data([0]);
layers.enter().append('g')
.classed('layers', true);
var layers = Lib.ensureSingle(traceGroup, 'g', 'layers');
layers.style('opacity', d[0].trace.opacity);

var fill = layers
Expand Down
23 changes: 8 additions & 15 deletions src/components/rangeselector/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ var Registry = require('../../registry');
var Plots = require('../../plots/plots');
var Color = require('../color');
var Drawing = require('../drawing');
var Lib = require('../../lib');
var svgTextUtils = require('../../lib/svg_text_utils');
var axisIds = require('../../plots/cartesian/axis_ids');
var anchorUtils = require('../legend/anchor_utils');
Expand Down Expand Up @@ -121,13 +122,9 @@ function isActive(axisLayout, opts, update) {
}

function drawButtonRect(button, selectorLayout, d) {
var rect = button.selectAll('rect')
.data([0]);

rect.enter().append('rect')
.classed('selector-rect', true);

rect.attr('shape-rendering', 'crispEdges');
var rect = Lib.ensureSingle(button, 'rect', 'selector-rect', function(s) {
s.attr('shape-rendering', 'crispEdges');
});

rect.attr({
'rx': constants.rx,
Expand All @@ -150,14 +147,10 @@ function drawButtonText(button, selectorLayout, d, gd) {
svgTextUtils.convertToTspans(s, gd);
}

var text = button.selectAll('text')
.data([0]);

text.enter().append('text')
.classed('selector-text', true)
.classed('user-select-none', true);

text.attr('text-anchor', 'middle');
var text = Lib.ensureSingle(button, 'text', 'selector-text', function(s) {
s.classed('user-select-none', true);
s.attr('text-anchor', 'middle');
});

text.call(Drawing.font, selectorLayout.font)
.text(getLabel(d))
Expand Down
Loading