Design how the various search and filtering modes interact

[robertknight]

Update 2024-01-17: See #6006 (comment) for current mocks.

Implementation sub-tasks

• Compute accurate counts for each tab when a search or filter is active
• Display tabs when a search or filter is active
• Update the UI layout of search/filter results to move them into the same panel (Update style of filter toggle buttons #6106)
• Display the search/filter panel when no search is active, but a filter is configured (Show filter controls when search panel hidden #6108)
• Update design of filter toggles to match the current mocks (Update style of filter toggle buttons #6106)
• Use minus rather than plus icon in filter toggle buttons when active (Use minus icon on button to indicate clicking it will remove filter #6107)
• Resolve issue with empty filters box when grading (Empty "Filters" panel shown when "All students" selected in LMS assignment #6109)
• Update design of search bar to match the mocks (Make search/clear buttons visually part of the input field #6130)
• Figure out how we're going to handle annotation selections (when annotations are clicked in the document) in the new design (Make selection override other filters #6117, Disable other filter controls when a selection is active #6118)
• Make sure appropriate screen reader status updates are in place as search results change (Report tab count changes to screen readers #6128)
• Test end-to-end workflow when using page ranges in VS assignments to filter annotations to selected part of book

---

Below is the original problem outline and discussion about how to update the design.

The Hypothesis client has several annotation filtering mechanisms, some of which can be active concurrently. This issue is about clarifying how those mechanisms should interact.

Available filtering mechanisms

The different filtering mechanisms that exist in the Hypothesis client are:

1. Search field. This is the input field revealed by search icon in the top bar of the client.
2. Selection. This is created when a user clicks on a highlight in the document, or a user follows a direct to an annotation.
3. User focus. This is enabled when a teacher is grading a specific student's annotations in the LMS app
4. Content focus (NEW). This is a planned new focus mode that would work similar to user focus. It would be enabled in the LMS app when launching an assignment that has been configured to use only part of a document (eg. a specific chapter or page range from a book or PDF). See Hide annotations that are outside of assignment page range #5937.

In addition to the above filtering modes, there are conditions under which an annotation that does not match the filters can still be shown. These are:

A. When an annotation is being edited. This occurs when the user creates a new annotation that does not match the current filters, and has not saved it yet.
B. When part of a conversation thread that does not match the filter is revealed by clicking a "Show more in conversation" button

Interactions between filters

The way the filters currently interact is as follows:

1. The search field and user focus filters are combined. So entering a search while user focus is active, searches within the user's annotations.
2. The selection replaces the search and user focus when active. This means that if you click on a highlight in the document, you'll see the annotation whether it matches the filter or not. This does raise the issue of whether searching in the sidebar ought to change the highlights shown in the page. Currently it doesn't.

Screenshots of individual filters

Search field (old):

Search field (new):

The new search UI moves the search bar into a panel below the header, where we avoid the problem of being very space constrained, leading to issues like #5963.

Selection:

After clicking a highlight in the document, you get this:

Note there is no indication here about why the annotation is being shown.

User focus (active):

A teacher's view when grading a student:

User focus (inactive):

If the user clicks on the "Show all" button, the above changes to:

Content focus:

The planned focus more for content would be similar to the above focus mode for users, but instead of a user's display name, you'd see "pages 100-120", or whatever the selected content range for the assignment is.

Screenshots of combined filters

Search field (old) + user focus:

This is compact but user confusion can arise from the fact there are two filters active, but only one button to clear them. Clicking the "Clear search" button both clears the search AND disables the focus mode. This means that when user focus mode is active, if you perform a search you need to perform multiple actions to get back to the previous state (user focus active, no search).

Search field (new) + user focus:

This UI takes up more space, but makes it clearer that there are two distinct filters active and it should be possible to clear only one of them at a time (TODO: Confirm that the cancel button actually does do this).

Questions to address

---

1. How should the different modes interact with one another? (eg. intersection of filters as we have with search + user focus, vs replacement as we have with selection replacing search and/or focus)
2. How should we display the combined modes?
3. When you have both a search and focus mode active, how do you clear just one of them?
4. When you make a selection, can we make it possible to clear that without losing the previous search state?
5. If we introduce a new "focus on a page range" mode, how does that get displayed?

[robertknight]

Some relevant UI from other apps that provides some kind of "filter a list with multiple active filters" UI.

Slack:

If for example you check "Without external people" you see this at the top:

The subtle-ness of the message is good. The single-action "X" would not be usable for us as the user needs a way to re-enable focus filters (eg. switch between current user / all users, assignment chapter / whole book).

Google Drive:

In Google Drive if you do a search it clears the filters (type, person etc.). The user can however press the Back button to conveniently get back to the previous filtered view.

Apple Mail:

This uses the three-bars-in-a-circle icon with pressed and unpressed states to indicate whether a filter is active.

Clicking the filter toggles all filters on / off. You can long-press for more options:

[robertknight]

Something I don't like about the current filter toggle UI is that the button can dramatically change length depending on whether the filter is active or not. This means that the text moves around in a distracting way when it is toggled, and also the hit target changes. So a fixed sized icon is a must in the replacement UI.

[robertknight]

Here is a prototype that shows where I'm going with this:

In the above screenshot we have the following filters:

• A user filter, configured but inactive
• A page range filter, configured and active
• A search filter
• Annotation type filter: Annotations tab selected (note that the count in the above screenshot reflects the total number of annotations. It should probably show only the count that match the filters)

We could include the filters in the search description, so it would read "Showing 1 result for foo in pages 10-30", or "Showing 1 result for "foo" in pages 10-30 by Robert Knight" if you had both filters active. However this starts to get quite verbose.

[robertknight]

Jared, Dan, Alejandro and myself discussed this on a call yesterday. We arrived at the designs discussed in https://hypothes-is.slack.com/archives/C07NXBDNW/p1704730651476379 (Figma: https://www.figma.com/file/sC8gPsiPLHOuaGKSCvQXUR/Hypothesis---Search-(Sidebar)?type=design&node-id=0-1&mode=design&t=94q4pMDVYxpeYYTi-0):

Some notes:

• The current single focus filter on/off toggle is replaced with individual buttons per focus state, as in Allow toggling focus filters independently #6070
• The focus toggle buttons are integrated into the filter panel. If there is not enough room to fit all the toggles, they wrap.
• Tabs are shown whether a search is active or not
• The label reporting the number of matches has been removed, since that number is displayed on the tabs (albeit divided into Annotations and Page Notes)
• When there are focus filters configured, the filter panel is always visible, but does not include the search bar if the search toggle is not pressed.
• The "X" action for the panel is removed. Instead an "X" is shown inside the search bar. The closest existing UI we have for this is the button to clear the transcript search in Via's video annotation UI.

[robertknight]

Updated designs: https://hypothes-is.slack.com/archives/C07NXBDNW/p1704925791763109
Figma: https://www.figma.com/file/sC8gPsiPLHOuaGKSCvQXUR/Hypothesis---Search-(Sidebar)?type=design&node-id=0-1&mode=design&t=FSUCRbeY6Pmy0iP3-0

[robertknight]

There is one small styling piece left to do in #6130, but otherwise this is done, so I'm going to close this and create new issues for anything else that comes up.