feat(openchallenges): implement input data type filter on challenge search page

libs/openchallenges/challenge-search/src/lib/challenge-search-data.service.ts

@@ -11,6 +11,9 @@ import {
   ChallengePlatformSearchQuery,
   ChallengePlatformService,
   ChallengePlatformSort,
+  EdamConceptSearchQuery,
+  EdamConceptService,
+  EdamSection,
   Image,
   ImageAspectRatio,
   ImageHeight,
@@ -28,44 +31,46 @@ import { Filter } from '@sagebionetworks/openchallenges/ui';
   providedIn: 'root',
 })
 export class ChallengeSearchDataService {
-  private platformSearchTerms: BehaviorSubject<string> =
-    new BehaviorSubject<string>('');
+  private edamConceptSearchTerms: BehaviorSubject<EdamConceptSearchQuery> =
+    new BehaviorSubject<EdamConceptSearchQuery>({});
 
   private organizationSearchTerms: BehaviorSubject<string> =
     new BehaviorSubject<string>('');
 
+  private platformSearchTerms: BehaviorSubject<string> =
+    new BehaviorSubject<string>('');
+
   constructor(
     private challengePlatformService: ChallengePlatformService,
-    private organizationService: OrganizationService,
-    private imageService: ImageService
+    private edamConceptService: EdamConceptService,
+    private imageService: ImageService,
+    private organizationService: OrganizationService
   ) {}
 
-  setPlatformSearchTerms(searchTerms: string) {
-    this.platformSearchTerms.next(searchTerms);
+  setEdamConceptSearchTerms(searchQuery: EdamConceptSearchQuery) {
+    this.edamConceptSearchTerms.next(searchQuery);
   }
 
   setOriganizationSearchTerms(searchTerms: string) {
     this.organizationSearchTerms.next(searchTerms);
   }
 
-  searchPlatforms(): Observable<Filter[]> {
-    return this.platformSearchTerms.pipe(
+  setPlatformSearchTerms(searchTerms: string) {
+    this.platformSearchTerms.next(searchTerms);
+  }
+
+  searchEdamConcepts(sections?: EdamSection): Observable<Filter[]> {
+    return this.edamConceptSearchTerms.pipe(
       debounceTime(400),
       distinctUntilChanged(),
-      switchMap((searchTerm: string) => {
-        const sortedBy: ChallengePlatformSort = 'name';
-        const platformQuery: ChallengePlatformSearchQuery = {
-          searchTerms: searchTerm,
-          sort: sortedBy,
-        };
-        return this.challengePlatformService.listChallengePlatforms(
-          platformQuery
-        );
+      switchMap((searchQuery: EdamConceptSearchQuery) => {
+        searchQuery.sections = sections ? [sections] : searchQuery.sections;
+        return this.edamConceptService.listEdamConcepts(searchQuery);
       }),
       map((page) =>
-        page.challengePlatforms.map((platform) => ({
-          value: platform.slug,
-          label: platform.name,
+        page.edamConcepts.map((edamConcept) => ({
+          value: edamConcept.id,
+          label: edamConcept.preferredLabel,
           active: false,
         }))
       )
@@ -123,4 +128,28 @@ export class ChallengeSearchDataService {
       })
     );
   }
+
+  searchPlatforms(): Observable<Filter[]> {
+    return this.platformSearchTerms.pipe(
+      debounceTime(400),
+      distinctUntilChanged(),
+      switchMap((searchTerm: string) => {
+        const sortedBy: ChallengePlatformSort = 'name';
+        const platformQuery: ChallengePlatformSearchQuery = {
+          searchTerms: searchTerm,
+          sort: sortedBy,
+        };
+        return this.challengePlatformService.listChallengePlatforms(
+          platformQuery
+        );
+      }),
+      map((page) =>
+        page.challengePlatforms.map((platform) => ({
+          value: platform.slug,
+          label: platform.name,
+          active: false,
+        }))
+      )
+    );
+  }
 }

libs/openchallenges/challenge-search/src/lib/challenge-search-filter-panels.ts

@@ -18,18 +18,10 @@ export const challengeStartYearRangeFilterPanel: FilterPanel = {
   collapsed: false,
 };
 
-// checkbox filters
-export const challengeStatusFilterPanel: FilterPanel = {
-  query: 'status',
-  label: 'Status',
-  options: challengeStatusFilter,
-  collapsed: false,
-};
-
-export const challengeSubmissionTypesFilterPanel: FilterPanel = {
-  query: 'submissionTypes',
-  label: 'Submission Type',
-  options: challengeSubmissionTypesFilter,
+export const challengeCategoriesFilterPanel: FilterPanel = {
+  query: 'categories',
+  label: 'Category',
+  options: challengeCategoriesFilter,
   collapsed: false,
 };
 
@@ -40,27 +32,11 @@ export const challengeIncentivesFilterPanel: FilterPanel = {
   collapsed: false,
 };
 
-export const challengePlatformsFilterPanel: FilterPanel = {
-  query: 'platforms',
-  label: 'Platform',
-  options: challengePlatformsFilter,
-  collapsed: false,
-};
-
-// dropdown filters
 export const challengeInputDataTypesFilterPanel: FilterPanel = {
   query: 'inputDataTypes',
   label: 'Input Data Type',
   options: challengeInputDataTypesFilter,
   collapsed: false,
-  showAvatar: false,
-};
-
-export const challengeCategoriesFilterPanel: FilterPanel = {
-  query: 'categories',
-  label: 'Category',
-  options: challengeCategoriesFilter,
-  collapsed: false,
 };
 
 export const challengeOrganizationsFilterPanel: FilterPanel = {
@@ -78,3 +54,24 @@ export const challengeOrganizatersFilterPanel: FilterPanel = {
   collapsed: false,
   showAvatar: true,
 };
+
+export const challengePlatformsFilterPanel: FilterPanel = {
+  query: 'platforms',
+  label: 'Platform',
+  options: challengePlatformsFilter,
+  collapsed: false,
+};
+
+export const challengeStatusFilterPanel: FilterPanel = {
+  query: 'status',
+  label: 'Status',
+  options: challengeStatusFilter,
+  collapsed: false,
+};
+
+export const challengeSubmissionTypesFilterPanel: FilterPanel = {
+  query: 'submissionTypes',
+  label: 'Submission Type',
+  options: challengeSubmissionTypesFilter,
+  collapsed: false,
+};

libs/openchallenges/challenge-search/src/lib/challenge-search.component.html

@@ -89,6 +89,22 @@ <h2>Challenges</h2>
         />
       </p-panel>
       <p-divider></p-divider>
+      <p-panel
+        header="{{ inputDataTypesFilter.label }}"
+        [toggleable]="true"
+        [collapsed]="inputDataTypesFilter.collapsed"
+      >
+        <openchallenges-search-dropdown-filter
+          [options]="inputDataTypesFilter.options"
+          [selectedOptions]="selectedInputDataTypes"
+          placeholder="{{ inputDataTypesFilter.label.toLowerCase() + '(s)' }}  "
+          [showAvatar]="inputDataTypesFilter.showAvatar"
+          [filterByApiClient]="true"
+          (selectionChange)="onParamChange({ inputDataTypes: $event })"
+          (searchChange)="onSearchChange('inputDataTypes', $event)"
+        />
+      </p-panel>
+      <p-divider></p-divider>
       <p-panel
         header="{{ organizationsFilter.label }}"
         [toggleable]="true"