Skip to content

Splom zoom perf #2527

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 14 commits into from
Apr 11, 2018
Merged

Splom zoom perf #2527

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
02ed2eb
move doAutoRangeAndConstraints, drawData and finalDraw to subroutines
etpinard Apr 5, 2018
3ad1eaa
add 'axrange' editType
etpinard Apr 5, 2018
bb02281
speed up doModeBar subroutines for cartesian subplots
etpinard Apr 5, 2018
d07ae70
improve fullLayout._has()
etpinard Apr 5, 2018
468119e
speed up dragbox
etpinard Apr 5, 2018
0979272
clean splom drag logic
etpinard Apr 5, 2018
ebb35ce
lint in plot_api
etpinard Apr 5, 2018
f9090b7
(fixup) add draggedPts to scattercarpet categories
etpinard Apr 6, 2018
b2ee736
Merge branch 'splom-feature' into splom-zoom-perf
etpinard Apr 9, 2018
a0b2574
Merge branch 'splom-feature' into splom-zoom-perf
etpinard Apr 9, 2018
d3fe40d
replace selectAll with for(k in _plots) loop
etpinard Apr 10, 2018
cc1b3de
fixup and :lock: dragbox with linked y axes
etpinard Apr 10, 2018
980855c
Merge branch 'splom-feature' into splom-zoom-perf
etpinard Apr 11, 2018
f7d637d
:books: link TODOs to gh issues
etpinard Apr 11, 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
2 changes: 1 addition & 1 deletion src/plot_api/subroutines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ exports.lsInner = function(gd) {
.append('rect');
});

