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

Autosize / autorange fixes #2437

Merged
merged 11 commits into from
Mar 6, 2018
Merged

Autosize / autorange fixes #2437

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
85f0442
clean up config_test
alexcjohnson Mar 1, 2018
9f774c0
Fixes for both #2385 and #2428
alexcjohnson Mar 3, 2018
d9521e8
update test images for #2428 fix
alexcjohnson Mar 5, 2018
04806a2
update gl2d images for #2428 fix
alexcjohnson Mar 5, 2018
0ecaaaf
:hocho: commented-out code
alexcjohnson Mar 5, 2018
9913afe
clean up autorange.expand docs and var names
alexcjohnson Mar 5, 2018
f262dc9
Merge branch 'master' into react-autosize
alexcjohnson Mar 5, 2018
3875fcc
fast logic for axis expand where only data is an array
alexcjohnson Mar 5, 2018
8cf8d51
test editType for attrs that affect axis length
alexcjohnson Mar 5, 2018
cf48426
update gl2d autorange test for converged autorange calculation
alexcjohnson Mar 6, 2018
247c626
optimize fast autorange further by splitting log into its own loop
alexcjohnson Mar 6, 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
6 changes: 3 additions & 3 deletions src/components/grid/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ var gridAttrs = {
valType: 'info_array',
freeLength: true,
dimensions: 2,
items: {valType: 'enumerated', values: [counterRegex('xy').toString(), '']},
items: {valType: 'enumerated', values: [counterRegex('xy').toString(), ''], editType: 'plot'},
role: 'info',
editType: 'plot',
description: [
Expand All @@ -69,7 +69,7 @@ var gridAttrs = {
xaxes: {
valType: 'info_array',
freeLength: true,
items: {valType: 'enumerated', values: [cartesianIdRegex.x.toString(), '']},
items: {valType: 'enumerated', values: [cartesianIdRegex.x.toString(), ''], editType: 'plot'},
role: 'info',
editType: 'plot',
description: [
Expand All @@ -83,7 +83,7 @@ var gridAttrs = {
yaxes: {
valType: 'info_array',
freeLength: true,
items: {valType: 'enumerated', values: [cartesianIdRegex.y.toString(), '']},
items: {valType: 'enumerated', values: [cartesianIdRegex.y.toString(), ''], editType: 'plot'},
role: 'info',
editType: 'plot',
description: [
Expand Down
7 changes: 4 additions & 3 deletions src/components/rangeslider/calc_autorange.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@

'use strict';

var Axes = require('../../plots/cartesian/axes');
var listAxes = require('../../plots/cartesian/axis_ids').list;
var getAutoRange = require('../../plots/cartesian/autorange').getAutoRange;
var constants = require('./constants');

module.exports = function calcAutorange(gd) {
var axes = Axes.list(gd, 'x', true);
var axes = listAxes(gd, 'x', true);

// Compute new slider range using axis autorange if necessary.
//
Expand All @@ -28,7 +29,7 @@ module.exports = function calcAutorange(gd) {

if(opts && opts.visible && opts.autorange && ax._min.length && ax._max.length) {
opts._input.autorange = true;
opts._input.range = opts.range = Axes.getAutoRange(ax);
opts._input.range = opts.range = getAutoRange(ax);
}
}
};
83 changes: 52 additions & 31 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ var cartesianConstants = require('../plots/cartesian/constants');
var axisConstraints = require('../plots/cartesian/constraints');
var enforceAxisConstraints = axisConstraints.enforce;
var cleanAxisConstraints = axisConstraints.clean;
var axisIds = require('../plots/cartesian/axis_ids');
var doAutoRange = require('../plots/cartesian/autorange').doAutoRange;

var numericNameWarningCount = 0;
var numericNameWarningCountLimit = 5;
Expand Down Expand Up @@ -283,7 +283,7 @@ exports.plot = function(gd, data, layout, config) {

function positionAndAutorange() {
if(!recalc) {
enforceAxisConstraints(gd);
doAutoRangeAndConstraints();
return;
}

Expand Down Expand Up @@ -332,7 +332,7 @@ exports.plot = function(gd, data, layout, config) {
var ax = axList[i];
cleanAxisConstraints(gd, ax);

Axes.doAutoRange(ax);
doAutoRange(ax);
}

enforceAxisConstraints(gd);
Expand Down Expand Up @@ -1846,7 +1846,7 @@ function _relayout(gd, aobj) {
var axId;

function recordAlteredAxis(pleafPlus) {
var axId = axisIds.name2id(pleafPlus.split('.')[0]);
var axId = Axes.name2id(pleafPlus.split('.')[0]);
rangesAltered[axId] = 1;
return axId;
}
Expand All @@ -1857,20 +1857,21 @@ function _relayout(gd, aobj) {
throw new Error('cannot set ' + ai + 'and a parent attribute simultaneously');
}

var p = Lib.nestedProperty(layout, ai),
vi = aobj[ai],
plen = p.parts.length,
// p.parts may end with an index integer if the property is an array
pend = typeof p.parts[plen - 1] === 'string' ? (plen - 1) : (plen - 2),
// last property in chain (leaf node)
pleaf = p.parts[pend],
// leaf plus immediate parent
pleafPlus = p.parts[pend - 1] + '.' + pleaf,
// trunk nodes (everything except the leaf)
ptrunk = p.parts.slice(0, pend).join('.'),
parentIn = Lib.nestedProperty(gd.layout, ptrunk).get(),
parentFull = Lib.nestedProperty(fullLayout, ptrunk).get(),
vOld = p.get();
var p = Lib.nestedProperty(layout, ai);
var vi = aobj[ai];
var plen = p.parts.length;
// p.parts may end with an index integer if the property is an array
var pend = plen - 1;
while(pend > 0 && typeof p.parts[plen - 1] !== 'string') { pend--; }
// last property in chain (leaf node)
var pleaf = p.parts[pend];
// leaf plus immediate parent
var pleafPlus = p.parts[pend - 1] + '.' + pleaf;
// trunk nodes (everything except the leaf)
var ptrunk = p.parts.slice(0, pend).join('.');
var parentIn = Lib.nestedProperty(gd.layout, ptrunk).get();
var parentFull = Lib.nestedProperty(fullLayout, ptrunk).get();
var vOld = p.get();

if(vi === undefined) continue;

Expand Down Expand Up @@ -2093,25 +2094,18 @@ function _relayout(gd, aobj) {
flags.calc = true;
for(var groupAxId in group) {
if(!rangesAltered[groupAxId]) {
axisIds.getFromId(gd, groupAxId)._constraintShrinkable = true;
Axes.getFromId(gd, groupAxId)._constraintShrinkable = true;
}
}
}
}
}

var oldWidth = fullLayout.width,
oldHeight = fullLayout.height;

// calculate autosizing
if(gd.layout.autosize) Plots.plotAutoSize(gd, gd.layout, fullLayout);

// avoid unnecessary redraws
var hasSizechanged = aobj.height || aobj.width ||
(fullLayout.width !== oldWidth) ||
(fullLayout.height !== oldHeight);

if(hasSizechanged) flags.calc = true;
// If the autosize changed or height or width was explicitly specified,
// this triggers a redraw
// TODO: do we really need special aobj.height/width handling here?
// couldn't editType do this?
if(updateAutosize(gd) || aobj.height || aobj.width) flags.plot = true;

if(flags.plot || flags.calc) {
flags.layoutReplot = true;
Expand All @@ -2128,6 +2122,22 @@ function _relayout(gd, aobj) {
};
}

/*
* updateAutosize: we made a change, does it change the autosize result?
* puts the new size into fullLayout
* returns true if either height or width changed
*/
function updateAutosize(gd) {
var fullLayout = gd._fullLayout;
var oldWidth = fullLayout.width;
var oldHeight = fullLayout.height;

// calculate autosizing
if(gd.layout.autosize) Plots.plotAutoSize(gd, gd.layout, fullLayout);

return (fullLayout.width !== oldWidth) || (fullLayout.height !== oldHeight);
}

// for editing annotations or shapes - is it on autoscaled axes?
function refAutorange(gd, obj, axLetter) {
if(!Lib.isPlainObject(obj)) return false;
Expand Down Expand Up @@ -2313,6 +2323,17 @@ exports.react = function(gd, data, layout, config) {
var restyleFlags = diffData(gd, oldFullData, newFullData, immutable);
var relayoutFlags = diffLayout(gd, oldFullLayout, newFullLayout, immutable);

// TODO: how to translate this part of relayout to Plotly.react?
// // Setting width or height to null must reset the graph's width / height
// // back to its initial value as computed during the first pass in Plots.plotAutoSize.
// //
// // To do so, we must manually set them back here using the _initialAutoSize cache.
// if(['width', 'height'].indexOf(ai) !== -1 && vi === null) {
// fullLayout[ai] = gd._initialAutoSize[ai];
// }
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

On closer inspection I think I understand what this is about, but I don't think it's actually the correct behavior, for example if gd was resized external to plotly.js it wouldn't make sense to revert to when the plot was first drawn. I'm not quite sure how to handle this though.

Copy link
Contributor

Choose a reason for hiding this comment

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

😬 auto-sizing always has a way to make my brain hurt.

Referencing #635 which did a lot of damage the streambed 🤕

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Oy, I think we've all fought with that one at various points... If you don't mind, I'm going to leave this as it is now - with the TODO here to remind us about it if a related bug pops up, but without trying to implement anything around it. We have some great tests in config_test that I extended to make sure that all of those test cases work the same in relayout and react, I'd like to just freeze it until we have more test cases to look at.


if(updateAutosize(gd)) relayoutFlags.layoutReplot = true;

// clear calcdata if required
if(restyleFlags.calc || relayoutFlags.calc) gd.calcdata = undefined;
if(relayoutFlags.margins) helpers.clearAxisAutomargins(gd);
Expand Down
Loading