feat: refurbishing sequence variant details page (#244)

frontend/src/components/BookmarkListItem.vue

@@ -7,7 +7,7 @@ import { StoreState } from '@/stores/misc'
 // Import the BookmarksClient
 
 export interface Props {
-  type: string
+  type: "gene" | "seqvar" | "strucvar" | ''
   id: string
 }
 

frontend/src/components/GeneDetails/OverviewCard.vue

@@ -7,11 +7,15 @@ import GeneRifs from '@/components/GeneDetails/OverviewCard/GeneRifs.vue'
 import LocusDatabases from '@/components/GeneDetails/OverviewCard/LocusDatabases.vue'
 
 export interface Props {
-  geneInfo: any
+  geneInfo: any,
+  showGeneDetailsLink?: boolean,
+  genomeRelease?: 'grch37' | 'grch38'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  geneInfo: null
+  geneInfo: null,
+  showGeneDetailsLink: true,
+  genomeRelease: 'grch37'
 })
 
 // -- code for expanded / collapsed card --------------------------------------
@@ -98,6 +102,18 @@ const summaryText = computed<string>(() => {
           </a>
         </template>
       </v-card-text>
+      <!-- <a
+              style="cursor: pointer"
+              title="go to Gene details page"
+              @click.prevent="
+                router.push({
+                  name: 'gene',
+                  params: { searchTerm: item.raw.hgnc.agr, genomeRelease: genomeRelease }
+                })
+              "
+            >
+              <v-icon>mdi-arrow-right-circle-outline</v-icon>
+            </a> -->
 
       <v-expand-transition>
         <div v-if="isExpanded">
@@ -160,6 +176,17 @@ const summaryText = computed<string>(() => {
         >
           MGI
         </v-btn>
+        <v-btn
+          :to="{
+            name: 'gene',
+            params: { searchTerm: geneInfo?.hgnc?.agr, genomeRelease }
+          }"
+          target="_blank"
+          prepend-icon="mdi-arrow-right-circle-outline"
+          v-if="showGeneDetailsLink"
+        >
+          Gene Details
+        </v-btn>
 
         <v-spacer />
         <div class="text-grey text-caption">

frontend/src/components/GeneDetails/OverviewCard/GeneRifs.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+
 export interface Props {
   ncbi: any
 }
@@ -7,6 +9,41 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
   ncbi: null
 })
+
+/** Data structure for gene RIF. */
+interface GeneRif {
+  text: string
+  pmids: string[]
+}
+
+// The data to display.
+const items = ref<GeneRif[]>([])
+
+// Initialize `items`.
+const initializeItems = () => {
+  if (props.ncbi?.rifEntries?.length) {
+    items.value = props.ncbi.rifEntries.slice(0, 10)
+  }
+}
+
+// Initialize items on mounted and change of `ncbi.rifEntries`.
+onMounted(initializeItems)
+watch(() => props.ncbi?.rifEntries, initializeItems)
+
+// Load more items.
+type Done = (status: 'error' | 'loading' | 'empty' | 'ok') => void
+type LoadItemsArgs = { done: Done }
+const loadItems = async ({ done }: LoadItemsArgs ) => {
+  if (props.ncbi?.rifEntries?.length) {
+    if (items.value.length === props.ncbi.rifEntries.length) {
+      done('empty')
+    } else {
+      const nextItems = props.ncbi.rifEntries.slice(items.value.length, items.value.length + 10)
+      items.value = items.value.concat(nextItems)
+      done('ok')
+    }
+  }
+}
 </script>
 
 <template>
@@ -17,22 +54,25 @@ const props = withDefaults(defineProps<Props>(), {
         <small>({{ ncbi?.rifEntries?.length ?? 0 }})</small>
       </div>
     </div>
-    <ul v-if="ncbi?.rifEntries?.length" class="d-flex flex-column flex-grow-1">
-      <ul class="h-auto overflow-auto" style="max-height: 200px; font-size: 90%; height: 100%">
-        <template v-for="entry in ncbi.rifEntries" :key="entry">
-          <li v-if="entry?.text?.length">
-            {{ entry.text }}
+    <div v-if="ncbi?.rifEntries?.length" class="d-flex flex-column flex-grow-1">
+      <v-infinite-scroll :height="200" style="font-size: 90%;" :onLoad="loadItems">
+        <template v-for="(item, index) in items" :key="index">
+          <div v-if="item?.text?.length">
+            {{ item.text }}
             <a
-              :href="'https://www.ncbi.nlm.nih.gov/pubmed/?term=' + entry.pmids.join('+')"
+              :href="'https://www.ncbi.nlm.nih.gov/pubmed/?term=' + item.pmids.join('+')"
               target="_blank"
             >
               <v-icon>mdi-launch</v-icon>
               PubMed
             </a>
-          </li>
+          </div>
         </template>
-      </ul>
-    </ul>
-    <div v-else>No GeneRIFs available for gene.</div>
+
+        <template v-slot:empty>
+          No GeneRIFs available for gene
+        </template>
+      </v-infinite-scroll>
+    </div>
   </div>
 </template>

frontend/src/components/VariantDetails/ClinVar.vue → frontend/src/components/SeqvarDetails/ClinVar.vue

@@ -5,7 +5,7 @@ import {
   CLINICAL_SIGNIFICANCE_LABEL,
   REVIEW_STATUS_LABEL,
   REVIEW_STATUS_STARS
-} from '@/components/VariantDetails/ClinVar.c'
+} from '@/components/SeqvarDetails/ClinVar.c'
 
 interface Props {
   clinvar?: any

frontend/src/components/VariantDetails/VariantFreqs.vue → frontend/src/components/SeqvarDetails/VariantFreqs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import VariantDetailsFreqsAutosomal from '@/components/VariantDetails/FreqsAutosomal.vue'
-import VariantDetailsFreqsMitochondrial from '@/components/VariantDetails/FreqsMitochondrial.vue'
+import VariantDetailsFreqsAutosomal from '@/components/SeqvarDetails/FreqsAutosomal.vue'
+import VariantDetailsFreqsMitochondrial from '@/components/SeqvarDetails/FreqsMitochondrial.vue'
 import { isVariantMt } from '@/lib/utils'
 import { type SmallVariant } from '@/stores/variantInfo'
 

frontend/src/components/VariantDetails/VariantTools.vue → frontend/src/components/SeqvarDetails/VariantTools.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import ScoreDisplay from '@/components/VariantDetails/ScoreDisplay.vue'
+import ScoreDisplay from '@/components/SeqvarDetails/ScoreDisplay.vue'
 import { roundIt } from '@/lib/utils'
 import { type SmallVariant } from '@/stores/variantInfo'
 

frontend/src/components/StrucvarDetails/ClinvarCard.vue

@@ -6,7 +6,7 @@ import {
   CLINICAL_SIGNIFICANCE_LABEL,
   REVIEW_STATUS_LABEL,
   REVIEW_STATUS_STARS
-} from '@/components/VariantDetails/ClinVar.c'
+} from '@/components/SeqvarDetails/ClinVar.c'
 import { roundIt } from '@/lib/utils'
 import { useSvInfoStore } from '@/stores/svInfo'
 

frontend/src/components/__tests__/VariantDetails/AcmgRating.spec.ts

@@ -2,7 +2,7 @@ import { createTestingPinia } from '@pinia/testing'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
-import AcmgRating from '@/components/VariantDetails/AcmgRating.vue'
+import AcmgRating from '@/components/SeqvarDetails/AcmgRating.vue'
 import { AcmgCriteria, MultiSourceAcmgCriteriaState, Presence, StateSource } from '@/lib/acmgSeqVar'
 import { setupMountedComponents } from '@/lib/test-utils'
 import { StoreState } from '@/stores/misc'

frontend/src/components/__tests__/VariantDetails/BeaconNetwork.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import BeaconNetwork from '@/components/VariantDetails/BeaconNetwork.vue'
+import BeaconNetwork from '@/components/SeqvarDetails/BeaconNetwork.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 const smallVariantInfo = {

frontend/src/components/__tests__/VariantDetails/ClinVar.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import * as clinVarInfo from '@/assets/__tests__/BRCA1VariantClinVar.json'
-import ClinVar from '@/components/VariantDetails/ClinVar.vue'
+import ClinVar from '@/components/SeqvarDetails/ClinVar.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 describe.concurrent('ClinVar', async () => {

frontend/src/components/__tests__/VariantDetails/FreqsAutosomal.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import * as BRCA1VariantInfo from '@/assets/__tests__/BRCA1VariantInfo.json'
-import FreqsAutosomal from '@/components/VariantDetails/FreqsAutosomal.vue'
+import FreqsAutosomal from '@/components/SeqvarDetails/FreqsAutosomal.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 const smallVariantInfo = {

frontend/src/components/__tests__/VariantDetails/FreqsMitochondrial.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import FreqsMitochondrial from '@/components/VariantDetails/FreqsMitochondrial.vue'
+import FreqsMitochondrial from '@/components/SeqvarDetails/FreqsMitochondrial.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 const smallVariantInfo = {

frontend/src/components/__tests__/VariantDetails/ScoreDisplay.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import ScoreDisplay from '@/components/VariantDetails/ScoreDisplay.vue'
+import ScoreDisplay from '@/components/SeqvarDetails/ScoreDisplay.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 describe.concurrent('ScoreDisplay', async () => {

frontend/src/components/__tests__/VariantDetails/TxCsq.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import * as BRCA1TxInfo from '@/assets/__tests__/BRCA1TxInfo.json'
-import TxCsq from '@/components/VariantDetails/TxCsq.vue'
+import TxCsq from '@/components/SeqvarDetails/TxCsq.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 describe.concurrent('TxCsq', async () => {

frontend/src/components/__tests__/VariantDetails/VariantConservation.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import * as BRCA1VariantInfo from '@/assets/__tests__/BRCA1VariantInfo.json'
-import VariantConservation from '@/components/VariantDetails/VariantConservation.vue'
+import VariantConservation from '@/components/SeqvarDetails/VariantConservation.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 describe.concurrent('VariantConservation', async () => {

frontend/src/components/__tests__/VariantDetails/VariantFreqs.spec.ts

@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest'
 
 import * as BRCA1VariantInfo from '@/assets/__tests__/BRCA1VariantInfo.json'
-import VariantDetailsFreqsAutosomal from '@/components/VariantDetails/FreqsAutosomal.vue'
-import VariantDetailsFreqsMitochondrial from '@/components/VariantDetails/FreqsMitochondrial.vue'
-import VariantFreqs from '@/components/VariantDetails/VariantFreqs.vue'
+import VariantDetailsFreqsAutosomal from '@/components/SeqvarDetails/FreqsAutosomal.vue'
+import VariantDetailsFreqsMitochondrial from '@/components/SeqvarDetails/FreqsMitochondrial.vue'
+import VariantFreqs from '@/components/SeqvarDetails/VariantFreqs.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 const smallVariantInfo = {

frontend/src/components/__tests__/VariantDetails/VariantGene.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import * as BRCA1GeneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
-import VariantGene from '@/components/VariantDetails/VariantGene.vue'
+import VariantGene from '@/components/SeqvarDetails/VariantGene.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 describe.concurrent('VariantGene', async () => {

frontend/src/components/__tests__/VariantDetails/VariantTools.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import * as BRCA1VariantInfo from '@/assets/__tests__/BRCA1VariantInfo.json'
-import VariantTools from '@/components/VariantDetails/VariantTools.vue'
+import VariantTools from '@/components/SeqvarDetails/VariantTools.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 const smallVariantInfo = {

frontend/src/components/__tests__/VariantDetails/VariantValidator.spec.ts

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import * as VariantValidatorInfo from '@/assets/__tests__/BRCA1VariantValidator.json'
-import VariantValidator from '@/components/VariantDetails/VariantValidator.vue'
+import VariantValidator from '@/components/SeqvarDetails/VariantValidator.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
 const smallVariantInfo = {

frontend/src/router/index.ts

@@ -14,7 +14,7 @@ import PrivacyView from '@/views/PrivacyView.vue'
 import ProfileView from '@/views/ProfileView.vue'
 import StrucvarDetailsView from '@/views/StrucvarDetailsView.vue'
 import TermsView from '@/views/TermsView.vue'
-import VariantDetailView from '@/views/VariantDetailView.vue'
+import SeqvarDetailsView from '@/views/SeqvarDetailsView.vue'
 import VerifyEmailView from '@/views/VerifyEmailView.vue'
 
 const routes = [
@@ -69,7 +69,7 @@ const routes = [
   {
     path: '/variant/:searchTerm/:genomeRelease',
     name: 'variant',
-    component: VariantDetailView,
+    component: SeqvarDetailsView,
     props: (route: any) => {
       return { searchTerm: route.params.searchTerm, genomeRelease: route.params.genomeRelease }
     }

frontend/src/views/GeneDetailView.vue

@@ -131,7 +131,7 @@ const openedSection = ref<string[]>(['gene'])
     </v-navigation-drawer>
     <v-main class="my-3 mx-3">
       <div id="gene-overview">
-        <OverviewCard :gene-info="geneInfoStore.geneInfo" />
+        <OverviewCard :gene-info="geneInfoStore.geneInfo" :show-gene-details-link="false" />
       </div>
 
       <div id="gene-pathogenicity">
@@ -150,7 +150,7 @@ const openedSection = ref<string[]>(['gene'])
         />
       </div>
 
-      <div id="gene-clinvar">
+      <div id="gene-clinvar" v-if="geneInfoStore?.geneClinvar">
         <ClinvarCard
           :gene-clinvar="geneInfoStore.geneClinvar"
           :transcripts="geneInfoStore.transcripts"