feat(openchallenges): implement edam operation filter (#2706)

Co-authored-by: Thomas Schaffter <[email protected]>
Sage-Bionetworks · Jun 13, 2024 · 95e816e · 95e816e
1 parent ecf9d4c
commit 95e816e
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 4 deletions.
diff --git a/apps/openchallenges/app/.env.example b/apps/openchallenges/app/.env.example
@@ -4,4 +4,5 @@ CSR_API_URL="http://localhost:8082/api/v1"
 DATA_UPDATED_ON="2023-09-26"
 ENVIRONMENT="production"
 GOOGLE_TAG_MANAGER_ID=""
-SSR_API_URL="http://openchallenges-api-gateway:8082/api/v1"
+SSR_API_URL="http://openchallenges-api-gateway:8082/api/v1"
+ENABLE_OPERATION_FILTER="false"
diff --git a/apps/openchallenges/app/src/config/config.json b/apps/openchallenges/app/src/config/config.json
@@ -5,5 +5,6 @@
   "dataUpdatedOn": "yyyy-mm-dd",
   "environment": "development",
   "googleTagManagerId": "",
-  "ssrApiUrl": "http://openchallenges-api-gateway:8082/api/v1"
+  "ssrApiUrl": "http://openchallenges-api-gateway:8082/api/v1",
+  "enableOperationFilter": false
 }
diff --git a/apps/openchallenges/app/src/config/config.json.template b/apps/openchallenges/app/src/config/config.json.template
@@ -5,5 +5,6 @@
   "dataUpdatedOn": "${DATA_UPDATED_ON}",
   "environment": "${ENVIRONMENT}",
   "googleTagManagerId": "${GOOGLE_TAG_MANAGER_ID}",
-  "ssrApiUrl": "${SSR_API_URL}"
+  "ssrApiUrl": "${SSR_API_URL}",
+  "enableOperationFilter": "${ENABLE_OPERATION_FILTER}"
 }
diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-data.service.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-data.service.ts
@@ -163,6 +163,7 @@ export class ChallengeSearchDataService {
   setSearchQuery(dropdown: ChallengeSearchDropdown, searchQuery = {}) {
     const setQueryMethods = {
       inputDataTypes: () => this.setEdamConceptSearchQuery(searchQuery),
+      operations: () => this.setEdamConceptSearchQuery(searchQuery),
       organizations: () => this.setOriganizationSearchQuery(searchQuery),
       platforms: () => this.setPlatformSearchQuery(searchQuery),
     };
@@ -173,6 +174,7 @@ export class ChallengeSearchDataService {
   fetchData(dropdown: ChallengeSearchDropdown, searchQuery = {}) {
     const fetchDataMethods = {
       inputDataTypes: () => this.getEdamConcepts(searchQuery),
+      operations: () => this.getEdamConcepts(searchQuery),
       organizations: () => this.getOriganizations(searchQuery),
       platforms: () => this.getPlatforms(searchQuery),
     };

diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-dropdown.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-dropdown.ts
@@ -1,10 +1,12 @@
 export type ChallengeSearchDropdown =
   | 'inputDataTypes'
+  | 'operations'
   | 'organizations'
   | 'platforms';
 
 export const CHALLENGE_SEARCH_DROPDOWNS: ChallengeSearchDropdown[] = [
   'inputDataTypes',
+  'operations',
   'organizations',
   'platforms',
 ];
diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-filter-panels.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-filter-panels.ts
@@ -6,6 +6,7 @@ import {
   challengeSubmissionTypesFilter,
   challengeIncentivesFilter,
   challengePlatformsFilter,
+  challengeOperationsFilter,
   challengeOrganizationsFilter,
   challengeOrganizersFilter,
   challengeCategoriesFilter,
@@ -39,6 +40,13 @@ export const challengeInputDataTypesFilterPanel: FilterPanel = {
   collapsed: false,
 };
 
+export const challengeOperationsFilterPanel: FilterPanel = {
+  query: 'operations',
+  label: 'Operation',
+  options: challengeOperationsFilter,
+  collapsed: false,
+};
+
 export const challengeOrganizationsFilterPanel: FilterPanel = {
   query: 'organizations',
   label: 'Organization',

diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts
@@ -58,6 +58,7 @@ export const challengeStartYearRangeFilter: Filter[] = [
 export const challengeCategoriesFilter: Filter[] = ChallengeCategoriesOptions;
 export const challengeIncentivesFilter: Filter[] = ChallengeIncentivesOptions;
 export const challengeInputDataTypesFilter: Filter[] = [];
+export const challengeOperationsFilter: Filter[] = [];
 export const challengeOrganizationsFilter: Filter[] = [];
 export const challengeOrganizersFilter: Filter[] = [];
 export const challengePlatformsFilter: Filter[] = [];

diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search.component.html b/libs/openchallenges/challenge-search/src/lib/challenge-search.component.html
@@ -170,6 +170,25 @@ <h2>Challenges</h2>
           inputId="{{ submissionTypesFilter.query }}"
         />
       </p-panel>
+      <p-divider *ngIf="enableOperationFilter"></p-divider>
+      <p-panel
+        *ngIf="enableOperationFilter"
+        header="{{ dropdownFilters['operations'].label }}"
+        [toggleable]="true"
+        [collapsed]="dropdownFilters['operations'].collapsed"
+      >
+        <openchallenges-search-dropdown-filter
+          [options]="dropdownFilters['operations'].options"
+          [optionsPerPage]="defaultDropdownOptionSize"
+          [selectedOptions]="selectedValues['operations']"
+          placeholder="{{ dropdownFilters['operations'].label.toLowerCase() + '(s)' }}  "
+          [showAvatar]="dropdownFilters['operations'].showAvatar"
+          [filterByApiClient]="true"
+          (selectionChange)="onParamChange({ operations: $event })"
+          (searchChange)="onSearchChange('operations', $event)"
+          (pageChange)="onLazyLoad('operations', $event)"
+        />
+      </p-panel>
     </div>
     <div class="main col">
       <h3>

diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search.component.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search.component.ts
@@ -32,6 +32,7 @@ import {
   challengeCategoriesFilterPanel,
   challengeIncentivesFilterPanel,
   challengeInputDataTypesFilterPanel,
+  challengeOperationsFilterPanel,
   challengeOrganizationsFilterPanel,
   challengePlatformsFilterPanel,
   challengeStartYearRangeFilterPanel,
@@ -103,6 +104,7 @@ export class ChallengeSearchComponent
   public privacyPolicyUrl: string;
   public termsOfUseUrl: string;
   public apiDocsUrl: string;
+  public enableOperationFilter: boolean;
   datePipe: DatePipe = new DatePipe('en-US');
 
   private query: BehaviorSubject<ChallengeSearchQuery> =
@@ -157,6 +159,7 @@ export class ChallengeSearchComponent
     categories: [] as ChallengeCategory[],
     incentives: [] as ChallengeIncentive[],
     inputDataTypes: [] as number[],
+    operations: [] as number[],
     organizations: [] as number[],
     platforms: [] as string[],
     status: [] as ChallengeStatus[],
@@ -178,6 +181,8 @@ export class ChallengeSearchComponent
     this.privacyPolicyUrl = this.configService.config.privacyPolicyUrl;
     this.termsOfUseUrl = this.configService.config.termsOfUseUrl;
     this.apiDocsUrl = this.configService.config.apiDocsUrl;
+    this.enableOperationFilter =
+      this.configService.config.enableOperationFilter;
     this.seoService.setData(getSeoData(), this.renderer2);
   }
 
@@ -215,6 +220,9 @@ export class ChallengeSearchComponent
       this.selectedValues['inputDataTypes'] = this.splitParam(
         params['inputDataTypes']
       ).map((idString) => +idString);
+      this.selectedValues['operations'] = this.splitParam(
+        params['operations']
+      ).map((idString) => +idString);
       this.selectedValues['organizations'] = this.splitParam(
         params['organizations']
       ).map((idString) => +idString);
@@ -230,6 +238,7 @@ export class ChallengeSearchComponent
         inputDataTypes: this.selectedValues['inputDataTypes'],
         maxStartDate: this.selectedMaxStartDate,
         minStartDate: this.selectedMinStartDate,
+        operations: this.selectedValues['operations'],
         organizations: this.selectedValues['organizations'],
         pageNumber: this.selectedPageNumber,
         pageSize: this.selectedPageSize,
@@ -251,6 +260,7 @@ export class ChallengeSearchComponent
     // update dropdown filters
     this.dropdownFilters = {
       inputDataTypes: challengeInputDataTypesFilterPanel,
+      operations: challengeOperationsFilterPanel,
       organizations: challengeOrganizationsFilterPanel,
       platforms: challengePlatformsFilterPanel,
     };
@@ -413,6 +423,9 @@ export class ChallengeSearchComponent
     this.challengeSearchDataService.setSearchQuery('inputDataTypes', {
       ids: this.selectedValues['inputDataTypes'],
     });
+    this.challengeSearchDataService.setSearchQuery('operations', {
+      ids: this.selectedValues['operations'],
+    });
     this.challengeSearchDataService.setSearchQuery('organizations', {
       ids: this.selectedValues['organizations'],
     });
@@ -428,7 +441,11 @@ export class ChallengeSearchComponent
     // fetch and update dropdown options with new data for each dropdown category
     CHALLENGE_SEARCH_DROPDOWNS.forEach((dropdown) => {
       const extraDefaultParams =
-        dropdown === 'inputDataTypes' ? { sections: [EdamSection.Data] } : {};
+        dropdown === 'inputDataTypes'
+          ? { sections: [EdamSection.Data] }
+          : dropdown === 'operations'
+          ? { sections: EdamSection.Operation }
+          : {};
 
       this.challengeSearchDataService
         .fetchData(dropdown, {

diff --git a/libs/openchallenges/config/src/lib/app.config.ts b/libs/openchallenges/config/src/lib/app.config.ts
@@ -9,6 +9,7 @@ export enum Environment {
 /* eslint-enable no-unused-vars */
 
 export interface AppConfig {
+  enableOperationFilter: boolean;
   appVersion: string;
   csrApiUrl: string;
   dataUpdatedOn: string;