create pipe to convert value to label

libs/openchallenges/challenge-search/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/challenge-search.routes';
+export * from './lib/challenge-search-filters';

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',
   },
 ];
 

libs/openchallenges/challenge/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/challenge.routes';
+export * from './lib/challenge-overview/challenge-property-labels';

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

@@ -58,7 +58,7 @@ <h3 class="section-title">Challenge Details</h3>
               nowrap
               *ngFor="let submissionType of challenge.submissionTypes; let isLast = last"
             >
-              {{ submissionTypeLabels[submissionType] }}{{ isLast ? '' : ', ' }}</span
+              {{ submissionType | submissionTypeLabel }}{{ isLast ? '' : ', ' }}</span
             >
           </td>
           <ng-template #na_subs>
@@ -69,7 +69,7 @@ <h3 class="section-title">Challenge Details</h3>
           <td class="text-right">Incentive(s)</td>
           <td *ngIf="challenge.incentives && challenge.incentives.length > 0; else na_prize">
             <span nowrap *ngFor="let incentive of challenge.incentives; let isLast = last">
-              {{ incentiveLabels[incentive] }}{{ isLast ? '' : ', ' }}</span
+              {{ incentive | incentiveLabel }}{{ isLast ? '' : ', ' }}</span
             >
           </td>
           <ng-template #na_prize>

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';

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';

libs/openchallenges/ui/src/lib/challenge-card/challenge-card.component.html

@@ -28,9 +28,17 @@
     </div>
     <div class="card-footer">
       <mat-icon aria-hidden="true" class="card-icon">emoji_events</mat-icon>
-      <div class="incentive-tag mat-small">
-        {{ incentives }}
+      <div
+        class="incentive-tag mat-small"
+        *ngIf="challenge.incentives.length > 0; else noIncentives"
+      >
+        <ng-container *ngFor="let incentive of challenge.incentives; let isLast = last">
+          {{ incentive | incentiveLabel }}{{ isLast ? '' : ', ' }}
+        </ng-container>
       </div>
     </div>
+    <ng-template #noIncentives>
+      <div class="incentive-tag mat-small">No incentives listed</div>
+    </ng-template>
   </div>
 </div>

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<Image> | 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,

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';

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;
+  }
+}