Added Dynamic Search and Filter Button in Challenge List Page #4613

wahid18-maqs · 2025-04-26T20:56:43Z

Description

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

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.

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.

Recording.2025-04-26.181836.mp4

Result of Unit Test

Checklist:

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

wahid18-maqs · 2025-04-26T20:59:20Z

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 · 2025-04-26T21:00:01Z

@RishabhJain2018 Sir please review it !!

codecov · 2025-04-26T21:14:26Z

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 ⚠️

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%)`	⬇️

... and 64 files with indirect coverage changes

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

... 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.

🚀 New features to boost your workflow:

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

RishabhJain2018

Hi @wahid18-maqs , Thanks for the feature. Can you please match the selected field and Show filters color to match the website theme?

RishabhJain2018 · 2025-04-28T06:25:16Z

frontend/src/js/controllers/challengeListCtrl.js

                    if (data.next !== null) {
                        var url = data.next;
-                        var slicedUrl = url.substring(url.indexOf('challenges/challenge'), url.length);
+                        var slicedUrl = url.substring(url.indexOf('challenges/challenge'));


Why are we changing this line?

I have removed url.length since substring(startIndex) already slices to the end by default, making the code cleaner without changing functionality — but I'll add it back now.

frontend/src/js/controllers/challengeListCtrl.js

wahid18-maqs · 2025-04-28T18:42:27Z

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

Recording.2025-04-28.200104.mp4

RishabhJain2018 · 2025-04-28T18:47:30Z

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

wahid18-maqs · 2025-04-28T18:49:40Z

Sure @RishabhJain2018 Sir

…EvalAI into feat/search-filter

wahid18-maqs · 2025-04-29T20:23:39Z

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

filter-modified-1.mp4

RishabhJain2018 · 2025-05-02T05:36:30Z

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

-        $scope = $rootScope.$new();
-        createController = function () {
-            return $controller('ChallengeListCtrl', {$scope: $scope});
+angular.module('evalai')


Hey @wahid18-maqs , Can you please explain the code you are removing in the tests? and how you are adding the current tests?

Hi @RishabhJain2018 Sir I went through the test suite and cleaned up some old tests that were no longer relevant, as they didn’t match the current behavior of the ChallengeListCtrl controller. Some of the features they tested had been deprecated or were no longer in use, so removing those tests helped keep everything organized. I’ve also added new tests to cover the current features, especially around filtering and sorting. These tests make sure that filtering works as expected with different inputs, sorting is accurate for both start and end dates, and that the UI displays everything correctly. On top of that, I’ve made sure the app properly handles API errors ( handleApiError), so we can be confident that the app behaves as it should. Thank You!!

RishabhJain2018 · 2025-05-02T05:37:41Z

frontend/src/css/modules/challenge.scss

-  padding-top: 30px;
-  padding-bottom: 10px;
-  margin-bottom: 20px;
+    margin-top: 0px;


Why do we have so many unecessary changes here?

Here the changes i have made to improve spacing and clarity and I also updated filter buttons and tabs to ensure the consistency while maintaining EvalAI code standards

…EvalAI into feat/search-filter

wahid18-maqs · 2025-05-16T18:08:28Z

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 · 2025-05-16T19:11:26Z

@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 · 2025-05-16T20:17:27Z

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

wahid18-maqs · 2025-06-06T13:29:30Z

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

search bar and filter button feature

f555f5c

RishabhJain2018 requested changes Apr 28, 2025

View reviewed changes

added url.lenght & matched the theme

e04ea28

Merge branch 'master' into feat/search-filter

aa1840d

wahid18-maqs and others added 3 commits April 30, 2025 01:46

Merge branch 'master' into feat/search-filter

a4762ee

filter panel theme match & resolve merge conflicts

d55ace2

Merge branch 'feat/search-filter' of https://github.com/wahid18-maqs/…

8045788

…EvalAI into feat/search-filter

wahid18-maqs and others added 3 commits April 30, 2025 02:35

modified-filter input

94aac02

resolved-merged-conflict-challenge-scss

0156bf5

Merge branch 'master' into feat/search-filter

65d4941

wahid18-maqs requested a review from RishabhJain2018 April 30, 2025 12:18

Merge branch 'master' into feat/search-filter

9ec6861

RishabhJain2018 requested changes May 2, 2025

View reviewed changes

wahid18-maqs and others added 6 commits May 4, 2025 12:42

controller unit test code

e124494

Merge branch 'feat/search-filter' of https://github.com/wahid18-maqs/…

9443a93

…EvalAI into feat/search-filter

re-checked test

bae50b7

undo-ctrllist

ae0ad02

Add new test case for ChallengeListCtrl & css improved

d65dfd3

Merge branch 'master' into feat/search-filter

c78e36a

wahid18-maqs requested a review from RishabhJain2018 May 16, 2025 19:11

Uh oh!

Added Dynamic Search and Filter Button in Challenge List Page #4613

Are you sure you want to change the base?

Added Dynamic Search and Filter Button in Challenge List Page #4613

Uh oh!

Conversation

wahid18-maqs commented Apr 26, 2025

Description

Motivation

Changes Made in Files

Screenshots

Checklist:

Uh oh!

wahid18-maqs commented Apr 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wahid18-maqs commented Apr 26, 2025

Uh oh!

codecov bot commented Apr 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

RishabhJain2018 left a comment

Choose a reason for hiding this comment

Uh oh!

RishabhJain2018 Apr 28, 2025

Choose a reason for hiding this comment

Uh oh!

wahid18-maqs Apr 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

wahid18-maqs commented Apr 28, 2025

Uh oh!

RishabhJain2018 commented Apr 28, 2025

Uh oh!

wahid18-maqs commented Apr 28, 2025

Uh oh!

wahid18-maqs commented Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RishabhJain2018 May 2, 2025

Choose a reason for hiding this comment

Uh oh!

wahid18-maqs May 4, 2025

Choose a reason for hiding this comment

Uh oh!

RishabhJain2018 May 2, 2025

Choose a reason for hiding this comment

Uh oh!

wahid18-maqs May 4, 2025

Choose a reason for hiding this comment

Uh oh!

wahid18-maqs commented May 16, 2025

Changes made in Unit tests for challenge list controller

Screenshot

Uh oh!

wahid18-maqs commented May 16, 2025

Uh oh!

RishabhJain2018 commented May 16, 2025

Uh oh!

wahid18-maqs commented Jun 6, 2025

Uh oh!

Uh oh!

wahid18-maqs commented Apr 26, 2025 •

edited

Loading

codecov bot commented Apr 26, 2025 •

edited

Loading

wahid18-maqs commented Apr 29, 2025 •

edited

Loading