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.

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
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