Omit marks that are outside of range specified by min and max. #695

shammamah-zz · 2019-11-07T17:27:26Z

Closes #517.

shammamah-zz · 2019-11-11T16:48:47Z

@alexcjohnson Right now I'm just omitting all labels that fall outside of the range specified for the slider, but I also agree with this comment you made:

I feel like there's a use case for "here are all the possible labels" and sometimes restricting the range to a subset of that without needing to also filter the labels.

Do you feel it would be a good idea to include some new property to "disable" the options for the ones outside of a specific range (but still show them)?

alexcjohnson · 2019-11-11T19:50:47Z

Do you feel it would be a good idea to include some new property to "disable" the options for the ones outside of a specific range (but still show them)?

No, I think what you did here is exactly what we want, no new options needed 🎉

src/components/RangeSlider.react.js

alexcjohnson · 2019-11-11T20:50:08Z

src/components/RangeSlider.react.js

+                            'setProps',
+                            'marks',
+                            'updatemode',
+                        ],


Not for now, but just because I'm thinking about it: I'd like us to consider moving away from omit for forwarding props to 3rd-party components, and use pick instead. IMO omit makes it too hard to follow which props are being passed on, too easy to forget to remove newly added props, and makes us lazy about accepting someone else's choice of names and values even if they don't make sense in our case. (cc @Marc-Andre-Rivet )

@alexcjohnson Agreed for DCC! There's also a bit of this happening in the table fragments / d3-format wrappers that should be looked into. Due to its generated nature I'd say whether this makes sense on HTML components would have to be evaluated independently. Can you open an issue for follow up and tag it for Dash v1.x milestone? Thanks.

tests/integration/sliders/test_sliders.py

alexcjohnson · 2019-11-11T21:01:59Z

Two more questions:

Slider too, in addition to RangeSlider?
Is there anything we can do about the labels overflowing the bounding box of the <div> we draw the slider in?

shammamah-zz · 2019-11-11T21:18:28Z

Slider too, in addition to RangeSlider?

Yes, this makes sense.

Is there anything we can do about the labels overflowing the bounding box of the <div> we draw the slider in?

I'll take a look at the CSS!

With the new padding values, the '0' selection is no longer at the very edge of the container div.

shammamah-zz · 2019-11-12T19:35:24Z

@alexcjohnson Made some changes to the padding and now it looks good!

Before:

After:

shammamah-zz · 2019-11-14T18:16:26Z

Some other changes made (cc @wbrgss since this affects how the slider CSS looks -- would love any suggestions you have):

The slider would just have a height of 0px if vertical was set to True, unless a height was specified in a stylesheet. This has now changed, as I've added a verticalHeight prop that defaults to 400px. (This won't affect any existing apps, since this prop will be overridden by a custom stylesheet.)
Whitespace is now preserved in the mark text, to allow for users to enter line breaks in the labels if they start to overlap each other.
The padding is now optional and based on tooltips.
- If the tooltip is always visible and on the top in a horizontal slider, the padding at the top is 25px; otherwise it is 0px.
- If the tooltip is always visible and on the left in a vertical slider, the padding for the left side is 25px; otherwise it is 0px.
- Padding for the bottom and the right are always 25px, since this is where the labels are.

wbrgss · 2019-11-14T20:09:41Z

@shammamah These look like good changes to me. In DDK, we're "documenting around" (private docs, see "dcc.Slider best practices" section) some of these issues, including vertical height:

When setting the marks parameter for a dcc.Slider, ensure that min <= marks[0] and max >= marks[-1] and that your range of marks matches the min/max range. Otherwise, your marks may overflow their container.

Make sure your marks are spaced correctly such that they don't overlap each other.

On vertical sliders (dcc.Slider(vertical=True, ...)), you will probably have to use the height parameter on your control to ensure your marks and labels have enough room. In other controls and components, the height parameter should usually be avoided...

I've added a verticalHeight prop that defaults to 400px

This seems like a good idea to me, and so does

Padding for the bottom and the right are always 25px, since this is where the labels are.

I think that will be adequate to prevent this situation:

wbrgss · 2019-11-14T20:11:23Z

@shammamah What about labels that overlap horizontally, because there are too many of them to fit?

