Website/sort and search

[ericcornelissen]

Addresses the problem described in and closes #908

Previously, when there was a search query and you pressed on of the sort buttons (color or alphabetically), the search query was more or less forgotten. My solution is to disable the sort buttons when there is an active search query, as they're not relevant anyway. They're not relevant because we use a fuzzy search algorithm which orders the icons resulting from the search based on a scoring system. Note that when the search query is removed (i.e. query === "") the ordering that was last active is used automatically.

[birjj]

Hmm. Not sure I agree with disabling the ability to sort when searching. I sometimes find myself searching for a subcategory (e.g. goo for Google) and then wanting an overview of what I'm looking at; since the sorting by the fuzzy search is rather opaque, I then enable alphabetical/color sorting to have an easier time skimming the matches.

I'd prefer having the sorting how it is now (search update = fuzzy, then users can enable color/alphabetical sorting for the current matches) while reversing to whichever mode was enabled pre-search on empty searches (as you've done in this PR). It would be nice to be able to disable the color/alphabetical sorting to revert to fuzzy by clicking the enabled sorting mode, but that's a bit trickier.

[ericcornelissen]

I'd prefer having the sorting how it is now (search update = fuzzy, then users can enable color/alphabetical sorting for the current matches)

Alright, that could be possible. However, then what happens when I 1) searched for "goo", 2) order alphabetically, and finally 3) add "g" to my search query. Does it go back to fuzzy search or should it maintain the alphabetical search?

It would be nice to be able to disable the color/alphabetical sorting to revert to fuzzy, but that's a bit trickier.

It would be indeed, but I think we should try to create a button (or something else?) to allow for this. If not in this PR, then in another one.

[birjj]

However, then what happens when I 1) searched for "goo", 2) order alphabetically, and finally 3) add "g" to my search query.

When (or if) a button is created for going back to fuzzy search, the preferable way would probably be to have the sorting mode remembered when changing the search (and going back to whichever non-fuzzy mode was last chosen when the search empties while fuzzy is chosen), such that adding "g" would maintain the alphabetical sorting. Until then, I think reverting to fuzzy mode when the search updates is preferable to not being able to choose color/alphabetical sorting while searching.

[ericcornelissen]

When (or if) a button is created for going back to fuzzy search, the preferable way would probably be to have the sorting mode remembered when changing the search (and going back to whichever non-fuzzy mode was last chosen when the search empties while fuzzy is chosen), such that adding "g" would maintain the alphabetical sorting.

In that case I feel like a button for the "fuzzy sort ordering" is more or less a requirement... I've got a few options listed below:

Common icon for a filter. I think this could work but it might not be immediately obvious that it belongs to the search query. Also the filter icon doesn't really lend itself well to the button shape (which I prefer to be a square).

Common icon for searching, I think this may be clearer for the user, but still not perfect. This icon does lend itself way better to the shape of the button tho

Something completely different, the stars are supposed to represent the "relevance". So the most relevant icons according to fuzzy search will be shown first, i.e. a full start, and the least relevant icons will be shown last, i.e. empty star. I'm not sure how clear this will be to user, but I think it is a novel solution. Note that we of course don't have to use stars for this.

Personally I'm not a fan of this one, but it might signal some sort of default sorting?

Some things to note about how I would implement this:

• The button to apply the fuzzy search ordering only shows when there is a search query. This should also make it easier to understand that the two are related.
• As @birjolaxew said, when updating the search query while a certain ordering (e.g. alphabetically) is chosen, that ordering remains.
• When a search query is removed, the fuzzy search ordering button is removed, and the original ordering is applied (rather then, say, always colored ordering).
• If the user enters a search term the second time (so, a search query was entered and removed before), the fuzzy search ordering will be applied again.

[birjj]

I personally prefer the star version. It indicates a "sort by quality" to me, in this case with quality meaning quality of match.

[ericcornelissen]

I personally prefer the star version. It indicates a "sort by quality" to me, in this case with quality meaning quality of match.

Updated 😃 I also did some refactoring of the websites JavaScript. It's not perfect yet, but it makes the existing code a bit more readable

[birjj]

👍 Sorry I haven't gotten around to testing this in the last few days. It's looking good, and functions great!

Thanks for your work on this!