From fc05f69f5669591697fb9d9e74ff714a142526fb Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Mon, 1 Apr 2024 18:59:47 +0000 Subject: [PATCH 01/12] get label from label-value mapping in filter file --- .../challenge-search/src/index.ts | 2 ++ .../src/lib/get-label-by-filter-value.ts | 13 ++++++++ .../challenge-overview.component.html | 6 ++-- .../challenge-overview.component.ts | 32 ++++++++++++++----- 4 files changed, 42 insertions(+), 11 deletions(-) create mode 100644 libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts diff --git a/libs/openchallenges/challenge-search/src/index.ts b/libs/openchallenges/challenge-search/src/index.ts index 5b85063b22..2f8c2789c8 100644 --- a/libs/openchallenges/challenge-search/src/index.ts +++ b/libs/openchallenges/challenge-search/src/index.ts @@ -1 +1,3 @@ export * from './lib/challenge-search.routes'; +export * from './lib/challenge-search-filters'; +export * from './lib/get-label-by-filter-value'; diff --git a/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts b/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts new file mode 100644 index 0000000000..3145b96180 --- /dev/null +++ b/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts @@ -0,0 +1,13 @@ +import { Filter } from '@sagebionetworks/openchallenges/ui'; + +/** + * A generic function used to retrieve the label for values of challenge properties + */ + +export function getLabelByFilterValue( + filter: Filter[], + value: any +): string | undefined { + const filterItem = filter.find((item) => item.value === value); + return filterItem ? filterItem.label : undefined; +} diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html index f166275579..2230b8ae5c 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html @@ -26,7 +26,7 @@

Challenge Details

Status - {{ prettify(challenge.status) }} + {{ getStatusLabel(challenge.status) }} Platform @@ -58,7 +58,7 @@

Challenge Details

nowrap *ngFor="let submissionType of challenge.submissionTypes; let isLast = last" > - {{ prettify(submissionType) }}{{ isLast ? '' : ', ' }} @@ -69,7 +69,7 @@

Challenge Details

Incentive(s) - {{ prettify(incentive) }}{{ isLast ? '' : ', ' }} diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts index c0089433f8..21fdefc162 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts @@ -1,10 +1,22 @@ import { CommonModule } from '@angular/common'; import { Component, Input } from '@angular/core'; -import { Challenge } from '@sagebionetworks/openchallenges/api-client-angular'; +import { + Challenge, + ChallengeIncentive, + ChallengeStatus, + ChallengeSubmissionType, +} from '@sagebionetworks/openchallenges/api-client-angular'; import { MOCK_ORGANIZATION_CARDS, OrganizationCard, } from '@sagebionetworks/openchallenges/ui'; +import { + challengeIncentivesFilter, + challengeStatusFilter, + challengeSubmissionTypesFilter, + getLabelByFilterValue, +} from '@sagebionetworks/openchallenges/challenge-search'; + import { MatIconModule } from '@angular/material/icon'; @Component({ @@ -17,16 +29,20 @@ import { MatIconModule } from '@angular/material/icon'; export class ChallengeOverviewComponent { @Input({ required: true }) challenge!: Challenge; organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS; - // mockTopics = ['breast', 'cancer']; useNaIfFalsey(str: string | null | undefined) { - return str || 'Not available'; + return str ?? 'Not available'; + } + + getIncentiveLabel(status: ChallengeIncentive): string | undefined { + return getLabelByFilterValue(challengeIncentivesFilter, status); + } + + getSubmissionTypeLabel(status: ChallengeSubmissionType): string | undefined { + return getLabelByFilterValue(challengeSubmissionTypesFilter, status); } - prettify(camel: string | undefined) { - return camel - ? camel.charAt(0).toUpperCase() + - camel.slice(1).replace(/_/g, ' ').toLowerCase() - : undefined; + getStatusLabel(status: ChallengeStatus): string | undefined { + return getLabelByFilterValue(challengeStatusFilter, status); } } From dd421974be83947c75d2aed7059e71548d1f8369 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Mon, 1 Apr 2024 20:40:11 +0000 Subject: [PATCH 02/12] reset --- .../challenge-search/src/index.ts | 2 ++ .../src/lib/get-label-by-filter-value.ts | 13 ++++++++++ .../challenge-overview.component.html | 6 ++--- .../challenge-overview.component.ts | 26 +++++++++++++------ 4 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts diff --git a/libs/openchallenges/challenge-search/src/index.ts b/libs/openchallenges/challenge-search/src/index.ts index 5b85063b22..2f8c2789c8 100644 --- a/libs/openchallenges/challenge-search/src/index.ts +++ b/libs/openchallenges/challenge-search/src/index.ts @@ -1 +1,3 @@ export * from './lib/challenge-search.routes'; +export * from './lib/challenge-search-filters'; +export * from './lib/get-label-by-filter-value'; diff --git a/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts b/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts new file mode 100644 index 0000000000..3145b96180 --- /dev/null +++ b/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts @@ -0,0 +1,13 @@ +import { Filter } from '@sagebionetworks/openchallenges/ui'; + +/** + * A generic function used to retrieve the label for values of challenge properties + */ + +export function getLabelByFilterValue( + filter: Filter[], + value: any +): string | undefined { + const filterItem = filter.find((item) => item.value === value); + return filterItem ? filterItem.label : undefined; +} diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html index f166275579..36ece2217b 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html @@ -26,7 +26,7 @@

Challenge Details

Status - {{ prettify(challenge.status) }} + {{ challenge.status | titlecase }} Platform @@ -58,7 +58,7 @@

Challenge Details

nowrap *ngFor="let submissionType of challenge.submissionTypes; let isLast = last" > - {{ prettify(submissionType) }}{{ isLast ? '' : ', ' }} @@ -69,7 +69,7 @@

Challenge Details

Incentive(s) - {{ prettify(incentive) }}{{ isLast ? '' : ', ' }} diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts index c0089433f8..9eddad34df 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts @@ -1,10 +1,20 @@ import { CommonModule } from '@angular/common'; import { Component, Input } from '@angular/core'; -import { Challenge } from '@sagebionetworks/openchallenges/api-client-angular'; +import { + Challenge, + ChallengeIncentive, + ChallengeSubmissionType, +} from '@sagebionetworks/openchallenges/api-client-angular'; import { MOCK_ORGANIZATION_CARDS, OrganizationCard, } from '@sagebionetworks/openchallenges/ui'; +import { + challengeIncentivesFilter, + challengeSubmissionTypesFilter, + getLabelByFilterValue, +} from '@sagebionetworks/openchallenges/challenge-search'; + import { MatIconModule } from '@angular/material/icon'; @Component({ @@ -17,16 +27,16 @@ import { MatIconModule } from '@angular/material/icon'; export class ChallengeOverviewComponent { @Input({ required: true }) challenge!: Challenge; organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS; - // mockTopics = ['breast', 'cancer']; useNaIfFalsey(str: string | null | undefined) { - return str || 'Not available'; + return str ?? 'Not available'; + } + + getIncentiveLabel(status: ChallengeIncentive): string | undefined { + return getLabelByFilterValue(challengeIncentivesFilter, status); } - prettify(camel: string | undefined) { - return camel - ? camel.charAt(0).toUpperCase() + - camel.slice(1).replace(/_/g, ' ').toLowerCase() - : undefined; + getSubmissionTypeLabel(status: ChallengeSubmissionType): string | undefined { + return getLabelByFilterValue(challengeSubmissionTypesFilter, status); } } From 6e7bc5fab394f9171f471c51d5498e3a93b5d4a7 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Mon, 1 Apr 2024 21:04:44 +0000 Subject: [PATCH 03/12] create a mapping file to retrieve label for property value --- .../challenge-search/src/index.ts | 2 -- .../src/lib/challenge-search-filters.ts | 13 +++++++---- .../challenge-overview.component.html | 4 ++-- .../challenge-overview.component.ts | 23 ++++--------------- libs/openchallenges/ui/src/index.ts | 1 + .../challenge-property-labels.ts | 22 ++++++++++++++++++ 6 files changed, 38 insertions(+), 27 deletions(-) create mode 100644 libs/openchallenges/ui/src/lib/challenge-card/challenge-property-labels.ts diff --git a/libs/openchallenges/challenge-search/src/index.ts b/libs/openchallenges/challenge-search/src/index.ts index 2f8c2789c8..5b85063b22 100644 --- a/libs/openchallenges/challenge-search/src/index.ts +++ b/libs/openchallenges/challenge-search/src/index.ts @@ -1,3 +1 @@ export * from './lib/challenge-search.routes'; -export * from './lib/challenge-search-filters'; -export * from './lib/get-label-by-filter-value'; diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts index 39ca1cebea..c1c46d5f9c 100644 --- a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts +++ b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts @@ -5,7 +5,10 @@ import { ChallengeStatus, ChallengeSubmissionType, } from '@sagebionetworks/openchallenges/api-client-angular'; -import { Filter } from '@sagebionetworks/openchallenges/ui'; +import { + ChallengeIncentiveLabels, + Filter, +} from '@sagebionetworks/openchallenges/ui'; const thisYear = new Date().getFullYear(); @@ -96,19 +99,19 @@ export const challengeSubmissionTypesFilter: Filter[] = [ export const challengeIncentivesFilter: Filter[] = [ { value: ChallengeIncentive.Monetary, - label: 'Monetary', + label: ChallengeIncentiveLabels[ChallengeIncentive.Monetary], }, { value: ChallengeIncentive.Publication, - label: 'Publication', + label: ChallengeIncentiveLabels[ChallengeIncentive.Publication], }, { value: ChallengeIncentive.SpeakingEngagement, - label: 'Speaking Engagement', + label: ChallengeIncentiveLabels[ChallengeIncentive.SpeakingEngagement], }, { value: ChallengeIncentive.Other, - label: 'Other', + label: ChallengeIncentiveLabels[ChallengeIncentive.Other], }, ]; diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html index 36ece2217b..fc62499449 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html @@ -58,7 +58,7 @@

Challenge Details

nowrap *ngFor="let submissionType of challenge.submissionTypes; let isLast = last" > - {{ getSubmissionTypeLabel(submissionType) }}{{ isLast ? '' : ', ' }} @@ -69,7 +69,7 @@

Challenge Details

Incentive(s) - {{ getIncentiveLabel(incentive) }}{{ isLast ? '' : ', ' }} diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts index 9eddad34df..55bb66c9da 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts @@ -1,19 +1,12 @@ import { CommonModule } from '@angular/common'; import { Component, Input } from '@angular/core'; +import { Challenge } from '@sagebionetworks/openchallenges/api-client-angular'; import { - Challenge, - ChallengeIncentive, - ChallengeSubmissionType, -} from '@sagebionetworks/openchallenges/api-client-angular'; -import { + ChallengeSubmissionTypeLabels, + ChallengeIncentiveLabels, MOCK_ORGANIZATION_CARDS, OrganizationCard, } from '@sagebionetworks/openchallenges/ui'; -import { - challengeIncentivesFilter, - challengeSubmissionTypesFilter, - getLabelByFilterValue, -} from '@sagebionetworks/openchallenges/challenge-search'; import { MatIconModule } from '@angular/material/icon'; @@ -27,16 +20,10 @@ import { MatIconModule } from '@angular/material/icon'; export class ChallengeOverviewComponent { @Input({ required: true }) challenge!: Challenge; organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS; + incentiveLabels = ChallengeIncentiveLabels; + submissionTypeLabels = ChallengeSubmissionTypeLabels; useNaIfFalsey(str: string | null | undefined) { return str ?? 'Not available'; } - - getIncentiveLabel(status: ChallengeIncentive): string | undefined { - return getLabelByFilterValue(challengeIncentivesFilter, status); - } - - getSubmissionTypeLabel(status: ChallengeSubmissionType): string | undefined { - return getLabelByFilterValue(challengeSubmissionTypesFilter, status); - } } diff --git a/libs/openchallenges/ui/src/index.ts b/libs/openchallenges/ui/src/index.ts index b68b9553ad..655c7d04ea 100644 --- a/libs/openchallenges/ui/src/index.ts +++ b/libs/openchallenges/ui/src/index.ts @@ -4,6 +4,7 @@ export * from './lib/avatar/mock-avatars'; export * from './lib/challenge-card/challenge-card.component'; export * from './lib/challenge-card/mock-challenges'; export * from './lib/challenge-card/mock-platforms'; +export * from './lib/challenge-card/challenge-property-labels'; export * from './lib/checkbox-filter/checkbox-filter.component'; export * from './lib/checkbox-filter/filter.model'; export * from './lib/checkbox-filter/filter-panel.model'; diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-property-labels.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-property-labels.ts new file mode 100644 index 0000000000..563ec6b1cc --- /dev/null +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-property-labels.ts @@ -0,0 +1,22 @@ +import { + ChallengeIncentive, + ChallengeSubmissionType, +} from '@sagebionetworks/openchallenges/api-client-angular'; + +export const ChallengeIncentiveLabels: Record = { + monetary: 'Monetary', + publication: 'Publication', + speaking_engagement: 'Speaking Engagement', + other: 'Other', +}; + +export const ChallengeSubmissionTypeLabels: Record< + ChallengeSubmissionType, + string +> = { + container_image: 'Container Image', + prediction_file: 'Prediction File', + notebook: 'Notebook', + mlcube: 'MLCube', + other: 'Other', +}; From 4e2d2310b3a43e39ba015b1752594bbbd4cbb845 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Mon, 1 Apr 2024 21:06:11 +0000 Subject: [PATCH 04/12] implement for incentive in challenge-card --- .../challenge-card/challenge-card.component.html | 8 ++++++-- .../challenge-card/challenge-card.component.scss | 2 +- .../challenge-card/challenge-card.component.ts | 15 ++------------- 3 files changed, 9 insertions(+), 16 deletions(-) diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html index 5cdc3832af..0a1f3a218c 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html @@ -28,8 +28,12 @@
-
- {{ incentives }} + +
+ {{ incentiveLabels[incentive] }}{{ isLast ? '' : ', ' }}
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss index 6a43e1a748..2c9f740e0d 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.scss @@ -32,7 +32,7 @@ } // FOOTER -.difficulty-tag { +.incentive-tag { display: flex; align-items: center; flex: 1; diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts index b5396eacd8..e2514a828f 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts @@ -7,7 +7,7 @@ import { Image, ImageService, } from '@sagebionetworks/openchallenges/api-client-angular'; -// import { startCase } from 'lodash'; +import { ChallengeIncentiveLabels } from './challenge-property-labels'; import { Observable } from 'rxjs'; @Component({ @@ -25,7 +25,7 @@ export class ChallengeCardComponent implements OnInit { incentives!: string; statusClass!: string; time_info!: string | number; - + incentiveLabels = ChallengeIncentiveLabels; constructor(private imageService: ImageService) {} ngOnInit(): void { @@ -35,17 +35,6 @@ export class ChallengeCardComponent implements OnInit { this.desc = this.challenge.headline ? this.challenge.headline : this.challenge.description; - this.incentives = - this.challenge.incentives.length === 0 - ? 'No incentives listed' - : this.challenge.incentives - .map(function (s) { - return ( - s.charAt(0).toUpperCase() + - s.slice(1).replace(/_/g, ' ').toLowerCase() - ); - }) - .join(', '); this.banner$ = this.challenge.avatarUrl ? this.imageService.getImage({ objectKey: this.challenge.avatarUrl, From 63df04f57a971a1519ca6534674a20a7882de556 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Mon, 1 Apr 2024 21:16:05 +0000 Subject: [PATCH 05/12] clean up --- libs/openchallenges/challenge-search/src/index.ts | 1 - .../src/lib/get-label-by-filter-value.ts | 13 ------------- .../challenge-card/challenge-card.component.html | 8 ++------ .../lib/challenge-card/challenge-card.component.ts | 7 +++++++ 4 files changed, 9 insertions(+), 20 deletions(-) delete mode 100644 libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts diff --git a/libs/openchallenges/challenge-search/src/index.ts b/libs/openchallenges/challenge-search/src/index.ts index 2f8c2789c8..97c336f4ac 100644 --- a/libs/openchallenges/challenge-search/src/index.ts +++ b/libs/openchallenges/challenge-search/src/index.ts @@ -1,3 +1,2 @@ export * from './lib/challenge-search.routes'; export * from './lib/challenge-search-filters'; -export * from './lib/get-label-by-filter-value'; diff --git a/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts b/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts deleted file mode 100644 index 3145b96180..0000000000 --- a/libs/openchallenges/challenge-search/src/lib/get-label-by-filter-value.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Filter } from '@sagebionetworks/openchallenges/ui'; - -/** - * A generic function used to retrieve the label for values of challenge properties - */ - -export function getLabelByFilterValue( - filter: Filter[], - value: any -): string | undefined { - const filterItem = filter.find((item) => item.value === value); - return filterItem ? filterItem.label : undefined; -} diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html index 0a1f3a218c..2840d8496c 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html @@ -28,12 +28,8 @@
- -
- {{ incentiveLabels[incentive] }}{{ isLast ? '' : ', ' }} +
+ {{ incentives }}
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts index e2514a828f..8821252a28 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts @@ -26,6 +26,7 @@ export class ChallengeCardComponent implements OnInit { statusClass!: string; time_info!: string | number; incentiveLabels = ChallengeIncentiveLabels; + constructor(private imageService: ImageService) {} ngOnInit(): void { @@ -35,6 +36,12 @@ export class ChallengeCardComponent implements OnInit { this.desc = this.challenge.headline ? this.challenge.headline : this.challenge.description; + this.incentives = + this.challenge.incentives.length === 0 + ? 'No incentives listed' + : this.challenge.incentives + .map((s) => ChallengeIncentiveLabels[s]) + .join(', '); this.banner$ = this.challenge.avatarUrl ? this.imageService.getImage({ objectKey: this.challenge.avatarUrl, From 25f6735af8d77daf6200b815fad210be90b4d6fc Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Mon, 1 Apr 2024 21:23:54 +0000 Subject: [PATCH 06/12] clean up x2 --- libs/openchallenges/challenge-search/src/index.ts | 1 - .../src/lib/challenge-search-filters.ts | 13 ++++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/libs/openchallenges/challenge-search/src/index.ts b/libs/openchallenges/challenge-search/src/index.ts index 97c336f4ac..5b85063b22 100644 --- a/libs/openchallenges/challenge-search/src/index.ts +++ b/libs/openchallenges/challenge-search/src/index.ts @@ -1,2 +1 @@ export * from './lib/challenge-search.routes'; -export * from './lib/challenge-search-filters'; diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts index c1c46d5f9c..621daba5d2 100644 --- a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts +++ b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts @@ -7,6 +7,7 @@ import { } from '@sagebionetworks/openchallenges/api-client-angular'; import { ChallengeIncentiveLabels, + ChallengeSubmissionTypeLabels, Filter, } from '@sagebionetworks/openchallenges/ui'; @@ -76,23 +77,25 @@ export const challengeStatusFilter: Filter[] = [ export const challengeSubmissionTypesFilter: Filter[] = [ { value: ChallengeSubmissionType.ContainerImage, - label: 'Container Image', + label: + ChallengeSubmissionTypeLabels[ChallengeSubmissionType.ContainerImage], }, { value: ChallengeSubmissionType.Mlcube, - label: 'MLCube', + label: ChallengeSubmissionTypeLabels[ChallengeSubmissionType.Mlcube], }, { value: ChallengeSubmissionType.Notebook, - label: 'Notebook', + label: ChallengeSubmissionTypeLabels[ChallengeSubmissionType.Notebook], }, { value: ChallengeSubmissionType.PredictionFile, - label: 'Prediction File', + label: + ChallengeSubmissionTypeLabels[ChallengeSubmissionType.PredictionFile], }, { value: ChallengeSubmissionType.Other, - label: 'Other', + label: ChallengeSubmissionTypeLabels[ChallengeSubmissionType.Other], }, ]; From e2338302755d3a5265fc3e234a2da438c8894345 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Tue, 2 Apr 2024 19:45:51 +0000 Subject: [PATCH 07/12] create pipe to convert value to label --- .../challenge-search/src/index.ts | 1 + .../src/lib/challenge-search-filters.ts | 26 +++++-------- libs/openchallenges/challenge/src/index.ts | 1 + .../challenge-overview.component.html | 4 +- .../challenge-overview.component.ts | 21 ++++++++--- libs/openchallenges/ui/src/index.ts | 2 +- .../challenge-card.component.html | 12 +++++- .../challenge-card.component.ts | 12 +----- .../challenge-property-labels.ts | 22 ----------- libs/openchallenges/util/src/index.ts | 1 + .../lib/pipe/challenge-property-label.pipe.ts | 37 +++++++++++++++++++ 11 files changed, 81 insertions(+), 58 deletions(-) delete mode 100644 libs/openchallenges/ui/src/lib/challenge-card/challenge-property-labels.ts create mode 100644 libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts diff --git a/libs/openchallenges/challenge-search/src/index.ts b/libs/openchallenges/challenge-search/src/index.ts index 5b85063b22..97c336f4ac 100644 --- a/libs/openchallenges/challenge-search/src/index.ts +++ b/libs/openchallenges/challenge-search/src/index.ts @@ -1 +1,2 @@ export * from './lib/challenge-search.routes'; +export * from './lib/challenge-search-filters'; diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts index 621daba5d2..39ca1cebea 100644 --- a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts +++ b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts @@ -5,11 +5,7 @@ import { ChallengeStatus, ChallengeSubmissionType, } from '@sagebionetworks/openchallenges/api-client-angular'; -import { - ChallengeIncentiveLabels, - ChallengeSubmissionTypeLabels, - Filter, -} from '@sagebionetworks/openchallenges/ui'; +import { Filter } from '@sagebionetworks/openchallenges/ui'; const thisYear = new Date().getFullYear(); @@ -77,44 +73,42 @@ export const challengeStatusFilter: Filter[] = [ export const challengeSubmissionTypesFilter: Filter[] = [ { value: ChallengeSubmissionType.ContainerImage, - label: - ChallengeSubmissionTypeLabels[ChallengeSubmissionType.ContainerImage], + label: 'Container Image', }, { value: ChallengeSubmissionType.Mlcube, - label: ChallengeSubmissionTypeLabels[ChallengeSubmissionType.Mlcube], + label: 'MLCube', }, { value: ChallengeSubmissionType.Notebook, - label: ChallengeSubmissionTypeLabels[ChallengeSubmissionType.Notebook], + label: 'Notebook', }, { value: ChallengeSubmissionType.PredictionFile, - label: - ChallengeSubmissionTypeLabels[ChallengeSubmissionType.PredictionFile], + label: 'Prediction File', }, { value: ChallengeSubmissionType.Other, - label: ChallengeSubmissionTypeLabels[ChallengeSubmissionType.Other], + label: 'Other', }, ]; export const challengeIncentivesFilter: Filter[] = [ { value: ChallengeIncentive.Monetary, - label: ChallengeIncentiveLabels[ChallengeIncentive.Monetary], + label: 'Monetary', }, { value: ChallengeIncentive.Publication, - label: ChallengeIncentiveLabels[ChallengeIncentive.Publication], + label: 'Publication', }, { value: ChallengeIncentive.SpeakingEngagement, - label: ChallengeIncentiveLabels[ChallengeIncentive.SpeakingEngagement], + label: 'Speaking Engagement', }, { value: ChallengeIncentive.Other, - label: ChallengeIncentiveLabels[ChallengeIncentive.Other], + label: 'Other', }, ]; diff --git a/libs/openchallenges/challenge/src/index.ts b/libs/openchallenges/challenge/src/index.ts index b4ad138c42..5b955b53a0 100644 --- a/libs/openchallenges/challenge/src/index.ts +++ b/libs/openchallenges/challenge/src/index.ts @@ -1 +1,2 @@ export * from './lib/challenge.routes'; +export * from './lib/challenge-overview/challenge-property-labels'; diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html index fc62499449..a3ac7e669c 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html @@ -58,7 +58,7 @@

Challenge Details

nowrap *ngFor="let submissionType of challenge.submissionTypes; let isLast = last" > - {{ submissionTypeLabels[submissionType] }}{{ isLast ? '' : ', ' }} @@ -69,7 +69,7 @@

Challenge Details

Incentive(s) - {{ incentiveLabels[incentive] }}{{ isLast ? '' : ', ' }} diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts index 55bb66c9da..774ab08bbb 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts @@ -2,26 +2,37 @@ import { CommonModule } from '@angular/common'; import { Component, Input } from '@angular/core'; import { Challenge } from '@sagebionetworks/openchallenges/api-client-angular'; import { - ChallengeSubmissionTypeLabels, - ChallengeIncentiveLabels, MOCK_ORGANIZATION_CARDS, OrganizationCard, } from '@sagebionetworks/openchallenges/ui'; import { MatIconModule } from '@angular/material/icon'; +import { + IncentiveLabelPipe, + SubmissionTypeLabelPipe, +} from '@sagebionetworks/openchallenges/util'; +// import { +// ChallengeIncentiveLabels, +// ChallengeSubmissionTypeLabels, +// } from './challenge-property-labels'; @Component({ selector: 'openchallenges-challenge-overview', standalone: true, - imports: [CommonModule, MatIconModule], + imports: [ + CommonModule, + MatIconModule, + IncentiveLabelPipe, + SubmissionTypeLabelPipe, + ], templateUrl: './challenge-overview.component.html', styleUrls: ['./challenge-overview.component.scss'], }) export class ChallengeOverviewComponent { @Input({ required: true }) challenge!: Challenge; organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS; - incentiveLabels = ChallengeIncentiveLabels; - submissionTypeLabels = ChallengeSubmissionTypeLabels; + // incentiveLabels = ChallengeIncentiveLabels; + // submissionTypeLabels = ChallengeSubmissionTypeLabels; useNaIfFalsey(str: string | null | undefined) { return str ?? 'Not available'; diff --git a/libs/openchallenges/ui/src/index.ts b/libs/openchallenges/ui/src/index.ts index 655c7d04ea..e1113412c1 100644 --- a/libs/openchallenges/ui/src/index.ts +++ b/libs/openchallenges/ui/src/index.ts @@ -4,7 +4,7 @@ export * from './lib/avatar/mock-avatars'; export * from './lib/challenge-card/challenge-card.component'; export * from './lib/challenge-card/mock-challenges'; export * from './lib/challenge-card/mock-platforms'; -export * from './lib/challenge-card/challenge-property-labels'; +// export * from './lib/challenge-card/challenge-property-labels'; export * from './lib/checkbox-filter/checkbox-filter.component'; export * from './lib/checkbox-filter/filter.model'; export * from './lib/checkbox-filter/filter-panel.model'; diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html index 2840d8496c..f6612b1a82 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html @@ -28,9 +28,17 @@
-
- {{ incentives }} +
+ + {{ incentive | incentiveLabel }}{{ isLast ? '' : ', ' }} +
+ +
No incentives listed
+
diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts index 8821252a28..3e17564918 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts @@ -7,13 +7,13 @@ import { Image, ImageService, } from '@sagebionetworks/openchallenges/api-client-angular'; -import { ChallengeIncentiveLabels } from './challenge-property-labels'; +import { IncentiveLabelPipe } from '@sagebionetworks/openchallenges/util'; import { Observable } from 'rxjs'; @Component({ selector: 'openchallenges-challenge-card', standalone: true, - imports: [CommonModule, MatIconModule, RouterModule], + imports: [CommonModule, MatIconModule, RouterModule, IncentiveLabelPipe], templateUrl: './challenge-card.component.html', styleUrls: ['./challenge-card.component.scss'], }) @@ -22,10 +22,8 @@ export class ChallengeCardComponent implements OnInit { banner$: Observable | undefined; status!: string | undefined; desc!: string; - incentives!: string; statusClass!: string; time_info!: string | number; - incentiveLabels = ChallengeIncentiveLabels; constructor(private imageService: ImageService) {} @@ -36,12 +34,6 @@ export class ChallengeCardComponent implements OnInit { this.desc = this.challenge.headline ? this.challenge.headline : this.challenge.description; - this.incentives = - this.challenge.incentives.length === 0 - ? 'No incentives listed' - : this.challenge.incentives - .map((s) => ChallengeIncentiveLabels[s]) - .join(', '); this.banner$ = this.challenge.avatarUrl ? this.imageService.getImage({ objectKey: this.challenge.avatarUrl, diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-property-labels.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-property-labels.ts deleted file mode 100644 index 563ec6b1cc..0000000000 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-property-labels.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { - ChallengeIncentive, - ChallengeSubmissionType, -} from '@sagebionetworks/openchallenges/api-client-angular'; - -export const ChallengeIncentiveLabels: Record = { - monetary: 'Monetary', - publication: 'Publication', - speaking_engagement: 'Speaking Engagement', - other: 'Other', -}; - -export const ChallengeSubmissionTypeLabels: Record< - ChallengeSubmissionType, - string -> = { - container_image: 'Container Image', - prediction_file: 'Prediction File', - notebook: 'Notebook', - mlcube: 'MLCube', - other: 'Other', -}; diff --git a/libs/openchallenges/util/src/index.ts b/libs/openchallenges/util/src/index.ts index 054d809a3e..068b48743c 100644 --- a/libs/openchallenges/util/src/index.ts +++ b/libs/openchallenges/util/src/index.ts @@ -4,3 +4,4 @@ export * from './lib/handle-http-error'; export * from './lib/http-status-redirect'; export * from './lib/is-api-client-error'; export * from './lib/page-title.service'; +export * from './lib/pipe/challenge-property-label.pipe'; diff --git a/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts b/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts new file mode 100644 index 0000000000..d0c5db4b70 --- /dev/null +++ b/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts @@ -0,0 +1,37 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { + ChallengeIncentive, + ChallengeSubmissionType, +} from '@sagebionetworks/openchallenges/api-client-angular'; +// Directly import challenge filters from the challenge-search module to avoid circular dependencies. +// Do not import these from a index file that might cause circular import paths. +import { + challengeIncentivesFilter, + challengeSubmissionTypesFilter, +} from '../../../../challenge-search/src/lib/challenge-search-filters'; + +@Pipe({ + name: 'incentiveLabel', + standalone: true, +}) +export class IncentiveLabelPipe implements PipeTransform { + transform(incentive: ChallengeIncentive): string | undefined { + const filterItem = challengeIncentivesFilter.find( + (item) => item.value === incentive + ); + return filterItem ? filterItem.label : undefined; + } +} + +@Pipe({ + name: 'submissionTypeLabel', + standalone: true, +}) +export class SubmissionTypeLabelPipe implements PipeTransform { + transform(submissionType: ChallengeSubmissionType): string | undefined { + const filterItem = challengeSubmissionTypesFilter.find( + (item) => item.value === submissionType + ); + return filterItem ? filterItem.label : undefined; + } +} From 827a6cbf83bd496ba6bade5ceb25ad5e345a6bec Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Tue, 2 Apr 2024 19:48:32 +0000 Subject: [PATCH 08/12] clean up --- libs/openchallenges/challenge-search/src/index.ts | 1 - .../challenge-overview/challenge-overview.component.ts | 9 +-------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/libs/openchallenges/challenge-search/src/index.ts b/libs/openchallenges/challenge-search/src/index.ts index 97c336f4ac..5b85063b22 100644 --- a/libs/openchallenges/challenge-search/src/index.ts +++ b/libs/openchallenges/challenge-search/src/index.ts @@ -1,2 +1 @@ export * from './lib/challenge-search.routes'; -export * from './lib/challenge-search-filters'; diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts index 774ab08bbb..8cda34665f 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts @@ -11,18 +11,13 @@ import { IncentiveLabelPipe, SubmissionTypeLabelPipe, } from '@sagebionetworks/openchallenges/util'; -// import { -// ChallengeIncentiveLabels, -// ChallengeSubmissionTypeLabels, -// } from './challenge-property-labels'; - @Component({ selector: 'openchallenges-challenge-overview', standalone: true, imports: [ CommonModule, - MatIconModule, IncentiveLabelPipe, + MatIconModule, SubmissionTypeLabelPipe, ], templateUrl: './challenge-overview.component.html', @@ -31,8 +26,6 @@ import { export class ChallengeOverviewComponent { @Input({ required: true }) challenge!: Challenge; organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS; - // incentiveLabels = ChallengeIncentiveLabels; - // submissionTypeLabels = ChallengeSubmissionTypeLabels; useNaIfFalsey(str: string | null | undefined) { return str ?? 'Not available'; From ec9de7b120bd617378857bfbdbb3a6b75369cbb8 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Tue, 2 Apr 2024 19:51:12 +0000 Subject: [PATCH 09/12] clean up x2 --- libs/openchallenges/ui/src/index.ts | 1 - .../ui/src/lib/challenge-card/challenge-card.component.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/libs/openchallenges/ui/src/index.ts b/libs/openchallenges/ui/src/index.ts index e1113412c1..b68b9553ad 100644 --- a/libs/openchallenges/ui/src/index.ts +++ b/libs/openchallenges/ui/src/index.ts @@ -4,7 +4,6 @@ export * from './lib/avatar/mock-avatars'; export * from './lib/challenge-card/challenge-card.component'; export * from './lib/challenge-card/mock-challenges'; export * from './lib/challenge-card/mock-platforms'; -// export * from './lib/challenge-card/challenge-property-labels'; export * from './lib/checkbox-filter/checkbox-filter.component'; export * from './lib/checkbox-filter/filter.model'; export * from './lib/checkbox-filter/filter-panel.model'; diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts index 3e17564918..7e02d68048 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts @@ -13,7 +13,7 @@ import { Observable } from 'rxjs'; @Component({ selector: 'openchallenges-challenge-card', standalone: true, - imports: [CommonModule, MatIconModule, RouterModule, IncentiveLabelPipe], + imports: [CommonModule, IncentiveLabelPipe, MatIconModule, RouterModule], templateUrl: './challenge-card.component.html', styleUrls: ['./challenge-card.component.scss'], }) From f641271069a54197a14ac3dc5df24292b5aae4e9 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Tue, 2 Apr 2024 19:59:22 +0000 Subject: [PATCH 10/12] clean up x3 --- libs/openchallenges/challenge/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/openchallenges/challenge/src/index.ts b/libs/openchallenges/challenge/src/index.ts index 5b955b53a0..b4ad138c42 100644 --- a/libs/openchallenges/challenge/src/index.ts +++ b/libs/openchallenges/challenge/src/index.ts @@ -1,2 +1 @@ export * from './lib/challenge.routes'; -export * from './lib/challenge-overview/challenge-property-labels'; From d63398bdf8eabefc1aa25c7be4bc17dee0bc0b81 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Tue, 2 Apr 2024 23:03:53 +0000 Subject: [PATCH 11/12] move locatization data to util folder --- .../src/lib/challenge-search-filters.ts | 82 ++---------------- libs/openchallenges/util/src/index.ts | 1 + .../lib/pipe/challenge-property-label.pipe.ts | 12 ++- .../src/lib/pipe/challenge-property-labels.ts | 83 +++++++++++++++++++ 4 files changed, 98 insertions(+), 80 deletions(-) create mode 100644 libs/openchallenges/util/src/lib/pipe/challenge-property-labels.ts diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts index 39ca1cebea..e1800ef5f7 100644 --- a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts +++ b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts @@ -1,11 +1,13 @@ import { - ChallengeCategory, - ChallengeIncentive, ChallengeSort, ChallengeStatus, - ChallengeSubmissionType, } from '@sagebionetworks/openchallenges/api-client-angular'; import { Filter } from '@sagebionetworks/openchallenges/ui'; +import { + challengeCategoriesLabels, + challengeIncentivesLabels, + challengeSubmissionTypesLabels, +} from '@sagebionetworks/openchallenges/util'; const thisYear = new Date().getFullYear(); @@ -70,82 +72,16 @@ export const challengeStatusFilter: Filter[] = [ }, ]; -export const challengeSubmissionTypesFilter: Filter[] = [ - { - value: ChallengeSubmissionType.ContainerImage, - label: 'Container Image', - }, - { - value: ChallengeSubmissionType.Mlcube, - label: 'MLCube', - }, - { - value: ChallengeSubmissionType.Notebook, - label: 'Notebook', - }, - { - value: ChallengeSubmissionType.PredictionFile, - label: 'Prediction File', - }, - { - value: ChallengeSubmissionType.Other, - label: 'Other', - }, -]; +export const challengeSubmissionTypesFilter: Filter[] = + challengeSubmissionTypesLabels; -export const challengeIncentivesFilter: Filter[] = [ - { - value: ChallengeIncentive.Monetary, - label: 'Monetary', - }, - { - value: ChallengeIncentive.Publication, - label: 'Publication', - }, - { - value: ChallengeIncentive.SpeakingEngagement, - label: 'Speaking Engagement', - }, - { - value: ChallengeIncentive.Other, - label: 'Other', - }, -]; +export const challengeIncentivesFilter: Filter[] = challengeIncentivesLabels; export const challengePlatformsFilter: Filter[] = []; export const challengeInputDataTypesFilter: Filter[] = []; -export const challengeCategoriesFilter: Filter[] = [ - { - value: ChallengeCategory.Featured, - label: 'Featured', - }, - { - value: ChallengeCategory.Benchmark, - label: 'Benchmark', - }, - { - value: ChallengeCategory.Hackathon, - label: 'Hackathon', - }, - { - value: ChallengeCategory.StartingSoon, - label: 'Starting Soon', - }, - { - value: ChallengeCategory.EndingSoon, - label: 'Closing Soon', - }, - { - value: ChallengeCategory.RecentlyStarted, - label: 'Recently Launched', - }, - { - value: ChallengeCategory.RecentlyEnded, - label: 'Recently Completed', - }, -]; +export const challengeCategoriesFilter: Filter[] = challengeCategoriesLabels; export const challengeOrganizationsFilter: Filter[] = []; diff --git a/libs/openchallenges/util/src/index.ts b/libs/openchallenges/util/src/index.ts index 068b48743c..dae8eb421b 100644 --- a/libs/openchallenges/util/src/index.ts +++ b/libs/openchallenges/util/src/index.ts @@ -5,3 +5,4 @@ export * from './lib/http-status-redirect'; export * from './lib/is-api-client-error'; export * from './lib/page-title.service'; export * from './lib/pipe/challenge-property-label.pipe'; +export * from './lib/pipe/challenge-property-labels'; diff --git a/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts b/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts index d0c5db4b70..a4620bde86 100644 --- a/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts +++ b/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts @@ -3,12 +3,10 @@ import { ChallengeIncentive, ChallengeSubmissionType, } from '@sagebionetworks/openchallenges/api-client-angular'; -// Directly import challenge filters from the challenge-search module to avoid circular dependencies. -// Do not import these from a index file that might cause circular import paths. import { - challengeIncentivesFilter, - challengeSubmissionTypesFilter, -} from '../../../../challenge-search/src/lib/challenge-search-filters'; + challengeIncentivesLabels, + challengeSubmissionTypesLabels, +} from './challenge-property-labels'; @Pipe({ name: 'incentiveLabel', @@ -16,7 +14,7 @@ import { }) export class IncentiveLabelPipe implements PipeTransform { transform(incentive: ChallengeIncentive): string | undefined { - const filterItem = challengeIncentivesFilter.find( + const filterItem = challengeIncentivesLabels.find( (item) => item.value === incentive ); return filterItem ? filterItem.label : undefined; @@ -29,7 +27,7 @@ export class IncentiveLabelPipe implements PipeTransform { }) export class SubmissionTypeLabelPipe implements PipeTransform { transform(submissionType: ChallengeSubmissionType): string | undefined { - const filterItem = challengeSubmissionTypesFilter.find( + const filterItem = challengeSubmissionTypesLabels.find( (item) => item.value === submissionType ); return filterItem ? filterItem.label : undefined; diff --git a/libs/openchallenges/util/src/lib/pipe/challenge-property-labels.ts b/libs/openchallenges/util/src/lib/pipe/challenge-property-labels.ts new file mode 100644 index 0000000000..8266c5ebb9 --- /dev/null +++ b/libs/openchallenges/util/src/lib/pipe/challenge-property-labels.ts @@ -0,0 +1,83 @@ +import { + ChallengeCategory, + ChallengeIncentive, + ChallengeSubmissionType, +} from '@sagebionetworks/openchallenges/api-client-angular'; + +type ChallengeLabels = { + value: ChallengeSubmissionType | ChallengeIncentive | ChallengeCategory; + label: string; +}; + +export const challengeSubmissionTypesLabels: ChallengeLabels[] = [ + { + value: ChallengeSubmissionType.ContainerImage, + label: 'Container Image', + }, + { + value: ChallengeSubmissionType.Mlcube, + label: 'MLCube', + }, + { + value: ChallengeSubmissionType.Notebook, + label: 'Notebook', + }, + { + value: ChallengeSubmissionType.PredictionFile, + label: 'Prediction File', + }, + { + value: ChallengeSubmissionType.Other, + label: 'Other', + }, +]; + +export const challengeIncentivesLabels: ChallengeLabels[] = [ + { + value: ChallengeIncentive.Monetary, + label: 'Monetary', + }, + { + value: ChallengeIncentive.Publication, + label: 'Publication', + }, + { + value: ChallengeIncentive.SpeakingEngagement, + label: 'Speaking Engagement', + }, + { + value: ChallengeIncentive.Other, + label: 'Other', + }, +]; + +export const challengeCategoriesLabels: ChallengeLabels[] = [ + { + value: ChallengeCategory.Featured, + label: 'Featured', + }, + { + value: ChallengeCategory.Benchmark, + label: 'Benchmark', + }, + { + value: ChallengeCategory.Hackathon, + label: 'Hackathon', + }, + { + value: ChallengeCategory.StartingSoon, + label: 'Starting Soon', + }, + { + value: ChallengeCategory.EndingSoon, + label: 'Closing Soon', + }, + { + value: ChallengeCategory.RecentlyStarted, + label: 'Recently Launched', + }, + { + value: ChallengeCategory.RecentlyEnded, + label: 'Recently Completed', + }, +]; From 9f2a1b52482dab803961eeb13656bc3f380ca7e3 Mon Sep 17 00:00:00 2001 From: Rongrong Chai Date: Tue, 2 Apr 2024 23:30:43 +0000 Subject: [PATCH 12/12] add descriptive name to avoid conflicts --- .../src/lib/challenge-search-filters.ts | 60 +++--------- .../challenge-overview.component.html | 6 +- .../challenge-overview.component.ts | 10 +- .../challenge-card.component.html | 2 +- .../challenge-card.component.ts | 9 +- libs/openchallenges/util/src/index.ts | 2 +- .../lib/pipe/challenge-property-label.pipe.ts | 63 +++++++++--- ...abels.ts => challenge-property-options.ts} | 95 +++++++++++++------ 8 files changed, 148 insertions(+), 99 deletions(-) rename libs/openchallenges/util/src/lib/pipe/{challenge-property-labels.ts => challenge-property-options.ts} (59%) diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts index e1800ef5f7..f5284094c1 100644 --- a/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts +++ b/libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts @@ -1,12 +1,10 @@ -import { - ChallengeSort, - ChallengeStatus, -} from '@sagebionetworks/openchallenges/api-client-angular'; import { Filter } from '@sagebionetworks/openchallenges/ui'; import { - challengeCategoriesLabels, - challengeIncentivesLabels, - challengeSubmissionTypesLabels, + ChallengeCategoriesOptions, + ChallengeIncentivesOptions, + ChallengeStatusOptions, + ChallengeSubmissionTypesOptions, + ChallengeSortOptions, } from '@sagebionetworks/openchallenges/util'; const thisYear = new Date().getFullYear(); @@ -57,47 +55,13 @@ export const challengeStartYearRangeFilter: Filter[] = [ }, ]; -export const challengeStatusFilter: Filter[] = [ - { - value: ChallengeStatus.Active, - label: 'Active', - }, - { - value: ChallengeStatus.Upcoming, - label: 'Upcoming', - }, - { - value: ChallengeStatus.Completed, - label: 'Completed', - }, -]; - -export const challengeSubmissionTypesFilter: Filter[] = - challengeSubmissionTypesLabels; - -export const challengeIncentivesFilter: Filter[] = challengeIncentivesLabels; - -export const challengePlatformsFilter: Filter[] = []; - +export const challengeCategoriesFilter: Filter[] = ChallengeCategoriesOptions; +export const challengeIncentivesFilter: Filter[] = ChallengeIncentivesOptions; export const challengeInputDataTypesFilter: Filter[] = []; - -export const challengeCategoriesFilter: Filter[] = challengeCategoriesLabels; - export const challengeOrganizationsFilter: Filter[] = []; - export const challengeOrganizersFilter: Filter[] = []; - -export const challengeSortFilter: Filter[] = [ - { - value: ChallengeSort.Relevance, - label: 'Relevance', - }, - { - value: ChallengeSort.StartDate, - label: 'Start Date', - }, - { - value: ChallengeSort.Starred, - label: 'Most Starred', - }, -]; +export const challengePlatformsFilter: Filter[] = []; +export const challengeSortFilter: Filter[] = ChallengeSortOptions; +export const challengeStatusFilter: Filter[] = ChallengeStatusOptions; +export const challengeSubmissionTypesFilter: Filter[] = + ChallengeSubmissionTypesOptions; diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html index a3ac7e669c..a0bbd06385 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html @@ -26,7 +26,7 @@

Challenge Details

Status - {{ challenge.status | titlecase }} + {{ challenge.status | challengeStatusLabel }} Platform @@ -58,7 +58,7 @@

Challenge Details

nowrap *ngFor="let submissionType of challenge.submissionTypes; let isLast = last" > - {{ submissionType | submissionTypeLabel }}{{ isLast ? '' : ', ' }} @@ -69,7 +69,7 @@

Challenge Details

Incentive(s) - {{ incentive | incentiveLabel }}{{ isLast ? '' : ', ' }} diff --git a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts index 8cda34665f..611fc4ce7d 100644 --- a/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts +++ b/libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.ts @@ -8,17 +8,19 @@ import { import { MatIconModule } from '@angular/material/icon'; import { - IncentiveLabelPipe, - SubmissionTypeLabelPipe, + ChallengeIncentiveLabelPipe, + ChallengeStatusLabelPipe, + ChallengeSubmissionTypeLabelPipe, } from '@sagebionetworks/openchallenges/util'; @Component({ selector: 'openchallenges-challenge-overview', standalone: true, imports: [ + ChallengeIncentiveLabelPipe, + ChallengeStatusLabelPipe, + ChallengeSubmissionTypeLabelPipe, CommonModule, - IncentiveLabelPipe, MatIconModule, - SubmissionTypeLabelPipe, ], templateUrl: './challenge-overview.component.html', styleUrls: ['./challenge-overview.component.scss'], diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html index f6612b1a82..b5f8532d3e 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html @@ -33,7 +33,7 @@ *ngIf="challenge.incentives.length > 0; else noIncentives" > - {{ incentive | incentiveLabel }}{{ isLast ? '' : ', ' }} + {{ incentive | challengeIncentiveLabel }}{{ isLast ? '' : ', ' }} diff --git a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts index 7e02d68048..6aa29f79f0 100644 --- a/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts +++ b/libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.ts @@ -7,13 +7,18 @@ import { Image, ImageService, } from '@sagebionetworks/openchallenges/api-client-angular'; -import { IncentiveLabelPipe } from '@sagebionetworks/openchallenges/util'; +import { ChallengeIncentiveLabelPipe } from '@sagebionetworks/openchallenges/util'; import { Observable } from 'rxjs'; @Component({ selector: 'openchallenges-challenge-card', standalone: true, - imports: [CommonModule, IncentiveLabelPipe, MatIconModule, RouterModule], + imports: [ + ChallengeIncentiveLabelPipe, + CommonModule, + MatIconModule, + RouterModule, + ], templateUrl: './challenge-card.component.html', styleUrls: ['./challenge-card.component.scss'], }) diff --git a/libs/openchallenges/util/src/index.ts b/libs/openchallenges/util/src/index.ts index dae8eb421b..b92bfcda35 100644 --- a/libs/openchallenges/util/src/index.ts +++ b/libs/openchallenges/util/src/index.ts @@ -5,4 +5,4 @@ export * from './lib/http-status-redirect'; export * from './lib/is-api-client-error'; export * from './lib/page-title.service'; export * from './lib/pipe/challenge-property-label.pipe'; -export * from './lib/pipe/challenge-property-labels'; +export * from './lib/pipe/challenge-property-options'; diff --git a/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts b/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts index a4620bde86..1861f8e2e4 100644 --- a/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts +++ b/libs/openchallenges/util/src/lib/pipe/challenge-property-label.pipe.ts @@ -1,35 +1,76 @@ import { Pipe, PipeTransform } from '@angular/core'; import { + ChallengeCategory, ChallengeIncentive, + ChallengeSort, + ChallengeStatus, ChallengeSubmissionType, } from '@sagebionetworks/openchallenges/api-client-angular'; import { - challengeIncentivesLabels, - challengeSubmissionTypesLabels, -} from './challenge-property-labels'; + ChallengeCategoriesOptions, + ChallengeIncentivesOptions, + ChallengeSortOptions, + ChallengeStatusOptions, + ChallengeSubmissionTypesOptions, +} from './challenge-property-options'; @Pipe({ - name: 'incentiveLabel', + name: 'challengeCategoryLabel', standalone: true, }) -export class IncentiveLabelPipe implements PipeTransform { +export class ChallengeCategoryLabelPipe implements PipeTransform { + transform(category: ChallengeCategory): string | undefined { + const option = ChallengeCategoriesOptions.find( + (item) => item.value === category + ); + return option ? option.label : undefined; + } +} + +@Pipe({ + name: 'challengeIncentiveLabel', + standalone: true, +}) +export class ChallengeIncentiveLabelPipe implements PipeTransform { transform(incentive: ChallengeIncentive): string | undefined { - const filterItem = challengeIncentivesLabels.find( + const option = ChallengeIncentivesOptions.find( (item) => item.value === incentive ); - return filterItem ? filterItem.label : undefined; + return option ? option.label : undefined; + } +} + +@Pipe({ + name: 'challengeSortLabel', + standalone: true, +}) +export class ChallengeSortLabelPipe implements PipeTransform { + transform(sort: ChallengeSort): string | undefined { + const option = ChallengeSortOptions.find((item) => item.value === sort); + return option ? option.label : undefined; + } +} + +@Pipe({ + name: 'challengeStatusLabel', + standalone: true, +}) +export class ChallengeStatusLabelPipe implements PipeTransform { + transform(status: ChallengeStatus): string | undefined { + const option = ChallengeStatusOptions.find((item) => item.value === status); + return option ? option.label : undefined; } } @Pipe({ - name: 'submissionTypeLabel', + name: 'challengeSubmissionTypeLabel', standalone: true, }) -export class SubmissionTypeLabelPipe implements PipeTransform { +export class ChallengeSubmissionTypeLabelPipe implements PipeTransform { transform(submissionType: ChallengeSubmissionType): string | undefined { - const filterItem = challengeSubmissionTypesLabels.find( + const option = ChallengeSubmissionTypesOptions.find( (item) => item.value === submissionType ); - return filterItem ? filterItem.label : undefined; + return option ? option.label : undefined; } } diff --git a/libs/openchallenges/util/src/lib/pipe/challenge-property-labels.ts b/libs/openchallenges/util/src/lib/pipe/challenge-property-options.ts similarity index 59% rename from libs/openchallenges/util/src/lib/pipe/challenge-property-labels.ts rename to libs/openchallenges/util/src/lib/pipe/challenge-property-options.ts index 8266c5ebb9..e70e51963e 100644 --- a/libs/openchallenges/util/src/lib/pipe/challenge-property-labels.ts +++ b/libs/openchallenges/util/src/lib/pipe/challenge-property-options.ts @@ -1,38 +1,53 @@ import { ChallengeCategory, ChallengeIncentive, + ChallengeSort, + ChallengeStatus, ChallengeSubmissionType, } from '@sagebionetworks/openchallenges/api-client-angular'; -type ChallengeLabels = { - value: ChallengeSubmissionType | ChallengeIncentive | ChallengeCategory; +type ChallengePropertyOption = { + value: + | ChallengeCategory + | ChallengeIncentive + | ChallengeSort + | ChallengeStatus + | ChallengeSubmissionType; label: string; }; -export const challengeSubmissionTypesLabels: ChallengeLabels[] = [ +export const ChallengeCategoriesOptions: ChallengePropertyOption[] = [ { - value: ChallengeSubmissionType.ContainerImage, - label: 'Container Image', + value: ChallengeCategory.Featured, + label: 'Featured', }, { - value: ChallengeSubmissionType.Mlcube, - label: 'MLCube', + value: ChallengeCategory.Benchmark, + label: 'Benchmark', }, { - value: ChallengeSubmissionType.Notebook, - label: 'Notebook', + value: ChallengeCategory.Hackathon, + label: 'Hackathon', }, { - value: ChallengeSubmissionType.PredictionFile, - label: 'Prediction File', + value: ChallengeCategory.StartingSoon, + label: 'Starting Soon', }, { - value: ChallengeSubmissionType.Other, - label: 'Other', + value: ChallengeCategory.EndingSoon, + label: 'Closing Soon', + }, + { + value: ChallengeCategory.RecentlyStarted, + label: 'Recently Launched', + }, + { + value: ChallengeCategory.RecentlyEnded, + label: 'Recently Completed', }, ]; -export const challengeIncentivesLabels: ChallengeLabels[] = [ +export const ChallengeIncentivesOptions: ChallengePropertyOption[] = [ { value: ChallengeIncentive.Monetary, label: 'Monetary', @@ -51,33 +66,55 @@ export const challengeIncentivesLabels: ChallengeLabels[] = [ }, ]; -export const challengeCategoriesLabels: ChallengeLabels[] = [ +export const ChallengeSortOptions: ChallengePropertyOption[] = [ { - value: ChallengeCategory.Featured, - label: 'Featured', + value: ChallengeSort.Relevance, + label: 'Relevance', }, { - value: ChallengeCategory.Benchmark, - label: 'Benchmark', + value: ChallengeSort.StartDate, + label: 'Start Date', }, { - value: ChallengeCategory.Hackathon, - label: 'Hackathon', + value: ChallengeSort.Starred, + label: 'Most Starred', }, +]; + +export const ChallengeStatusOptions: ChallengePropertyOption[] = [ { - value: ChallengeCategory.StartingSoon, - label: 'Starting Soon', + value: ChallengeStatus.Active, + label: 'Active', }, { - value: ChallengeCategory.EndingSoon, - label: 'Closing Soon', + value: ChallengeStatus.Upcoming, + label: 'Upcoming', }, { - value: ChallengeCategory.RecentlyStarted, - label: 'Recently Launched', + value: ChallengeStatus.Completed, + label: 'Completed', }, +]; + +export const ChallengeSubmissionTypesOptions: ChallengePropertyOption[] = [ { - value: ChallengeCategory.RecentlyEnded, - label: 'Recently Completed', + value: ChallengeSubmissionType.ContainerImage, + label: 'Container Image', + }, + { + value: ChallengeSubmissionType.Mlcube, + label: 'MLCube', + }, + { + value: ChallengeSubmissionType.Notebook, + label: 'Notebook', + }, + { + value: ChallengeSubmissionType.PredictionFile, + label: 'Prediction File', + }, + { + value: ChallengeSubmissionType.Other, + label: 'Other', }, ];