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
Gene leads ideogram
Plug-in for richer gene search
SoftEng seminar series
Broad Institute of MIT and Harvard
Help users explore and discover genomic data by widening search results.
● 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
Related results in domain-speciﬁc search UIs
Localizable results are mapped in generic search UIs
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
Popovers for related genes aid discovery
Pathway where genes interact
Diagrams for RNA and protein
show UTRs, CDS, exon bounds
and translated protein domains
Hover for more molecular biology
Hover individual features for detail
See other isoforms
Plug in for richer gene search
Explore this example in Single Cell Portal
Service worker cache
Gene Leads is fast and resilient, because it uses service worker caches.
● Interactions go from 2-10 seconds -> 0.05 seconds
● Usable ofﬂine -- it's resilient to bad Internet connections
● Doesn't break due to third parties changing or degrading REST APIs
● Background loads more data on ﬁrst use
Data ﬂow in gene leads ideogram
Build time Run time
1st run After 1st run
Fetch remote static
Fetch local static
Fetch remote APIs
WikiPathways CDN or bucket
(i.e., service worker)
Roadmap: Gene leads ideogram
● Add variants
● Improve documentation
● Enhance support for non-human organisms
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