Added Dynamic Search and Filter Button in Challenge List Page

[wahid18-maqs]

Description

This PR introduces two new features to the Challenge List page on the EvalAI platform:

1. Dynamic Search Function

• A dynamic search bar has been implemented to allow users to search through Ongoing Challenges, Upcoming Challenges, and Past Challenges within their respective tabs.
• As the user types, the challenge list will be filtered based on the search query, providing a faster and more efficient way to navigate through challenges.

2. Filter Button

• A Filter button has been added that enables users to filter challenges based on specific criteria (e.g., organization name, tags, start date, and end date).
• This enhances the user experience by allowing for more precise filtering options.

Motivation

The addition of the dynamic search function and filter button significantly improves the user experience when navigating the challenge list on EvalAI. With the increasing number of hosted challenges, it is essential to provide users with efficient ways to find relevant challenges. These features aim to enhance usability and accessibility, making EvalAI more user-friendly.

Changes Made in Files

frontend/src/views/web/challenge-list.html

• Added a Search and Filter Bar at the top.
• Implemented a Search Bar for real-time filtering of challenges.
• Added a Filter Button to toggle the visibility of a filter side panel.
• Introduced a toggleable Filter Panel:
  • Filters include Organization, Tags, and sorting options like Start Date and End Date.
  • Added Apply and Reset buttons inside the panel.
• Integrated filter pipe into ongoing, upcoming, and past challenge sections for dynamic search.
• Displayed a conditional message when no challenges match the applied search or filter criteria.

frontend/src/js/controllers/challengeListCtrl.js

• Filtering & Sorting:
  • Organization and tag-based filtering.
  • Sort by start/end date.
• UI Responsiveness:
  • Manual $scope.$apply() and $timeout() for safe asynchronous updates.
• API Handling:
  • Graceful fallback for missing data and Basic error messaging (vm.errorMessage).
• Time Zone & Date Handling:
  • Parsed start_date and end_date as Date objects, added time_zone and gmt_zone fields.
• State Management:
  • Centralized filter state setup, Consistent flags: vm.hasAppliedFilter, vm.isFilterVisible.

frontend/tests/controllers-test/challengeListCtrl.test.js

• Added centralized API error handling with handleApiError().
• Introduced processChallenges() to enrich challenge data (timezone, creator mapping, date objects).
• Improved pagination with recursive fetching using vm.getAllResults().
• Enhanced filtering and sorting capabilities (organization, tags, start/end date).
• Improved code readability and maintainability through modular functions.
• Added scroll-based button visibility handling with vm.scrollUp().
• Improved loader management during API calls.

frontend/src/css/modules/challenge.scss

• Added styles for Search and Filter Bar at the top.
• Added styles for the New Filter Panel.
• Improved card styling and responsive design.
• Enhanced the "No Results" display.
• Added new utility classes.

Screenshots

• Working of search function and filter button.

https://github.com/user-attachments/assets/61a262e1-c215-4e36-8cd4-8d61b30f3794

• Result of Unit Test

Checklist:

• [x] UI changes have been tested manually.
• [x] New functionality is working as expected.
• [x] No console errors or warnings.
• [x] Code is properly formatted and follows project conventions.

[wahid18-maqs]

Although no specific issue was created for this feature i have developed this to improve the usability and navigation on the challenge list page

[wahid18-maqs]

@RishabhJain2018 Sir please review it !!

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 28.07018% with 82 lines in your changes missing coverage. Please review.

Project coverage is 67.90%. Comparing base (96968d6) to head (c78e36a). Report is 1183 commits behind head on master.

Files with missing lines	Patch %	Lines
frontend/src/js/controllers/challengeListCtrl.js	28.07%	82 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4613      +/-   ##
==========================================
- Coverage   72.93%   67.90%   -5.03%     
==========================================
  Files          83       21      -62     
  Lines        5368     3689    -1679     
==========================================
- Hits         3915     2505    -1410     
+ Misses       1453     1184     -269     

Files with missing lines	Coverage Δ
frontend/src/js/controllers/challengeListCtrl.js	37.24% <28.07%> (-57.44%)	:arrow_down:

... and 64 files with indirect coverage changes

Files with missing lines	Coverage Δ
frontend/src/js/controllers/challengeListCtrl.js	37.24% <28.07%> (-57.44%)	:arrow_down:

... and 64 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 8d1444f...c78e36a. Read the comment docs.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[wahid18-maqs]

Matched the selected field and Show Filters color with the website theme, and re-added url.length in frontend/src/js/controllers/challengeListCtrl.js.

https://github.com/user-attachments/assets/403fec43-af2f-4809-b651-6e75a321634c

[RishabhJain2018]

Hi @wahid18-maqs , Thanks for the fixes. Can we please do the same formatting changes for this filter?

[wahid18-maqs]

Sure @RishabhJain2018 Sir

[wahid18-maqs]

@RishabhJain2018 Sir, I have changed the filter formatting as discussed

https://github.com/user-attachments/assets/bfede396-2a27-4a18-98a2-95347e74fa90

[wahid18-maqs]

Changes made in Unit tests for challenge list controller

• Added filter panel (organization, tags, start date, end date).
• Implemented search, sort, and applyFilter() / resetFilters() logic.
• Displayed time in GMT with timezone abbreviation using moment.tz.guess().
• Truncated long descriptions via isLarge flag.
• Added scroll-to-top visibility logic.
• Improved error handling, loader states, and digest cycle triggers.
• Wrote comprehensive unit tests for ChallengeListCtrl.
• Covered filtering, sorting, and edge cases.
• Mocked dependencies ($templateCache, moment, utils) for isolation.
• Enhanced test coverage and controller reliability.

Screenshot

[wahid18-maqs]

@RishabhJain2018 Sir I have made updates to unit testing code and improved CSS styles while following the organization's code structure and conventions. Review it!!

[RishabhJain2018]

Okay, thanks! Hey @akanshajain231999 , Can you please review this?

[wahid18-maqs]

Hi, @RishabhJain2018 Sir @akanshajain231999 Ma'am just checking in — are there any changes or updates you'd like me to make?