Skip to content

Commit

Permalink
fix: do not show skeleton loader if clinvar info is missing (#208)
Browse files Browse the repository at this point in the history
  • Loading branch information
@holtgrewe
holtgrewe authored Jun 4, 2024
1 parent 6461700 commit 8ad0981
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 105 deletions.
2 changes: 1 addition & 1 deletion src/components/SeqvarClinvarCard/SeqvarClinvarCard.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,6 @@ describe.concurrent('SeqvarClinvarCard.vue', async () => {
// act: nothing, only test rendering

// assert:
expect(wrapper.text()).toContain('No ClinVar information available.')
expect(wrapper.text()).toContain('Variant not present in local ClinVar copy.')
})
})
205 changes: 101 additions & 104 deletions src/components/SeqvarClinvarCard/SeqvarClinvarCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,119 +32,116 @@ const expand = ref<boolean>(false)
</script>

<template>
<template v-if="!clinvarRecords">
<v-skeleton-loader type="card" />
</template>
<template v-else>
<v-card v-if="clinvarRecords?.records?.length">
<v-card-title class="pb-0 pr-2">
ClinVar
<DocsLink anchor="clinvar" />
</v-card-title>
<v-card-subtitle>
<template
v-for="clinvarRecord in clinvarRecords?.records ?? []"
:key="clinvarRecord.accession!.accession"
>
<a
:href="`https://www.ncbi.nlm.nih.gov/clinvar/?term=${clinvarRecord.accession!.accession}.${clinvarRecord.accession!.version}`"
target="_blank"
>
<v-icon>mdi-launch</v-icon>
<span class="text-no-wrap">
{{ clinvarRecord.accession!.accession }}.{{ clinvarRecord.accession!.version }}
</span>
</a>
</template>
</v-card-subtitle>
<v-card v-if="clinvarRecords?.records?.length">
<v-card-title class="pb-0 pr-2">
ClinVar
<DocsLink anchor="clinvar" />
</v-card-title>
<v-card-subtitle>
<template
v-for="clinvarRecord in clinvarRecords?.records ?? []"
:key="clinvarRecord.accession!.accession"
>
<v-row>
<v-col cols="6" class="ml-4 mb-3">
<GermlineClassification
:germline-classification="clinvarRecord?.classifications?.germlineClassification"
/>
</v-col>
</v-row>
<v-row no-gutters class="ml-4 mb-2">
<v-col cols="6">
<template
v-for="somaticClinicalImpact in clinicalImpacts"
:key="somaticClinicalImpact?.description"
>
<SomaticClinicalImpact :clinical-impact="somaticClinicalImpact" />
</template>
</v-col>
<v-col cols="6">
<SomaticOncongenicity
:oncogenicity-classification="
clinvarRecord?.classifications?.oncogenicityClassification
"
/>
</v-col>
</v-row>
<a
:href="`https://www.ncbi.nlm.nih.gov/clinvar/?term=${clinvarRecord.accession!.accession}.${clinvarRecord.accession!.version}`"
target="_blank"
>
<v-icon>mdi-launch</v-icon>
<span class="text-no-wrap">
{{ clinvarRecord.accession!.accession }}.{{ clinvarRecord.accession!.version }}
</span>
</a>
</template>
<v-expand-transition>
<div v-show="expand">
<v-divider />

