From 38cbfc13e414c82a490df9ad016956670fb0a73f Mon Sep 17 00:00:00 2001
From: Ben Capodanno <capodb@uw.edu>
Date: Mon, 4 Nov 2024 11:38:53 -0800
Subject: [PATCH] Display Target Categories in a User Friendly Way

---
 src/components/ScoreSetTable.vue           |  4 +++-
 src/components/common/SelectList.vue       |  8 ++++++--
 src/components/screens/ExperimentView.vue  |  6 ++++--
 src/components/screens/ScoreSetCreator.vue | 16 +++++++---------
 src/components/screens/ScoreSetEditor.vue  | 16 +++++++---------
 src/components/screens/ScoreSetView.vue    |  4 +++-
 src/components/screens/SearchView.vue      |  4 +++-
 src/lib/target-genes.ts                    | 20 ++++++++++++++++++++
 8 files changed, 53 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/target-genes.ts

diff --git a/src/components/ScoreSetTable.vue b/src/components/ScoreSetTable.vue
index c7980e12..6786539e 100644
--- a/src/components/ScoreSetTable.vue
+++ b/src/components/ScoreSetTable.vue
@@ -15,6 +15,7 @@
 import $ from "jquery";
 import _ from "lodash";
 
+import { textForTargetGeneCategory } from "@/lib/target-genes"
 import useFormatters from "@/composition/formatters";
 import FlexDataTable from "@/components/common/FlexDataTable";
 
@@ -25,6 +26,7 @@ export default {
   setup: () => {
     return {
       ...useFormatters(),
+      textForTargetGeneCategory: textForTargetGeneCategory
     };
   },
 
@@ -79,7 +81,7 @@ export default {
             title: "Target",
           },
           {
-            data: (x) => _.get(x, "targetGenes[0].category", "null category"),
+            data: (x) => textForTargetGeneCategory(_.get(x, "targetGenes[0].category", undefined)) || "null category",
             title: "Target type",
           },
           {
diff --git a/src/components/common/SelectList.vue b/src/components/common/SelectList.vue
index 6be371b5..238807de 100644
--- a/src/components/common/SelectList.vue
+++ b/src/components/common/SelectList.vue
@@ -15,9 +15,9 @@
       <div class="mavedb-listbox-controls">
       </div>
     </template>
-    <template #option="slotProps">  
+    <template #option="slotProps">
       <div>
-        <span>{{slotProps.option.title || slotProps.option.value}}</span>
+        <span>{{ optionLabel ? optionLabel(slotProps.option.value) : slotProps.option.title || optionLabel ? optionLabel(slotProps.option.value) : slotProps.option.value }}</span>
         <Badge v-if="slotProps.option.badge" :value="slotProps.option.badge" class="badge"></Badge>
       </div>
     </template>
@@ -39,6 +39,10 @@ export default {
       type: Array,
       default: () => []
     },
+    optionLabel: {
+      type: Function,
+      default: null
+    },
     order: {
       type: Array,
       default: () => ['value', 'asc']
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index c517929c..cfd32723 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -136,7 +136,7 @@
             }}</router-link>
             <div v-for="targetGene of scoreSet.targetGenes" :key="targetGene">
               <div v-if="targetGene.name"><strong>Name:</strong> {{ targetGene.name }}</div>
-              <div v-if="targetGene.category"><strong>Type:</strong> {{ targetGene.category }}</div>
+              <div v-if="targetGene.category"><strong>Type:</strong> {{ textForTargetGeneCategory(targetGene.category) }}</div>
 
               <div v-if="targetGene.targetAccession?.accession" style="word-break: break-word">
                 <div v-if="targetGene.targetAccession?.assembly"><strong>Assembly:</strong>
@@ -227,6 +227,7 @@ import PageLoading from '@/components/common/PageLoading'
 import { PrimeIcons } from 'primevue/api'
 import ItemNotFound from '@/components/common/ItemNotFound'
 import useAuth from '@/composition/auth'
+import { textForTargetGeneCategory } from '@/lib/target-genes'
 import useItem from '@/composition/item'
 import useFormatters from '@/composition/formatters'
 import config from '@/config'
@@ -243,7 +244,8 @@ export default {
 
       ...useFormatters(),
       ...useItem({ itemTypeName: 'experiment' }),
-      userIsAuthenticated
+      userIsAuthenticated,
+      textForTargetGeneCategory: textForTargetGeneCategory
     }
   },
 
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index b03b3417..a224b449 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -595,7 +595,7 @@
                       <template #item="slotProps">
                         <div>
                             <div>Name: {{ slotProps.item.name }}</div>
