feat: highlight matched characters in search results#73
Open
d-rita wants to merge 11 commits into
Open
Conversation
- use react-highlight-words highlighter component to mark all matched characters from the filter
- refine the logic in the filterItemsPerView function with separate helper - keep shortcut matches for each matched app for highlighting
- use the matched characters and number of words in filter to define highlighting range - use the longest contiguous range, or total number of matched characters - create separate files for fuzzy matching, highlighting, and filtering functions
d-rita
force-pushed
the
DHIS2-21203/search-highlighting
branch
from
c9f824f to
cf9bf74
Compare
- update failing test to cater for results returned with new threshold - refactor returned variable for highlighting ranges
cooper-joe
approved these changes
May 22, 2026
Member
cooper-joe
left a comment
cooper-joe
left a comment
There was a problem hiding this comment.
I've reviewed the matching and I think the threshold setting is about right.
The part that felt the most off was actually the styling. I've pushed a commit which reduces the impact of the highlight, I think this helps to provide the user with a hint of "why is this returned?" while still allowing fuzzy matching to do its job.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements DHIS2-21203
Description
This PR highlights the matched characters from the filter/search term within the search results. It uses the
Highlightercomponent from the react-highlight-words dependency.For highlighting, the ranges of the matched indices returned by the fuse search are used. The idea is to highlight the parts of the returned results that best match the filter, and ignore the minor matches so as to reduce the visual noise hence improving the user experience.
The range is selected by looking at either the longest contiguous match or the total number of scattered matches within a word. Every word is isolated and matched against the filter. The number of words in the filter is also taken into account so as to determine how many words within the search result need to be highlighted.
Possibility:
use the new token search feature in fuse js to search multi-word queries.
Tasks
pickHighlightRangesTesting
yarnto install new dependency:react-highlight-wordsctrl/cmd + kor clicking the9 grid iconand try different search patterns.Screenshots