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
2. • Background • Visuals • Speed • Future Outline
3. Background
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
5. Related results in domain-specific search UIs
6. Localizable results are mapped in generic search UIs
7. Visuals
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
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
10. Hover for more molecular biology Hover individual features for detail See other isoforms https://eweitz.github.io/ideogram/gene-leads?q=LPL
11. Plug in for richer gene search Gene Leads search plug-in Your detail Your search Explore this example in Single Cell Portal
12. Speed
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
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)
15. Future
16. Roadmap: Gene leads ideogram • Add variants • Improve documentation • Enhance support for non-human organisms
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