Skip to content

Clean up removed axes and axis lines #2416

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 2 commits into from
Feb 28, 2018
Merged

Clean up removed axes and axis lines #2416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4bb3d40
fix #2410 - show/hide axis lines
alexcjohnson Feb 27, 2018
d6151fa
Fix #2392 - clean up removed axes
alexcjohnson Feb 27, 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
10 changes: 6 additions & 4 deletions src/plot_api/subroutines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,7 @@ exports.lsInner = function(gd) {
* -----
* x2
*/
var xPath = 'M0,0';
Copy link
Contributor

Choose a reason for hiding this comment

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

maybe a good candidate for a new addition to src/constants/ (e.g. blankPath)?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We do use it a fair amount... though we use it for purposes other than just blank (as the start of a real path for example), and between the open 'M0,0' and closed M0,0Z variants (though maybe we don't need the closed one and could switch to open?), I feel like hiding it in a constant may make its purpose less clear rather than more.

if(shouldShowLinesOrTicks(xa, subplot)) {
leftYLineWidth = findCounterAxisLineWidth(xa, 'left', ya, axList);
xLinesXLeft = xa._offset - (leftYLineWidth ? (pad + leftYLineWidth) : 0);
Expand All @@ -288,17 +289,17 @@ exports.lsInner = function(gd) {
xa._linepositions[subplot] = [xLinesYBottom, xLinesYTop];
}

var xPath = mainPath(xa, xLinePath, xLinePathFree);
xPath = mainPath(xa, xLinePath, xLinePathFree);
if(extraSubplot && xa.showline && (xa.mirror === 'all' || xa.mirror === 'allticks')) {
xPath += xLinePath(xLinesYBottom) + xLinePath(xLinesYTop);
}

plotinfo.xlines
.attr('d', xPath || 'M0,0')
.style('stroke-width', xa._lw + 'px')
.call(Color.stroke, xa.showline ?
xa.linecolor : 'rgba(0,0,0,0)');
}
plotinfo.xlines.attr('d', xPath);

/*
* y lines that meet x axes get longer only by margin.pad, because
Expand All @@ -311,6 +312,7 @@ exports.lsInner = function(gd) {
* |
* +-----
*/
var yPath = 'M0,0';
if(shouldShowLinesOrTicks(ya, subplot)) {
connectYBottom = findCounterAxisLineWidth(ya, 'bottom', xa, axList);
yLinesYBottom = ya._offset + ya._length + (connectYBottom ? pad : 0);
Expand All @@ -324,17 +326,17 @@ exports.lsInner = function(gd) {
ya._linepositions[subplot] = [yLinesXLeft, yLinesXRight];
}

var yPath = mainPath(ya, yLinePath, yLinePathFree);
yPath = mainPath(ya, yLinePath, yLinePathFree);
if(extraSubplot && ya.showline && (ya.mirror === 'all' || ya.mirror === 'allticks')) {
yPath += yLinePath(yLinesXLeft) + yLinePath(yLinesXRight);
}

plotinfo.ylines
.attr('d', yPath || 'M0,0')
.style('stroke-width', ya._lw + 'px')
.call(Color.stroke, ya.showline ?
ya.linecolor : 'rgba(0,0,0,0)');
}
plotinfo.ylines.attr('d', yPath);
});

Plotly.Axes.makeClipPaths(gd);
Expand Down
20 changes: 17 additions & 3 deletions src/plots/cartesian/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,17 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
purgeSubplotLayers(oldFullLayout._cartesianlayer.selectAll('.subplot'), oldFullLayout);
oldFullLayout._defs.selectAll('.axesclip').remove();
}
// otherwise look for subplots we need to remove
else if(oldSubplotList.cartesian) {
for(i = 0; i < oldSubplotList.cartesian.length; i++) {
var oldSubplotId = oldSubplotList.cartesian[i];
if(newSubplotList.cartesian.indexOf(oldSubplotId) === -1) {
var selector = '.' + oldSubplotId + ',.' + oldSubplotId + '-x,.' + oldSubplotId + '-y';
oldFullLayout._cartesianlayer.selectAll(selector).remove();
removeSubplotExtras(oldSubplotId, oldFullLayout);
}
}
}
};

