Skip to content

Contour legend #2891

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.

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 9 commits into from
Aug 15, 2018
23 changes: 7 additions & 16 deletions src/traces/contour/plot.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ var constants = require('./constants');
var costConstants = constants.LABELOPTIMIZER;

exports.plot = function plot(gd, plotinfo, cdcontours, contourLayer) {
plotWrapper(gd, plotinfo, cdcontours, contourLayer, plotOne);
};

function plotWrapper(gd, plotinfo, cdcontours, contourLayer, plotOneFn) {
var contours = contourLayer.selectAll('g.contour')
Copy link
Contributor

Choose a reason for hiding this comment

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

Ah yeah. Way better.

By the looks of it, heatmap and carpet probably suffer from similar bugs:

image

From which we could 🔪 getUidsFromCalcdata entirely:

image

No need to do this in this PR of course, but opening a new issue about it would be nice.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Good call -> #2907

.data(
cdcontours.map(function(d) { return d[0]; }),
Expand All @@ -39,10 +43,11 @@ exports.plot = function plot(gd, plotinfo, cdcontours, contourLayer) {
.classed('contour', true);

contours.each(function(cd) {
plotOne(gd, plotinfo, cd, d3.select(this));
plotOneFn(gd, plotinfo, cd, d3.select(this));
})
.order();
};
}
exports.plotWrapper = plotWrapper;

function plotOne(gd, plotinfo, cd, plotGroup) {
var trace = cd.trace;
Expand Down Expand Up @@ -95,20 +100,6 @@ function plotOne(gd, plotinfo, cd, plotGroup) {
clipGaps(plotGroup, plotinfo, fullLayout._clips, cd, perimeter);
}

exports.makeContourGroup = function(layer, cd, id) {
var plotgroup = layer
.selectAll('g.contour.' + id)
.data(cd);

plotgroup.enter().append('g')
.classed('contour', true)
.classed(id, true);

plotgroup.exit().remove();

return plotgroup;
};

function makeBackground(plotgroup, perimeter, contours) {
var bggroup = Lib.ensureSingle(plotgroup, 'g', 'contourbg');

Expand Down
28 changes: 7 additions & 21 deletions src/traces/contourcarpet/plot.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ var map1dArray = require('../carpet/map_1d_array');
var makepath = require('../carpet/makepath');
var Drawing = require('../../components/drawing');
var Lib = require('../../lib');
var getUidsFromCalcData = require('../../plots/get_data').getUidsFromCalcData;

var makeCrossings = require('../contour/make_crossings');
var findAllPaths = require('../contour/find_all_paths');
Expand All @@ -27,35 +26,23 @@ var lookupCarpet = require('../carpet/lookup_carpetid');
var closeBoundaries = require('../contour/close_boundaries');

module.exports = function plot(gd, plotinfo, cdcontours, contourcarpetLayer) {
var uidLookup = getUidsFromCalcData(cdcontours);

contourcarpetLayer.selectAll('g.contour').each(function(d) {
if(!uidLookup[d.trace.uid]) {
d3.select(this).remove();
}
});

for(var i = 0; i < cdcontours.length; i++) {
plotOne(gd, plotinfo, cdcontours[i], contourcarpetLayer);
}
contourPlot.plotWrapper(gd, plotinfo, cdcontours, contourcarpetLayer, plotOne);
};

function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
var trace = cd[0].trace;
function plotOne(gd, plotinfo, cd, plotGroup) {
var trace = cd.trace;

var carpet = trace._carpetTrace = lookupCarpet(gd, trace);
var carpetcd = gd.calcdata[carpet.index][0];

if(!carpet.visible || carpet.visible === 'legendonly') return;

var a = cd[0].a;
var b = cd[0].b;
var a = cd.a;
var b = cd.b;
var contours = trace.contours;
var uid = trace.uid;
var xa = plotinfo.xaxis;
var ya = plotinfo.yaxis;
var id = 'contour' + uid;
var pathinfo = emptyPathinfo(contours, plotinfo, cd[0]);
var pathinfo = emptyPathinfo(contours, plotinfo, cd);
var isConstraint = contours.type === 'constraint';
var operation = contours._operation;
var coloring = isConstraint ? (operation === '=' ? 'lines' : 'fill') : contours.coloring;
Expand Down Expand Up @@ -98,7 +85,6 @@ function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
mapPathinfo(pathinfo, ab2p);

// draw everything
var plotGroup = contourPlot.makeContourGroup(contourcarpetLayer, cd, id);

// Compute the boundary path
var seg, xp, yp, i;
Expand All @@ -124,7 +110,7 @@ function plotOne(gd, plotinfo, cd, contourcarpetLayer) {
makeFills(trace, plotGroup, xa, ya, fillPathinfo, perimeter, ab2p, carpet, carpetcd, coloring, boundaryPath);

// Draw contour lines:
makeLinesAndLabels(plotGroup, pathinfo, gd, cd[0], contours, plotinfo, carpet);
makeLinesAndLabels(plotGroup, pathinfo, gd, cd, contours, plotinfo, carpet);

// Clip the boundary of the plot
Drawing.setClipUrl(plotGroup, carpet._clipPathId);
Expand Down
49 changes: 49 additions & 0 deletions test/jasmine/tests/carpet_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -646,3 +646,52 @@ describe('scattercarpet hover labels', function() {
.then(done);
});
});

describe('contourcarpet plotting & editing', function() {
var gd;

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

it('keeps the correct ordering after hide and show', function(done) {
function getIndices() {
var out = [];
d3.selectAll('.contour').each(function(d) { out.push(d.trace.index); });
return out;
}

Plotly.newPlot(gd, [{
type: 'carpet',
a: [1, 1, 1, 3, 3, 3, 5, 5, 5],
b: [1, 2, 3, 1, 2, 3, 1, 2, 3],
y: [1, 2, 3, 2, 3, 4, 3, 4, 5],
cheaterslope: 2
}, {
type: 'contourcarpet',
a: [1, 1, 1, 3, 3, 3, 5, 5, 5],
b: [1, 2, 3, 1, 2, 3, 1, 2, 3],
z: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}, {
type: 'contourcarpet',
a: [1, 1, 1, 3, 3, 3, 5, 5, 5],
b: [1, 2, 3, 1, 2, 3, 1, 2, 3],
z: [1, 4, 7, 2, 5, 8, 3, 6, 9],
contours: {coloring: 'lines'}
}])
.then(function() {
expect(getIndices()).toEqual([1, 2]);
return Plotly.restyle(gd, 'visible', false, [1]);
})
.then(function() {
expect(getIndices()).toEqual([2]);
return Plotly.restyle(gd, 'visible', true, [1]);
})
.then(function() {
expect(getIndices()).toEqual([1, 2]);
})
.catch(fail)
.then(done);
Copy link
Contributor

Choose a reason for hiding this comment

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

one more s/fail/failTest - we must be getting pretty close 🤞

});
});