Advanced search

[akhuoa]

Fixes #184.

The main search has been updated to search by query only, by category using advanced search, or by combining both.

Example

https://akhuoa.github.io/pmrapp-frontend/search?query=[Ca2%2B]i&model_author=Catherine+Lloyd

[akhuoa]

Hi @agarny, I've applied the updates based on the feedback.

• Regarding the Advanced dropdown button:

  • I would replace it with a More... dropdown button;
  • I would move it to the right the search button; and
  • I would make its CSS the same as for the Description and Refresh buttons, so that it's really distinguishable from the X and search buttons.

The new More... button has been added on the right side of the search input box in 19a40ec, and the previous Advanced button has been removed in 9190ce3. The new More... button has been styled the same as other buttons in 6e1e685. And the unit tests have been updated in 626a9c8.

• When selecting a filter, I would expect to be able to remove it by clicking on the X button indeed, but also by clicking on the filter itself (i.e. the "button" that added the filter).

A click toggle function has been added for the filter term buttons in 878ce97.

• There should be a way to remove all the filters in one click. Can be a bit annoying to have to click on every single filter that we may have added.

A new Clear all button has been added in fb784c5.

• The Tab key works fine, but when it reaches a filter that is "on" then its CSS doesn't change, so we can't tell that it is the active element.

The buttons' focus styles have been updated in 954494c.

• Add a comma before the "and" in "No results for [Ca2+]i with Model authors: Alice Boit, Andrew Miller and Autumn Cuellar".

The comma-adding logic has been updated for those with 2 or more in a8bda16.
https://akhuoa.github.io/pmrapp-frontend/search?query=[Ca2%2B]i&model_author=Alice+Boit&model_author=Andrew+Miller&model_author=Autumn+Cuellar

• Remove the comma in "Click a term to add it to your search, or use the filter to narrow results."

The comma has been removed in 256f66a.

All updates are available on https://akhuoa.github.io/pmrapp-frontend.

[agarny]

Thanks @akhuoa, this looks much better! A few more comments though...

The new More... button has been added on the right side of the search input box in 19a40ec, and the previous Advanced button has been removed in 9190ce3. The new More... button has been styled the same as other buttons in 6e1e685. And the unit tests have been updated in 626a9c8.

This looks good, except that in Dark mode, we can't tell that the More... button is... a button while you can indeed in light mode. So, there is a need to refine the CSS for that type of button. In Light mode, that button has a border while it doesn't in Dark mode.

• When selecting a filter, I would expect to be able to remove it by clicking on the X button indeed, but also by clicking on the filter itself (i.e. the "button" that added the filter).
  A click toggle function has been added for the filter term buttons in 878ce97.

It works, but... when I however a filter that is currently selected, there is no hint that it can be clicked to unselect the filter. In other words, the mouse pointer is still the arrow, not the pointing finger. Also, the style of the button doesn't change so I don't get a visual clue that something can be done.

• Add a comma before the "and" in "No results for [Ca2+]i with Model authors: Alice Boit, Andrew Miller and Autumn Cuellar".

The comma-adding logic has been updated for those with 2 or more in a8bda16. https://akhuoa.github.io/pmrapp-frontend/search?query=[Ca2%2B]i&model_author=Alice+Boit&model_author=Andrew+Miller&model_author=Autumn+Cuellar

Thanks for this. I didn't mention it last time, but I think it would be good to have a final stop (everything seems to have a full stop, so we really ought to be consistent). So, here I would have:

No results for [Ca2+]i with Model authors: Alice Boit, Andrew Miller, and Autumn Cuellar.

[akhuoa]

Hi @agarny, the feedback updates are done.

Thanks @akhuoa, this looks much better! A few more comments though...

The new More... button has been added on the right side of the search input box in 19a40ec, and the previous Advanced button has been removed in 9190ce3. The new More... button has been styled the same as other buttons in 6e1e685. And the unit tests have been updated in 626a9c8.

This looks good, except that in Dark mode, we can't tell that the More... button is... a button while you can indeed in light mode. So, there is a need to refine the CSS for that type of button. In Light mode, that button has a border while it doesn't in Dark mode.

The More... button (secondary button) now has a border colour that distinguishes it from the input boxes. fc7b57f

---

• When selecting a filter, I would expect to be able to remove it by clicking on the X button indeed, but also by clicking on the filter itself (i.e. the "button" that added the filter).
  A click toggle function has been added for the filter term buttons in 878ce97.

It works, but... when I however a filter that is currently selected, there is no hint that it can be clicked to unselect the filter. In other words, the mouse pointer is still the arrow, not the pointing finger. Also, the style of the button doesn't change so I don't get a visual clue that something can be done.

The filter button styles have been updated in 616029c.

---

• Add a comma before the "and" in "No results for [Ca2+]i with Model authors: Alice Boit, Andrew Miller and Autumn Cuellar".

The comma-adding logic has been updated for those with 2 or more in a8bda16. https://akhuoa.github.io/pmrapp-frontend/search?query=[Ca2%2B]i&model_author=Alice+Boit&model_author=Andrew+Miller&model_author=Autumn+Cuellar

Thanks for this. I didn't mention it last time, but I think it would be good to have a final stop (everything seems to have a full stop, so we really ought to be consistent). So, here I would have:

No results for [Ca2+]i with Model authors: Alice Boit, Andrew Miller, and Autumn Cuellar.

The missing full stops have been added in f8a260b.

All updates are available on https://akhuoa.github.io/pmrapp-frontend/.

[agarny]

Looks very good overall! I feel like we might want to review the themes at some point, but it's not urgent (not least because I would need to think a bit more about themes).