Implement "See More" Functionality for Search Results

[JustinhSE]

Overview

Currently, our application only displays the top 5 search results for verse similarity. We need to enhance this feature to allow users to view more results in a paginated manner. This will improve user experience by providing access to a broader range of similar verses while maintaining a clean and manageable interface.

Tasks

1. Modify app.py to return more than 5 results:

   • Increase the number of results returned to a maximum of 20.
   • Ensure only results with similarity percentages higher than 10% are included.

2. Update the VerseSearch component in the frontend:

   • Initially display only the top 5 results.
   • Add a "See More" button below the initial results.
   • Implement logic to show 5 more results each time the "See More" button is clicked.
   • Limit the "See More" functionality to a maximum of 3 clicks (15 additional results total).
   • Hide the "See More" button when all available results are displayed or after 3 clicks.

3. Update the UI to accommodate the new feature:

   • Style the "See More" button to match the existing design.
   • Implement smooth transitions when new results are loaded.

4. Add error handling:

   • Handle cases where fewer than 5 additional results are available.

[anjali-vaish]

@JustinhSE I'd like to work on this. Could you please assign this to me. Thanks!

[rairohit17]

@JustinhSE i would like to work on this "see more " functionality

Proposed Approach:

Backend:

Modify app.py to return up to 20 similar verses.

Frontend:

Update the VerseSearch component to:

1. Initially display the top 5 results.
2. Implement filtering to filter verses into an array containing verses with a similarity higher than 10%.
3. Add a "See More" button to load 5 additional results each time it's clicked, with a maximum of 3 clicks (15 additional results).
4. Implement a visibleCount state to track how many results to show. Hide the button when all results are displayed or after 3 clicks.