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

Transcript

1. Gene leads ideogram
   Plug-in for richer gene search
   Eric Weitz
   eweitz@broadinstitute.org
   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 (eweitz@broadinstitute.org, 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