Skip to content

Commit

Permalink
fix: Expantion of MMSplice and SpliceAI scores properly handle Infini…
Browse files Browse the repository at this point in the history 
…ty scores (#381) (#383)
  • Loading branch information
@gromdimon
gromdimon authored Jan 17, 2024
1 parent 15a565d commit 8e3efc1
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 40 deletions.
11 changes: 9 additions & 2 deletions frontend/src/components/SeqvarDetails/FreqsCard/AutosomalFreqs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) }}
Expand Down
125 changes: 87 additions & 38 deletions frontend/src/components/SeqvarDetails/VariantScoresCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 }}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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"
Expand All @@ -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>
Expand Down

0 comments on commit 8e3efc1

Please sign in to comment.