Skip to content

Axes ref cleanup #1431

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 10 commits into from
Mar 2, 2017
3 changes: 1 addition & 2 deletions src/components/colorbar/draw.js
Original file line number Diff line number Diff line change
Expand Up @@ -185,11 +185,10 @@ module.exports = function draw(gd, id) {
}

// Prepare the Plotly axis object
handleAxisDefaults(cbAxisIn, cbAxisOut, coerce, axisOptions);
handleAxisDefaults(cbAxisIn, cbAxisOut, coerce, axisOptions, fullLayout);
handleAxisPositionDefaults(cbAxisIn, cbAxisOut, coerce, axisOptions);

cbAxisOut._id = 'y' + id;
cbAxisOut._gd = gd;

// position can't go in through supplyDefaults
// because that restricts it to [0,1]
Expand Down
14 changes: 5 additions & 9 deletions src/plots/cartesian/axes.js
Original file line number Diff line number Diff line change
Expand Up @@ -328,14 +328,10 @@ axes.doAutoRange = function(ax) {

// doAutoRange will get called on fullLayout,
// but we want to report its results back to layout
var axIn = ax._gd.layout[ax._name];

if(!axIn) ax._gd.layout[ax._name] = axIn = {};

if(axIn !== ax) {
axIn.range = ax.range.slice();
axIn.autorange = ax.autorange;
}
var axIn = ax._input;
axIn.range = ax.range.slice();
axIn.autorange = ax.autorange;
Copy link
Contributor Author

@etpinard etpinard Mar 1, 2017

Choose a reason for hiding this comment

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

Now, doAutorange writes in ax._input instead of having dig in _gd.layout ... 🎉

}
};

Expand Down Expand Up @@ -1137,7 +1133,7 @@ axes.tickText = function(ax, x, hover) {
};