-                            <div>Category: {{ slotProps.item.category }}</div>
+                            <div>Category: {{ textForTargetGeneCategory(slotProps.item.category) }}</div>
                             <div v-for="externalIdentifier of slotProps.item.externalIdentifiers" :key=externalIdentifier.identifier>
                               {{ externalIdentifier.identifier.dbName }}: {{ externalIdentifier.identifier.identifier }}, Offset: {{ externalIdentifier.offset }}
                             </div>
@@ -649,7 +649,7 @@
                       <span class="p-float-label">
                         <span class="p-float-label">
                           <SelectButton v-model="createdTargetGenes[targetIdx].targetGene.category" :id="$scopedId('input-targetGeneCategory')"
-                            :options="targetGeneCategories" />
+                            :options="targetGeneCategories" :optionLabel="textForTargetGeneCategory" />
                         </span>
                       </span>
                       <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{ validationErrors[`targetGene.${targetIdx}.category`] }}</span>
@@ -839,7 +839,7 @@
                       <span class="p-float-label">
                         <span class="p-float-label">
                           <SelectButton v-model="createdTargetGenes[targetIdx].targetGene.category" :id="$scopedId('input-targetGeneCategoryLabel')"
-                            :options="targetGeneCategories" />
+                            :options="targetGeneCategories" :optionLabel="textForTargetGeneCategory" />
                         </span>
                       </span>
                       <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{ validationErrors[`targetGene.${targetIdx}.category`] }}</span>
@@ -1123,6 +1123,7 @@ import EmailPrompt from '@/components/common/EmailPrompt'
 import useItem from '@/composition/item'
 import useItems from '@/composition/items'
 import config from '@/config'
+import { TARGET_GENE_CATEGORIES, textForTargetGeneCategory } from '@/lib/target-genes'
 import {ORCID_ID_REGEX} from '@/lib/orcid'
 import { normalizeDoi, validateDoi} from '@/lib/identifiers'
 import useFormatters from '@/composition/formatters'
@@ -1254,7 +1255,8 @@ export default {
       taxonomySuggestions: taxonomySuggestions.items,
       setTaxonomySearch: (text) => taxonomySuggestions.setRequestBody({text}),
       assemblies: assemblies.items,
-      geneNames: geneNames.items
+      geneNames: geneNames.items,
+      textForTargetGeneCategory: textForTargetGeneCategory
     }
   },
 
@@ -1310,11 +1312,7 @@ export default {
       'DNA',
       'protein'
     ],
-    targetGeneCategories: [
-      'Protein coding',
-      'Regulatory',
-      'Other noncoding'
-    ],
+    targetGeneCategories: TARGET_GENE_CATEGORIES,
     rangeClassifications: [
       'Normal',
       'Abnormal'
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 3efe6311..42bb545f 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -375,7 +375,7 @@
                               <template #item="slotProps">
                                 <div>
                                     <div>Name: {{ slotProps.item.name }}</div>
-                                    <div>Category: {{ slotProps.item.category }}</div>
+                                    <div>Category: {{ textForTargetGeneCategory(slotProps.item.category) }}</div>
                                     <div v-for="externalIdentifier of slotProps.item.externalIdentifiers" :key=externalIdentifier.identifier>
                                       {{ externalIdentifier.identifier.dbName }}: {{ externalIdentifier.identifier.identifier }}, Offset: {{ externalIdentifier.offset }}
                                     </div>
@@ -402,7 +402,7 @@
                         <div class="field">
                           <span class="p-float-label">
                             <SelectButton v-model="targetGene.category" :id="$scopedId('input-targetGeneCategory')"
-                              :options="targetGeneCategories" />
+                              :options="targetGeneCategories" :optionLabel="textForTargetGeneCategory" />
                           </span>
                         </div>
                         <div v-for="dbName of externalGeneDatabases" class="field field-columns" :key="dbName">
@@ -516,7 +516,7 @@
                         <div class="field">
                           <span class="p-float-label">
                             <SelectButton v-model="targetGene.category" :id="$scopedId('input-targetGeneCategory')"
-                              :options="targetGeneCategories" />
+                              :options="targetGeneCategories" :optionLabel="textForTargetGeneCategory" />
                           </span>
                         </div>
                         <div>
@@ -732,6 +732,7 @@
   import {normalizeDoi, normalizeIdentifier, normalizePubmedId, validateDoi, validateIdentifier, validatePubmedId} from '@/lib/identifiers'
   import {ORCID_ID_REGEX} from '@/lib/orcid'
   import useFormatters from '@/composition/formatters'
+import { TARGET_GENE_CATEGORIES, textForTargetGeneCategory } from '@/lib/target-genes'
 
   const externalGeneDatabases = ['UniProt', 'Ensembl', 'RefSeq']
 
@@ -826,7 +827,8 @@
         setTaxonomySearch: (text) => taxonomySuggestions.setRequestBody({text}),
         assemblies: assemblies.items,
         geneNames: geneNames.items,
-        expandedTargetGeneRows
+        expandedTargetGeneRows,
+        textForTargetGeneCategory: textForTargetGeneCategory
       }
     },
 
