feat: Add single select and inverse selection to numeric range (#16722) #17372
Conversation
| @@ -0,0 +1,5 @@ | |||
| export enum SingleValueType { | |||
There was a problem hiding this comment.
@mhoustonataegis this file is missing the license. CI won't pass without it
| export enum SingleValueType { | |
| /** | |
| * Licensed to the Apache Software Foundation (ASF) under one | |
| * or more contributor license agreements. See the NOTICE file | |
| * distributed with this work for additional information | |
| * regarding copyright ownership. The ASF licenses this file | |
| * to you under the Apache License, Version 2.0 (the | |
| * "License"); you may not use this file except in compliance | |
| * with the License. You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, | |
| * software distributed under the License is distributed on an | |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| * KIND, either express or implied. See the License for the | |
| * specific language governing permissions and limitations | |
| * under the License. | |
| */ | |
| export enum SingleValueType { |
Codecov Report
@@ Coverage Diff @@
## master #17372 +/- ##
==========================================
- Coverage 76.94% 68.58% -8.37%
==========================================
Files 1042 1602 +560
Lines 56248 65331 +9083
Branches 7784 6989 -795
==========================================
+ Hits 43282 44805 +1523
- Misses 12707 18640 +5933
- Partials 259 1886 +1627
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
|
This PR is exactly what I requested with #16722. This will solve our use case well. |
junlincc
requested review from
graceguo-supercat
and removed request for
kgabryje,
michael-s-molina and
villebro
|
Code looks good, but the MIN slider UI is a bit misleading. I get that the |
@riahk I agree, this should be doable fairly easily. To achieve an inverse selection, I simply flipped around the the background colors of
Probably requires some additional fine tuning (the hovers need to also be updated), but in the absence of full support for this in the AntD component, this may be the most visually appealing solution for now. |
| /> | ||
| )} | ||
| {enableSingleMinValue && ( | ||
| <Slider |
There was a problem hiding this comment.
As a follow-up to my earlier comment about swapping bg colors: I played around with the styles here to give an idea of what that might look like!
const StyledMinSlider = styled(Slider)`
.ant-slider-rail {
background-color: #99e7f0;
}
.ant-slider-track {
background-color: #f5f5f5;
}
&:hover {
.ant-slider-rail {
background-color: #99e7f0;
}
.ant-slider-track {
background-color: #f5f5f5;
}
}
`;
Result:
|
To maintain the visual distinction between a min and max filter, it may make more sense to flip the values on the range rather than flipping the highlighted section. For example, there is no visual distinction between a min and max slider if the highlighted section is flipped. Here, "Months" is a max range and "Years" is a min range, but there is no visual way to discern the difference:
However, with the range values flipped, the highlighted section could continue to exist on the right while also corresponding to the correct filtered values:
This would result in the visual distinction between a min and max slider:
|
There is no explicit inverse selection supported here. |
This design is a better user experience. This visual pattern allows for realization of minimum and maximum. By allowing the visual distinction between min and max, there is not a need to add an indicator next to the label of whether the slider is MIN/MAX/EXACT. With the visual distinction and not textual, it will be an easier transition when moving too multilingual in future releases. Also, the above visual pattern matches the range pattern below. I feel @mhoustonataegis suggested implementation would be the best. |
|
@mhoustonataegis @BillGreerUX These are excellent points! I like having the colors inverted for that distinction. What's confusing me still is that it's not clear to me which ends of the scale are high/low. With the My suggestion is to remove the In this case, both sliders have the low value on the left, and the color inversion provides a distinction while still clearly indicating the inclusive range for the filter. Thoughts? |
Yes, my suggestion included removing the |
… highlighted range value accurately reflects the applied filter.
superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
Outdated
Show resolved
Hide resolved
SUMMARY
Support the ability to filter by numeric range as a single maximum, minimum, or exact value.
Filters config form BEFORE:
Range filter plugin BEFORE:
Filters config form AFTER:
Range filter plugin AFTER, using MAXIMUM value:
Range filter plugin AFTER, using EXACT value:
Range filter plugin AFTER, using MINIMUM value:
TESTING INSTRUCTIONS
Using a numerical range filter, choose "Single Value" in the advanced section. This will reveal 3 single value type options supporting the following behaviors:
* Minimum: Filter values greater than or equal to the selected value on the range slider.
* Exact: Filter values equal to the selected value on the range slider.
* Maximum: Filter values less than or equal to the selected value on the range slider.
If "Single Value" is not checked, the previous default range slider behavior applies.
If "Single Value" is checked and Minimum is chosen, the slider should support a single thumb sliding from the right hand side of the control.
If "Single Value" is checked and Exact is chosen, the slider should support a single thumb sliding in the middle of the control with no highlighted range displayed.
If "Single Value" is checked and Maximum is chosen, the slider should support a single thumb sliding from the left hand side of the control.
ADDITIONAL INFORMATION