From cc34f3129c982d60db60b4a2dbe308839561370f Mon Sep 17 00:00:00 2001
From: Benjamin Capodanno <bencap@outlook.com>
Date: Wed, 20 May 2026 16:15:52 -0700
Subject: [PATCH 1/4] feat(MvCollapsible): add inline-link slot and buttonLabel
 prop

- Add an `inline-link` named slot that, when present, renders a
  separate left-aligned section alongside the toggle button, allowing
  an inline link to coexist with the collapsible header
- Add `buttonLabel` prop to set an accessible `aria-label` on the
  toggle button for improved screen-reader support
---
 src/components/common/MvCollapsible.vue | 30 +++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/common/MvCollapsible.vue b/src/components/common/MvCollapsible.vue
index e7f6750b..974b82be 100644
--- a/src/components/common/MvCollapsible.vue
+++ b/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: ''
     }
   },
 

From 2f9168d8c1d0a27b3448cb77dbd3e82583b94f4d Mon Sep 17 00:00:00 2001
From: Benjamin Capodanno <bencap@outlook.com>
Date: Wed, 20 May 2026 16:16:39 -0700
Subject: [PATCH 2/4] feat(MvServiceUnavailable): add service unavailable error
 state component

New reusable component for displaying a service/fetch error state with
a customizable title, description, optional retry button, and a
"Back to home" fallback link.
---
 .../common/MvServiceUnavailable.vue           | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/common/MvServiceUnavailable.vue

diff --git a/src/components/common/MvServiceUnavailable.vue b/src/components/common/MvServiceUnavailable.vue
new file mode 100644
index 00000000..ec014612
--- /dev/null
+++ b/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>

From 2912c1e5d77264f9a0273818c548e8a1abf94f66 Mon Sep 17 00:00:00 2001
From: Benjamin Capodanno <bencap@outlook.com>
Date: Wed, 20 May 2026 16:19:44 -0700
Subject: [PATCH 3/4] feat(genes): add gene detail page with score set browsing

- Add `/genes/:symbol` route and `GeneView` screen component that
  displays gene facts (identifiers, taxonomy, aliases) and all
  published score sets grouped by experiment
- Add `src/api/mavedb/genes.ts` client for the new `/genes/{symbol}`
  API endpoint with paginated score-set support
- Add `src/lib/genes.ts` helpers for formatting gene facts, grouping
  score sets by experiment, and classifying API errors
- Add `src/lib/target-genes.test.ts` and `src/lib/genes.test.ts`
  unit tests covering the new utility functions
- Extend `src/schema/openapi.d.ts` with `GeneResponse` and related
  schemas
---
 src/api/mavedb/genes.ts             |  21 ++
 src/api/mavedb/index.ts             |   1 +
 src/components/screens/GeneView.vue | 334 ++++++++++++++++++++++++++++
 src/lib/genes.test.ts               | 267 ++++++++++++++++++++++
 src/lib/genes.ts                    | 100 +++++++++
 src/lib/target-genes.test.ts        |  78 +++++++
 src/router/index.ts                 |   9 +
 src/schema/openapi.d.ts             |  77 +++++++
 8 files changed, 887 insertions(+)
 create mode 100644 src/api/mavedb/genes.ts
 create mode 100644 src/components/screens/GeneView.vue
 create mode 100644 src/lib/genes.test.ts
 create mode 100644 src/lib/genes.ts
 create mode 100644 src/lib/target-genes.test.ts

