Redesign filter sidebar

[jazairi]

Why these changes are being introduced:

The filter sidebar can become unwieldy, as all available filters are shown at all times.

Relevant ticket(s):

https://mitlibraries.atlassian.net/browse/GDT-127

How this addresses that need:

This restyles the filter sidebar as dropdown menus. In so doing, it also changes some behavior in the filter logic:

• Number of results is listed in the filter sidebar header.
• Applied filters are highlighted (previously, the 'applied' filter was added, but we hadn't done anything with it).
• Clicking an applied filter removes that filter (this replaces the previous removal mechanism, which removed all applied filters).

Side effects of this change:

• Some tests have been updated to reflect the new logic.
• The sidebar elements have an animation that's tied to height. I've set the height to 200px and added a scroll-behavior rule if the number of filters available exceeds that height. This is somewhat different from how the advanced search sidebar works, so I wanted to draw attention to it unless there are any concerns.
• The JS for the dropdown menus is so minimal that I included it in the view as a script tag, but I'm happy to load it via Sprockets if that's preferable.

Developer

• All new ENV is documented in README
• All new ENV has been added to Heroku Pipeline, Staging and Prod
• ANDI or Wave has been run in accordance to
  our guide and
  all issues introduced by these changes have been resolved or opened as new
  issues (link to those issues in the Pull Request details above)
• Stakeholder approval has been confirmed (or is not needed)

Code Reviewer

• The commit message is clear and follows our guidelines
  (not just this pull request message)
• There are appropriate tests covering any new functionality
• The documentation has been updated or is unnecessary
• The changes have been verified
• New dependencies are appropriate or there were no changes

Requires database migrations?

NO

Includes new or updated dependencies?

NO

[coveralls]

Pull Request Test Coverage Report for Build 7835391112

• 0 of 10 (100.0%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.01%) to 99.444%

---

Totals
Change from base Build 7743295163:	0.01%
Covered Lines:	358
Relevant Lines:	360

---

💛 - Coveralls

[JPrevost]

If we can address the overlapping content before merge that would be great. If that proves hard to track down, I'd be okay with a ticket to loop back on it.

Otherwise this feels like what was requested to me and works with either mouse or keyboard navigation. 👍🏻

[JPrevost]

I'm not entirely sure why, but the scroll overlaps the content initially in Safari. If I select an element (via tab for example) it reflows the display and looks correct.

Expanded but with nothing selected the scrollbar overlaps the content

Tabbed into an element, the overlap is fixed

[JPrevost]

The hits value is a bit confusing for larger sets as displayed here.

Search for "organic chemistry" and it displays 10000 items. It should probably display something something more like 10,000+ items. I think we should expect TIMDEX API/OpenSearch to report "more than 10000 items" as "10000" and adjust the UI to anticipate that.

If you want to handle that in a separate ticket that is fine with me.

[jazairi]

The latest commit addresses the initial feedback on this, both from this review and from Darcy (I shared it with her in a meeting yesterday afternoon). There are also a couple of things that came up while I was doing some testing related to the code review/QA feedback. More details in the commit message.

I opened GDT-173 to meet Darcy's request of preserving menu state between page loads. I experimented with that a fair amount today but couldn't get it to work, and it was taking enough time that I figured a separate ticket was appropriate.