function tickTextObj(ax, x, text) {
var tf = ax.tickfont || ax._gd._fullLayout.font;
var tf = ax.tickfont || {};
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh. I need to double-check this.

Removing the || {} should do the trick - as axis tickfont already default to layout font, but removing || {} makes the fonts.json mock fail. Not sure why.

Copy link
Contributor Author

@etpinard etpinard Mar 2, 2017

Choose a reason for hiding this comment

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

After investigation, I'll keep the || {} fallback, if ok.

Whenever ax.showticklabels: false, ax.tickfont isn't coerced and isn't defined here.

We could make sure that tickTextObj isn't called when ax.showticklabels: false, but this requires adding a few early returns in axes.js, 3d and gl2d convert routines which I believe isn't worth it.

Copy link
Collaborator

Choose a reason for hiding this comment

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

👍


return {
x: x,
Expand Down Expand Up @@ -1347,7 +1343,7 @@ function numFormat(v, ax, fmtoverride, hover) {
if(dp) v = v.substr(0, dp + tickRound).replace(/\.?0+$/, '');
}
// insert appropriate decimal point and thousands separator
v = Lib.numSeparate(v, ax._gd._fullLayout.separators, separatethousands);
v = Lib.numSeparate(v, ax.separators, separatethousands);
}

// add exponent
Expand Down
4 changes: 2 additions & 2 deletions src/plots/cartesian/axis_defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ var autoType = require('./axis_autotype');
* data: the plot data to use in choosing auto type
* bgColor: the plot background color, to calculate default gridline colors
*/
module.exports = function handleAxisDefaults(containerIn, containerOut, coerce, options) {
module.exports = function handleAxisDefaults(containerIn, containerOut, coerce, options, layoutOut) {
var letter = options.letter,
font = options.font || {},
defaultTitle = 'Click to enter ' +
Expand Down Expand Up @@ -78,7 +78,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
handleCalendarDefaults(containerIn, containerOut, 'calendar', options.calendar);
}

setConvert(containerOut);
setConvert(containerOut, layoutOut);

var dfltColor = coerce('color');
// if axis.color was provided, use it for fonts too; otherwise,
Expand Down
58 changes: 36 additions & 22 deletions src/plots/cartesian/layout_defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,17 +115,38 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {

var bgColor = Color.combine(plot_bgcolor, layoutOut.paper_bgcolor);

var axLayoutIn, axLayoutOut;
var axName, axLayoutIn, axLayoutOut;

function coerce(attr, dflt) {
return Lib.coerce(axLayoutIn, axLayoutOut, layoutAttributes, attr, dflt);
}

axesList.forEach(function(axName) {
var axLetter = axName.charAt(0);
function getCounterAxes(axLetter) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

as promised in #1261 (comment)

Copy link
Collaborator

Choose a reason for hiding this comment

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

There are still two maps and a filter 🐎

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 5eb6202

var list = {x: yaList, y: xaList}[axLetter];

return list.map(axisIds.name2id);
}

function getOverlayableAxes(axLetter, axName) {
var list = {x: xaList, y: yaList}[axLetter];

return list.filter(function(axName2) {
return axName2 !== axName && !(layoutIn[axName2] || {}).overlaying;
})
.map(axisIds.name2id);
}

for(i = 0; i < axesList.length; i++) {
axName = axesList[i];

if(!Lib.isPlainObject(layoutIn[axName])) {
layoutIn[axName] = {};
}

axLayoutIn = layoutIn[axName] || {};
axLayoutOut = {};
axLayoutIn = layoutIn[axName];
axLayoutOut = layoutOut[axName] = {};

var axLetter = axName.charAt(0);

var defaultOptions = {
letter: axLetter,
Expand All @@ -142,29 +163,21 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {

var positioningOptions = {
letter: axLetter,
counterAxes: {x: yaList, y: xaList}[axLetter].map(axisIds.name2id),
overlayableAxes: {x: xaList, y: yaList}[axLetter].filter(function(axName2) {
return axName2 !== axName && !(layoutIn[axName2] || {}).overlaying;
}).map(axisIds.name2id)
counterAxes: getCounterAxes(axLetter),
overlayableAxes: getOverlayableAxes(axLetter, axName)
};

handlePositionDefaults(axLayoutIn, axLayoutOut, coerce, positioningOptions);

layoutOut[axName] = axLayoutOut;

// so we don't have to repeat autotype unnecessarily,
// copy an autotype back to layoutIn
if(!layoutIn[axName] && axLayoutIn.type !== '-') {
layoutIn[axName] = {type: axLayoutIn.type};
}

});
axLayoutOut._input = axLayoutIn;
Copy link
Contributor Author

@etpinard etpinard Mar 1, 2017

Choose a reason for hiding this comment

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

This is essentially the new ax_gd. This pattern is similar to other components that require a ref to the user container to mutate it on interactions (e.g. updatemenus and sliders). Moreover, IMHO this pattern is a lot better than having to keep the full gd in-sync.

}

// quick second pass for range slider and selector defaults
var rangeSliderDefaults = Registry.getComponentMethod('rangeslider', 'handleDefaults'),
rangeSelectorDefaults = Registry.getComponentMethod('rangeselector', 'handleDefaults');

xaList.forEach(function(axName) {
for(i = 0; i < xaList.length; i++) {
axName = xaList[i];
axLayoutIn = layoutIn[axName];
axLayoutOut = layoutOut[axName];

Expand All @@ -181,9 +194,10 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
}

coerce('fixedrange');
});
}

yaList.forEach(function(axName) {
for(i = 0; i < yaList.length; i++) {
axName = yaList[i];
axLayoutIn = layoutIn[axName];
axLayoutOut = layoutOut[axName];

Expand All @@ -196,5 +210,5 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
);

coerce('fixedrange', fixedRangeDflt);
});
}
};
12 changes: 8 additions & 4 deletions src/plots/cartesian/set_convert.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ function num(v) {
* also clears the autorange bounds ._min and ._max
* and the autotick constraints ._minDtick, ._forceTick0
*/
module.exports = function setConvert(ax) {
module.exports = function setConvert(ax, fullLayout) {
fullLayout = fullLayout || {};
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Second, make setConvert take in fullLayout


// clipMult: how many axis lengths past the edge do we render?
// for panning, 1-2 would suffice, but for zooming more is nice.
Expand Down Expand Up @@ -319,7 +320,7 @@ module.exports = function setConvert(ax) {

// set scaling to pixels
ax.setScale = function(usePrivateRange) {
var gs = ax._gd._fullLayout._size,
var gs = fullLayout._size,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

... so that setScale can look into _size.

axLetter = ax._id.charAt(0);

// TODO cleaner way to handle this case
Expand All @@ -328,7 +329,7 @@ module.exports = function setConvert(ax) {
// make sure we have a domain (pull it in from the axis
// this one is overlaying if necessary)
if(ax.overlaying) {
var ax2 = axisIds.getFromId(ax._gd, ax.overlaying);
var ax2 = axisIds.getFromId({ _fullLayout: fullLayout }, ax.overlaying);
ax.domain = ax2.domain;
}

Expand Down Expand Up @@ -360,7 +361,6 @@ module.exports = function setConvert(ax) {
Lib.notifier(
'Something went wrong with axis scaling',
'long');
ax._gd._replotting = false;
throw new Error('axis scaling');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

🔪 ax._gd._replotting = false; on axis scaling errors. Isn't that error throw enough?

Copy link
Collaborator

Choose a reason for hiding this comment

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

If we think the error is fatal to the plot then yes, it's enough. But if there would be a use case for catching the error and continuing, then the plot will be in an odd state without resetting gd._replotting. I suppose at the very least we can move it to fullLayout but we should really figure out a better solution than the fragile _replotting flag to prevent infinite recursion.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sounds good. I'll try to cook up a test case for this edge case. Any help would be appreciated ;)

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 9612549

}
};
Expand Down Expand Up @@ -417,6 +417,10 @@ module.exports = function setConvert(ax) {
ax._min = [];
ax._max = [];

// copy ref to fullLayout.separators so that
// methods in Axes can use it w/o having to pass fullLayout
ax.separators = fullLayout.separators;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Important: link fullLayout.separators to full axis object, so that Axes method can use it without having to know anything about fullLayout.

Copy link
Collaborator

Choose a reason for hiding this comment

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

shall we call it _separators to distinguish it from regular settings managed by supplyDefaults? That actually adds overhead (as relinkPrivateKeys will look at it) but it does seem to be the pattern we've been using.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good call here. I was thinking maybe down the road we would add per-axis separators, making this line obsolete (by supply defaults logic). But no, you're right, non-underscore keys in containers should match input attributes.

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 6e25640


// and for bar charts and box plots: reset forced minimum tick spacing
delete ax._minDtick;
delete ax._forceTick0;
Expand Down
5 changes: 2 additions & 3 deletions src/plots/geo/geo.js
Original file line number Diff line number Diff line change
Expand Up @@ -465,10 +465,9 @@ function createMockAxis(fullLayout) {
var mockAxis = {
type: 'linear',
showexponent: 'all',
exponentformat: Axes.layoutAttributes.exponentformat.dflt,
_gd: { _fullLayout: fullLayout }
exponentformat: Axes.layoutAttributes.exponentformat.dflt
};

Axes.setConvert(mockAxis);
Axes.setConvert(mockAxis, fullLayout);
return mockAxis;
}
4 changes: 1 addition & 3 deletions src/plots/plots.js
Original file line number Diff line number Diff line change
Expand Up @@ -491,12 +491,10 @@ plots.supplyDefaults = function(gd) {
// TODO may return a promise
plots.doAutoMargin(gd);

// can't quite figure out how to get rid of this... each axis needs
// a reference back to the DOM object for just a few purposes
// set scale after auto margin routine
var axList = Plotly.Axes.list(gd);
for(i = 0; i < axList.length; i++) {
var ax = axList[i];
ax._gd = gd;
ax.setScale();
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@alexcjohnson this commit is very important.

First, no need to keep ax_gd in-sync anymore!


Expand Down
22 changes: 10 additions & 12 deletions src/plots/ternary/ternary.js
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,9 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
xDomainCenter - xDomainFinal / 2,
xDomainCenter + xDomainFinal / 2
],
_id: 'x',
_gd: _this.graphDiv
_id: 'x'
};
setConvert(_this.xaxis);
setConvert(_this.xaxis, _this.graphDiv._fullLayout);
_this.xaxis.setScale();

_this.yaxis = {
Expand All @@ -189,10 +188,9 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
yDomainCenter - yDomainFinal / 2,
yDomainCenter + yDomainFinal / 2
],
_id: 'y',
_gd: _this.graphDiv
_id: 'y'
};
setConvert(_this.yaxis);
setConvert(_this.yaxis, _this.graphDiv._fullLayout);
_this.yaxis.setScale();

// set up the modified axes for tick drawing
Expand All @@ -212,12 +210,12 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
_axislayer: _this.layers.aaxis,
_gridlayer: _this.layers.agrid,
_pos: 0, // _this.xaxis.domain[0] * graphSize.w,
_gd: _this.graphDiv,
_id: 'y',
_length: w,
_gridpath: 'M0,0l' + h + ',-' + (w / 2)
});
setConvert(aaxis);
setConvert(aaxis, _this.graphDiv._fullLayout);
aaxis.setScale();

// baxis goes across the bottom (backward). We can set it up as an x axis
// without any enclosing transformation.
Expand All @@ -230,12 +228,12 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
_gridlayer: _this.layers.bgrid,
_counteraxis: _this.aaxis,
_pos: 0, // (1 - yDomain0) * graphSize.h,
_gd: _this.graphDiv,
_id: 'x',
_length: w,
_gridpath: 'M0,0l-' + (w / 2) + ',-' + h
});
setConvert(baxis);
setConvert(baxis, _this.graphDiv._fullLayout);
baxis.setScale();
aaxis._counteraxis = baxis;

// caxis goes down the right side. Set it up as a y axis, with
Expand All @@ -250,12 +248,12 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
_gridlayer: _this.layers.cgrid,
_counteraxis: _this.baxis,
_pos: 0, // _this.xaxis.domain[1] * graphSize.w,
_gd: _this.graphDiv,
_id: 'y',
_length: w,
_gridpath: 'M0,0l-' + h + ',' + (w / 2)
});
setConvert(caxis);
setConvert(caxis, _this.graphDiv._fullLayout);
caxis.setScale();

var triangleClip = 'M' + x0 + ',' + (y0 + h) + 'h' + w + 'l-' + (w / 2) + ',-' + h + 'Z';
_this.clipDef.select('path').attr('d', triangleClip);
Expand Down
8 changes: 8 additions & 0 deletions test/jasmine/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ function func(config) {
// See CONTRIBUTING.md for additional notes on reporting.
func.defaultConfig.logLevel = config.LOG_INFO;

// without this, console logs in the plotly.js code don't print to
// the terminal since karma v1.5.0
//
// See https://github.com/karma-runner/karma/commit/89a7a1c#commitcomment-21009216
func.defaultConfig.browserConsoleLogOptions = {
level: 'log'
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

Oh awesome - that'll be super helpful.


config.set(func.defaultConfig);
}

Expand Down
3 changes: 1 addition & 2 deletions test/jasmine/tests/axes_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1485,9 +1485,8 @@ describe('Test axes', function() {

describe('calcTicks and tickText', function() {
function mockCalc(ax) {
Axes.setConvert(ax);
ax.tickfont = {};
ax._gd = {_fullLayout: {separators: '.,'}};
Axes.setConvert(ax, {separators: '.,'});
return Axes.calcTicks(ax).map(function(v) { return v.text; });
}

Expand Down