From 8ad0981c38bb3baf8ca40cd81e9a3a0886bd078e Mon Sep 17 00:00:00 2001
From: Manuel Holtgrewe <manuel.holtgrewe@bih-charite.de>
Date: Tue, 4 Jun 2024 13:49:29 +0200
Subject: [PATCH] fix: do not show skeleton loader if clinvar info is missing
 (#208)

---
 .../SeqvarClinvarCard.spec.ts                 |   2 +-
 .../SeqvarClinvarCard/SeqvarClinvarCard.vue   | 205 +++++++++---------
 2 files changed, 102 insertions(+), 105 deletions(-)

diff --git a/src/components/SeqvarClinvarCard/SeqvarClinvarCard.spec.ts b/src/components/SeqvarClinvarCard/SeqvarClinvarCard.spec.ts
index 901150c..05afe8f 100644
--- a/src/components/SeqvarClinvarCard/SeqvarClinvarCard.spec.ts
+++ b/src/components/SeqvarClinvarCard/SeqvarClinvarCard.spec.ts
@@ -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.')
   })
 })
diff --git a/src/components/SeqvarClinvarCard/SeqvarClinvarCard.vue b/src/components/SeqvarClinvarCard/SeqvarClinvarCard.vue
index 3be8238..701c37d 100644
--- a/src/components/SeqvarClinvarCard/SeqvarClinvarCard.vue
+++ b/src/components/SeqvarClinvarCard/SeqvarClinvarCard.vue
@@ -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>