text search functionality#1325
Conversation
WalkthroughAdds a ChangesTag Search Filtering Feature
OpenAPI JSON Formatting
Sequence Diagram(s)sequenceDiagram
participant User
participant Navbar
participant searchSlice
participant AITagging
User->>Navbar: types in search input
Navbar->>searchSlice: dispatch setTagSearchQuery(value)
searchSlice-->>AITagging: tagQuery propagates via Redux state
AITagging->>AITagging: useMemo recomputes filteredImages (case-insensitive match)
AITagging-->>User: ChronologicalGallery with filtered count OR no-matches message
User->>Navbar: clicks close (X) button
Navbar->>searchSlice: dispatch clearSearch() + clearTagSearchQuery()
searchSlice-->>AITagging: tagQuery reset to ""
AITagging-->>User: full taggedImages gallery restored
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
|
1 similar comment
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/src/components/Navigation/Navbar/Navbar.tsx (1)
25-29: ⚡ Quick winReplace
anyin the Redux selector withRootState.
state: anyweakens type safety on the new search contract and can hide breakages during refactors.Suggested diff
- const searchState = useSelector((state: any) => state.search); - const isSearchActive = searchState.active; - const queryImage = searchState.queryImage; - const tagQuery = searchState.tagQuery; + const { active: isSearchActive, queryImage, tagQuery } = useSelector( + (state: RootState) => state.search + );As per coding guidelines,
**/*.{ts,tsx,js,jsx}: "Avoid 'any', use explicit types."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/Navigation/Navbar/Navbar.tsx` around lines 25 - 29, The useSelector hook in the Navbar component is using `any` as the type parameter for the Redux state, which weakens type safety and can hide potential breakages during refactors. Replace the `state: any` parameter in the useSelector call with the proper `RootState` type from your Redux store configuration. This ensures the selector has explicit type information and aligns with the coding guideline to avoid using `any` in TypeScript files.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/pages/AITagging/AITagging.tsx`:
- Around line 26-35: Add automated tests for the tag-search filtering and
three-state rendering functionality in AITagging.tsx. Create test cases
covering: the empty dataset state (when taggedImages is empty), the no-match
state (when tagQuery returns no results), and the matched-results state
including case-insensitive tag matching (verifying that the filteredImages
useMemo correctly filters based on tagQuery.toLowerCase() and
tag.toLowerCase().includes()). Include tests for the clear/reset behavior of the
tag search functionality to ensure the UI properly renders all three states as
described in the component's conditional rendering logic around lines 72-90.
- Around line 27-35: The tag query filtering is inconsistent in its whitespace
handling. The early-return check trims the query, but the filter assignment does
not, causing inputs with leading/trailing whitespace like " cat " to fail to
match tags. In the filter logic around line 27-29, change the assignment of
variable q to apply trim() before toLowerCase(), so that the query is normalized
consistently. The same issue applies at the consolidated site around lines
83-85, where the same pattern of whitespace normalization needs to be applied
when assigning the query variable for filtering.
---
Nitpick comments:
In `@frontend/src/components/Navigation/Navbar/Navbar.tsx`:
- Around line 25-29: The useSelector hook in the Navbar component is using `any`
as the type parameter for the Redux state, which weakens type safety and can
hide potential breakages during refactors. Replace the `state: any` parameter in
the useSelector call with the proper `RootState` type from your Redux store
configuration. This ensures the selector has explicit type information and
aligns with the coding guideline to avoid using `any` in TypeScript files.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: cd06c59d-2203-4df3-9b56-ce0c51e32045
📒 Files selected for processing (4)
docs/backend/backend_python/openapi.jsonfrontend/src/components/Navigation/Navbar/Navbar.tsxfrontend/src/features/searchSlice.tsfrontend/src/pages/AITagging/AITagging.tsx
| const filteredImages = useMemo(() => { | ||
| if (!tagQuery.trim()) return taggedImages; | ||
|
|
||
| const q = tagQuery.toLowerCase(); | ||
|
|
||
| return taggedImages.filter((img) => | ||
| img.tags?.some((tag) => tag.toLowerCase().includes(q)) | ||
| ); | ||
| }, [taggedImages, tagQuery]); | ||
| const { |
There was a problem hiding this comment.
Add automated tests for the new tag-search behavior and three-state rendering.
This introduces core feature logic (query filtering + conditional UI branches) without corresponding tests in this cohort. Please add tests for: empty dataset state, no-match state, and matched-results state (including case-insensitive matching and clear/reset behavior).
As per coding guidelines, **/*: "Ensure that test code is automated, comprehensive, and follows testing best practices" and "Verify that all critical functionality is covered by tests."
Also applies to: 72-90
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/AITagging/AITagging.tsx` around lines 26 - 35, Add
automated tests for the tag-search filtering and three-state rendering
functionality in AITagging.tsx. Create test cases covering: the empty dataset
state (when taggedImages is empty), the no-match state (when tagQuery returns no
results), and the matched-results state including case-insensitive tag matching
(verifying that the filteredImages useMemo correctly filters based on
tagQuery.toLowerCase() and tag.toLowerCase().includes()). Include tests for the
clear/reset behavior of the tag search functionality to ensure the UI properly
renders all three states as described in the component's conditional rendering
logic around lines 72-90.
Source: Coding guidelines
| if (!tagQuery.trim()) return taggedImages; | ||
|
|
||
| const q = tagQuery.toLowerCase(); | ||
|
|
||
| return taggedImages.filter((img) => | ||
| img.tags?.some((tag) => tag.toLowerCase().includes(q)) | ||
| ); | ||
| }, [taggedImages, tagQuery]); | ||
| const { |
There was a problem hiding this comment.
Normalize whitespace before filtering/tag-search title checks.
The filter uses trim() only for the early-return check, then matches with the untrimmed query. Inputs like " cat " incorrectly return no results.
Suggested diff
const filteredImages = useMemo(() => {
- if (!tagQuery.trim()) return taggedImages;
-
- const q = tagQuery.toLowerCase();
+ const q = tagQuery.trim().toLowerCase();
+ if (!q) return taggedImages;
return taggedImages.filter((img) =>
img.tags?.some((tag) => tag.toLowerCase().includes(q))
);
}, [taggedImages, tagQuery]);Also applies to: 83-85
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/AITagging/AITagging.tsx` around lines 27 - 35, The tag
query filtering is inconsistent in its whitespace handling. The early-return
check trims the query, but the filter assignment does not, causing inputs with
leading/trailing whitespace like " cat " to fail to match tags. In the filter
logic around line 27-29, change the assignment of variable q to apply trim()
before toLowerCase(), so that the query is normalized consistently. The same
issue applies at the consolidated site around lines 83-85, where the same
pattern of whitespace normalization needs to be applied when assigning the query
variable for filtering.
1 participant
Addressed Issues:
Fixes #(TODO:issue number)
Screenshots/Recordings:
TODO: If applicable, add screenshots or recordings that demonstrate the interface before and after the changes.
Additional Notes:
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
Checklist
Summary by CodeRabbit
New Features
Documentation