From 8e3efc15f3256bd4bd49b4aabd1d0742ee3c743f Mon Sep 17 00:00:00 2001
From: Dzmitry Hramyka <grom.dima.grom@gmail.com>
Date: Wed, 17 Jan 2024 09:45:46 +0100
Subject: [PATCH] fix: Expantion of MMSplice and SpliceAI scores properly
 handle Infinity scores (#381) (#383)

---
 .../FreqsCard/AutosomalFreqs.vue              |  11 +-
 .../SeqvarDetails/VariantScoresCard.vue       | 125 ++++++++++++------
 2 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/SeqvarDetails/FreqsCard/AutosomalFreqs.vue b/frontend/src/components/SeqvarDetails/FreqsCard/AutosomalFreqs.vue
index bac38310..2eb8832f 100644
--- a/frontend/src/components/SeqvarDetails/FreqsCard/AutosomalFreqs.vue
+++ b/frontend/src/components/SeqvarDetails/FreqsCard/AutosomalFreqs.vue
@@ -117,12 +117,19 @@ const sexExpanded: any = ref({})
               <tr @click.prevent="sexExpanded[key] = !sexExpanded[key]">
                 <td colspan="2">
                   {{ label }}
-                  <a v-if="!sexExpanded[key]">
+                  <a>
+                    <v-btn size="40" color="" icon>
+                      <v-icon>
+                        {{ sexExpanded[key] ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
+                      </v-icon>
+                    </v-btn>
+                  </a>
+                  <!-- <a v-if="!sexExpanded[key]">
                     <v-icon>mdi-chevron-right</v-icon>
                   </a>
                   <a v-else>
                     <v-icon>mdi-chevron-down</v-icon>
-                  </a>
+                  </a> -->
                 </td>
                 <td class="text-right text-no-wrap">
                   {{ sep(byPop[key]?.counts?.overall?.an ?? 0) }}
diff --git a/frontend/src/components/SeqvarDetails/VariantScoresCard.vue b/frontend/src/components/SeqvarDetails/VariantScoresCard.vue
index 99a97fbd..808d3901 100644
--- a/frontend/src/components/SeqvarDetails/VariantScoresCard.vue
+++ b/frontend/src/components/SeqvarDetails/VariantScoresCard.vue
@@ -199,7 +199,8 @@ const polyphenScore = computed((): number | null =>
               <template
                 v-if="
                   props.varAnnos?.dbnsfp?.BayesDel_addAF_score &&
-                  props.varAnnos?.dbnsfp?.BayesDel_addAF_score !== Infinity
+                  props.varAnnos?.dbnsfp?.BayesDel_addAF_score !== Infinity &&
+                  props.varAnnos?.dbnsfp?.BayesDel_addAF_score !== undefined
                 "
               >
                 <!-- eslint-disable vue/no-v-html -->
@@ -272,7 +273,13 @@ const polyphenScore = computed((): number | null =>
 
             <tr>
               <th class="align-middle">CADD</th>
-              <template v-if="varAnnos?.cadd?.PHRED && varAnnos?.cadd?.PHRED !== Infinity">
+              <template
+                v-if="
+                  varAnnos?.cadd?.PHRED &&
+                  varAnnos?.cadd?.PHRED !== Infinity &&
+                  varAnnos?.cadd?.PHRED !== undefined
+                "
+              >
                 <td class="text-center align-middle">
                   {{ varAnnos?.cadd?.PHRED }}
                 </td>
@@ -326,7 +333,12 @@ const polyphenScore = computed((): number | null =>
             <tr>
               <th class="align-middle">FATHMM</th>
               <template
-                v-if="fathmmScore && translatedFathmmScore && translatedFathmmScore !== Infinity"
+                v-if="
+                  fathmmScore &&
+                  translatedFathmmScore &&
+                  translatedFathmmScore !== Infinity &&
+                  translatedFathmmScore !== undefined
+                "
               >
                 <td class="text-center align-middle">
                   {{ fathmmScore }}
@@ -373,7 +385,7 @@ const polyphenScore = computed((): number | null =>
 
             <tr>
               <th class="align-middle">Gerp++</th>
-              <template v-if="gerpScore && gerpScore !== Infinity">
+              <template v-if="gerpScore && gerpScore !== Infinity && gerpScore !== undefined">
                 <td class="text-center align-middle">
                   {{ gerpScore }}
                 </td>
@@ -404,20 +416,27 @@ const polyphenScore = computed((): number | null =>
               <th class="align-middle">
                 MMSplice
                 <!-- Toggle Button -->
-                <v-btn
-                  variant="outlined"
-                  size="30"
-                  color=""
-                  icon
-                  :disabled="!bestMMSplice.key || bestMMSplice.score === Infinity"
-                  @click="expandMMSplice = !expandMMSplice"
-                >
-                  <v-icon>
-                    {{ expandMMSplice ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
-                  </v-icon>
-                </v-btn>
+                <a>
+                  <v-btn
+                    size="40"
+                    color=""
+                    icon
+                    :disabled="!bestMMSplice.key || bestMMSplice.score === Infinity"
+                    @click="expandMMSplice = !expandMMSplice"
+                  >
+                    <v-icon>
+                      {{ expandMMSplice ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
+                    </v-icon>
+                  </v-btn>
+                </a>
               </th>
-              <template v-if="bestMMSplice.key && bestMMSplice.score !== Infinity">
+              <template
+                v-if="
+                  bestMMSplice.key &&
+                  bestMMSplice.score !== Infinity &&
+                  bestMMSplice.score !== undefined
+                "
+              >
                 <td class="text-center align-middle">
                   {{ bestMMSplice.score }}
                   <span class="text-muted ml-2">({{ bestMMSplice.key }})</span>
@@ -442,7 +461,10 @@ const polyphenScore = computed((): number | null =>
               <tr v-for="(score, index) in allMMSplice" :key="index">
                 <th class="text-center align-middle">{{ index }}</th>
                 <td>{{ score }}</td>
-                <td class="text-center align-middle">
+                <td
+                  v-if="score !== Infinity && score !== undefined"
+                  class="text-center align-middle"
+                >
                   <ScoreDisplay
                     :range-lower="0"
                     :range-upper="1"
@@ -451,13 +473,14 @@ const polyphenScore = computed((): number | null =>
                     :value="score"
                   />
                 </td>
+                <td v-else class="text-center align-middle">&mdash;</td>
                 <td class="text-center align-middle">&mdash;</td>
               </tr>
             </template>
 
             <tr>
               <th class="align-middle">MPC</th>
-              <template v-if="mpcScore && mpcScore !== Infinity">
+              <template v-if="mpcScore && mpcScore !== Infinity && mpcScore !== undefined">
                 <td class="text-center align-middle" v-html="roundIt(mpcScore, 4)" />
                 <td class="text-center align-middle">
                   <ScoreDisplay
@@ -487,7 +510,13 @@ const polyphenScore = computed((): number | null =>
 
             <tr>
               <th class="align-middle">PolyPhen2</th>
-              <template v-if="polyphenScore !== null && polyphenScore !== Infinity">
+              <template
+                v-if="
+                  polyphenScore !== null &&
+                  polyphenScore !== Infinity &&
+                  polyphenScore !== undefined
+                "
+              >
                 <td class="text-center align-middle">
                   {{ polyphenScore }}
                 </td>
@@ -536,7 +565,8 @@ const polyphenScore = computed((): number | null =>
               <template
                 v-if="
                   props.varAnnos?.dbnsfp?.phyloP100way_vertebrate &&
-                  props.varAnnos?.dbnsfp?.phyloP100way_vertebrate !== Infinity
+                  props.varAnnos?.dbnsfp?.phyloP100way_vertebrate !== Infinity &&
+                  props.varAnnos?.dbnsfp?.phyloP100way_vertebrate !== undefined
                 "
               >
                 <td class="text-center align-middle">
@@ -599,7 +629,8 @@ const polyphenScore = computed((): number | null =>
               <template
                 v-if="
                   props.varAnnos?.dbnsfp?.PrimateAI_score &&
-                  props.varAnnos?.dbnsfp?.PrimateAI_score !== Infinity
+                  props.varAnnos?.dbnsfp?.PrimateAI_score !== Infinity &&
+                  props.varAnnos?.dbnsfp?.PrimateAI_score !== undefined
                 "
               >
                 <td
@@ -660,7 +691,14 @@ const polyphenScore = computed((): number | null =>
 
             <tr>
               <th class="align-middle">SIFT</th>
-              <template v-if="siftScore && translatedSiftScore && translatedSiftScore !== Infinity">
+              <template
+                v-if="
+                  siftScore &&
+                  translatedSiftScore &&
+                  translatedSiftScore !== Infinity &&
+                  translatedFathmmScore !== undefined
+                "
+              >
                 <td class="text-center align-middle">
                   {{ siftScore }}
                 </td>
@@ -708,20 +746,27 @@ const polyphenScore = computed((): number | null =>
               <th class="align-middle">
                 SpliceAI
                 <!-- Toggle Button -->
-                <v-btn
-                  variant="outlined"
-                  size="30"
-                  color=""
-                  icon
-                  :disabled="!bestSpliceAi.key || bestSpliceAi.score === Infinity"
-                  @click="expandSpliceAi = !expandSpliceAi"
-                >
-                  <v-icon>
-                    {{ expandSpliceAi ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
-                  </v-icon>
-                </v-btn>
+                <a>
+                  <v-btn
+                    size="40"
+                    color=""
+                    icon
+                    :disabled="!bestSpliceAi.key || bestSpliceAi.score === Infinity"
+                    @click="expandSpliceAi = !expandSpliceAi"
+                  >
+                    <v-icon>
+                      {{ expandSpliceAi ? 'mdi-chevron-down' : 'mdi-chevron-right' }}
+                    </v-icon>
+                  </v-btn>
+                </a>
               </th>
-              <template v-if="bestSpliceAi.key && bestSpliceAi.score !== Infinity">
+              <template
+                v-if="
+                  bestSpliceAi.key &&
+                  bestSpliceAi.score !== Infinity &&
+                  bestSpliceAi.score !== undefined
+                "
+              >
                 <td class="text-center align-middle">
                   {{ bestSpliceAi.score }}
                   <span class="text-muted ml-2">({{ bestSpliceAi.key }})</span>
@@ -746,7 +791,10 @@ const polyphenScore = computed((): number | null =>
               <tr v-for="(score, index) in allSpliceAi" :key="index">
                 <th class="text-center align-middle">{{ index }}</th>
                 <td>{{ score }}</td>
-                <td class="text-center align-middle">
+                <td
+                  v-if="score !== Infinity && score !== undefined"
+                  class="text-center align-middle"
+                >
                   <ScoreDisplay
                     :range-lower="0"
                     :range-upper="1"
@@ -755,13 +803,14 @@ const polyphenScore = computed((): number | null =>
                     :value="score"
                   />
                 </td>
+                <td v-else class="text-center align-middle">&mdash;</td>
                 <td class="text-center align-middle">&mdash;</td>
               </tr>
             </template>
 
             <tr>
               <th class="align-middle">REVEL</th>
-              <template v-if="revelScore && revelScore !== Infinity">
+              <template v-if="revelScore && revelScore !== Infinity && revelScore !== undefined">
                 <td class="text-center align-middle">
                   {{ revelScore }}
                 </td>