Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Eric Weitz

Other Decks in Science


  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
  2. 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
  3. 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
  4. 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
  5. Hover for more molecular biology Hover individual features for detail

    See other isoforms https://eweitz.github.io/ideogram/gene-leads?q=LPL
  6. Plug in for richer gene search Gene Leads search plug-in

    Your detail Your search Explore this example in Single Cell Portal
  7. 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
  8. 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)
  9. 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