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

Jump to bottom

image: constrain axes to domain, apply defaults whenever an image is present #4313

Merged
merged 6 commits into from
Oct 29, 2019
Merged

image: constrain axes to domain, apply defaults whenever an image is present #4313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2306880
image: smart default layout to constrain y axis to domain
antoinerg Oct 28, 2019
6ad80ab
image: document smart layout default to constrain to domain
antoinerg Oct 28, 2019
8ef17c3
image: apply layout defaults if an image is present at all
antoinerg Oct 29, 2019
d1eca2c
image: test that axis default constrain: 'domain' is applied to x axis
antoinerg Oct 29, 2019
31dbc8e
fix to make sure axis layout defaults are used when no image present
antoinerg Oct 29, 2019
29cf98f
fix to set scaleanchorDflt and constrainDflt to undefined when no ima…
antoinerg Oct 29, 2019
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
3 changes: 2 additions & 1 deletion src/plots/cartesian/constraints.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ exports.handleConstraintDefaults = function(containerIn, containerOut, coerce, o
var allAxisIds = opts.allAxisIds;
var layoutOut = opts.layoutOut;
var scaleanchorDflt = opts.scaleanchorDflt;
var constrainDflt = opts.constrainDflt;
var constraintGroups = layoutOut._axisConstraintGroups;
var matchGroups = layoutOut._axisMatchGroups;
var axId = containerOut._id;
Expand All @@ -31,7 +32,7 @@ exports.handleConstraintDefaults = function(containerIn, containerOut, coerce, o

// coerce the constraint mechanics even if this axis has no scaleanchor
// because it may be the anchor of another axis.
var constrain = coerce('constrain');
var constrain = coerce('constrain', constrainDflt);
Lib.coerce(containerIn, containerOut, {
constraintoward: {
valType: 'enumerated',
Expand Down
34 changes: 19 additions & 15 deletions src/plots/cartesian/layout_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
var yaMustDisplay = {};
var yaMustNotReverse = {};
var yaMayReverse = {};
var yaMustNotScaleanchor = {};
var yaMayScaleanchor = {};
var axHasImage = {};
var outerTicks = {};
var noGrids = {};
var i, j;
Expand Down Expand Up @@ -80,17 +79,13 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
} else {
if(yaName) yaMayHide[yaName] = true;
}
yaMustNotScaleanchor[yaName] = true;
} else if(trace.type === 'image') {
if(yaName) {
yaMayReverse[yaName] = true;
yaMayScaleanchor[yaName] = true;
}
if(yaName) axHasImage[yaName] = true;
if(xaName) axHasImage[xaName] = true;
} else {
if(yaName) {
yaMustDisplay[yaName] = true;
yaMustNotReverse[yaName] = true;
yaMustNotScaleanchor[yaName] = true;
}

if(!traceIs(trace, 'carpet') || (trace.type === 'carpet' && !trace._cheater)) {
Expand Down Expand Up @@ -201,7 +196,11 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
(axLetter === 'y' && !yaMustDisplay[axName] && yaMayHide[axName]);

var reverseDflt =
(axLetter === 'y' && !yaMustNotReverse[axName] && yaMayReverse[axName]);
(axLetter === 'y' &&
(
(!yaMustNotReverse[axName] && yaMayReverse[axName]) ||
axHasImage[axName]
));

var defaultOptions = {
letter: axLetter,
Expand Down Expand Up @@ -303,16 +302,21 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
axLayoutIn = layoutIn[axName];
axLayoutOut = layoutOut[axName];

var scaleanchorDflt = null;
if(axLetter === 'y' && !axLayoutIn.hasOwnProperty('scaleanchor') &&
!yaMustNotScaleanchor[axName] && yaMayScaleanchor[axName]
) {
var scaleanchorDflt;
if(axLetter === 'y' && !axLayoutIn.hasOwnProperty('scaleanchor') && axHasImage[axName]) {
scaleanchorDflt = axLayoutOut.anchor;
}
} else {scaleanchorDflt = undefined;}

var constrainDflt;
Copy link
Contributor

@etpinard etpinard Oct 29, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

I think we need to reset to null as we're in a loop:

var axNames = ['xaxis', 'yaxis']

for(var i = 0; i < axNames.length; i++) {
  var dflt;
  if(axNames[i] === 'xaxis') {
    dflt = 'NEW DEFAULT';
  }
  console.log(dflt)
}

prints NEW DEFAULT twice, whereas

var axNames = ['xaxis', 'yaxis']

for(var i = 0; i < axNames.length; i++) {
  var dflt = null;
  if(axNames[i] === 'xaxis') {
    dflt = 'NEW DEFAULT';
  }
  console.log(dflt)
}

print NEW DEFAULT and then null.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You're right but setting it to null will prevent var constrain = coerce('constrain', constrainDflt); from getting the default value. This can be seen in the previous commit d1eca2c for which test-image fails. Any suggestion/simple fix for this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Setting it to undefined make the tests pass but the linter complains :\

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The following pass all the tests (including linter). Would that be 👌 ?

        var scaleanchorDflt;
        if(axLetter === 'y' && !axLayoutIn.hasOwnProperty('scaleanchor') && axHasImage[axName]) {
            scaleanchorDflt = axLayoutOut.anchor;
        } else {scaleanchorDflt = undefined;}

        var constrainDflt;
        if(!axLayoutIn.hasOwnProperty('constrain') && axHasImage[axName]) {
            constrainDflt = 'domain';
        } else {constrainDflt = undefined;}

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:

        var scaleanchorDflt = undefined;
        if(axLetter === 'y' && !axLayoutIn.hasOwnProperty('scaleanchor') && axHasImage[axName]) {
            scaleanchorDflt = axLayoutOut.anchor;
        }

        var constrainDflt = undefined;
        if(!axLayoutIn.hasOwnProperty('constrain') && axHasImage[axName]) {
            constrainDflt = 'domain';
        }

??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Screenshot_2019-10-29_14-02-21

Copy link
Contributor

Choose a reason for hiding this comment

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

Ha that's annoying. Your latest is fine 👍

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 29cf98f

Copy link
Contributor

Choose a reason for hiding this comment

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

by latest I mean:

        var scaleanchorDflt;
        if(axLetter === 'y' && !axLayoutIn.hasOwnProperty('scaleanchor') && axHasImage[axName]) {
            scaleanchorDflt = axLayoutOut.anchor;
        } else {
            scaleanchorDflt = undefined;
        }

        var constrainDflt;
        if(!axLayoutIn.hasOwnProperty('constrain') && axHasImage[axName]) {
            constrainDflt = 'domain';
        } else {
            constrainDflt = undefined;
        }

if(!axLayoutIn.hasOwnProperty('constrain') && axHasImage[axName]) {
constrainDflt = 'domain';
} else {constrainDflt = undefined;}

handleConstraintDefaults(axLayoutIn, axLayoutOut, coerce, {
allAxisIds: allAxisIds,
layoutOut: layoutOut,
scaleanchorDflt: scaleanchorDflt
scaleanchorDflt: scaleanchorDflt,
constrainDflt: constrainDflt
});
}

Expand Down
7 changes: 4 additions & 3 deletions src/traces/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,10 @@ module.exports = {
meta: {
description: [
'Display an image, i.e. data on a 2D regular raster.',
'If only images are displayed in a subplot,',
'the y axis will be reversed (ie. `autorange: \'reversed\'`)',
'and it will have the same scale as the x axis (ie. `scaleanchor: \'x\,`)',
'By default, when an image is displayed in a subplot,',
'its y axis will be reversed (ie. `autorange: \'reversed\'`),',
'constrained to the domain (ie. `constrain: \'domain\'`)',
'and it will have the same scale as its x axis (ie. `scaleanchor: \'x\,`)',
'in order for pixels to be rendered as squares.'
].join(' ')
}
Expand Down
Binary file modified test/image/baselines/image_axis_reverse.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/image_axis_type.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/image_cat.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/image_colormodel.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/image_opacity.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/image_with_gaps.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/image_with_heatmap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/image_zmin_zmax.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion test/image/mocks/image_adventurer.json
View file
Open in desktop

Large diffs are not rendered by default.

44 changes: 38 additions & 6 deletions test/jasmine/tests/image_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,11 +116,19 @@ describe('image smart layout defaults', function() {
expect(gd._fullLayout.yaxis.autorange).toBe('reversed');
});

it('should NOT reverse yaxis if another trace is present', function() {
it('should reverse yaxis even if another trace is present', function() {
gd = {};
gd.data = [{type: 'image', z: [[[255, 0, 0]]]}, {type: 'scatter', y: [5, 3, 2]}];
supplyAllDefaults(gd);
expect(gd._fullLayout.yaxis.autorange).not.toBe('reversed');
expect(gd._fullLayout.yaxis.autorange).toBe('reversed');
});

it('should NOT reverse yaxis if it\'s already defined', function() {
gd = {};
gd.data = [{type: 'image', z: [[[255, 0, 0]]]}];
gd.layout = {yaxis: {autorange: false}};
supplyAllDefaults(gd);
expect(gd._fullLayout.yaxis.autorange).toBe(false);
});

it('should set scaleanchor to make square pixels if only images are present', function() {
Expand All @@ -130,19 +138,43 @@ describe('image smart layout defaults', function() {
expect(gd._fullLayout.yaxis.scaleanchor).toBe('x');
});

it('should NOT set scaleanchor if another trace is present', function() {
it('should set scaleanchor even if another trace is present', function() {
gd = {};
gd.data = [{type: 'image', z: [[[255, 0, 0]]]}, {type: 'scatter', y: [5, 3, 2]}];
supplyAllDefaults(gd);
expect(gd._fullLayout.yaxis.scaleanchor).toBe(undefined);
expect(gd._fullLayout.yaxis.scaleanchor).toBe('x');
});

it('should NOT set scaleanchor if it\'s already defined', function() {
gd.data = [{type: 'image', z: [[[255, 0, 0]]]}, {type: 'scatter', y: [5, 3, 2]}];
gd.data = [{type: 'image', z: [[[255, 0, 0]]]}];
gd.layout = {yaxis: {scaleanchor: 'x3'}};
supplyAllDefaults(gd);
expect(gd._fullLayout.yaxis.scaleanchor).toBe(undefined);
});

it('should constrain axes to domain if only images are present', function() {
gd = {};
gd.data = [{type: 'image', z: [[[255, 0, 0]]]}];
supplyAllDefaults(gd);
expect(gd._fullLayout.xaxis.constrain).toBe('domain');
expect(gd._fullLayout.yaxis.constrain).toBe('domain');
});

it('should constrain axes to domain even if another trace is present', function() {
gd = {};
gd.data = [{type: 'image', z: [[[255, 0, 0]]]}, {type: 'scatter', y: [5, 3, 2]}];
supplyAllDefaults(gd);
expect(gd._fullLayout.xaxis.constrain).toBe('domain');
expect(gd._fullLayout.yaxis.constrain).toBe('domain');
});

it('should NOT constrain axes to domain if it\'s already defined', function() {
gd.data = [{type: 'image', z: [[[255, 0, 0]]]}];
gd.layout = {yaxis: {constrain: false}, xaxis: {constrain: false}};
supplyAllDefaults(gd);
expect(gd._fullLayout.xaxis.constrain).toBe('range');
expect(gd._fullLayout.yaxis.constrain).toBe('range');
});
});

describe('image plot', function() {
Expand Down Expand Up @@ -489,7 +521,7 @@ describe('image hover:', function() {
zmax: [1, 1, 1],
text: [['A', 'B', 'C'], ['D', 'E', 'F']],
hovertemplate: '%{text}<extra></extra>'
}], layout: {width: 400, height: 400}};
}], layout: {width: 400, height: 400, yaxis: {constrain: 'range'}}};

Plotly.newPlot(gd, mockCopy)
.then(function() {_hover(140, 180);})
Expand Down