feat: refurbishing sequence variant details page (#244) (#255)

bihealth · Dec 6, 2023 · 8f67c86 · 8f67c86
1 parent 6af8969
commit 8f67c86
Show file tree

Hide file tree

Showing 66 changed files with 1,971 additions and 1,815 deletions.
diff --git a/frontend/src/components/BookmarkListItem.vue b/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
 }
 

diff --git a/frontend/src/components/GeneDetails/OverviewCard.vue b/frontend/src/components/GeneDetails/OverviewCard.vue
@@ -8,10 +8,14 @@ import LocusDatabases from '@/components/GeneDetails/OverviewCard/LocusDatabases
 
 export interface Props {
   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
+          v-if="showGeneDetailsLink"
+          :to="{
+            name: 'gene',
+            params: { searchTerm: geneInfo?.hgnc?.agr, genomeRelease }
+          }"
+          target="_blank"
+          prepend-icon="mdi-arrow-right-circle-outline"
+        >
+          Gene Details
+        </v-btn>
 
         <v-spacer />
         <div class="text-grey text-caption">

diff --git a/frontend/src/components/GeneDetails/OverviewCard/GeneRifs.vue b/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,23 @@ 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%" :on-load="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 #empty> No GeneRIFs available for gene </template>
+      </v-infinite-scroll>
+    </div>
   </div>
 </template>
diff --git a/...mponents/VariantDetails/BeaconNetwork.vue → ...nents/SeqvarDetails/BeaconNetworkCard.vue b/...mponents/VariantDetails/BeaconNetwork.vue → ...nents/SeqvarDetails/BeaconNetworkCard.vue
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import { type SmallVariant } from '@/stores/variantInfo'
 
 interface Props {
-  smallVariant?: SmallVariant
+  smallVariant?: SmallVariant | null
 }
 
 const props = defineProps<Props>()
@@ -31,8 +31,10 @@ const loadBeacon = () => {
 
 <template>
   <v-card>
-    <v-card-title>Beacon Network</v-card-title>
-    <v-divider />
+    <v-card-title> Beacon Network </v-card-title>
+    <v-card-subtitle class="text-overline">
+      Lookup Variant in GA4GH Beacon Network
+    </v-card-subtitle>
     <v-card-text v-if="beaconAddress">
       <iframe
         ref="beaconFrame"
@@ -42,12 +44,10 @@ const loadBeacon = () => {
         hspace="0"
       />
     </v-card-text>
-    <v-card-actions v-else>
-      <v-card-title>
-        <v-btn prepend-icon="mdi-refresh" style="float: right" @click="loadBeacon()">
-          Query Beacon
-        </v-btn>
-      </v-card-title>
-    </v-card-actions>
+    <v-card-text v-else>
+      <v-btn prepend-icon="mdi-cloud-search" variant="tonal" rounded="sm" @click="loadBeacon()">
+        Query Beacon Network
+      </v-btn>
+    </v-card-text>
   </v-card>
 </template>