Add highlighting of matches to Quick Bar items #22019
Conversation
WalkthroughWalkthroughThe changes encompass modifications to documentation, enhancements to the fuzzy matching functionality, the introduction of a new web component for displaying match segments, and improvements to testing coverage. Key updates include a refined Changes
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
src/dialogs/quick-bar/ha-quick-bar.ts (1)
378-416: LGTM! Consider adding unit tests.The new
_applyCommandItemMatchingInfoand_applyEntityItemMatchingInfofunctions encapsulate the logic for generating match tokens nicely. This promotes code reusability and maintainability.The functions also handle cases where
matchInfomay be undefined, preventing potential runtime errors.Consider adding unit tests for these functions to ensure they handle various scenarios correctly, such as:
- When
matchInfois undefined- When
matchInfohas differentindexvalues- When
matchInfohas no match segments
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- src/common/string/filter/filter.ts (1 hunks)
- src/common/string/filter/sequence-matching.ts (3 hunks)
- src/components/ha-match-segment.ts (1 hunks)
- src/dialogs/quick-bar/ha-quick-bar.ts (6 hunks)
- test/common/string/sequence_matching.test.ts (4 hunks)
Files skipped from review due to trivial changes (1)
- src/common/string/filter/filter.ts
Additional comments not posted (16)
src/components/ha-match-segment.ts (5)
1-3: LGTM!The imports are relevant and required for the component implementation. The code segment looks good.
5-7: LGTM!The custom element definition and property declaration follow the LitElement conventions correctly. The code segment looks good.
9-19: LGTM!The rendering logic in the
rendermethod is implemented correctly. It handles the case whensegmentsis empty or undefined, and it conditionally renders each segment with highlighting for matched segments. The code segment looks good.
21-29: LGTM!The static
stylesmethod correctly defines the CSS styles for the component using thecsstagged template literal. The "highlight" class styles are appropriate for visually distinguishing matched segments. The code segment looks good.
31-35: LGTM!The global interface extension for
HTMLElementTagNameMapis correctly declared, associating the custom element nameha-match-segmentwith theHaMatchSegmentclass. This ensures that the custom element can be recognized as a valid HTML tag in the DOM. The code segment looks good.test/common/string/sequence_matching.test.ts (4)
66-67: LGTM!The additional assertion to check if the result is defined before accessing its
scoreproperty improves the test's robustness and prevents potential false positives.
112-154: LGTM!The updated test case enhances the coverage by validating the
scoreandmatchInfoproperties of the filtered and sorted items. This ensures that thefuzzyFilterSortfunction calculates the scores and match information accurately in addition to filtering and sorting the items correctly.
166-246: LGTM!The test case for
tokenizeMatchInfoprovides comprehensive coverage by validating the function's behavior for various input patterns, including fully matched, partially matched, and unmatched segments. It ensures that the function correctly tokenizes the item string based on the match information.The additional test case for undefined segments is a nice touch, verifying that the function handles gracefully when no match information is provided.
Overall, the test case is well-structured and helps catch any potential issues or regressions in the tokenization logic.
248-324: LGTM!The test case for
tokenizeConcatenatedMatchInfoprovides comprehensive coverage by validating the function's behavior for various input patterns, including fully matched, partially matched, and unmatched segments for both the type and target. It ensures that the function correctly tokenizes the concatenated string based on the match information.The additional test case for undefined segments is a nice touch, verifying that the function handles gracefully when no match information is provided.
Overall, the test case is well-structured and helps catch any potential issues or regressions in the tokenization logic for concatenated strings.
src/common/string/filter/sequence-matching.ts (6)
63-123: Approve the addition of_getContinuousRunsfunction.The
_getContinuousRunsfunction is a helpful addition that analyzes and returns continuous segments of matches and gaps. The implementation looks correct and well-documented.
125-153: Approve the addition oftokenizeMatchInfofunction.The
tokenizeMatchInfofunction is a useful addition that tokenizes a matched string against match segments. It provides a way to generate match tokens indicating which parts of the string matched the original query. The implementation looks good.
155-197: Approve the addition oftokenizeConcatenatedMatchInfofunction.The
tokenizeConcatenatedMatchInfofunction is a valuable addition that tokenizes the segments of a concatenated string against match segments. It provides a way to handle cases where distinct string parts have been concatenated for a fuzzy sequential search, but need to be tokenized separately. The implementation looks correct and well-documented.
Line range hint
335-374: Approve the changes tofuzzyFilterSortfunction.The updates to the
fuzzyFilterSortfunction ensure that thescoreandmatchInfoproperties of each item are properly set based on the best match found usingfuzzySequentialMatch. The changes look good and the updated JSDoc comments provide clearer documentation on the structure of the returned items.
321-321: Approve the changes toScorableTextIteminterface.The addition of the
matchInfoproperty to theScorableTextIteminterface, along with the clear JSDoc comment, enhances the interface by allowing detailed match information to be stored alongside the score. This enables more advanced processing and display of matched results. The changes look good.
Line range hint
6-61: Approve the changes tofuzzySequentialMatchfunction.The updates to the
fuzzySequentialMatchfunction enhance its functionality by returning more detailed match information and handling multiple strings initem.strings. The changes look good.Verify that the code consuming the
fuzzySequentialMatchfunction has been updated to handle the new returned object structure containing the score and match information.Run the following script to find usages of
fuzzySequentialMatch:Verification successful
Approve the changes to
fuzzySequentialMatchfunction. Usage has been properly updated.The modifications to the
fuzzySequentialMatchfunction have been implemented correctly, and its usage throughout the codebase has been updated to handle the new returned object structure. Key observations:
- In test files (e.g., 'test/common/string/sequence_matching.test.ts'), both the
scoreandmatchInfoproperties are accessed from the returned object.- In the implementation file ('src/common/string/filter/sequence-matching.ts'), the
fuzzyFilterSortfunction correctly destructures the returned object to getscoreandmatchInfo.These findings confirm that the changes have been consistently applied and the function is being used correctly with its new return type.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Find usages of `fuzzySequentialMatch` function. # Test: Search for the function usage. Expect: Occurrences of the function call. rg --type typescript -A 5 $'fuzzySequentialMatch'Length of output: 83
Script:
#!/bin/bash # Description: Find usages of `fuzzySequentialMatch` function in TypeScript files. # Search for the function usage in .ts files echo "Searching in .ts files:" rg --type-add 'ts:*.ts' --type ts -A 5 'fuzzySequentialMatch' # Search for the function usage in .tsx files (in case of React with TypeScript) echo "Searching in .tsx files:" rg --type-add 'tsx:*.tsx' --type tsx -A 5 'fuzzySequentialMatch'Length of output: 7260
src/dialogs/quick-bar/ha-quick-bar.ts (1)
133-150: Verify the function signature change in the codebase.The updated logic to reset
matchInfowhen no filter is applied looks good. However, ensure that all calls to_getItemshave been updated to match the new signature.Run the following script to verify the function usage:
Verification successful
Verification successful:
_getItemsfunction usage is correctThe updated
_getItemsfunction insrc/dialogs/quick-bar/ha-quick-bar.tsis being called with the correct new signature (4 parameters). Other occurrences of_getItemsin the codebase are separate implementations within their respective components and are not affected by this change.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all calls to `_getItems` match the new signature. # Test: Search for the function usage. Expect: Only occurrences of the new signature. rg --type typescript -A 5 $'_getItems\\('Length of output: 76
Script:
#!/bin/bash # Description: Verify all calls to `_getItems` match the new signature. # Find TypeScript files and search for _getItems function calls fd -e ts -e tsx | xargs rg -n -C 5 '_getItems\('Length of output: 3870
Proposed change
This MR adds highlighting of (partial) matches of the filter/search text to the items display in HA's Quick Bar:
I think the same mechanism can be applied to other places with find-as-you-type-queries based on the fuzzy sequence matching as well (area picker for instance); that'd be part of later MRs, though. If this one is accepted, that is.
A couple notes:
There seems to be a bug in Chromium based browsers (screencast above is done in Firefox) where they erroneously apply word capitalization on highlighty boundaries in a very inconsistend and apparently random way. I don't know if there are CSS or DOM hacks that could be applied, perhaps anyone here as an idea? See screenshots of that super inconsistent behavior (Edge 128.0.2739.79, however a freshly installed Chrome shows the same behavior):
Search for "n":
Add an "a":
Remove the "a" again:
Supposedly the HTML is the same in step 1 and 3, but Chromium renders it differently. Also, no crazy capitalization after "Na" in step 2. 🤷
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed:
Summary by CodeRabbit
New Features
HaMatchSegmentfor visually displaying matched text segments.Bug Fixes
Documentation
FuzzyScoreto clarify the variable nature of match positions.