diff --git a/src/api/mavedb/genes.ts b/src/api/mavedb/genes.ts
new file mode 100644
index 00000000..b1416167
--- /dev/null
+++ b/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
+}
diff --git a/src/api/mavedb/index.ts b/src/api/mavedb/index.ts
index 26388997..c097c748 100644
--- a/src/api/mavedb/index.ts
+++ b/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'
diff --git a/src/components/screens/GeneView.vue b/src/components/screens/GeneView.vue
new file mode 100644
index 00000000..7983b7fb
--- /dev/null
+++ b/src/components/screens/GeneView.vue
@@ -0,0 +1,334 @@
+<template>
+  <MvLayout>
+    <template v-if="status === 'Loaded' && gene" #header>
+      <MvPageHeader eyebrow="Gene" max-width="1000px" :title="gene.symbol">
+        <template #subtitle>
+          <div class="-mt-3 text-sm leading-relaxed text-text-secondary">{{ gene.name }}</div>
+        </template>
+      </MvPageHeader>
+    </template>
+
+    <MvPageLoading v-if="status === 'Loading' || status === 'NotLoaded'" text="Loading gene information..." />
+
+    <MvItemNotFound v-else-if="status === 'NotFound'" :item-id="symbol" model="gene" />
+
+    <MvServiceUnavailable
+      v-else-if="status === 'Failed'"
+      description="Gene information is temporarily unavailable. Please try again in a moment."
+      retry-label="Retry gene lookup"
+      @retry="loadFirstPage"
+    />
+
+    <template v-else-if="status === 'Loaded' && gene">
+      <div class="mx-auto w-full px-4 py-6 tablet:px-6 tablet:py-8" style="max-width: 1000px">
+        <section aria-labelledby="gene-facts-heading" class="mb-5 rounded-lg border border-border bg-white px-5 py-4">
+          <h2 id="gene-facts-heading" class="mave-section-title mb-2">Gene facts</h2>
+          <div class="gene-facts-grid grid grid-cols-1 gap-x-8 tablet:grid-cols-2">
+            <MvDetailRow
+              v-for="(fact, index) in geneFacts"
+              :key="fact.label"
+              :class="{'tablet:col-span-2': shouldSpanGeneFact(index)}"
+              :label="fact.label"
+              :value="fact.url ? null : fact.value"
+            >
+              <a
+                v-if="fact.url"
+                :aria-label="fact.ariaLabel"
+                class="text-link"
+                :href="fact.url"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {{ fact.value }}
+              </a>
+            </MvDetailRow>
+          </div>
+        </section>
+
+        <section aria-labelledby="gene-score-sets-heading">
+          <div class="mb-3 flex flex-col gap-1 tablet:flex-row tablet:items-center tablet:justify-between">
+            <h2 id="gene-score-sets-heading" class="mave-section-title">Published score sets</h2>
+            <span class="text-sm text-text-muted">
+              {{ loadedScoreSetCount }} loaded ({{ totalScoreSetCount }} total)
+            </span>
+          </div>
+
+          <MvEmptyState
+            v-if="gene.scoreSets.length === 0"
+            description="No published MaveDB score sets are available for this gene yet."
+            title="No published MaveDB score sets"
+          />
+
+          <div v-else class="flex flex-col gap-2.5">
+            <div
+              v-for="group in groupedScoreSets"
+              :key="group.experimentUrn"
+              class="overflow-hidden rounded-lg border border-gray-200 border-l-[3px] border-l-sage-light bg-white"
+            >
+              <div class="px-5 pt-3 text-xs font-semibold text-gray-500">
+                Experiment:
+                <router-link class="text-link" :to="{name: 'experiment', params: {urn: group.experimentUrn}}">
+                  {{ group.experimentTitle }}
+                </router-link>
+                <span v-if="group.scoreSets.length > 1" class="text-gray-400">
+                  - {{ group.scoreSets.length }} score sets
+                </span>
+              </div>
+              <MvScoreSetRow
+                v-for="scoreSet in group.scoreSets"
+                :key="scoreSet.urn"
+                :score-set="scoreSet"
+                show-multi-target-pill
+              />
+            </div>
+          </div>
+
+          <div v-if="canLoadMore" class="pt-5 text-center">
+            <MvStatusMessage v-if="loadMoreError" class="mb-3 text-left" severity="error">
+              Gene information is temporarily unavailable. Try again in a moment.
+            </MvStatusMessage>
+            <button
+              class="inline-flex min-h-10 cursor-pointer items-center justify-center rounded-[5px] border-[1.5px] border-sage bg-white px-6 py-2 text-sm font-semibold text-sage hover:bg-sage-light disabled:cursor-wait disabled:opacity-70"
+              :disabled="loadingMore"
+              type="button"
+              @click="loadMoreScoreSets"
+            >
+              <i v-if="loadingMore" class="pi pi-spinner pi-spin mr-2 text-xs" />
+              Load more score sets
+            </button>
+          </div>
+        </section>
+      </div>
+    </template>
+  </MvLayout>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import {useHead} from '@unhead/vue'
+
+import {getGene, type GeneResponse} from '@/api/mavedb'
+import MvDetailRow from '@/components/common/MvDetailRow.vue'
+import MvEmptyState from '@/components/common/MvEmptyState.vue'
+import MvItemNotFound from '@/components/common/MvItemNotFound.vue'
+import MvPageLoading from '@/components/common/MvPageLoading.vue'
+import MvScoreSetRow from '@/components/common/MvScoreSetRow.vue'
+import MvServiceUnavailable from '@/components/common/MvServiceUnavailable.vue'
+import MvStatusMessage from '@/components/common/MvStatusMessage.vue'
+import MvLayout from '@/components/layout/MvLayout.vue'
+import MvPageHeader from '@/components/layout/MvPageHeader.vue'
+import {
+  classifyGeneError,
+  getGeneIdentifierLinks,
+  getGeneSummary,
+  groupGeneScoreSetsByExperiment,
+  type GeneExperimentGroup,
+  type GeneIdentifierLink
+} from '@/lib/genes'
+
+type GeneStatus = 'NotLoaded' | 'Loading' | 'Loaded' | 'NotFound' | 'Failed'
+type GeneFact = {
+  label: string
+  value: string
+  url?: string
+  ariaLabel?: string
+}
+
+const SCORE_SET_PAGE_SIZE = 20
+
+export default defineComponent({
+  name: 'GeneView',
+
+  components: {
+    MvDetailRow,
+    MvEmptyState,
+    MvItemNotFound,
+    MvLayout,
+    MvPageHeader,
+    MvPageLoading,
+    MvScoreSetRow,
+    MvServiceUnavailable,
+    MvStatusMessage
+  },
+
+  props: {
+    symbol: {type: String, required: true}
+  },
+
+  setup() {
+    return {head: useHead({title: 'Gene - MaveDB'})}
+  },
+
+  data() {
+    return {
+      gene: null as GeneResponse | null,
+      status: 'NotLoaded' as GeneStatus,
+      loadingMore: false,
+      loadMoreError: false,
+      loadMoreRequestId: 0,
+      abortController: null as AbortController | null
+    }
+  },
+
+  computed: {
+    geneFacts(): GeneFact[] {
+      if (!this.gene) return []
+      const facts: GeneFact[] = [{label: 'Scored variants', value: this.scoredVariantCount}]
+
+      if (this.gene.locusGroup) {
+        facts.push({
+          label: 'Locus type',
+          value: this.gene.locusGroup
+        })
+      }
+
+      if (this.gene.location) {
+        facts.push({
+          label: 'Chromosomal location',
+          value: this.gene.location
+        })
+      }
+
+      if (this.omimIdentifier) {
+        facts.push({
+          label: 'OMIM',
+          value: this.omimIdentifier.value,
+          url: this.omimIdentifier.url,
+          ariaLabel: `OMIM ${this.omimIdentifier.value}`
+        })
+      }
+
+      if (this.hgncIdentifier) {
+        facts.push({
+          label: 'HGNC',
+          value: this.hgncIdentifier.value,
+          url: this.hgncIdentifier.url,
+          ariaLabel: `HGNC ${this.hgncIdentifier.value}`
+        })
+      }
+
+      return facts
+    },
+    loadedScoreSetCount(): string {
+      return (this.gene?.scoreSets.length ?? 0).toLocaleString()
+    },
+    totalScoreSetCount(): string {
+      if (!this.gene) return '0'
+      return getGeneSummary(this.gene).scoreSetCount.toLocaleString()
+    },
+    identifierLinks(): GeneIdentifierLink[] {
+      return this.gene ? getGeneIdentifierLinks(this.gene) : []
+    },
+    hgncIdentifier(): GeneIdentifierLink | null {
+      return this.identifierLinks.find((identifier) => identifier.label === 'HGNC') || null
+    },
+    omimIdentifier(): GeneIdentifierLink | null {
+      return this.identifierLinks.find((identifier) => identifier.label === 'OMIM') || null
+    },
+    groupedScoreSets(): GeneExperimentGroup[] {
+      return this.gene ? groupGeneScoreSetsByExperiment(this.gene.scoreSets) : []
+    },
+    canLoadMore(): boolean {
+      return Boolean(this.gene && this.gene.scoreSets.length < this.gene.total)
+    },
+    scoredVariantCount(): string {
+      if (!this.gene) return '0'
+      return getGeneSummary(this.gene).totalScoredVariants.toLocaleString()
+    }
+  },
+
+  watch: {
+    symbol() {
+      this.loadFirstPage()
+    },
+    gene(newGene: GeneResponse | null) {
+      this.head?.patch({title: newGene ? `${newGene.symbol} - MaveDB` : 'Gene - MaveDB'})
+    }
+  },
+
+  mounted() {
+    this.loadFirstPage()
+  },
+
+  beforeUnmount() {
+    this.abortController?.abort()
+  },
+
+  methods: {
+    async loadFirstPage() {
+      this.abortController?.abort()
+      const controller = new AbortController()
+      const symbol = this.symbol
+      this.abortController = controller
+      this.status = 'Loading'
+      this.gene = null
+      this.loadingMore = false
+      this.loadMoreError = false
+      this.loadMoreRequestId += 1
+
+      try {
+        const gene = await getGene(symbol, {limit: SCORE_SET_PAGE_SIZE, offset: 0}, controller.signal)
+        if (controller.signal.aborted || this.abortController !== controller || this.symbol !== symbol) return
+        this.gene = gene
+        this.status = 'Loaded'
+      } catch (error) {
+        if (controller.signal.aborted || this.abortController !== controller || this.symbol !== symbol) return
+        this.status = classifyGeneError(error) === 'not-found' ? 'NotFound' : 'Failed'
+      }
+    },
+
+    async loadMoreScoreSets() {
+      if (!this.gene || this.loadingMore) return
+      this.abortController?.abort()
+      const controller = new AbortController()
+      const symbol = this.symbol
+      this.abortController = controller
+      const currentGene = this.gene
+      const requestId = this.loadMoreRequestId + 1
+      this.loadMoreRequestId = requestId
+      this.loadingMore = true
+      this.loadMoreError = false
+      const offset = currentGene.scoreSets.length
+      try {
+        const nextPage = await getGene(symbol, {limit: SCORE_SET_PAGE_SIZE, offset}, controller.signal)
+        if (
+          controller.signal.aborted ||
+          this.symbol !== symbol ||
+          this.gene !== currentGene ||
+          this.loadMoreRequestId !== requestId
+        )
+          return
+        this.gene = {
+          ...nextPage,
+          scoreSets: [...currentGene.scoreSets, ...nextPage.scoreSets]
+        }
+      } catch {
+        if (
+          controller.signal.aborted ||
+          this.symbol !== symbol ||
+          this.gene !== currentGene ||
+          this.loadMoreRequestId !== requestId
+        )
+          return
+        this.loadMoreError = true
+      } finally {
+        if (this.loadMoreRequestId === requestId) {
+          this.loadingMore = false
+        }
+      }
+    },
+
+    shouldSpanGeneFact(index: number): boolean {
+      return this.geneFacts.length % 2 === 1 && index === this.geneFacts.length - 1
+    }
+  }
+})
+</script>
+
+<style scoped>
+@media (min-width: 56rem) {
+  .gene-facts-grid > :nth-child(2) {
+    border-top: none;
+  }
+}
+</style>
diff --git a/src/lib/genes.test.ts b/src/lib/genes.test.ts
new file mode 100644
index 00000000..e6087af0
--- /dev/null
+++ b/src/lib/genes.test.ts
@@ -0,0 +1,267 @@
+import axios from 'axios'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import type {GeneResponse, GeneScoreSet} from '@/api/mavedb'
+
+import {
+  classifyGeneError,
+  getGeneIdentifierLinks,
+  getGeneSummary,
+  groupGeneScoreSetsByExperiment,
+  isMultiTargetScoreSet,
+  sortGeneScoreSets
+} from './genes'
+
+vi.mock('axios', () => ({
+  default: {
+    get: vi.fn()
+  },
+  isAxiosError: (error: unknown) => Boolean((error as {isAxiosError?: boolean}).isAxiosError)
+}))
+
+vi.mock('@/config', () => ({
+  default: {
+    apiBaseUrl: 'https://api.example'
+  }
+}))
+
+const mockedAxiosGet = vi.mocked(axios.get)
+type GetGene = typeof import('@/api/mavedb/genes')['getGene']
+
+type ScoreSetOverrides = Partial<Omit<GeneScoreSet, 'experiment'>> & {
+  experiment?: Partial<GeneScoreSet['experiment']>
+}
+
+function scoreSet(overrides: ScoreSetOverrides): GeneScoreSet {
+  const experiment = {
+    urn: 'urn:mavedb:00000001-a',
+    title: 'Experiment',
+    shortDescription: 'Experiment short description',
+    creationDate: '2024-01-01',
+    modificationDate: '2024-01-01',
+    ...overrides.experiment
+  } as GeneScoreSet['experiment']
+
+  return {
+    urn: 'urn:mavedb:00000001-a-1',
+    title: 'Score set',
+    shortDescription: 'Short description',
+    publishedDate: '2024-01-01',
+    replacesId: null,
+    numVariants: 7,
+    primaryPublicationIdentifiers: [],
+    secondaryPublicationIdentifiers: [],
+    license: {id: 1, shortName: 'CC BY', longName: 'Creative Commons', link: null, version: null},
+    creationDate: '2024-01-01',
+    modificationDate: '2024-01-01',
+    targetGenes: [
+      {
+        id: 1,
+        name: 'BRCA1',
+        category: 'protein_coding',
+        externalIdentifiers: [],
+        targetSequence: null,
+        targetAccession: null,
+        mappedHgncName: 'BRCA1',
+        uniprotIdFromMappedMetadata: null
+      }
+    ],
+    private: false,
+    ...overrides,
+    experiment
+  } as GeneScoreSet
+}
+
+function geneResponse(overrides: Partial<GeneResponse> = {}): GeneResponse {
+  return {
+    symbol: 'BRCA1',
+    name: 'BRCA1 DNA repair associated',
+    locusGroup: 'protein-coding gene',
+    location: '17q21.31',
+    hgncId: 'HGNC:1100',
+    omimId: '113705',
+    scoreSets: [],
+    limit: 20,
+    offset: 0,
+    total: 0,
+    totalScoredVariants: 0,
+    ...overrides
+  }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('gene page helpers', () => {
+  it('calls the encoded gene endpoint with pagination params, accept header, and abort signal', async () => {
+    mockedAxiosGet.mockResolvedValueOnce({data: geneResponse({symbol: 'BRCA1/unsafe'})})
+    const abortController = new AbortController()
+    const {getGene} = (await import('@/api/mavedb/genes')) as {getGene: GetGene}
+
+    await getGene('BRCA1/unsafe', {limit: 10, offset: 20}, abortController.signal)
+
+    expect(mockedAxiosGet).toHaveBeenCalledWith('https://api.example/genes/BRCA1%2Funsafe', {
+      headers: {accept: 'application/json'},
+      params: {limit: 10, offset: 20},
+      signal: abortController.signal
+    })
+  })
+
+  it('sorts score sets newest-first with a deterministic URN tie-breaker', () => {
+    const older = scoreSet({urn: 'urn:mavedb:00000001-a-1', publishedDate: '2024-01-01'})
+    const newer = scoreSet({urn: 'urn:mavedb:00000001-a-2', publishedDate: '2024-03-01'})
+    const sameDateHigherUrn = scoreSet({urn: 'urn:mavedb:00000001-a-3', publishedDate: '2024-03-01'})
+
+    expect(sortGeneScoreSets([older, newer, sameDateHigherUrn]).map((item) => item.urn)).toEqual([
+      sameDateHigherUrn.urn,
+      newer.urn,
+      older.urn
+    ])
+  })
+
+  it('groups score sets by experiment and orders groups by each group newest row', () => {
+    const olderExperiment = scoreSet({
+      urn: 'urn:mavedb:00000001-a-1',
+      publishedDate: '2024-01-01',
+      experiment: {urn: 'urn:mavedb:00000001-a', title: 'Older experiment'}
+    })
+    const newerExperiment = scoreSet({
+      urn: 'urn:mavedb:00000002-a-1',
+      publishedDate: '2024-03-01',
+      experiment: {urn: 'urn:mavedb:00000002-a', title: 'Newer experiment'}
+    })
+    const olderExperimentSecondRow = scoreSet({
+      urn: 'urn:mavedb:00000001-a-2',
+      publishedDate: '2024-02-01',
+      experiment: {urn: 'urn:mavedb:00000001-a', title: 'Older experiment'}
+    })
+
+    const groups = groupGeneScoreSetsByExperiment([olderExperiment, newerExperiment, olderExperimentSecondRow])
+
+    expect(groups.map((group) => group.experimentUrn)).toEqual(['urn:mavedb:00000002-a', 'urn:mavedb:00000001-a'])
+    expect(groups[1].scoreSets.map((item) => item.urn)).toEqual([
+      olderExperimentSecondRow.urn,
+      olderExperiment.urn
+    ])
+  })
+
+  it('uses API totals for summary counts instead of the loaded page length', () => {
+    const gene = geneResponse({scoreSets: [scoreSet({})], total: 12, totalScoredVariants: 345})
+
+    expect(getGeneSummary(gene)).toEqual({scoreSetCount: 12, totalScoredVariants: 345})
+  })
+
+  it('extracts HGNC and OMIM links without surfacing target-level external identifiers', () => {
+    const duplicateEnsemblIdentifier = {
+      offset: 0,
+      identifier: {
+        dbName: 'Ensembl',
+        identifier: 'ENSG00000012048',
+        url: 'https://ensembl.org/id/ENSG00000012048'
+      }
+    }
+    const duplicateEnsemblIdentifierWithAlternateUrl = {
+      offset: 0,
+      identifier: {
+        dbName: 'Ensembl',
+        identifier: 'ENSG00000012048',
+        url: 'https://alternate.example/ENSG00000012048'
+      }
+    }
+    const gene = geneResponse({
+      omimId: '113705',
+      scoreSets: [
+        scoreSet({
+          targetGenes: [
+            {
+              id: 1,
+              name: 'BRCA1',
+              category: 'protein_coding',
+              mappedHgncName: 'BRCA1',
+              uniprotIdFromMappedMetadata: null,
+              targetSequence: null,
+              targetAccession: null,
+              externalIdentifiers: [
+                duplicateEnsemblIdentifier,
+                duplicateEnsemblIdentifier,
+                duplicateEnsemblIdentifierWithAlternateUrl,
+                {
+                  offset: 0,
+                  identifier: {
+                    dbName: 'RefSeq',
+                    identifier: 'NM_007294.4',
+                    url: 'https://www.ncbi.nlm.nih.gov/nuccore/NM_007294.4'
+                  }
+                },
+                {
+                  offset: 0,
+                  identifier: {
+                    dbName: 'UniProt',
+                    identifier: 'P38398',
+                    url: 'https://www.uniprot.org/uniprotkb/P38398'
+                  }
+                }
+              ]
+            },
+            {
+              id: 2,
+              name: 'TP53',
+              category: 'protein_coding',
+              mappedHgncName: 'TP53',
+              uniprotIdFromMappedMetadata: null,
+              targetSequence: null,
+              targetAccession: null,
+              externalIdentifiers: [
+                {
+                  offset: 0,
+                  identifier: {
+                    dbName: 'Ensembl',
+                    identifier: 'ENSG00000141510',
+                    url: 'https://ensembl.org/id/ENSG00000141510'
+                  }
+                }
+              ]
+            }
+          ]
+        })
+      ]
+    })
+
+    expect(getGeneIdentifierLinks(gene)).toEqual([
+      {
+        label: 'HGNC',
+        value: 'HGNC:1100',
+        url: 'https://www.genenames.org/data/gene-symbol-report/#!/hgnc_id/HGNC%3A1100'
+      },
+      {label: 'OMIM', value: '113705', url: 'https://omim.org/entry/113705'}
+    ])
+  })
+
+  it('falls back to HGNC symbol search when an HGNC ID is not available', () => {
+    expect(getGeneIdentifierLinks(geneResponse({hgncId: null, omimId: null}))).toEqual([
+      {
+        label: 'HGNC',
+        value: 'BRCA1',
+        url: 'https://www.genenames.org/tools/search/#!/all?query=BRCA1'
+      }
+    ])
+  })
+
+  it('classifies 404 as not found and service failures as retryable', () => {
+    expect(classifyGeneError({isAxiosError: true, response: {status: 404}})).toBe('not-found')
+    expect(classifyGeneError({isAxiosError: true, response: {status: 503}})).toBe('retryable')
+    expect(classifyGeneError(new Error('network failed'))).toBe('retryable')
+  })
+
+  it('detects multi-target score sets from targetGenes length', () => {
+    expect(isMultiTargetScoreSet(scoreSet({targetGenes: [scoreSet({}).targetGenes[0]]}))).toBe(false)
+    expect(
+      isMultiTargetScoreSet(
+        scoreSet({
+          targetGenes: [scoreSet({}).targetGenes[0], {...scoreSet({}).targetGenes[0], id: 2, name: 'TP53'}]
+        })
+      )
+    ).toBe(true)
+  })
+})
diff --git a/src/lib/genes.ts b/src/lib/genes.ts
new file mode 100644
index 00000000..4b711a76
--- /dev/null
+++ b/src/lib/genes.ts
@@ -0,0 +1,100 @@
+import {getErrorResponse, type GeneResponse, type GeneScoreSet} from '@/api/mavedb'
+
+export type GeneErrorState = 'not-found' | 'retryable'
+
+export interface GeneSummary {
+  scoreSetCount: number
+  totalScoredVariants: number
+}
+
+export interface GeneIdentifierLink {
+  label: string
+  value: string
+  url: string
+}
+
+export interface GeneExperimentGroup {
+  experimentUrn: string
+  experimentTitle: string
+  scoreSets: GeneScoreSet[]
+}
+
+function scoreSetDate(scoreSet: GeneScoreSet): string {
+  return scoreSet.publishedDate || scoreSet.modificationDate || ''
+}
+
+export function sortGeneScoreSets(scoreSets: GeneScoreSet[]): GeneScoreSet[] {
+  return [...scoreSets].sort((a, b) => {
+    const dateComparison = scoreSetDate(b).localeCompare(scoreSetDate(a))
+    return dateComparison || b.urn.localeCompare(a.urn)
+  })
+}
+
+export function groupGeneScoreSetsByExperiment(scoreSets: GeneScoreSet[]): GeneExperimentGroup[] {
+  const groups = new Map<string, GeneExperimentGroup>()
+
+  for (const scoreSet of sortGeneScoreSets(scoreSets)) {
+    const experimentUrn = scoreSet.experiment.urn
+    const existingGroup = groups.get(experimentUrn)
+    if (existingGroup) {
+      existingGroup.scoreSets.push(scoreSet)
+    } else {
+      groups.set(experimentUrn, {
+        experimentUrn,
+        experimentTitle: scoreSet.experiment.title,
+        scoreSets: [scoreSet]
+      })
+    }
+  }
+
+  return [...groups.values()]
+}
+
+export function getGeneSummary(gene: GeneResponse): GeneSummary {
+  return {
+    scoreSetCount: gene.total,
+    totalScoredVariants: gene.totalScoredVariants
+  }
+}
+
+export function getGeneIdentifierLinks(gene: GeneResponse): GeneIdentifierLink[] {
+  const links = new Map<string, GeneIdentifierLink>()
+  const addLink = (link: GeneIdentifierLink) => {
+    const key = `${link.label.toLowerCase()}:${link.value}`
+    if (!links.has(key)) {
+      links.set(key, link)
+    }
+  }
+
+  if (gene.hgncId) {
+    addLink({
+      label: 'HGNC',
+      value: gene.hgncId,
+      url: `https://www.genenames.org/data/gene-symbol-report/#!/hgnc_id/${encodeURIComponent(gene.hgncId)}`
+    })
+  } else if (gene.symbol) {
+    addLink({
+      label: 'HGNC',
+      value: gene.symbol,
+      url: `https://www.genenames.org/tools/search/#!/all?query=${encodeURIComponent(gene.symbol)}`
+    })
+  }
+
+  if (gene.omimId) {
+    addLink({
+      label: 'OMIM',
+      value: gene.omimId,
+      url: `https://omim.org/entry/${encodeURIComponent(gene.omimId)}`
+    })
+  }
+
+  return [...links.values()]
+}
+
+export function classifyGeneError(error: unknown): GeneErrorState {
+  return getErrorResponse(error).status === 404 ? 'not-found' : 'retryable'
+}
+
+export function isMultiTargetScoreSet(scoreSet: Pick<GeneScoreSet, 'targetGenes'>): boolean {
+  return scoreSet.targetGenes.length > 1
+}
diff --git a/src/lib/target-genes.test.ts b/src/lib/target-genes.test.ts
new file mode 100644
index 00000000..a25faa27
--- /dev/null
+++ b/src/lib/target-genes.test.ts
@@ -0,0 +1,78 @@
+import {describe, expect, it} from 'vitest'
+
+import {getTargetGeneLinkItems, getTargetGeneRoute} from './target-genes'
+
+type TestTargetGene = {
+  id: number
+  name: string
+  mappedHgncName?: string | null
+  targetAccession?: {gene?: string | null} | null
+}
+
+function targetGene(overrides: Partial<TestTargetGene> = {}): TestTargetGene {
+  return {
+    id: 1,
+    name: 'BRCA1',
+    mappedHgncName: 'BRCA1',
+    targetAccession: null,
+    ...overrides
+  }
+}
+
+describe('target gene navigation helpers', () => {
+  it('returns the named gene route for targets with mapped HGNC symbols', () => {
+    expect(getTargetGeneRoute(targetGene({mappedHgncName: 'BRCA1'}))).toEqual({
+      name: 'gene',
+      params: {symbol: 'BRCA1'}
+    })
+  })
+
+  it('returns null for targets without mapped HGNC symbols even when accession gene exists', () => {
+    expect(
+      getTargetGeneRoute(
+        targetGene({
+          name: 'Submitted BRCA1',
+          mappedHgncName: null,
+          targetAccession: {gene: 'BRCA1'}
+        })
+      )
+    ).toBeNull()
+  })
+
+  it('uses canonical mapped symbols for linked labels and plain display labels for unmapped targets', () => {
+    expect(
+      getTargetGeneLinkItems([
+        targetGene({name: 'Submitted BRCA1', mappedHgncName: 'BRCA1'}),
+        targetGene({id: 2, name: 'Submitted TP53', mappedHgncName: null, targetAccession: {gene: 'TP53'}})
+      ])
+    ).toEqual([
+      {
+        name: 'BRCA1',
+        route: {name: 'gene', params: {symbol: 'BRCA1'}}
+      },
+      {
+        name: 'Submitted TP53',
+        route: null
+      }
+    ])
+  })
+
+  it('deduplicates mapped targets by canonical route destination', () => {
+    expect(
+      getTargetGeneLinkItems([
+        targetGene({id: 1, name: 'Submitted BRCA1 A', mappedHgncName: 'BRCA1'}),
+        targetGene({id: 2, name: 'Submitted BRCA1 B', mappedHgncName: 'BRCA1'}),
+        targetGene({id: 3, name: 'TP53', mappedHgncName: 'TP53'})
+      ])
+    ).toEqual([
+      {
+        name: 'BRCA1',
+        route: {name: 'gene', params: {symbol: 'BRCA1'}}
+      },
+      {
+        name: 'TP53',
+        route: {name: 'gene', params: {symbol: 'TP53'}}
+      }
+    ])
+  })
+})
diff --git a/src/router/index.ts b/src/router/index.ts
index 8ebdc73f..9fbdda9f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,6 +10,7 @@ import ExperimentCreator from '@/components/screens/ExperimentCreator.vue'
 import ExperimentEditor from '@/components/screens/ExperimentEditor.vue'
 import ExperimentSetView from '@/components/screens/ExperimentSetView.vue'
 import ExperimentView from '@/components/screens/ExperimentView.vue'
+import GeneView from '@/components/screens/GeneView.vue'
 import HelpScreen from '@/components/screens/HelpScreen.vue'
 import HomeScreen from '@/components/screens/HomeScreen.vue'
 import OidcCallback from '@/components/screens/OidcCallback.vue'
@@ -90,6 +91,14 @@ const routes: RouteRecordRaw[] = [
     component: ExperimentView,
     props: (route) => ({itemId: route.params.urn})
   },
+  {
+    path: '/genes/:symbol([^/]+)',
+    name: 'gene',
+    component: GeneView,
+    props: (route) => ({
+      symbol: Array.isArray(route.params.symbol) ? route.params.symbol[0] : route.params.symbol
+    })
+  },
   {
     name: 'createExperiment',
     path: '/create-experiment',
diff --git a/src/schema/openapi.d.ts b/src/schema/openapi.d.ts
index c5e78bea..d07f1dbc 100644
--- a/src/schema/openapi.d.ts
+++ b/src/schema/openapi.d.ts
@@ -209,6 +209,10 @@ export interface paths {
      */
     get: operations["get_experiment_score_sets_api_v1_experiments__urn__score_sets_get"];
   };
+  "/api/v1/genes/{symbol}": {
+    /** Fetch a gene and associated published score sets */
+    get: operations["get_gene_api_v1_genes__symbol__get"];
+  };
   "/api/v1/hgvs/fetch/{accession}": {
     /**
      * Fetch stored sequence by accession
@@ -3285,6 +3289,31 @@ export interface components {
        */
       variants?: components["schemas"]["VariantEffectMeasurement"][];
     };
+    /** GeneResponse */
+    GeneResponse: {
+      /** Symbol */
+      symbol: string;
+      /** Name */
+      name: string;
+      /** Hgncid */
+      hgncId?: string | null;
+      /** Locusgroup */
+      locusGroup?: string | null;
+      /** Location */
+      location?: string | null;
+      /** Omimid */
+      omimId?: string | null;
+      /** Scoresets */
+      scoreSets: components["schemas"]["ShortScoreSet"][];
+      /** Limit */
+      limit: number;
+      /** Offset */
+      offset: number;
+      /** Total */
+      total: number;
+      /** Totalscoredvariants */
+      totalScoredVariants: number;
+    };
     /**
      * GnomADVariantWithMappedVariants
      * @description GnomAD variant view model with mapped variants for non-admin clients.
@@ -7608,6 +7637,54 @@ export interface operations {
       };
     };
   };
+  /** Fetch a gene and associated published score sets */
+  get_gene_api_v1_genes__symbol__get: {
+    parameters: {
+      query?: {
+        /** @description Number of score sets to return (maximum 100). */
+        limit?: number;
+        /** @description Number of score sets to skip. */
+        offset?: number;
+      };
+      path: {
+        symbol: string;
+      };
+    };
+    responses: {
+      /** @description Successful Response */
+      200: {
+        content: {
+          "application/json": components["schemas"]["GeneResponse"];
+        };
+      };
+      /** @description Resource not found. */
+      404: {
+        content: never;
+      };
+      /** @description Validation Error */
+      422: {
+        content: {
+          "application/json": components["schemas"]["HTTPValidationError"];
+        };
+      };
+      /** @description Internal server error. */
+      500: {
+        content: never;
+      };
+      /** @description Bad gateway. Upstream responded invalidly. */
+      502: {
+        content: never;
+      };
+      /** @description Service unavailable. Temporary overload or maintenance. */
+      503: {
+        content: never;
+      };
+      /** @description Gateway timeout. Upstream did not respond in time. */
+      504: {
+        content: never;
+      };
+    };
+  };
   /**
    * Fetch stored sequence by accession
    * @description Fetches a stored genomic sequence by its accession identifier.

From df005b800ec28235ec6d84152c032a967896ab30 Mon Sep 17 00:00:00 2001
From: Benjamin Capodanno <bencap@outlook.com>
Date: Wed, 20 May 2026 16:20:36 -0700
Subject: [PATCH 4/4] feat(target-genes): link gene name pills and accordion
 headers to gene page

- Make target gene pills in `MvScoreSetRow` link to `/genes/:symbol`
  when a mapped HGNC name is available, using the new
  `getTargetGeneLinkItems` helper
- Add `showMultiTargetPill` prop to `MvScoreSetRow` to optionally
  surface a "multi-target" badge
- Wire `MvTargetsAccordion` collapsible headers to use the new
  `inline-link` slot so gene names link to the gene detail page
- Add accessible `buttonLabel` to each collapsible toggle
- Harden `MvTargetGeneDetails` clipboard copy to handle missing
  `navigator.clipboard` and catch write errors, showing a
  "Copy failed" state
- Add `getTargetGeneRoute` and `getTargetGeneLinkItems` helpers to
  `src/lib/target-genes.ts`
---
 src/components/common/MvScoreSetRow.vue       | 37 +++++++++++++----
 src/components/common/MvTargetGeneDetails.vue | 26 +++++++++---
 src/components/common/MvTargetsAccordion.vue  | 41 +++++++++++++++++--
 src/lib/target-genes.ts                       | 30 ++++++++++++++
 4 files changed, 117 insertions(+), 17 deletions(-)

diff --git a/src/components/common/MvScoreSetRow.vue b/src/components/common/MvScoreSetRow.vue
index 2cbf8671..e29dde17 100644
--- a/src/components/common/MvScoreSetRow.vue
+++ b/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)
diff --git a/src/components/common/MvTargetGeneDetails.vue b/src/components/common/MvTargetGeneDetails.vue
index 199df329..fb5c15ce 100644
--- a/src/components/common/MvTargetGeneDetails.vue
+++ b/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)
     }
   }
diff --git a/src/components/common/MvTargetsAccordion.vue b/src/components/common/MvTargetsAccordion.vue
index fc9208e0..79f69b5b 100644
--- a/src/components/common/MvTargetsAccordion.vue
+++ b/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>
diff --git a/src/lib/target-genes.ts b/src/lib/target-genes.ts
index bdf50ed7..4b579047 100644
--- a/src/lib/target-genes.ts
+++ b/src/lib/target-genes.ts
@@ -7,6 +7,36 @@ export function getTargetGeneName(gene: {name: string; mappedHgncName?: string |
   return gene.mappedHgncName || gene.name
 }
 
+export type TargetGeneRoute = {name: 'gene'; params: {symbol: string}}
+export type TargetGeneLinkItem = {name: string; route: TargetGeneRoute | null}
+
+type LinkableTargetGene = {
+  name: string
+  mappedHgncName?: string | null
+}
+
+export function getTargetGeneRoute(gene: LinkableTargetGene): TargetGeneRoute | null {
+  if (!gene.mappedHgncName) return null
+  return {name: 'gene', params: {symbol: gene.mappedHgncName}}
+}
+
+export function getTargetGeneLinkItems(targetGenes: LinkableTargetGene[] = []): TargetGeneLinkItem[] {
+  const targets = new Map<string, TargetGeneLinkItem>()
+
+  for (const targetGene of targetGenes) {
+    const route = getTargetGeneRoute(targetGene)
+    const name = route ? targetGene.mappedHgncName : getTargetGeneName(targetGene)
+    if (!name) continue
+
+    const key = route ? `route:${route.params.symbol}` : `plain:${name}`
+    if (!targets.has(key)) {
+      targets.set(key, {name, route})
+    }
+  }
+
+  return [...targets.values()]
+}
+
 export const EXTERNAL_GENE_DATABASES = ['UniProt', 'Ensembl', 'RefSeq'] as const
 export const SEQUENCE_TYPES = ['DNA', 'protein'] as const