Selected filters should be added to search box in a user-friendly way

[damianmoore]

AC:

• Each selected filter drawn within a box in the search box, nicely styled
• Icon signifying each type of filter
• The box has a cross to remove the filter
• Search box needs to grow vertically when many are selected
• Range values should show one box with an updating number range
• Range value box should be removed when slider has been expanded to the extent that it is no longer performing any filtering
• Icon to clear all filters

[LukeDeaves]

In addition to the box having a cross to remove the filter, a "Clear" box (or cross at the end of the row or similar) which clears all filters would be good.

[damianmoore]

Yep, good call to have a "clear all" cross. Thanks!

[damianmoore]

@GyanP Please take a look at the range values first. A range slider widget is required for Aperture, Exposure, ISO Speed and Focal Length filters.

This is how it looks at the moment but it is not ideal. It is filtering using AND rather than OR so if you select more than one aperture you will get no results.

This is how I would like the fields mentioned above to look, using Aperture as an example. The user should be able to drag the two handles of the slider to select the minimum and maximum values to filter by. I the search box there will only be one tag shown for each filter (aperture in this case) and it will show the range that's selected in the slider. If the two slider handles are pushed to either end then no filtering is being applied and the tag should be removed from the search bar.

The QuaphQL queries will need to be updated to account for these changes. We have Chakra widgets installed and used elsewhere. They have a Slider widget https://chakra-ui.com/docs/form/slider but it doesn't seem like it's able to have two handles for selecting a range. You might find it useful to extend what is already there though.