Skip to content

feat(variant-page): add synonymous nucleotide as a distinct measurement class#676

Open
bencap wants to merge 1 commit into
mainfrom
feature/bencap/652/visually-distinct-assc-nt-vars
Open

feat(variant-page): add synonymous nucleotide as a distinct measurement class#676
bencap wants to merge 1 commit into
mainfrom
feature/bencap/652/visually-distinct-assc-nt-vars

Conversation

@bencap
Copy link
Copy Markdown
Collaborator

@bencap bencap commented May 15, 2026

Previously, associated nucleotide measurements were grouped with direct nucleotide measurements: they shared the same filter toggle, count, and card badge styling, making them visually and behaviorally indistinguishable.

Changes:

  • Add dedicated --color-synonymous-nucleotide / -light / -border design tokens in app.css using a dark amber palette (#8a5700 / #fef8e1 / #f5c97a).
  • Rename the associatedNucleotide label from "Associated nucleotide" to "Synonymous nucleotide" / "Synonymous" (short) in measurement-types.ts and update its badge class to the new amber tokens.
  • In use-variant-lookup: split the shared nucleotide count/filter into separate nucleotideCount / associatedNucleotideCount computeds and a dedicated showAssociatedNucleotide ref; each of the three classes is now filtered independently in filteredVariants.
  • In VariantScreen.vue: add a third MvBadgeToggle for synonymous nucleotide (conditionally rendered when count > 0). The mobile dropdown derives its label from MEASUREMENT_TYPE_LABELS[type].short and automatically shows "Synonymous" with no further changes.

…nt class

Previously, associated nucleotide measurements were grouped with direct
nucleotide measurements: they shared the same filter toggle, count, and
card badge styling, making them visually and behaviorally indistinguishable.

Changes:
- Add dedicated `--color-synonymous-nucleotide` / `-light` / `-border`
  design tokens in app.css using a dark amber palette (#8a5700 / #fef8e1 /
  #f5c97a).
- Rename the `associatedNucleotide` label from "Associated nucleotide" to
  "Synonymous nucleotide" / "Synonymous" (short) in measurement-types.ts
  and update its badge class to the new amber tokens.
- In use-variant-lookup: split the shared nucleotide count/filter into
  separate `nucleotideCount` / `associatedNucleotideCount` computeds and
  a dedicated `showAssociatedNucleotide` ref; each of the three classes
  is now filtered independently in `filteredVariants`.
- In VariantScreen.vue: add a third `MvBadgeToggle` for synonymous
  nucleotide (conditionally rendered when count > 0). The mobile dropdown
  derives its label from `MEASUREMENT_TYPE_LABELS[type].short` and
  automatically shows "Synonymous" with no further changes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make associated nucleotide measurements a visually distinct measurement class on Variant page

1 participant