$30 off During Our Annual Pro Sale. View Details »

Genes leads ideogram - plug-in for richer gene search

Genes leads ideogram - plug-in for richer gene search

Genes leads ideogram is a reusable web component that enriches gene search.

Gene Leads surfaces related genes to the gene you searched. These can be interacting genes or paralogous genes. Popovers shown upon hovering over any gene show interaction pathways, as well as RNA and protein diagrams. Details on the UTRs, CDS, and exon bounds -- as well as protein features -- are similarly available. Users can see these for any isoform / alternative transcript of the gene. In addition to this user-facing Ideogram.js functionality, the presentation briefly covered how Gene Leads uses service worker caches for speed and resilience.

Delivered as a 10-minute "lightning talk" at a remote session of the Software Engineering Affinity Group of the Broad Institute of MIT and Harvard. It was well-received by an audience of 20-30 mostly software developers.

Explore Gene Leads for yourself!

Live demo: https://eweitz.github.io/ideogram/gene-leads?q=LPL
Source code: https://github.com/eweitz/ideogram

Eric Weitz

May 10, 2023
Tweet

More Decks by Eric Weitz

Other Decks in Science

Transcript

  1. Gene leads ideogram
    Plug-in for richer gene search
    Eric Weitz
    [email protected]
    https://github.com/eweitz/ideogram
    SoftEng seminar series
    Broad Institute of MIT and Harvard
    2023-05-10

    View Slide

  2. ● Background
    ● Visuals
    ● Speed
    ● Future
    Outline

    View Slide

  3. Background

    View Slide

  4. Help users explore and discover genomic data by widening search results.
    Challenges:
    ● Users must know genes a priori that are related to a gene they search
    ● Scarce screen real estate for new UI components
    ● Visualizing search results in genomic space is useful but hard
    Problem, solution

    View Slide

  5. Related results in domain-specific search UIs

    View Slide

  6. Localizable results are mapped in generic search UIs

    View Slide

  7. Visuals

    View Slide

  8. Big, easily clickable features.
    Triggers new genomic search.
    Brief, noticeable legend and
    call to action
    Short and wide
    Show many genomic search results in the space of a few rows.
    Design at a glance
    https://eweitz.github.io/ideogram/gene-leads?q=LPL

    View Slide

  9. https://eweitz.github.io/ideogram/gene-leads?q=LPL
    Popovers for related genes aid discovery
    Pathway where genes interact
    Diagrams for RNA and protein
    show UTRs, CDS, exon bounds
    and translated protein domains

    View Slide

  10. Hover for more molecular biology
    Hover individual features for detail
    See other isoforms
    https://eweitz.github.io/ideogram/gene-leads?q=LPL

    View Slide

  11. Plug in for richer gene search
    Gene Leads
    search plug-in
    Your detail
    Your search
    Explore this example in Single Cell Portal

    View Slide

  12. Speed

    View Slide

  13. Service worker cache
    Gene Leads is fast and resilient, because it uses service worker caches.
    Benefits:
    ● Interactions go from 2-10 seconds -> 0.05 seconds
    ● Usable offline -- it's resilient to bad Internet connections
    ● Doesn't break due to third parties changing or degrading REST APIs
    Costs:
    ● Background loads more data on first use

    View Slide

  14. Data flow in gene leads ideogram
    Build time Run time
    1st run After 1st run
    Fetch remote static
    Decompress
    Fetch local static
    Decompress
    Fetch remote APIs
    Compress
    Ensembl,
    WikiPathways CDN or bucket
    Local cache
    (i.e., service worker)

    View Slide

  15. Future

    View Slide

  16. Roadmap: Gene leads ideogram
    ● Add variants
    ● Improve documentation
    ● Enhance support for non-human organisms

    View Slide

  17. Thank you!
    Eric Weitz ([email protected], https://github.com/eweitz)
    More about Gene Leads and the underlying Ideogram.js library:
    ● Source code: https://github.com/eweitz/ideogram
    ● Gene search recommendation UI: https://eweitz.github.io/ideogram/gene-leads
    ● 20+ examples: https://eweitz.github.io/ideogram

    View Slide