- Keiichiro Ono presented on his experience developing and maintaining bioinformatics visualization applications over 15 years, including Cytoscape. - Expanding applications to support new technologies like web, Python, and JavaScript is important to attract developers and connect to popular tools, but breaking API changes are difficult. - A loosely coupled approach integrating existing applications, Jupyter notebooks, and new web apps may be better than rewriting applications from scratch.

1. Keiichiro ONO 大野圭一朗
第一回バイオインフォマティクス可視化セミナー (12/26/2018)
バイオインフォマティクス分野における
可視化アプリケーション構築と維持の実際
Design,implementation,and maintenance of data
visualization applications for bioinformatics

2. About me…

3. Del Mar,CA
‣Keiichiro ONO
‣ Bioinformatics software engineer
@UC,San Diego Trey Ideker Lab
‣ Cytoscape Consortium member since 2005
‣ National Resource for Network Biology (NRNB)
‣ Data Visualization Japan

4. Our Projects

5. Cytoscape
Desktop
Open source platform for network analysis
and visualization
(2003 - )

7. Cytoscape.js:
Library for building
network visualization
web applications

8. Current main project:
From omics-data to
hierarchy to phenotype

9. A gene ontology inferred from molecular networks. Dutkowski J,
Kramer M,Surma MA,Balakrishnan R,Cherry JM,Krogan NJ,Ideker
T., Nature Biotechnology 2013 Jan;31(1):38-45.
NeXO Web: the NeXO ontology database and visualization
platform. Dutkowski J, Ono K,Kramer M, Yu M, Pratt D,Demchak B,
Ideker T., Nucleic Acids Res. 2014 Jan;42(Database issue).

10. Using deep learning to model the hierarchical structure and function of a cell.
Ma J,Yu MK,Fong S,Ono K,Sage E,Demchak B,Sharan R,Ideker T. Nat Methods. 2018 Mar 5. doi: 10.1038/
nmeth.4627.PMID: 29505029

11. HiView:
Universal Browser for hierarchical data

13. Overview:
Design,implementation,and maintenance of
(long-lived) data visualization application for
bioinformatics

14. 15 years ago…

15. Cytoscape V1
2003

16. No Gmail
No Google Maps
2003 (from wikipedia)

18. Cytoscape V1
2003
• Java-Swing GUI application
• For multiple platform support
• Support for plugins
• Basic architecture was modular and “modern”
• Slow…
• Designed to handle few hundreds of nodes and edges

20. 2018:

22. Cytoscape V3.7
2018

24. Cytoscape V3.7
2018
• Still a Java-Swing GUI application
• With a lot of optimization and improvements
• Basic architecture is still the same - Visual Style, Filter, Plugins/Apps
• Polyglot - Core is still Java, but provides REST API for multiple language support
• MUCH faster
• Designed to visualize tens of thousands of nodes and edges

25. Hardest project so far:
Migration from v2.0 to 3.0
= Breaking API change

26. • Breaking API changes
• OK for us, but NOT for 3rd party developers!
• There was over few hundreds of 3rd party apps for v2.x
• Had a lot of tutorial sessions and workshops for Plugin (a.k.a. App) developers
• With a lot of optimization and improvements
• Introduced OSGi - Modular Java
• Took us almost 5 years to complete the migration…
Migration from 2.x to 3.x

27. Lessons learned:
Breaking API change is extremely
expensive if the application has
large 3rd party developer community

28. 2019:
Cytoscape 4.0 or Cytoscape Cloud?

29. Expandability in
Cytoscape

30. 2003 → 2018:
Plugins → Apps → Scripting
→ REST API → Web Integration

31. Plugins / Apps
• Expansions / Add-ons written in Java
• Still acceptable, but huge overhead
for bioinformaticians

32. Scripting
• Support for languages implemented on
top of JVM
• JRuby
• Jython
• JavaScript (Rhino)
• Not so successful due to the limitations
of the JVM scripting languages

33. REST API
• Language-agnostic
• Enable users to automate
their workflows
https://cytoscape.org/cytoscape-tutorials/presentations/advanced-automation-2018-sib.html#/

34. Web Integration
• Implement UI with web
technologies
• Use external web browser
as a new user interface

35. Why we should use
web technologies to build
complex data viz apps for biology?

36. • Standard platform for data visualization
= Web browser
• Toolchain / Frameworks
• Documents
• Developers!

37. Toolchain / Frameworks
• Most popular, modern frameworks for advanced data visualization are available
for the web browsers
• Browsers are ubiquitous - from phones to workstations

38. Documents
• Books
• Papers
• Reference Implementation
• Source code

41. Developers
• It is hard to find good developers for (relatively) old
technology…
• Learn Java Swing in 2019…?
• It is important to attract young developers
• Otherwise, the community eventually dies

42. …and data analysis tools are
always available in R/Python
(this statement may be too strong,especially Julia users, but in reality,this is true from the sponsor’s point of view)

43. • Workbench for data analysis and
visualization
• Notebook applications
• Jupyter Notebook
• R Markdown
• IDE-like applications
• Jupyter Lab

44. These are the tools for modern data
analysis/viz application developers

45. But we cannot trash existing
application ecosystem!

46. Web Apps
Notebooks
Don’t trash,connect!

47. Pros and Cons of Loosely-Coupled
Multiple Client Application Approach
• Pros
• No rewriting
• From Python to Java, etc.
• Huge ecosystem
• Access to de-facto standard
tools
• No reinventing-the-wheel
• Cons
• UX
• Window management
• Modality
• Environment management
• Dependencies

48. There is no perfect solution,
but polyglot,heterogeneous
environment is the standard today
(and we should support it!)

49. Problems in bioinformatics data
viz application development

50. • Needs for custom data visualization apps
• BI tools, such as Tableau/Spotfire are not always good enough for
researchers’ use cases
• Limited resources
• Even the biggest (academic) lab in the world is much smaller than the tech
giants…

51. Case Study：
Expanding
The Cytoscape Ecosystem
Or,implementing Cytoscape 4.0 without
implementing Cytoscape 4.0 Java API

52. Goal:
Create a loosely-coupled collection
of tools for network biology

53. Web Apps for new experimental visualizations
Notebooks
Existing software suite
Extension for network visualization

54. 1. New widgets/components for Jupyter Notebook / Lab
2. New browser for hierarchical data
3. Connect them to existing apps

55. Notebook Widgets

56. CyJupyter:
Cytoscape.js widget for
Jupyter Notebook

57. • Standard notebook widget
• Simple network rendering only

58. CyJupyterLab:
Cytoscape.js extension for
JupyterLab

59. • JupyterLab Extension
• Pure JavaScript (TypeScript)
module
• React-based

61. Why two versions?
• JupterLab notebook panel is not 100% compatible with Jupyter Notebook
• e.g. local search
• Not all Jupyter Notebook users are migrating to JupyterLab
• Some prefer simplicity of the Notebook

62. JupyterLab
• IDE-like UX
• Better internal architecture
• Flexible API
• Best for new projects

63. Jupyter Notebook
• Simple, intuitive UI
• The defect standard
• Limited interactivity

64. Which one should we use???

65. Jupyter Notebook /
Lab Quick Demo:

66. Designing New Data
Visualization for Biology

67. Basic Tools:
D3/Cyjs + React

68. Observable:
Good tool for sketching

69. HiView 2.0
S:1 nuclear part
nucleoplasm
cytosol
regionalization
S:42
voltage-gated potassium channel activity leak channel activity
S:1320

70. HiView: Demo

71. Best practices for building complex
data viz application for biology

72. 1.Avoid Not Invented Here Syndrome!

73. There is no need to
implement bar chart library
from scratch using D3!!!

74. Use library with higher-level API

76. 2.Watch trends in frontend framework

77. Technology
cytoscape.js

78. State of JavaScript
https://2018.stateofjs.com/introduction

79. 3.Don’t dig too deep:
Try to use library with high-level API

80. Example:
Uber Data Viz Stack

81. Summary:

82. • Maintaining a long-lived client application is HARD
• Always accept changes
• Technology is always changing
• Don’t stick to a language / platform
• Support popular / standard platforms