fix(openchallenges): create pipe to map enum values of challenge properties to labels

libs/openchallenges/challenge-search/src/lib/challenge-search-filters.ts

@@ -5,7 +5,11 @@ import {
   ChallengeStatus,
   ChallengeSubmissionType,
 } from '@sagebionetworks/openchallenges/api-client-angular';
-import { Filter } from '@sagebionetworks/openchallenges/ui';
+import {
+  ChallengeIncentiveLabels,
+  ChallengeSubmissionTypeLabels,
+  Filter,
+} from '@sagebionetworks/openchallenges/ui';
 
 const thisYear = new Date().getFullYear();
 
@@ -73,42 +77,44 @@ 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],
   },
 ];
 
 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],
   },
 ];
 

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

@@ -26,7 +26,7 @@ <h3 class="section-title">Challenge Details</h3>
         </tr>
         <tr>
           <td class="text-right">Status</td>
-          <td>{{ prettify(challenge.status) }}</td>
+          <td>{{ challenge.status | titlecase }}</td>
         </tr>
         <tr>
           <td class="text-right">Platform</td>
@@ -58,7 +58,7 @@ <h3 class="section-title">Challenge Details</h3>
               nowrap
               *ngFor="let submissionType of challenge.submissionTypes; let isLast = last"
             >
-              {{ prettify(submissionType) }}{{ isLast ? '' : ', ' }}</span
+              {{ submissionTypeLabels[submissionType] }}{{ 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">
-              {{ prettify(incentive) }}{{ isLast ? '' : ', ' }}</span
+              {{ incentiveLabels[incentive] }}{{ isLast ? '' : ', ' }}</span
             >
           </td>
           <ng-template #na_prize>

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

@@ -2,9 +2,12 @@ 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';
 
 @Component({
@@ -17,16 +20,10 @@ import { MatIconModule } from '@angular/material/icon';
 export class ChallengeOverviewComponent {
   @Input({ required: true }) challenge!: Challenge;
   organizationCards: OrganizationCard[] = MOCK_ORGANIZATION_CARDS;
-  // mockTopics = ['breast', 'cancer'];
+  incentiveLabels = ChallengeIncentiveLabels;
+  submissionTypeLabels = ChallengeSubmissionTypeLabels;
 
   useNaIfFalsey(str: string | null | undefined) {
-    return str || 'Not available';
-  }
-
-  prettify(camel: string | undefined) {
-    return camel
-      ? camel.charAt(0).toUpperCase() +
-          camel.slice(1).replace(/_/g, ' ').toLowerCase()
-      : undefined;
+    return str ?? 'Not available';
   }
 }

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

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

@@ -28,7 +28,7 @@
     </div>
     <div class="card-footer">
       <mat-icon aria-hidden="true" class="card-icon">emoji_events</mat-icon>
-      <div class="difficulty-tag mat-small">
+      <div class="incentive-tag mat-small">
         {{ incentives }}
       </div>
     </div>

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;

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,6 +25,7 @@ export class ChallengeCardComponent implements OnInit {
   incentives!: string;
   statusClass!: string;
   time_info!: string | number;
+  incentiveLabels = ChallengeIncentiveLabels;
 
   constructor(private imageService: ImageService) {}
 
@@ -39,12 +40,7 @@ export class ChallengeCardComponent implements OnInit {
         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()
-                );
-              })
+              .map((s) => ChallengeIncentiveLabels[s])
               .join(', ');
       this.banner$ = this.challenge.avatarUrl
         ? this.imageService.getImage({

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<ChallengeIncentive, string> = {
+  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',
+};