Skip to content

Guided Search: Add Homepage Access, Fix Case Sensitivity UX, and Fix Search Type State Bug #675

@bencap

Description

@bencap

Summary

Three related improvements to the Guided Search feature in the MaveMD variant search (/mavemd):

  1. The homepage hero section links to individual standard search methods (HGVS, ClinGen CAId, dbSNP rsID, ClinVar ID, VRS Digest) but provides no path to the Guided Search mode, making it hard to discover.
  2. The gene symbol input does not visually indicate that it is case-insensitive, causing user confusion even though the input is silently uppercased before the API call.
  3. When a user enters Guided Search after having selected a non-HGVS tab in standard search mode, the searchType state is not reset, causing the guided search to submit the constructed HGVS string against the wrong search type (e.g., dbSNP rsID), producing broken results.

Problem

1. No Homepage Entry Point for Guided Search

HomeScreen.vue renders a row of quick-links below the hero search bar pointing directly to /mavemd?searchType=<type> for each standard search type. There is no equivalent entry point for Guided Search (/mavemd?mode=guided). Users unfamiliar with HGVS notation — the primary target audience for Guided Search — are the least likely to discover it by exploring the MaveMD page on their own.

2. Case Sensitivity Not Communicated to User

In SearchVariantsScreen.vue, the gene symbol input is converted to uppercase via geneSymbol?.toUpperCase() immediately before the ClinGen API call. However, no placeholder text, helper label, or visual normalization (e.g., CSS text-transform: uppercase) signals this to the user. A user typing brca1 sees their input remain lowercase and may assume it failed for case-related reasons if results are unexpected.

3. searchType State Leaks Into Guided Search Mode

When the user switches from standard search to Guided Search, showSearch('guided') deletes the searchType route query param. However, the component's reactive searchType data property is not explicitly reset. If the user had previously selected a non-HGVS tab (e.g., "dbSNP rsID"), this.searchType retains that value.

When Guided Search completes, fetchGuidedSearchResults() builds an HGVS string and delegates to fetchDefaultSearchResults(). If fetchDefaultSearchResults() reads this.searchType rather than forcing 'hgvs', the constructed HGVS string is submitted as a dbSNP rsID (or other identifier type), resulting in an empty or nonsensical result set — "breaking in a weird way" with no error message to the user.


Proposed Behavior

  1. Homepage link: Add a single unobtrusive entry point to Guided Search in the "Explore datasets" or hero quick-links area on HomeScreen.vue. A short text link such as "Not sure of the variant identifier? Try guided search →" linking to /mavemd?mode=guided is sufficient and avoids cluttering the layout.

  2. Case insensitivity UX: Apply text-transform: uppercase CSS to the gene symbol input field so the user sees their input normalized in real time, matching how it is submitted. No logic change is needed since .toUpperCase() is already applied before submission.

  3. Search type reset on guided entry: When showSearch('guided') is called, explicitly reset this.searchType to 'hgvs' (or the default search type constant) in addition to deleting the searchType query param. Ensure fetchGuidedSearchResults() either passes 'hgvs' explicitly to fetchDefaultSearchResults() or that this.searchType is guaranteed to be 'hgvs' at the time of the guided search submission.


Acceptance Criteria

  • A link or button on HomeScreen.vue navigates the user to /mavemd?mode=guided (Guided Search mode); it does not significantly add visual weight to the existing hero section.
  • Typing a lowercase gene symbol (e.g., brca1) in the Guided Search input displays it in uppercase in the input field, confirming to the user that the search is case-insensitive.
  • Completing a Guided Search after having previously selected any non-HGVS tab in standard search mode returns correct HGVS-based results, identical to the behavior when the user has never changed the search type.
  • No regression in standard search behavior when switching back from Guided to default mode.

Implementation Notes

  • Bug root cause (item 3): In SearchVariantsScreen.vue, inside showSearch('guided'), add this.searchType = defaultSearchType (use whatever constant or default value is used elsewhere). Additionally, audit fetchDefaultSearchResults() to confirm whether it reads this.searchType at call time; if so, either pass the type as an argument or assert that it is always 'hgvs' when called from the guided path.
  • Case transform (item 2): The fix is purely presentational — add style="text-transform: uppercase" (or a utility class) to the gene symbol InputText in the guided search form. No logic changes are required.
  • Homepage link (item 1): The existing quick-links in HomeScreen.vue use RouterLink components with /search?... or /mavemd?searchType=... hrefs. A minimal text-link styled consistently with the surrounding "Find a variant with functional data via" copy pointing to /mavemd?mode=guided avoids adding a new visual component entirely.

Metadata

Metadata

Assignees

No one assigned

    Labels

    app: frontendTask implementation touches the frontendtype: bugSomething isn't workingtype: enhancementEnhancement to an existing feature

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions