feat: Gene Page

src/api/mavedb/genes.ts

@@ -0,0 +1,21 @@
+import axios from 'axios'
+
+import config from '@/config'
+import {components} from '@/schema/openapi'
+
+export type GeneScoreSet = components['schemas']['ShortScoreSet']
+export type GeneResponse = components['schemas']['GeneResponse']
+
+export interface GetGeneParams {
+  limit?: number
+  offset?: number
+}
+
+export async function getGene(symbol: string, params: GetGeneParams = {}, signal?: AbortSignal): Promise<GeneResponse> {
+  const response = await axios.get<GeneResponse>(`${config.apiBaseUrl}/genes/${encodeURIComponent(symbol)}`, {
+    headers: {accept: 'application/json'},
+    params,
+    signal
+  })
+  return response.data
+}

src/api/mavedb/index.ts

@@ -17,6 +17,7 @@ export * from './access-keys'
 export * from './calibrations'
 export * from './collections'
 export * from './experiments'
+export * from './genes'
 export * from './orcid'
 export * from './permissions'
 export * from './score-sets'

src/components/common/MvCollapsible.vue

@@ -1,6 +1,32 @@
 <template>
   <div class="border-b border-gray-100 last:border-b-0">
+    <div v-if="$slots['inline-link']" class="flex items-center hover:bg-gray-50">
+      <div class="flex items-center px-4 py-2.5">
+        <slot name="inline-link" />
+      </div>
+      <button
+        :aria-label="buttonLabel || undefined"
+        :aria-controls="panelId"
+        :aria-expanded="isOpen"
+        class="flex flex-1 cursor-pointer items-center justify-between gap-2 py-2.5 pr-4 text-left text-xs font-bold uppercase tracking-wide text-gray-500"
+        type="button"
+        @click="toggle"
+      >
+        <span class="min-w-0 flex-1">
+          <slot name="header">
+            {{ title }}
+          </slot>
+        </span>
+        <i
+          aria-hidden="true"
+          class="pi pi-chevron-down text-xs text-gray-400 transition-transform duration-150"
+          :class="{'rotate-180': isOpen}"
+        />
+      </button>
+    </div>
     <button
+      v-else
+      :aria-label="buttonLabel || undefined"
       :aria-controls="panelId"
       :aria-expanded="isOpen"
       class="flex w-full cursor-pointer items-center justify-between px-4 py-2.5 text-left text-xs font-bold uppercase tracking-wide text-gray-500 hover:bg-gray-50"
@@ -36,6 +62,10 @@ export default defineComponent({
     open: {
       type: Boolean,
       default: true
+    },
+    buttonLabel: {
+      type: String,
+      default: ''
     }
   },
 

src/components/common/MvScoreSetRow.vue

@@ -12,7 +12,14 @@
         <CollectionBadge v-for="col in collections" :key="col.urn" :collection="col" size="sm" />
         <span class="mx-0.5 text-border">|</span>
       </template>
-      <MvPill v-for="gene in visibleGenes" :key="gene" :label="gene" title="Target gene" variant="blue" />
+      <template v-for="gene in visibleGeneTargets" :key="`${gene.route ? 'linked' : 'plain'}:${gene.name}`">
+        <router-link v-if="gene.route" class="group no-underline" title="View gene page" :to="gene.route">
+          <MvPill title="Target gene" variant="blue">
+            <span class="group-hover:underline">{{ gene.name }}</span>
+          </MvPill>
+        </router-link>
+        <MvPill v-else :label="gene.name" title="Target gene" variant="blue" />
+      </template>
       <MvPill
         v-if="geneNames.length > maxTags"
         :label="`+${geneNames.length - maxTags} more`"
@@ -39,7 +46,13 @@
         :variant="sequenceType === 'Nucleotide' ? 'nucleotide' : 'protein'"
       />
       <MvPill
-        v-if="scoreSet.numVariants"
+        v-if="showMultiTargetPill && isMultiTarget"
+        label="multi-target"
+        title="Targets multiple genes"
+        variant="sage"
+      />
+      <MvPill
+        v-if="scoreSet.numVariants !== null && scoreSet.numVariants !== undefined"
         :label="`${scoreSet.numVariants.toLocaleString()} variants`"
         title="Number of variants"
       />
@@ -55,7 +68,8 @@
 import {defineComponent, type PropType} from 'vue'
 import CollectionBadge from '@/components/common/MvCollectionBadge.vue'
 import MvPill from '@/components/common/MvPill.vue'
-import {getTargetGeneName} from '@/lib/target-genes'
+import {isMultiTargetScoreSet} from '@/lib/genes'
+import {getTargetGeneLinkItems, type TargetGeneLinkItem} from '@/lib/target-genes'
 import {components} from '@/schema/openapi'
 
 type FullScoreSet = components['schemas']['ScoreSet']
@@ -85,6 +99,10 @@ export default defineComponent({
     showMeta: {
       type: Boolean,
       default: true
+    },
+    showMultiTargetPill: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -95,12 +113,14 @@ export default defineComponent({
     maxTags(): number {
       return MAX_TAGS
     },
+    geneTargets(): TargetGeneLinkItem[] {
+      return getTargetGeneLinkItems(this.scoreSet.targetGenes || [])
+    },
     geneNames(): string[] {
-      if (!this.scoreSet.targetGenes) return []
-      return [...new Set(this.scoreSet.targetGenes.map((g) => getTargetGeneName(g)).filter(Boolean))]
+      return this.geneTargets.map((gene) => gene.name)
     },
-    visibleGenes(): string[] {
-      return this.geneNames.slice(0, MAX_TAGS)
+    visibleGeneTargets(): TargetGeneLinkItem[] {
+      return this.geneTargets.slice(0, MAX_TAGS)
     },
     organisms(): string[] {
       if (!this.scoreSet.targetGenes) return []
@@ -123,6 +143,9 @@ export default defineComponent({
       if (type === 'protein') return 'Protein'
       return null
     },
+    isMultiTarget(): boolean {
+      return isMultiTargetScoreSet(this.scoreSet)
+    },
     formattedDate(): string {
       if (!this.scoreSet.publishedDate) return ''
       const date = new Date(this.scoreSet.publishedDate)

src/components/common/MvServiceUnavailable.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-1 flex-col items-center justify-center px-6 py-16 text-center">
+    <MvDecorativeBars class="mb-7" variant="trailing" />
+
+    <h2 class="mb-3 font-display text-2xl font-bold text-text-primary">
+      {{ title }}
+    </h2>
+
+    <p class="mb-8 max-w-md text-sm leading-relaxed text-text-secondary">
+      {{ description }}
+    </p>
+
+    <div class="flex flex-wrap justify-center gap-3">
+      <button
+        v-if="retryLabel"
+        class="inline-flex items-center gap-1.5 rounded-md bg-orange-cta px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:brightness-90"
+        type="button"
+        @click="$emit('retry')"
+      >
+        {{ retryLabel }}
+      </button>
+      <router-link
+        class="inline-flex items-center gap-1.5 rounded-md border border-border bg-white px-5 py-2.5 text-sm font-semibold text-text-secondary no-underline transition-colors hover:bg-neutral-100"
+        to="/"
+      >
+        Back to home
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import MvDecorativeBars from '@/components/common/MvDecorativeBars.vue'
+
+export default defineComponent({
+  name: 'MvServiceUnavailable',
+
+  components: {MvDecorativeBars},
+
+  props: {
+    title: {type: String, default: 'Service temporarily unavailable'},
+    description: {
+      type: String,
+      default: "We're having trouble fetching the requested information. Please try again in a moment."
+    },
+    retryLabel: {type: String, default: null}
+  },
+
+  emits: ['retry']
+})
+</script>

src/components/common/MvTargetGeneDetails.vue

@@ -31,8 +31,10 @@
       <div class="flex flex-col gap-0.5">
         <div v-for="ext in gene.externalIdentifiers" :key="ext.identifier?.identifier" class="text-text-primary">
           <span class="font-medium text-text-muted">{{ ext.identifier?.dbName }}:</span>
-          {{ ext.identifier?.identifier
-          }}<span v-if="ext.offset" class="text-text-muted"> (offset {{ ext.offset }})</span>
+          {{ ext.identifier?.identifier }}
+          <span v-if="ext.offset !== null && ext.offset !== undefined" class="text-text-muted">
+            (offset {{ ext.offset }})
+          </span>
         </div>
       </div>
     </MvDetailRow>
@@ -46,10 +48,11 @@
           </span>
           <button
             class="inline-flex cursor-pointer items-center gap-1 text-xs-plus font-medium text-sage hover:text-sage-dark"
+            type="button"
             @click="copySequence"
           >
             <i class="pi text-[10px]" :class="copied ? 'pi-check' : 'pi-copy'" />
-            {{ copied ? 'Copied' : 'Copy' }}
+            {{ copied ? 'Copied' : copyFailed ? 'Copy failed' : 'Copy' }}
           </button>
         </div>
         <pre
@@ -77,7 +80,8 @@ export default defineComponent({
 
   data() {
     return {
-      copied: false
+      copied: false,
+      copyFailed: false
     }
   },
 
@@ -91,10 +95,20 @@ export default defineComponent({
     async copySequence() {
       const seq = this.gene.targetSequence?.sequence
       if (!seq) return
-      await navigator.clipboard.writeText(seq)
-      this.copied = true
+      if (!navigator.clipboard) {
+        this.copyFailed = true
+      } else {
+        try {
+          await navigator.clipboard.writeText(seq)
+          this.copied = true
+        } catch {
+          this.copyFailed = true
+        }
+      }
+
       setTimeout(() => {
         this.copied = false
+        this.copyFailed = false
       }, 1500)
     }
   }

src/components/common/MvTargetsAccordion.vue

@@ -14,10 +14,27 @@
           <div class="text-[0.6875rem] text-text-muted leading-snug -mt-1">{{ scoreSet.urn }}</div>
         </div>
         <div class="pl-4">
-          <MvCollapsible v-for="(gene, geneIdx) in scoreSet.targetGenes" :key="`${scoreSet.urn}-${geneIdx}`" :open="ssIdx === 0">
+          <MvCollapsible
+            v-for="(gene, geneIdx) in scoreSet.targetGenes"
+            :key="`${scoreSet.urn}-${geneIdx}`"
+            :button-label="`Toggle details for ${getTargetGeneName(gene)}`"
+            :open="ssIdx === 0"
+          >
+            <template #inline-link>
+              <router-link
+                v-if="gene.mappedHgncName"
+                class="text-sm font-bold uppercase tracking-wide text-link"
+                title="View gene page"
+                :to="{name: 'gene', params: {symbol: gene.mappedHgncName}}"
+              >
+                {{ gene.mappedHgncName }}
+              </router-link>
+              <span v-else class="text-sm font-bold uppercase tracking-wide text-text-primary">{{
+                getTargetGeneName(gene)
+              }}</span>
+            </template>
             <template #header>
               <div class="flex items-center gap-2">
-                <span class="text-sm font-bold text-text-primary">{{ getTargetGeneName(gene) }}</span>
                 <span v-if="gene.category" class="text-xs font-medium text-text-muted">{{
                   textForTargetGeneCategory(gene.category)
                 }}</span>
@@ -31,10 +48,26 @@
 
     <!-- Direct target genes (score set view) -->
     <template v-else-if="targetGenes && targetGenes.length > 0">
-      <MvCollapsible v-for="(gene, i) in targetGenes" :key="i">
+      <MvCollapsible
+        v-for="(gene, i) in targetGenes"
+        :key="i"
+        :button-label="`Toggle details for ${getTargetGeneName(gene)}`"
+      >
+        <template #inline-link>
+          <router-link
+            v-if="gene.mappedHgncName"
+            class="text-sm font-bold uppercase tracking-wide text-link"
+            title="View gene page"
+            :to="{name: 'gene', params: {symbol: gene.mappedHgncName}}"
+          >
+            {{ gene.mappedHgncName }}
+          </router-link>
+          <span v-else class="text-sm font-bold uppercase tracking-wide text-text-primary">{{
+            getTargetGeneName(gene)
+          }}</span>
+        </template>
         <template #header>
           <div class="flex items-center gap-2">
-            <span class="text-sm font-bold text-text-primary">{{ getTargetGeneName(gene) }}</span>
             <span v-if="gene.category" class="text-xs font-medium text-text-muted">{{
               textForTargetGeneCategory(gene.category)
             }}</span>