</v-card-subtitle>
<template
v-for="clinvarRecord in clinvarRecords?.records ?? []"
:key="clinvarRecord.accession!.accession"
>
<v-row>
<v-col cols="6" class="ml-4 mb-3">
<GermlineClassification
:germline-classification="clinvarRecord?.classifications?.germlineClassification"
/>
</v-col>
</v-row>
<v-row no-gutters class="ml-4 mb-2">
<v-col cols="6">
<template
v-for="clinvarRecord in clinvarRecords?.records ?? []"
:key="clinvarRecord.accession!.accession"
v-for="somaticClinicalImpact in clinicalImpacts"
:key="somaticClinicalImpact?.description"
>
<v-card-title> ClinVar Variant / Condition Records </v-card-title>
<v-card-subtitle v-if="(clinvarRecords?.records?.length ?? 0) > 1">
<a
:href="`https://www.ncbi.nlm.nih.gov/clinvar/?term=${clinvarRecord.accession!.accession}.${clinvarRecord.accession!.version}`"
target="_blank"
>
<v-icon>mdi-launch</v-icon>
<span class="text-no-wrap">
{{ clinvarRecord.accession!.accession }}.{{ clinvarRecord.accession!.version }}
</span>
</a>
</v-card-subtitle>
<v-card-text>
<p>
Below are all variant/condition records for all assessed conditions from ClinVar.
</p>
<v-table density="compact" class="mt-3">
<thead>
<tr>
<th>Condition</th>
<th>Classification (# of submissions)</th>
<th>Review Status</th>
<th>Variant / Condition Record</th>
</tr>
</thead>
<tbody>
<RcvRow
v-for="rcvRecord of clinvarRecord.rcvs"
:key="rcvRecord.accession!.accession"
:rcv="rcvRecord"
/>
</tbody>
</v-table>
</v-card-text>
<SomaticClinicalImpact :clinical-impact="somaticClinicalImpact" />
</template>
</div>
</v-expand-transition>
</v-col>
<v-col cols="6">
<SomaticOncongenicity
:oncogenicity-classification="
clinvarRecord?.classifications?.oncogenicityClassification
"
/>
</v-col>
</v-row>
</template>
<v-expand-transition>
<div v-show="expand">
<v-divider />

<template
v-for="clinvarRecord in clinvarRecords?.records ?? []"
:key="clinvarRecord.accession!.accession"
>
<v-card-title> ClinVar Variant / Condition Records </v-card-title>
<v-card-subtitle v-if="(clinvarRecords?.records?.length ?? 0) > 1">
<a
:href="`https://www.ncbi.nlm.nih.gov/clinvar/?term=${clinvarRecord.accession!.accession}.${clinvarRecord.accession!.version}`"
target="_blank"
>
<v-icon>mdi-launch</v-icon>
<span class="text-no-wrap">
{{ clinvarRecord.accession!.accession }}.{{ clinvarRecord.accession!.version }}
</span>
</a>
</v-card-subtitle>
<v-card-text>
<p>Below are all variant/condition records for all assessed conditions from ClinVar.</p>
<v-table density="compact" class="mt-3">
<thead>
<tr>
<th>Condition</th>
<th>Classification (# of submissions)</th>
<th>Review Status</th>
<th>Variant / Condition Record</th>
</tr>
</thead>
<tbody>
<RcvRow
v-for="rcvRecord of clinvarRecord.rcvs"
:key="rcvRecord.accession!.accession"
:rcv="rcvRecord"
/>
</tbody>
</v-table>
</v-card-text>
</template>
</div>
</v-expand-transition>

<v-divider />
<v-divider />

<v-card-actions>
<v-btn @click="expand = !expand">
{{ !expand ? 'Show Variant / Condition Records' : 'Hide Variant / Condition Records' }}
</v-btn>
<v-spacer />
<v-btn :icon="expand ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="expand = !expand" />
</v-card-actions>
</v-card>
<v-card-actions>
<v-btn @click="expand = !expand">
{{ !expand ? 'Show Variant / Condition Records' : 'Hide Variant / Condition Records' }}
</v-btn>
<v-spacer />
<v-btn :icon="expand ? 'mdi-chevron-up' : 'mdi-chevron-down'" @click="expand = !expand" />
</v-card-actions>
</v-card>

<v-card v-else variant="elevated">
<v-card-text> No ClinVar information available. </v-card-text>
</v-card>
</template>
<v-card v-else variant="elevated">
<v-card-title class="pb-0 pr-2">
ClinVar
<DocsLink anchor="clinvar" />
</v-card-title>
<v-card-text> Variant not present in local ClinVar copy. </v-card-text>
</v-card>
</template>

0 comments on commit 8ad0981

Please sign in to comment.