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

IdeogramJS: Chromosome visualization with JavaScript

Eric Weitz
October 24, 2018

IdeogramJS: Chromosome visualization with JavaScript

The science and software behind Ideogram.js (https://github.com/eweitz/ideogram).

Presented in an hour-long session to an audience of 30-40 software engineers in the Software Engineering Meetup at the Broad Institute in Cambridge, Massachusetts on October 24, 2018.

Eric Weitz

October 24, 2018
Tweet

More Decks by Eric Weitz

Other Decks in Science

Transcript

  1. Ideogram.js Chromosome visualization with JavaScript https://github.com/eweitz/ideogram

  2. Outline

  3. What is an ideogram?

  4. Human genome as karyotype

  5. Human genome as ideogram

  6. Parts of a chromosome

  7. p arm q arm Parts of a chromosome

  8. Parts of a chromosome

  9. Ideograms are widely used

  10. Outline

  11. Ideogram.js • • • •

  12. Human genome https://eweitz.github.io/ideogram/human

  13. https://eweitz.github.io/ideogram/mouse Mouse genome

  14. 100+ eukaryotic genomes https://eweitz.github.io/ideogram/eukaryotes

  15. Comparative genomics https://eweitz.github.io/ideogram/homology-interspecies

  16. Show gene location

  17. Load BED files

  18. Diploid human genome

  19. Outline

  20. Ideogram.js software architecture Ideogram.js is a client-side web component. -

    Few dependencies; framework-independent Run-time is JavaScript; data build is Python. Remaining stack: Travis CI, Coveralls, GitHub Pages, Unpkg CDN
  21. Ideogram.js data architecture

  22. ES6 module system

  23. CommonJS, AMD, manual ES6 module system

  24. Ideogram.js modules 2017-07 (v0.6.1)

  25. Ideogram.js modules 2018-08 (v1.3.0)

  26. Ideogram.js modules 2018-10 (master)

  27. Ideogram.js is a reusable component • • • • •

  28. Ideogram.js in React https://github.com/eweitz/ideogram/tree/master/examples/react

  29. Ideogram.js in Jupyter Notebooks https://github.com/eweitz/ideogram/tree/master/examples/jupyter

  30. Outline

  31. Performance Speed matters to users and developers. Users: page load

    time, run-time smoothness Developers: user concerns + time to compile, test, add features
  32. Ideogram.js performance 53 kB in transfer size < 350 ms

    for uncached load and render < 100 ms to filter 20,000+ genes
  33. Measure performance with Chrome DevTools Chrome DevTools panels give key

    insight on web app performance. Network panel: • Detail on each request • Throttle download, upload, latency Performance panel: • Automatic screenshots of visual state over time • “Flame chart” of call stack over time Mac: Command + Option + I Windows / Linux: Control + Shift + I
  34. None
  35. None
  36. Maintainability Performance metrics for developers. Time to: • Compile •

    Test • Add features
  37. Adding new features quickly Code Climate estimates technical debt in

    a repo, by measuring: Argument count Complex logic File length Identical blocks of code Similar blocks of code https://codeclimate.com/github/eweitz/ideogram Method complexity Method count Method length Nested control flow Return statements
  38. Ideogram.js 2019 roadmap • More support for cancer genomics •

    Resurrect batch ideograms • Generalized comparative genomics • Responsive view for mobile