plotClip.select('rect').attr({
plotinfo.clipRect = plotClip.select('rect').attr({
width: xa._length,
height: ya._length
});
Expand Down
438 changes: 254 additions & 184 deletions src/plots/cartesian/dragbox.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/plots/cartesian/transition_axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo
var plotDx = xa2._offset - fracDx,
plotDy = ya2._offset - fracDy;

fullLayout._defs.select('#' + subplot.clipId + '> rect')
subplot.clipRect
.call(Drawing.setTranslate, clipDx, clipDy)
.call(Drawing.setScale, 1 / xScaleFactor, 1 / yScaleFactor);

Expand Down
2 changes: 1 addition & 1 deletion src/traces/bar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Bar.selectPoints = require('./select');
Bar.moduleType = 'trace';
Bar.name = 'bar';
Bar.basePlotModule = require('../../plots/cartesian');
Bar.categories = ['cartesian', 'bar', 'oriented', 'markerColorscale', 'errorBarsOK', 'showLegend'];
Bar.categories = ['cartesian', 'svg', 'bar', 'oriented', 'markerColorscale', 'errorBarsOK', 'showLegend', 'draggedPts'];
Bar.meta = {
description: [
'The data visualized by the span of the bars is set in `y`',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/box/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Box.selectPoints = require('./select');
Box.moduleType = 'trace';
Box.name = 'box';
Box.basePlotModule = require('../../plots/cartesian');
Box.categories = ['cartesian', 'symbols', 'oriented', 'box-violin', 'showLegend'];
Box.categories = ['cartesian', 'svg', 'symbols', 'oriented', 'box-violin', 'showLegend', 'draggedPts'];
Box.meta = {
description: [
'In vertical (horizontal) box plots,',
Expand Down
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 @@ -14,7 +14,7 @@ module.exports = {
moduleType: 'trace',
name: 'candlestick',
basePlotModule: require('../../plots/cartesian'),
categories: ['cartesian', 'showLegend', 'candlestick'],
categories: ['cartesian', 'svg', 'showLegend', 'candlestick'],
meta: {
description: [
'The candlestick is a style of financial chart describing',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/carpet/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Carpet.animatable = true;
Carpet.moduleType = 'trace';
Carpet.name = 'carpet';
Carpet.basePlotModule = require('../../plots/cartesian');
Carpet.categories = ['cartesian', 'carpet', 'carpetAxis', 'notLegendIsolatable'];
Carpet.categories = ['cartesian', 'svg', 'carpet', 'carpetAxis', 'notLegendIsolatable'];
Carpet.meta = {
description: [
'The data describing carpet axis layout is set in `y` and (optionally)',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/contour/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Contour.hoverPoints = require('./hover');
Contour.moduleType = 'trace';
Contour.name = 'contour';
Contour.basePlotModule = require('../../plots/cartesian');
Contour.categories = ['cartesian', '2dMap', 'contour', 'showLegend'];
Contour.categories = ['cartesian', 'svg', '2dMap', 'contour', 'showLegend'];
Contour.meta = {
description: [
'The data from which contour lines are computed is set in `z`.',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/contourcarpet/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ ContourCarpet.style = require('../contour/style');
ContourCarpet.moduleType = 'trace';
ContourCarpet.name = 'contourcarpet';
ContourCarpet.basePlotModule = require('../../plots/cartesian');
ContourCarpet.categories = ['cartesian', 'carpet', 'contour', 'symbols', 'showLegend', 'hasLines', 'carpetDependent'];
ContourCarpet.categories = ['cartesian', 'svg', 'carpet', 'contour', 'symbols', 'showLegend', 'hasLines', 'carpetDependent'];
ContourCarpet.meta = {
hrName: 'contour_carpet',
description: [
Expand Down
2 changes: 1 addition & 1 deletion src/traces/heatmap/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Heatmap.hoverPoints = require('./hover');
Heatmap.moduleType = 'trace';
Heatmap.name = 'heatmap';
Heatmap.basePlotModule = require('../../plots/cartesian');
Heatmap.categories = ['cartesian', '2dMap'];
Heatmap.categories = ['cartesian', 'svg', '2dMap'];
Heatmap.meta = {
description: [
'The data that describes the heatmap value-to-color mapping',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/histogram/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Histogram.eventData = require('./event_data');
Histogram.moduleType = 'trace';
Histogram.name = 'histogram';
Histogram.basePlotModule = require('../../plots/cartesian');
Histogram.categories = ['cartesian', 'bar', 'histogram', 'oriented', 'errorBarsOK', 'showLegend'];
Histogram.categories = ['cartesian', 'svg', 'bar', 'histogram', 'oriented', 'errorBarsOK', 'showLegend'];
Histogram.meta = {
description: [
'The sample data from which statistics are computed is set in `x`',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/histogram2d/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Histogram2D.eventData = require('../histogram/event_data');
Histogram2D.moduleType = 'trace';
Histogram2D.name = 'histogram2d';
Histogram2D.basePlotModule = require('../../plots/cartesian');
Histogram2D.categories = ['cartesian', '2dMap', 'histogram'];
Histogram2D.categories = ['cartesian', 'svg', '2dMap', 'histogram'];
Histogram2D.meta = {
hrName: 'histogram_2d',
description: [
Expand Down
2 changes: 1 addition & 1 deletion src/traces/histogram2dcontour/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Histogram2dContour.hoverPoints = require('../contour/hover');
Histogram2dContour.moduleType = 'trace';
Histogram2dContour.name = 'histogram2dcontour';
Histogram2dContour.basePlotModule = require('../../plots/cartesian');
Histogram2dContour.categories = ['cartesian', '2dMap', 'contour', 'histogram'];
Histogram2dContour.categories = ['cartesian', 'svg', '2dMap', 'contour', 'histogram'];
Histogram2dContour.meta = {
hrName: 'histogram_2d_contour',
description: [
Expand Down
2 changes: 1 addition & 1 deletion src/traces/ohlc/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ module.exports = {
moduleType: 'trace',
name: 'ohlc',
basePlotModule: require('../../plots/cartesian'),
categories: ['cartesian', 'showLegend'],
categories: ['cartesian', 'svg', 'showLegend'],
meta: {
description: [
'The ohlc (short for Open-High-Low-Close) is a style of financial chart describing',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/scatter/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Scatter.animatable = true;
Scatter.moduleType = 'trace';
Scatter.name = 'scatter';
Scatter.basePlotModule = require('../../plots/cartesian');
Scatter.categories = ['cartesian', 'symbols', 'markerColorscale', 'errorBarsOK', 'showLegend', 'scatter-like'];
Scatter.categories = ['cartesian', 'svg', 'symbols', 'markerColorscale', 'errorBarsOK', 'showLegend', 'scatter-like', 'draggedPts'];
Copy link
Contributor Author

@etpinard etpinard Apr 5, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

IMPORTANT (and possibly worth refactoring)

scattergl and splom traces are currently declared with a 'cartesian' category so that cartesian axis logic that they share just works. But this means that not all 'cartesian' traces are svg or more precisely not all 'cartesian' traces are plotted in <g .cartersianlayer>. So to avoid looping over all subplots on drag to shift plotinfo.plot and its clip <rect> for scattergl and splom traces, I made an 'svg' category. This is a slight misnomer though, as heatmaps and histogram2d are here considered svg even though they are built using a <canvas>. Oh well. The 'svg' category mirrors the 'gl' and 'regl' category listed in scattergl and splom trace modules. Any objections?

Moreover, I added a 'draggedPts' category to avoid those costly selectAll('.point') on pan when we don't need them. For example, graphs with contour lines feel faster on pan as we no longer traverse the <g .cartesianlayer> looking for points to scaled.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think this is fine - 'cartesian' means "data relates to cartesian axes" and 'svg' means "data is drawn into an SVG container" (heatmaps use a canvas to generate the image but then put it into an svg <image> element)

'draggedPts' is still potentially overkill, as the trace type doesn't necessarily tell you if the traces contain these elements - all of these trace types can be drawn with no points or text, only lines and fills...

Scatter.meta = {
description: [
'The scatter trace type encompasses line charts, scatter charts, text charts, and bubble charts.',
Expand Down
2 changes: 1 addition & 1 deletion src/traces/scattercarpet/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ ScatterCarpet.eventData = require('./event_data');
ScatterCarpet.moduleType = 'trace';
ScatterCarpet.name = 'scattercarpet';
ScatterCarpet.basePlotModule = require('../../plots/cartesian');
ScatterCarpet.categories = ['carpet', 'symbols', 'markerColorscale', 'showLegend', 'carpetDependent'];
ScatterCarpet.categories = ['svg', 'carpet', 'symbols', 'markerColorscale', 'showLegend', 'carpetDependent'];
ScatterCarpet.meta = {
hrName: 'scatter_carpet',
description: [
Expand Down
2 changes: 1 addition & 1 deletion src/traces/violin/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ module.exports = {
moduleType: 'trace',
name: 'violin',
basePlotModule: require('../../plots/cartesian'),
categories: ['cartesian', 'symbols', 'oriented', 'box-violin', 'showLegend'],
categories: ['cartesian', 'svg', 'symbols', 'oriented', 'box-violin', 'showLegend', 'draggedPts'],
meta: {
description: [
'In vertical (horizontal) violin plots,',
Expand Down