Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: do not show skeleton loader if clinvar info is missing #208

Merged
merged 1 commit into from
Jun 4, 2024
Merged

fix: do not show skeleton loader if clinvar info is missing #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/SeqvarClinvarCard/SeqvarClinvarCard.spec.ts
View file
Open in desktop
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
Open in desktop
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>
Loading