Skip to content

Rangeslider allow zoom on oppaxis #2364

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 44 commits into from
Mar 7, 2018
Merged

Rangeslider allow zoom on oppaxis #2364

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
519e1a7
better visual cue of zoom on oppaxis with rangeslider
TomDemulierChevret Feb 14, 2018
044e633
add a new attributes to rangeslider to switch back to the old behaviour
TomDemulierChevret Feb 16, 2018
f335258
fix check when using new data
TomDemulierChevret Feb 16, 2018
707f432
fix default value rangeslider test
TomDemulierChevret Feb 16, 2018
6a7f652
renammed new attributes to "fixedyrange"
TomDemulierChevret Feb 16, 2018
fc4f082
Introduce new attributes to axes to allow to specifiy fixed range to …
TomDemulierChevret Feb 19, 2018
92c6550
Fix broken test from attribute removal
TomDemulierChevret Feb 19, 2018
b30167c
Add missing gl attribute
TomDemulierChevret Feb 19, 2018
91caff1
Merge branch 'master' into rangeslider-allow-zoom-on-oppaxis
TomDemulierChevret Feb 19, 2018
3dd91b5
Renammed new attributes for more clarity and portability
TomDemulierChevret Feb 20, 2018
00fd1d7
Coerce of new attributes is only made for y axis
TomDemulierChevret Feb 20, 2018
5e0486a
Merge remote-tracking branch 'upstream/master' into rangeslider-allow…
TomDemulierChevret Feb 20, 2018
32488f1
Changed rangeslidermode values for more clarity
TomDemulierChevret Feb 20, 2018
bc2a40a
Switch to new rangeslider range opts (default missing)
TomDemulierChevret Feb 28, 2018
d3b6071
Added default attributes
TomDemulierChevret Feb 28, 2018
b496641
Remove old attributes
TomDemulierChevret Feb 28, 2018
149ef70
Add autorange computation
TomDemulierChevret Feb 28, 2018
54d8b58
Merge remote-tracking branch 'upstream/master' into rangeslider-allow…
TomDemulierChevret Feb 28, 2018
dd48914
Add missing check
TomDemulierChevret Feb 28, 2018
a8a3ee5
Add missing catch to test to retrieve the tracebacks
TomDemulierChevret Mar 2, 2018
0ae2831
Change yAxis rangeslider rangeOpts computation + fix yAxis rangeslide…
TomDemulierChevret Mar 2, 2018
8764e4d
Add missing check
TomDemulierChevret Mar 2, 2018
a17d3a8
Fix rangeslider test
TomDemulierChevret Mar 2, 2018
e85e3d0
Renamed parameter to keep name consistency across the file
TomDemulierChevret Mar 2, 2018
0dd8562
Merge remote-tracking branch 'upstream/master' into rangeslider-allow…
TomDemulierChevret Mar 2, 2018
3929be6
Changes requested by @alexcjohnson
TomDemulierChevret Mar 2, 2018
e2ad33d
Changes requested by @alexcjohnson
TomDemulierChevret Mar 2, 2018
df85f35
Changes requested by @etpinard
TomDemulierChevret Mar 5, 2018
fe83e07
Default range for 'fixed' rangemode value is now the range of the axe
TomDemulierChevret Mar 5, 2018
3b6b81a
Changes requested by @etpinard
TomDemulierChevret Mar 6, 2018
9de4e3e
Changes requested by @etpinard
TomDemulierChevret Mar 6, 2018
f2819c8
Changes requested by @etpinard
TomDemulierChevret Mar 6, 2018
df96a13
Merge branch 'master' into rangeslider-allow-zoom-on-oppaxis
TomDemulierChevret Mar 6, 2018
9c66f81
Add test for new attributes default and coerce
TomDemulierChevret Mar 7, 2018
f092c44
Add interaction test for new attributes
TomDemulierChevret Mar 7, 2018
041ce3d
Fixed autorange test precision
TomDemulierChevret Mar 7, 2018
23c8401
Fixed autorange test precision
TomDemulierChevret Mar 7, 2018
73560f6
Merge branch 'master' into rangeslider-allow-zoom-on-oppaxis
alexcjohnson Mar 7, 2018
c556f8c
rename range_attributes file -> oppaxis_attributes
etpinard Mar 7, 2018
43f15a7
add rangeslider.yaxis? to schema flagging it with _isSubplotObj
etpinard Mar 7, 2018
ccb6091
fix rangeslider.y.rangemode=auto and add a test image
alexcjohnson Mar 7, 2018
6a88b24
Merge branch 'rangeslider-allow-zoom-on-oppaxis' of github.com:TomDem…
alexcjohnson Mar 7, 2018
95b8c10
test turning on autorange via rangeslider attrs
alexcjohnson Mar 7, 2018
4f54f62
drop rangeslider style attributes to editType: plot and test
alexcjohnson Mar 7, 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
12 changes: 12 additions & 0 deletions src/components/rangeslider/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,5 +89,17 @@ module.exports = {
'If visible, perpendicular axes will be set to `fixedrange`'
].join(' ')
},
fixedyrange: {
valType: 'boolean',
dflt: true,
role: 'style',
editType: 'calc',
description: [
'Determine whether the perpendicular axes in the rangeslider',
'use (or not) their initial range when they are zoomed in the plot',
'To allow zoom one (or more) perpendicular axe(s) while the rangeslider is visible',
'you must set the attributes `fixedrange` to *true* on said axe(s).'
].join(' ')
},
editType: 'calc'
};
4 changes: 4 additions & 0 deletions src/components/rangeslider/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,13 @@ module.exports = {
grabAreaMaxClassName: 'rangeslider-grabarea-max',
handleMaxClassName: 'rangeslider-handle-max',

maskMinOppAxisClassName: 'rangeslider-mask-min-opp-axis',
maskMaxOppAxisClassName: 'rangeslider-mask-max-opp-axis',

// style constants

maskColor: 'rgba(0,0,0,0.4)',
maskOppColor: 'rgba(0,0,0,0.2)',
Copy link
Contributor

Choose a reason for hiding this comment

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

Just noticed this. Why pick a different opacity value here?

Copy link
Collaborator

Choose a reason for hiding this comment

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

I like this effect - you see that the y axis is constrained, but it's not shaded as darkly as the x axis constraint, which aligns with the fact that you can only affect the x axis constraint with the range slider handles.

But a different thought occurred to me on looking at this: this is semitransparent black, so does that mean range sliders don't work on a black background? That's a totally separate issue, doesn't need to be addressed in this PR, but we should look into it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Indeed, that's what I wanted to show with the 2 different values of opacity.

And yeah, the black backgrond will be an issue.


slideBoxFill: 'transparent',
slideBoxCursor: 'ew-resize',
Expand Down
1 change: 1 addition & 0 deletions src/components/rangeslider/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ module.exports = function handleDefaults(layoutIn, layoutOut, axName) {

coerce('autorange', !axOut.isValidRange(containerIn.range));
coerce('range');
coerce('fixedyrange');

// to map back range slider (auto) range
containerOut._input = containerIn;
Expand Down
72 changes: 67 additions & 5 deletions src/components/rangeslider/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,21 +136,31 @@ module.exports = function(gd) {

opts._rl = [range0, range1];

if(axisOpts.rangeslider.fixedyrange && oppAxisOpts.fixedrange === false && oppAxisOpts._rangesliderInitialRange) {
var range0OppAxis = oppAxisOpts.r2l(oppAxisOpts._rangesliderInitialRange[0]),
range1OppAxis = oppAxisOpts.r2l(oppAxisOpts._rangesliderInitialRange[1]),
distOppAxis = range1OppAxis - range0OppAxis;

opts.d2pOppAxis = function(v) {
return (v - range0OppAxis) / distOppAxis * opts._height;
};
}

// update inner nodes

rangeSlider
.call(drawBg, gd, axisOpts, opts)
.call(addClipPath, gd, axisOpts, opts)
.call(drawRangePlot, gd, axisOpts, opts)
.call(drawMasks, gd, axisOpts, opts)
.call(drawMasks, gd, axisOpts, opts, oppAxisOpts)
.call(drawSlideBox, gd, axisOpts, opts)
.call(drawGrabbers, gd, axisOpts, opts);

// setup drag element
setupDragElement(rangeSlider, gd, axisOpts, opts);

// update current range
setPixelRange(rangeSlider, gd, axisOpts, opts);
setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts);

// update margins

Expand Down Expand Up @@ -266,13 +276,17 @@ function setDataRange(rangeSlider, gd, axisOpts, opts) {
});
}