If this PR doesn't handle it, handling this robustly, by e.g. staggering the labels, might be complicated so probably out of scope for this PR. But if you think it's a good idea I can make an issue for it. Maybe we should at least document it to warn people if they are making "responsive" sliders that might have squishy labels if their screen width is too small.

Whitespace is now preserved in the mark text, to allow for users to enter line breaks in the labels if they start to overlap each other.

Oh sorry, didn't see this. I think that's good for now 👍

Marc-Andre-Rivet · 2019-11-18T19:44:51Z

src/components/RangeSlider.react.js

+                  (k, mark) => mark >= this.props.min && mark <= this.props.max,
+                  this.props.marks
+              )
+            : this.props.marks;


A matter of personal preference, but you can also make this more compact with

const truncatedMarks = this.props.marks && pickBy(...);

JS does not return a boolean for &&, ||, etc. but rather the last evaluated value.

Marc-Andre-Rivet · 2019-11-18T19:53:35Z

src/components/RangeSlider.react.js

+        if (
+            !vertical &&
+            (!tooltip ||
+                !tooltip.always_visible ||
+                !contains(tooltip.placement, ['top', 'topLeft', 'topRight']))
+        ) {
+            style = merge(style, {paddingTop: '0px'});
+        }
+
+        if (
+            vertical &&
+            (!tooltip ||
+                !tooltip.always_visible ||
+                !contains(tooltip.placement, [
+                    'left',
+                    'topRight',
+                    'bottomRight',
+                ]))
+        ) {
+            style = merge(style, {paddingLeft: '0px'});
+        }
+
+        if (vertical) {
+            style = merge(style, {height: verticalHeight + 'px'});
+        }


Could be simplified with shared vertical/!vertical checks.

Minor point, could be memoized (style, vertical, tooltip) -> style to prevent style re-evaluation below

Marc-Andre-Rivet · 2019-11-18T19:54:08Z

src/components/Slider.react.js

+
+        if (vertical) {
+            style = merge(style, {height: verticalHeight + 'px'});
+        }


Same as above

Marc-Andre-Rivet · 2019-11-19T16:16:08Z

src/utils/computeSliderStyle.js