exports.drawFramework = function(gd) {
Expand Down Expand Up @@ -484,11 +495,9 @@ function purgeSubplotLayers(layers, fullLayout) {

layers.each(function(subplotId) {
var plotgroup = d3.select(this);
var clipId = 'clip' + fullLayout._uid + subplotId + 'plot';

plotgroup.remove();
fullLayout._draggers.selectAll('g.' + subplotId).remove();
fullLayout._defs.select('#' + clipId).remove();
removeSubplotExtras(subplotId, fullLayout);

overlayIdsToRemove[subplotId] = true;

Expand All @@ -515,6 +524,11 @@ function purgeSubplotLayers(layers, fullLayout) {
}
}

function removeSubplotExtras(subplotId, fullLayout) {
fullLayout._draggers.selectAll('g.' + subplotId).remove();
fullLayout._defs.select('#clip' + fullLayout._uid + subplotId + 'plot').remove();
Copy link
Contributor

Choose a reason for hiding this comment

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

What about axis titles? They are removed above in an old vs new axis loop, could we combine that in removeSubplotExtras?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Titles are per axis, because there's only ever one copy per axis, so they're inserted with no reference to the subplot and it would be incorrect to tie their removal to the disappearance of any given subplot.

}

function joinLayer(parent, nodeType, className, dataVal) {
var layer = parent.selectAll('.' + className)
.data([dataVal || 0]);
Expand Down
54 changes: 54 additions & 0 deletions test/jasmine/tests/cartesian_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,37 @@ describe('relayout', function() {

});

describe('axis line visibility', function() {
var gd;

beforeEach(function() {
gd = createGraphDiv();
});

afterEach(destroyGraphDiv);

it('can show and hide axis lines', function(done) {
Plotly.newPlot(gd, [{y: [1, 2]}], {width: 400, height: 400})
.then(function() {
expect(gd.querySelector('.xlines-above').attributes.d.value).toBe('M0,0');
expect(gd.querySelector('.ylines-above').attributes.d.value).toBe('M0,0');

return Plotly.relayout(gd, {'xaxis.showline': true, 'yaxis.showline': true});
})
.then(function() {
expect(gd.querySelector('.xlines-above').attributes.d.value).not.toBe('M0,0');
expect(gd.querySelector('.ylines-above').attributes.d.value).not.toBe('M0,0');

return Plotly.relayout(gd, {'xaxis.showline': false, 'yaxis.showline': false});
})
.then(function() {
expect(gd.querySelector('.xlines-above').attributes.d.value).toBe('M0,0');
expect(gd.querySelector('.ylines-above').attributes.d.value).toBe('M0,0');
})
.catch(failTest)
.then(done);
});
});
});

describe('subplot creation / deletion:', function() {
Expand Down Expand Up @@ -314,6 +345,29 @@ describe('subplot creation / deletion:', function() {
.then(done);
});

it('should remove unused axes when deleting traces', function(done) {
Plotly.newPlot(gd,
[{y: [1, 2, 3]}, {y: [10, 30, 20], yaxis: 'y2'}],
{yaxis2: {side: 'right', overlaying: 'y', title: 'Hi!'}}
)
.then(function() {
expect(gd.querySelectorAll('.xy2,.xy2-x,.xy2-y').length).not.toBe(0);
expect(gd.querySelectorAll('.y2title').length).toBe(1);
expect(gd._fullLayout._subplots.cartesian).toEqual(['xy', 'xy2']);
expect(gd._fullLayout._subplots.yaxis).toEqual(['y', 'y2']);

return Plotly.deleteTraces(gd, [1]);
})
.then(function() {
expect(gd.querySelectorAll('.xy2,.xy2-x,.xy2-y').length).toBe(0);
expect(gd.querySelectorAll('.y2title').length).toBe(0);
expect(gd._fullLayout._subplots.cartesian).toEqual(['xy']);
expect(gd._fullLayout._subplots.yaxis).toEqual(['y']);
})
.catch(failTest)
.then(done);
});

it('puts plot backgrounds behind everything except if they overlap', function(done) {
function checkBGLayers(behindCount, x2y2Count) {
expect(gd.querySelectorAll('.bglayer rect.bg').length).toBe(behindCount);
Expand Down