Skip to content

Fix multi-axis transition "leaks" #4167

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 1 commit into from
Sep 6, 2019
Merged

Fix multi-axis transition "leaks" #4167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 8 additions & 9 deletions src/plots/plots.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2407,26 +2407,25 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)
var xr0 = xa.range.slice();
var yr0 = ya.range.slice();

var xr1;
var xr1 = null;
var yr1 = null;
var editX = null;
var editY = null;

if(Array.isArray(newLayout[xa._name + '.range'])) {
xr1 = newLayout[xa._name + '.range'].slice();
} else if(Array.isArray((newLayout[xa._name] || {}).range)) {
xr1 = newLayout[xa._name].range.slice();
}

var yr1;
if(Array.isArray(newLayout[ya._name + '.range'])) {
yr1 = newLayout[ya._name + '.range'].slice();
} else if(Array.isArray((newLayout[ya._name] || {}).range)) {
yr1 = newLayout[ya._name].range.slice();
}

var editX;
if(xr0 && xr1 && (xr0[0] !== xr1[0] || xr0[1] !== xr1[1])) {
editX = {xr0: xr0, xr1: xr1};
}

var editY;
if(yr0 && yr1 && (yr0[0] !== yr1[0] || yr0[1] !== yr1[1])) {
editY = {yr0: yr0, yr1: yr1};
}
Expand Down Expand Up @@ -2518,12 +2517,12 @@ plots.transitionFromReact = function(gd, restyleFlags, relayoutFlags, oldFullLay
xa.setScale();
ya.setScale();

var editX;
var editX = null;
var editY = null;

if(xr0[0] !== xr1[0] || xr0[1] !== xr1[1]) {
editX = {xr0: xr0, xr1: xr1};
}

var editY;
if(yr0[0] !== yr1[0] || yr0[1] !== yr1[1]) {
editY = {yr0: yr0, yr1: yr1};
}
Expand Down
69 changes: 68 additions & 1 deletion test/jasmine/tests/animate_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -708,7 +708,6 @@ describe('Animate API details', function() {
});

describe('Animating multiple axes', function() {
'use strict';
var gd;

beforeEach(function() {
Expand Down Expand Up @@ -750,6 +749,74 @@ describe('Animating multiple axes', function() {
.catch(failTest)
.then(done);
});

it('should not leak axis update from subplot to subplot', function(done) {
function _animate(frameLayout) {
return function() {
return Plotly.animate(gd, {layout: frameLayout}, {
frame: {redraw: false, duration: 10},
transition: {duration: 10}
});
};
}

function _assert(msg, exp) {
return function() {
var fullLayout = gd._fullLayout;
for(var k in exp) {
expect(fullLayout[k].range).toBeCloseToArray(exp[k], 2, msg + '| ' + k);
}
};
}

Plotly.plot(gd, [{
x: [0.1, 0.2, 0.3],
y: [0.4, 0.5, 0.6],
}, {
x: [0.2, 0.3, 0.4],
y: [0.5, 0.6, 0.7],
xaxis: 'x2',
yaxis: 'y2',
}, {
x: [0.3, 0.5, 0.7],
y: [0.7, 0.2, 0.2],
xaxis: 'x3',
yaxis: 'y3',
}], {
grid: {rows: 1, columns: 3, pattern: 'independent'},
showlegend: false
})
.then(_assert('base', {
xaxis: [0.0825, 0.3174], xaxis2: [0.1825, 0.417], xaxis3: [0.265, 0.7349],
yaxis: [0.385, 0.614], yaxis2: [0.485, 0.714], yaxis3: [0.163, 0.7366]
}))
.then(_animate({
xaxis: {range: [-10, 10]},
yaxis: {range: [-10, 10]}
}))
.then(_assert('after xy range animate', {
xaxis: [-10, 10], xaxis2: [0.1825, 0.417], xaxis3: [0.265, 0.7349],
yaxis: [-10, 10], yaxis2: [0.485, 0.714], yaxis3: [0.163, 0.7366]
}))
.then(_animate({
xaxis2: {range: [-20, 20]},
yaxis2: {range: [-20, 20]}
}))
.then(_assert('after x2y2 range animate', {
xaxis: [-10, 10], xaxis2: [-20, 20], xaxis3: [0.265, 0.7349],
yaxis: [-10, 10], yaxis2: [-20, 20], yaxis3: [0.163, 0.7366]
}))
.then(_animate({
xaxis3: {range: [-30, 30]},
yaxis3: {range: [-30, 30]}
}))
.then(_assert('after x3y3 range animate', {
xaxis: [-10, 10], xaxis2: [-20, 20], xaxis3: [-30, 30],
yaxis: [-10, 10], yaxis2: [-20, 20], yaxis3: [-30, 30]
}))
.catch(failTest)
.then(done);
});
});

describe('non-animatable fallback', function() {
Expand Down
69 changes: 69 additions & 0 deletions test/jasmine/tests/transition_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1028,4 +1028,73 @@ describe('Plotly.react transitions:', function() {
.catch(failTest)
.then(done);
});

it('should not leak axis update from subplot to subplot', function(done) {
function _react(modifs) {
return function() {
for(var k in modifs) {
gd.layout[k] = modifs[k];
}
return Plotly.react(gd, gd.data, gd.layout);
};
}

function _assert(msg, exp) {
return function() {
var fullLayout = gd._fullLayout;
for(var k in exp) {
expect(fullLayout[k].range).toBeCloseToArray(exp[k], 2, msg + '| ' + k);
}
};
}

Plotly.plot(gd, [{
x: [0.1, 0.2, 0.3],
y: [0.4, 0.5, 0.6],
}, {
x: [0.2, 0.3, 0.4],
y: [0.5, 0.6, 0.7],
xaxis: 'x2',
yaxis: 'y2',
}, {
x: [0.3, 0.5, 0.7],
y: [0.7, 0.2, 0.2],
xaxis: 'x3',
yaxis: 'y3',
}], {
grid: {rows: 1, columns: 3, pattern: 'independent'},
showlegend: false,
transition: {duration: 10}
})
.then(_assert('base', {
xaxis: [0.0825, 0.3174], xaxis2: [0.1825, 0.417], xaxis3: [0.265, 0.7349],
yaxis: [0.385, 0.614], yaxis2: [0.485, 0.714], yaxis3: [0.163, 0.7366]
}))
.then(_react({
xaxis: {range: [-10, 10]},
yaxis: {range: [-10, 10]}
}))
.then(_assert('after xy range transition', {
xaxis: [-10, 10], xaxis2: [0.1825, 0.417], xaxis3: [0.265, 0.7349],
yaxis: [-10, 10], yaxis2: [0.485, 0.714], yaxis3: [0.163, 0.7366]
}))
.then(_react({
xaxis2: {range: [-20, 20]},
yaxis2: {range: [-20, 20]}
}))
.then(_assert('after x2y2 range transition', {
xaxis: [-10, 10], xaxis2: [-20, 20], xaxis3: [0.265, 0.7349],
yaxis: [-10, 10], yaxis2: [-20, 20], yaxis3: [0.163, 0.7366]
}))
.then(_react({
xaxis3: {range: [-30, 30]},
yaxis3: {range: [-30, 30]}
}))
.then(_assert('after x3y3 range transition', {
xaxis: [-10, 10], xaxis2: [-20, 20], xaxis3: [-30, 30],
yaxis: [-10, 10], yaxis2: [-20, 20], yaxis3: [-30, 30]
}))
.catch(failTest)
.then(done);
});
});