+        };
+
+        if (vertical) {
+            style = merge(style, {height: verticalHeight + 'px'});


non blocking -- style is created inside the function scope, it's fine to consider it as mutable inside the function - as long as it's treated as immutable once outside

Marc-Andre-Rivet

💃 🎚

* Omit marks that are outside of range specified by min and max. * Handle case in which marks prop is not defined. * Add test for out-of-range numbers. * Use pickBy. * Add mark at point below minimum value. * Also omit out-of-range marks for slider. * Add test for slider. * Add padding to Slider and RangeSlider containers. * Update test for persistence. With the new padding values, the '0' selection is no longer at the very edge of the container div. * Change test for always visible rangeslider. * Only add top padding if there are always-visible tooltips on the top. * Preserve whitespace in marks. * Add optional verticalHeight prop for vertical sliders. * Update slider stylesheet. * Update coordinates to reflect new padding. * Remove file. * Use fixed-width slider for rangeslider test. * Fix persistence test. * Memoize computation of style and move function to utils. * Simplify style code. * Fix eslint errors. * Modify style object directly. * Update CHANGELOG.

Shammamah Hossain added 4 commits November 7, 2019 12:25

Omit marks that are outside of range specified by min and max.

709f46c

Merge branch 'dev' into 517-rangeslider-labels

3bf1241

Handle case in which marks prop is not defined.

480511f

Add test for out-of-range numbers.

01324bf

shammamah-zz marked this pull request as ready for review November 8, 2019 19:36

shammamah-zz requested review from alexcjohnson, byronz and Marc-Andre-Rivet as code owners November 8, 2019 19:36

alexcjohnson reviewed Nov 11, 2019

View reviewed changes

src/components/RangeSlider.react.js Outdated Show resolved Hide resolved

alexcjohnson reviewed Nov 11, 2019

View reviewed changes

tests/integration/sliders/test_sliders.py Outdated Show resolved Hide resolved

shammamah-zz force-pushed the 517-rangeslider-labels branch from 6540ebb to 6a69f15 Compare November 11, 2019 21:04

Shammamah Hossain added 2 commits November 11, 2019 16:10

Use pickBy.

5cb8509

Add mark at point below minimum value.

9c94308

shammamah-zz force-pushed the 517-rangeslider-labels branch from 47d701d to 9c94308 Compare November 11, 2019 21:10

Shammamah Hossain added 4 commits November 11, 2019 16:33

Also omit out-of-range marks for slider.

396756e

Add test for slider.

4bdaf71

Add padding to Slider and RangeSlider containers.

1f5d15d

Update test for persistence.

a93fa42

With the new padding values, the '0' selection is no longer at the very edge of the container div.

Shammamah Hossain added 6 commits November 13, 2019 13:13

Change test for always visible rangeslider.

fdd296b

Only add top padding if there are always-visible tooltips on the top.

ad838fc

Preserve whitespace in marks.

c8070d4

Add optional verticalHeight prop for vertical sliders.

9e2ee6b

Update slider stylesheet.

4d03221

Merge branch 'dev' into 517-rangeslider-labels

5a6a845

Shammamah Hossain added 4 commits November 14, 2019 14:22

Update coordinates to reflect new padding.

bbb4fea

Remove file.

a0aad56

Use fixed-width slider for rangeslider test.

1261f90

Merge branch 'dev' into 517-rangeslider-labels

e4476ea

Fix persistence test.

b7dee1a

shammamah-zz requested a review from alexcjohnson November 15, 2019 15:10

Marc-Andre-Rivet reviewed Nov 18, 2019

View reviewed changes

alexcjohnson mentioned this pull request Nov 18, 2019

avoid ramda.omit for forwarding props #703

Open

Shammamah Hossain added 4 commits November 19, 2019 10:38

Memoize computation of style and move function to utils.

edc2784

Simplify style code.

df14f7d

Fix eslint errors.

b9a8fcf

Merge branch 'dev' into 517-rangeslider-labels

dfee39a

Marc-Andre-Rivet reviewed Nov 19, 2019

View reviewed changes

Modify style object directly.

3e32f28

shammamah-zz requested a review from Marc-Andre-Rivet November 19, 2019 17:02

Update CHANGELOG.

473e86a

Marc-Andre-Rivet approved these changes Nov 19, 2019

View reviewed changes

shammamah-zz merged commit b098058 into dev Nov 19, 2019

shammamah-zz deleted the 517-rangeslider-labels branch November 19, 2019 17:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Omit marks that are outside of range specified by min and max. #695

Omit marks that are outside of range specified by min and max. #695

shammamah-zz commented Nov 7, 2019

shammamah-zz commented Nov 11, 2019

alexcjohnson commented Nov 11, 2019

alexcjohnson Nov 11, 2019

Marc-Andre-Rivet Nov 18, 2019

alexcjohnson commented Nov 11, 2019

shammamah-zz commented Nov 11, 2019 •

edited

Loading

shammamah-zz commented Nov 12, 2019

shammamah-zz commented Nov 14, 2019

wbrgss commented Nov 14, 2019 •

edited

Loading

wbrgss commented Nov 14, 2019 •

edited

Loading

Marc-Andre-Rivet Nov 18, 2019

Marc-Andre-Rivet Nov 18, 2019

Marc-Andre-Rivet Nov 18, 2019

Marc-Andre-Rivet Nov 19, 2019 •

edited

Loading

Marc-Andre-Rivet left a comment

Omit marks that are outside of range specified by min and max. #695

Omit marks that are outside of range specified by min and max. #695

Conversation

shammamah-zz commented Nov 7, 2019

shammamah-zz commented Nov 11, 2019

alexcjohnson commented Nov 11, 2019

alexcjohnson Nov 11, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet Nov 18, 2019

Choose a reason for hiding this comment

alexcjohnson commented Nov 11, 2019

shammamah-zz commented Nov 11, 2019 • edited Loading

shammamah-zz commented Nov 12, 2019

shammamah-zz commented Nov 14, 2019

wbrgss commented Nov 14, 2019 • edited Loading

wbrgss commented Nov 14, 2019 • edited Loading

Marc-Andre-Rivet Nov 18, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet Nov 18, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet Nov 18, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet Nov 19, 2019 • edited Loading

Choose a reason for hiding this comment

Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

shammamah-zz commented Nov 11, 2019 •

edited

Loading

wbrgss commented Nov 14, 2019 •

edited

Loading

wbrgss commented Nov 14, 2019 •

edited

Loading

Marc-Andre-Rivet Nov 19, 2019 •

edited

Loading