@@ -880,11 +882,7 @@
         'DNA',
         'protein'
       ],
-      targetGeneCategories: [
-        'Protein coding',
-        'Regulatory',
-        'Other noncoding'
-      ],
+      targetGeneCategories: TARGET_GENE_CATEGORIES,
       rangeClassifications: [
         'normal',
         'abnormal'
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index 5df6978a..0d4d66fc 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -232,7 +232,7 @@
           <div class="mave-score-set-section-title">Targets</div>
           <div v-for="targetGene of item.targetGenes" :key="targetGene">
             <div v-if="targetGene.name"><strong>Name:</strong> {{ targetGene.name }}</div>
-            <div v-if="targetGene.category"><strong>Type:</strong> {{ targetGene.category }}</div>
+            <div v-if="targetGene.category"><strong>Type:</strong> {{ textForTargetGeneCategory(targetGene.category) }}</div>
 
             <div v-if="targetGene.targetAccession?.accession" style="word-break: break-word">
               <div v-if="targetGene.targetAccession?.assembly"><strong>Assembly:</strong>
@@ -422,6 +422,7 @@ import useFormatters from '@/composition/formatters'
 import useItem from '@/composition/item'
 import useRemoteData from '@/composition/remote-data'
 import config from '@/config'
+import { textForTargetGeneCategory } from '@/lib/target-genes';
 import {saveChartAsFile} from '@/lib/chart-export'
 import { parseScoresOrCounts } from '@/lib/scores'
 import { variantNotNullOrNA } from '@/lib/mave-hgvs';
@@ -481,6 +482,7 @@ export default {
       setScoresDataUrl: scoresRemoteData.setDataUrl,
       ensureScoresDataLoaded: scoresRemoteData.ensureDataLoaded,
       variantSearchSuggestions,
+      textForTargetGeneCategory: textForTargetGeneCategory
     }
   },
   props: {
diff --git a/src/components/screens/SearchView.vue b/src/components/screens/SearchView.vue
index 79fd428e..56426448 100644
--- a/src/components/screens/SearchView.vue
+++ b/src/components/screens/SearchView.vue
@@ -16,7 +16,7 @@
           <TabPanel header="Target filters">
             <div class="mavedb-search-filters">
               <SelectList v-model="filterTargetNames" :options="targetNameFilterOptions" class="mavedb-search-filter-option-picker" title="Target name"  />
-              <SelectList v-model="filterTargetTypes" :options="targetTypeFilterOptions" class="mavedb-search-filter-option-picker" title="Target type"  />
+              <SelectList v-model="filterTargetTypes" :options="targetTypeFilterOptions" :optionLabel="textForTargetGeneCategory" class="mavedb-search-filter-option-picker" title="Target type"  />
               <SelectList v-model="filterTargetOrganismNames" :options="targetOrganismFilterOptions" class="mavedb-search-filter-option-picker mavedb-organism-picker" title="Target organism"  />
               <SelectList v-model="filterTargetAccession" :options="targetAccessionFilterOptions" class="mavedb-search-filter-option-picker mavedb-organism-picker" title="Target accession"  />
             </div>
@@ -59,6 +59,7 @@ import { defineComponent } from 'vue'
 import { paths, components } from '@/schema/openapi'
 
 import type {LocationQueryValue} from "vue-router";
+import { textForTargetGeneCategory } from '@/lib/target-genes'
 
 type ShortScoreSet = components['schemas']['ShortScoreSet']
 type ShortTargetGene = components['schemas']['ShortTargetGene']
@@ -131,6 +132,7 @@ export default defineComponent({
       language: {
         emptyTable: 'Type in the search box above or use the filters to find a data set.'
       },
+      textForTargetGeneCategory: textForTargetGeneCategory,
     }
   },
   computed: {
diff --git a/src/lib/target-genes.ts b/src/lib/target-genes.ts
new file mode 100644
index 00000000..9e9e32ca
--- /dev/null
+++ b/src/lib/target-genes.ts
@@ -0,0 +1,20 @@
+export type TargetGeneCategory = "protein_coding" | "regulatory" | "other_noncoding"
+
+export const TARGET_GENE_CATEGORIES: TargetGeneCategory[] = [
+    'protein_coding',
+    'regulatory',
+    'other_noncoding'
+]
+
+export function textForTargetGeneCategory(cat: TargetGeneCategory): string | undefined {
+    switch (cat) {
+        case "protein_coding":
+            return "Protein Coding"
+        case "regulatory":
+            return "Regulatory"
+        case "other_noncoding":
+            return "Other noncoding"
+        default:
+            return undefined
+    }
+}