SBGNViz.js 1.1 User s Guide

Transcription

1 i - Vis@Bilkent & cbio@mskcc SBGNViz.js 1.1 User s Guide i-vis@bilkent and cbio@mskcc2014 Bilkent University Ankara 06800, TURKEY Phone Fax

2 Table of Contents 1. Introduction Loading and Saving SBGN Models Load an SBGN Model Sample Models Save as SBGN Model Save as Image Properties Interacting with Current Model and Recalculating Layout Filter Hide Selected Show Selected Show All Delete Selected Highlighting Highlight Neighbors Highlight Processes of Selected Remove Highlights Legends Help How to use About... 9 References... 10

3 1. Introduction SBGNViz.js is a Cytoscape.js [1] based tool to visualize pathways represented in System Biology Graphical Notation (SBGN) [2] Process Description (PD) notation [3]. The tool has been developed as an extension to Cytoscape.js[1], an open-source JavaScript graph theory library for analysis and visualization which provides native browser support and allows to use in mobile devices. In summary, SBGNViz.js comes with usual zoom-scroll and move capabilities inherited from Cytoscape.js. In addition, context sensitive filtering and highlighting capabilities are provided by the tool as described later. Unlike most other pathway visualization tools, SBGNViz.js has full support for compound structures (i.e., molecular complexes and compartments), handling them during interactive editing operations such as move. Please cite [5] if you use SBGNViz.js. 2. Loading and Saving SBGN Models 2.1. Load an SBGN Model You can load files that contain SBGN-PD graphs for visualization via the "Load " button under the File menu. A file dialog will appear in order to upload the desired file Sample Models SBGNViz.js comes with a number of sample SBGN-PD graphs to view, available under the File menu.

4 Figure 1 An example sample biological network in SBGN PD notation as rendered by SBGNViz.js 2.3. Save as SBGN Model "Save " button available under the File menu exports the current network (including both topology and geometry and applied filtering operations) in SBGN-ML format to a file on your computer Save as Image "Save as Image" available under the File menu lets you export the current network visualized on the canvas to an image file. Currently only the PNG and JPG image formats are supported Properties Properties available under the File menu lets the user modify properties of the maps being visualized such as padding/margins of compounds. 3. Interacting with Current Model and Recalculating Layout SBGNViz.js provides standard visualization facilities such as zooming and scrolling and lets the user change the positions of map elements using dragging. When you right-click on a macro-molecule or a nucleic acid feature, detailed properties of the associated entity is displayed on a pop-up window as fetched from BioGene [4].

5 Figure 2 Sample screenshot illustrating how genes may be inspected for details [5] Layout of the current map could also be re-calculated using Perform Layout under the Layout menu. The options available to user controlling the layout operation are exposed to the user through the Layout Properties dialog also available in this menu. 4. Filter SBGNViz.js allows users to filter node group taking the context rules into consideration. User may show and hide specific processes, select an entity pool node and show every process it involves Hide Selected In case you're not interested in a certain node group, you may hide them from the current model by simply selecting them and hiding them using "Hide Selected" under the Filter menu.

6 Figure 3 Mapk cascade SBGN diagram and selected MEK macromolecule (left) and after hiding selected node by SBGNViz.js taking SBGN context into consideration (right) 4.2. Show Selected In case you're only interested in a certain node group, you may only show them from the current model by simply selecting them and selecting "Show Selected" under the Filter menu. Figure 4 Mapk cascade SBGN diagram and selected processes are orange (left) and after showing only selected node by SBGNViz.js taking SBGN context into consideration (right) 4.3. Show All User can apply any filtering operations and then bring all nodes back in the graph by selecting Show all under Filter menu Delete Selected Users are also allowed to delete map elements permanently using Delete Selected in this menu.

7 5. Highlighting 5.1. Highlight Neighbors This operation highlights the neighbors of selected node group on the canvas. Figure 5 A sample highlight of the neighbors of a simple molecule 5.2. Highlight Processes of Selected This operation highlights the processes that selected node participates in.

8 Figure 6 A sample highlight of the processes of selected; in this example selected simple molecule is involved in three processes, which are highlighted Remove Highlights User can apply any Highlight operations and then remove any highlight in the graph by selecting Remove Highlights under Highlight menu. 6. Legends Node Legend under Legends menu opens a dialog that shows the node types supported by SBGN PD notation and how they are represented in SBGNViz.js.

9 Figure 7 Node legend for process description diagrams in SBGN Interaction Legend, on the other hand, opens a new pop-up window that shows the interaction types supported by SBGN PD notation and how they are represented in SBGNViz.js. 7. Help Figure 8 Interaction legend for process description diagrams in SBGN 7.1 How to use This menu item opens a page on a new browser tab that includes the User Guide of SBGNViz.js (this document) About This menu item opens the About page of SBGNViz.js

10 References [1] Cytocape.js, [2] Systems Biology Graphical Notation, [3] SBGN Process Description Notation, [4] BioGene: an information tool for biological research, [5] M. Sari, I. Bahceci, U. Dogrusoz, S.O. Sumer, B.A. Aksoy, O. Babur, E. Demir, "SBGNViz: a tool for visualization and complexity management of SBGN process description maps", PLoS ONE, 10(6), e , 2015.