function setPixelRange(rangeSlider, gd, axisOpts, opts) {
function setPixelRange(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
var hw2 = constants.handleWidth / 2;

function clamp(v) {
return Lib.constrain(v, 0, opts._width);
}

function clampOppAxis(v) {
return Lib.constrain(v, 0, opts._height);
}

function clampHandle(v) {
return Lib.constrain(v, -hw2, opts._width + hw2);
}
Expand All @@ -291,6 +305,26 @@ function setPixelRange(rangeSlider, gd, axisOpts, opts) {
.attr('x', pixelMax)
.attr('width', opts._width - pixelMax);

if(axisOpts.rangeslider.fixedyrange && oppAxisOpts.fixedrange === false && oppAxisOpts._rangesliderInitialRange) {
var pixelMinOppAxis = opts._height - clampOppAxis(opts.d2pOppAxis(oppAxisOpts._rl[1])),
pixelMaxOppAxis = opts._height - clampOppAxis(opts.d2pOppAxis(oppAxisOpts._rl[0]));

rangeSlider.select('rect.' + constants.maskMinOppAxisClassName)
.attr('x', pixelMin)
.attr('height', pixelMinOppAxis)
.attr('width', pixelMax - pixelMin);

rangeSlider.select('rect.' + constants.maskMaxOppAxisClassName)
.attr('x', pixelMin)
.attr('y', pixelMaxOppAxis)
.attr('height', opts._height - pixelMaxOppAxis)
.attr('width', pixelMax - pixelMin);

rangeSlider.select('rect.' + constants.slideBoxClassName)
.attr('y', pixelMinOppAxis)
.attr('height', pixelMaxOppAxis - pixelMinOppAxis);
}

// add offset for crispier corners
// https://github.com/plotly/plotly.js/pull/1409
var offset = 0.5;
Expand Down Expand Up @@ -394,7 +428,7 @@ function drawRangePlot(rangeSlider, gd, axisOpts, opts) {
mockFigure.layout[oppAxisName] = {
type: oppAxisOpts.type,
domain: [0, 1],
range: oppAxisOpts.range.slice(),
range: axisOpts.rangeslider.fixedyrange && oppAxisOpts.fixedrange === false && oppAxisOpts._rangesliderInitialRange ? oppAxisOpts._rangesliderInitialRange.slice() : oppAxisOpts.range.slice(),
calendar: oppAxisOpts.calendar
};

Expand Down Expand Up @@ -435,7 +469,7 @@ function filterRangePlotCalcData(calcData, subplotId) {
return out;
}

function drawMasks(rangeSlider, gd, axisOpts, opts) {
function drawMasks(rangeSlider, gd, axisOpts, opts, oppAxisOpts) {
var maskMin = rangeSlider.selectAll('rect.' + constants.maskMinClassName)
.data([0]);

Expand All @@ -459,6 +493,34 @@ function drawMasks(rangeSlider, gd, axisOpts, opts) {
maskMax
.attr('height', opts._height)
.call(Color.fill, constants.maskColor);

// masks used for oppAxis zoom
if(axisOpts.rangeslider.fixedyrange && oppAxisOpts.fixedrange === false && oppAxisOpts._rangesliderInitialRange) {
var maskMinOppAxis = rangeSlider.selectAll('rect.' + constants.maskMinOppAxisClassName)
.data([0]);

maskMinOppAxis.enter().append('rect')
.classed(constants.maskMinOppAxisClassName, true)
.attr('y', 0)
.attr('shape-rendering', 'crispEdges');

maskMinOppAxis
.attr('width', opts._width)
.call(Color.fill, constants.maskOppColor);

var maskMaxOppAxis = rangeSlider.selectAll('rect.' + constants.maskMaxOppAxisClassName)
.data([0]);

maskMaxOppAxis.enter().append('rect')
.classed(constants.maskMaxOppAxisClassName, true)
.attr('y', 0)
.attr('shape-rendering', 'crispEdges');

maskMaxOppAxis
.attr('width', opts._width)
.style('border-top', constants.maskOppBorder)
.call(Color.fill, constants.maskOppColor);
}
}

function drawSlideBox(rangeSlider, gd, axisOpts, opts) {
Expand Down
4 changes: 4 additions & 0 deletions src/plots/cartesian/axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,6 +389,10 @@ axes.saveRangeInitial = function(gd, overwrite) {
ax._rangeInitial = ax.range.slice();
hasOneAxisChanged = true;
}
// store the initial range for the rangeslider if we zoom on oppaxis
if((isNew && ax.fixedrange === false) || (overwrite && hasChanged)) {
ax._rangesliderInitialRange = ax.range.slice();
Copy link
Collaborator

Choose a reason for hiding this comment

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

Hmm, one issue with this: _rangesliderInitialRange isn't part of the figure JSON... so if you zoom in on the y axis, then you decide you like the plot and you save it, or you snapshot it even, the rangeslider y axis will not have the same range in the snapshot or when you reopen the plot.

That seems to me to mean that we need a real attribute for the range of each y axis on the rangeslider, and perhaps even an attribute for whether to autorange that y axis on the range slider - it would be cool if the y axis could be told to autorange in the range slider even if you start out zoomed in on the main plot, wouldn't it?

BTW I came to this realization as I was thinking "what tests should we have for this feature", noting that a big part of this is drawing code so it should have an image test, but then realizing as it stands we can't make an image test because we have no mechanism to force _rangesliderInitialRange to be different from the y axis range in an image test, therefore we can't make the opp axis masks appear there.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Right, I didn't think about that.
I'll look into it.

}
}

return hasOneAxisChanged;
Expand Down
15 changes: 10 additions & 5 deletions test/jasmine/tests/range_slider_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,8 @@ describe('the range slider', function() {
bgcolor: '#fff',
borderwidth: 0,
bordercolor: '#444',
_input: layoutIn.xaxis.rangeslider
_input: layoutIn.xaxis.rangeslider,
fixedyrange: true
};

_supply(layoutIn, layoutOut, 'xaxis');
Expand All @@ -478,7 +479,8 @@ describe('the range slider', function() {
bgcolor: '#fff',
borderwidth: 0,
bordercolor: '#444',
_input: layoutIn.xaxis.rangeslider
_input: layoutIn.xaxis.rangeslider,
fixedyrange: true
};

_supply(layoutIn, layoutOut, 'xaxis');
Expand All @@ -499,7 +501,8 @@ describe('the range slider', function() {
thickness: 'invalid',
bgcolor: 42,
bordercolor: 42,
borderwidth: 'superfat'
borderwidth: 'superfat',
fixedyrange: null
}}},
layoutOut = { xaxis: {} },
expected = {
Expand All @@ -509,7 +512,8 @@ describe('the range slider', function() {
bgcolor: '#fff',
borderwidth: 0,
bordercolor: '#444',
_input: layoutIn.xaxis.rangeslider
_input: layoutIn.xaxis.rangeslider,
fixedyrange: true
};

_supply(layoutIn, layoutOut, 'xaxis');
Expand All @@ -526,7 +530,8 @@ describe('the range slider', function() {
bgcolor: '#fff',
borderwidth: 0,
bordercolor: '#444',
_input: layoutIn.xaxis.rangeslider
_input: layoutIn.xaxis.rangeslider,
fixedyrange: true
};

_supply(layoutIn, layoutOut, 'xaxis');
Expand Down