Skip to content

UX: Redesign MaveMD landing page scoreset table #694

Description

@bencap

Summary

The MaveMD scoreset table on the landing page (SearchVariantsScreen.vue) was designed when the collection was smaller. At 80+ score sets it is hard to navigate and does not surface the information users need to identify relevant datasets. This issue proposes four targeted improvements: a gene filter, merged score set + publication column, a clearer ACMG calibration status indicator, and a variant count column.

Problem

  1. No way to navigate to a gene of interest. The table groups score sets by gene (via maveMdScoreSetsGroupedByGene) but provides no filter or search — users must scroll through all gene groups to find the one they care about.

  2. Publication column links to the wrong destination. The Publication column renders a citation shortname (getScoreSetShortName) but routes to the scoreSet detail page — the same destination as the Score Set column. It should link to the external publication (DOI or PubMed).

  3. Calibrations badge is uninterpretable. The X / Y badge (calibrations with ACMG evidence / total calibrations) is opaque to users unfamiliar with the data model. There is no label, tooltip, or legend.

  4. No signal of dataset size. numVariants is available on every ScoreSet object but is not shown. This is a meaningful indicator of dataset quality and scope.

Proposed Behavior

1. Gene typeahead filter

Add a text input above the table that filters maveMdScoreSetsGroupedByGene to gene groups whose name matches the input (case-insensitive substring or prefix match). Clearing the input restores the full list. The existing computed property provides the data; only a reactive filter predicate and an input element are needed.

2. Merge Score Set + Publication into a single card-style column

Replace the two separate columns with one column that renders:

  • Line 1: Score set title as a router-link to the scoreSet route (same as today).
  • Line 2: Citation shortname (getScoreSetShortName) as a smaller, muted external link to the publication. Resolve the URL from primaryPublicationIdentifiers[0] — prefer a DOI link if identifier and dbName indicate a DOI, otherwise fall back to a PubMed URL using the identifier. If no publication identifier is available, render the citation as plain text.

This also fixes the existing bug where the Publication column links to the scoreset page.

3. ACMG calibration status indicator

Replace the X / Y badge with a labeled status derived from calibrationCountWithEvidence and calibrationCountTotal:

Condition Label Style suggestion
total === 0 None Gray / muted
withEvidence === 0 && total > 0 Uncalibrated Gray / muted
withEvidence > 0 && withEvidence < total Partial Yellow / warning
withEvidence === total && total > 0 Fully calibrated Green / success

The indicator should remain a router-link to the scoreSetCalibrations route. A v-tooltip (using the existing PrimeVue directive pattern already used in CalibrationTable.vue) on the indicator or its column header should explain what the status means.

4. Variant count column

Add a Variants column displaying scoreSet.numVariants formatted with a thousands separator. This gives users a quick sense of dataset size without navigating to the scoreset page.

Acceptance Criteria

  • A gene filter input is visible above the scoreset table.
  • Typing a gene name (partial or full, case-insensitive) filters the table to matching gene groups; clearing the input restores all groups.
  • The Score Set and Publication columns are merged into one column.
  • The merged column shows the score set title as a link to the scoreSet route.
  • The merged column shows the citation shortname as an external link to a DOI or PubMed URL derived from primaryPublicationIdentifiers; rows with no publication identifier render the citation as plain text.
  • The Calibrations column shows a labeled status (None / Uncalibrated / Partial / Fully calibrated) instead of a raw X / Y badge.
  • The calibration status indicator links to the scoreSetCalibrations route.
  • A tooltip on the calibration status or its column header explains what the status represents.
  • A Variants column displays numVariants for each score set, formatted with a thousands separator.
  • All changes are confined to SearchVariantsScreen.vue and its imported helpers; no new API calls are required.

Implementation Notes

  • All required data (numVariants, primaryPublicationIdentifiers, scoreCalibrations) is already present on the ScoreSet objects populated by fetchMaveMdScoreSets. No backend changes are needed.
  • The gene filter should operate on maveMdScoreSetsGroupedByGene (already computed); add a filterGene reactive string and filter the grouped map before rendering.
  • Publication URL resolution logic belongs in src/lib/score-sets.ts alongside the existing getScoreSetShortName helper. A function getPublicationUrl(scoreSet: ScoreSet): string | null that checks dbName and constructs the appropriate external URL keeps the template clean.
  • The calibration status derivation can live in a small helper alongside calibrationCountWithEvidence and calibrationCountTotal, or be inlined as a computed in the component — either is fine given the logic is simple.
  • Use the v-tooltip PrimeVue directive for the calibration tooltip; the pattern is established in CalibrationTable.vue.
  • The gene filter input should use the same styling as other search inputs in the application to remain visually consistent.

Metadata

Metadata

Assignees

No one assigned

    Labels

    app: frontendTask implementation touches the frontendtype: enhancementEnhancement to an existing feature

    Type

    No fields configured for Task.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions