Skip to content

Replaces the custom Levenshtein-based fuzzy scoring in medicine search with Fuse.js.

Mukthanand Reddy M requested to merge chore/evaluate-fusejs-search into develop

Overview

Replaces the custom Levenshtein-based fuzzy scoring in medicine search with Fuse.js to improve typo tolerance and keep ranking logic consistent across volunteer medicine flows.

What does this MR do and why?

The previous fuzzy logic used a handwritten Levenshtein distance check. It worked, but was limited and harder to tune.
This MR switches fuzzy matching to Fuse.js while preserving existing score priorities (exact > prefix > token > substring > fuzzy) so behavior remains familiar but relevance improves for near-typo queries.

Changes Made

  • Updated shared search scoring utility to use Fuse.js fuzzy matching.
  • Removed custom Levenshtein implementation from search utility.
  • Updated unit tests for the new fuzzy behavior and edge cases.
  • Added Fuse.js dependency.
  • Updated lockfile after dependency change.
  • Added changelog entry for this migration.
  • Fixed CampSignup date-format test matcher to support rendered date format used in UI.

Technical Details

  • Fuzzy logic now uses Fuse.js with threshold-based matching.
  • Existing weighted score contract is preserved:
    • 100 exact
    • 90 starts with
    • 80 token starts with
    • 60 substring
    • 40 fuzzy
    • 0 no match
  • Added query guard for special characters before fuzzy fallback to avoid false-positive fuzzy matches.
  • Test coverage updated to validate scoring and regression safety.

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

Screenshots or Screen Recordings

Not applicable (logic, dependency, and test updates only).

How to Set Up and Validate Locally

  1. Checkout this branch.
  2. Install dependencies:
    • npm install
  3. Run targeted tests:
    • npx vitest run tests/unit/utils/searchUtils.test.ts
    • npx vitest run tests/volunteers/CampSignupPage.test.tsx
  4. Optional manual verification:
    • npm run dev
    • Verify medicine search on:
      • /volunteer/medicines
      • /volunteer/update-prescription
    • Check exact/prefix/substring/typo query ranking.
  5. Confirm lint and tests pass in your environment:
    • npm run lint
    • npm run test:run

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Exact medicine query Exact match ranks highest ✅
Prefix and token query Prefix and token ranking preserved ✅
Typo query (fuzzy) Relevant medicine returned via Fuse.js fallback ✅
Special-character query No incorrect fuzzy fallback ✅
Camp signup date rendering assertion Date matcher accepts rendered format ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • No duplicate code and use of existing components for reusability
  • i18n check passed with no hardcoded strings in codebase for i18n support
  • TypeScript types are properly defined (no any unless justified)
  • ESLint and Prettier checks pass

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • State management is appropriate (local vs global state)
  • No unnecessary re-renders (memoization used where needed)
  • Event handlers are properly cleaned up

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach
  • Responsive design considered (mobile-first if applicable)
  • Accessibility attributes included (aria-*, role, etc.)
  • Icons from lucide-react used consistently

API & Data Fetching

  • TanStack Query used for server state (if applicable)
  • Loading and error states handled
  • API types defined in src/types/api.ts
  • Axios interceptors handle auth tokens correctly
  • Use of Zod for data validations

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed
  • Errors are being toasted properly
  • Network failures handled appropriately

Documentation

  • README.md updated (if setup steps changed)
  • .env.example updated (if new env vars added)
  • CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

  • Lockfile includes npm metadata churn beyond the direct Fuse.js addition. Functional impact is limited, but reviewers should focus on dependency and search utility diffs.

Additional Notes

  • Scope is intentionally limited to medicine search utility consumers.
  • Patient and doctor search flows do not use this shared fuzzy utility and were not changed.

MR Acceptance Checklist

Evaluate this MR against the MR acceptance checklist: https://docs.gitlab.com/development/code_review/#acceptance-checklist

Edited by Mukthanand Reddy M

Merge request reports