See also KEGG Pathways Representation I: NetworkX


Contents:


Background

Hello, again! 

This research blog post is a continuation of my KEGG Pathways Representation I: NetworkX research blog post, which ended with the following Cytoscape-related material.

The R programming language (with which I am acquainted) offers superb utilities for working with genomic data, e.g. via the Bioconductor package – which in turn includes the KEGGlincs utility for explicitly recreating KEGG pathway maps and overlaying NIH LINCS transcriptional data.

KEGGlincs can be used with Cytoscape, to visualize the graph (Cytoscape must be running, for the CyREST interface layer interaction):

kegglincs_p53_incytoscape_via_cyrest.png

Pretty cool! 


Cytoscape [desktop version]

I’ve previously used Cytoscape, as described and published here:

Cytoscape is a mature, very well supported and actively maintained platform that has progressed immeasurably since that time. Particularly relevant to the content of this research blog post are the following tools and resources that are available to Cytoscape.

For example, these are my glycolysis/TCA cycler pathway data, rendered in Cytoscape (here, just a basic visualization):

cytoscape-glycolysis_+_tca-2019.08.07a.png


In my opinion, if you are familiar with the basic operation of Cytoscape the implementation of this visualization in Cytoscape was vastly superior / easier than the NetworkX implementation described in my first post!

This is demonstrated in my video screen capture, below, which shows that I can load those glycolysis / TCA data into Cytoscape and format the graph in less than 5-6 minutes! 

  • The node positions defined in that video are available via my node_pos2x10.tsv file.


Demo [video]:

Double-click (or mouseover → select “full screen” button at far right of progress bar) to enlarge:



Rather than further clutter this already lengthy post, I’ll close by posting one of my raw text files that summarized a preliminary Cytoscape-related inquiry; that text includes a link to / implementation of the code that was used to generate the following py2cytoscape advanced cancer networks and data. visualization. My raw text file also shows some Python queries over those data.

py2cytoscape-advanced-cancer-networks-and-data-cytoscape-automation-demo-2019.07.05a.png



Cytoscape.js

Please note: while sharing features, Cytoscape and Cytoscape.js are independent projects.

Exporting Network and Styles Data from Cytoscape

This is trivially easy!    In the Cytoscape desktop application, with your data loaded, formatted and saved:

  • Data/network: File menu → Export → Network to File… → Cytoscape.js JSON (*.cyjs)
  • Styles: File menu → Export → Styles to File → Style for cytoscape.js (*.json)

cytoscape_export1.png


cytoscape_export2.png


Here I made sure to also select my custom style (victoria_0):

cytoscape_export3.png


Webserver

I am running Cytoscape.js locally via a webserver, manually run in a terminal.


The webserver – which is needed to render JavaScript / jQuery code – provides a local [localhost] URL/address {http://localhost | http://127.0.0.1 | http://0.0.0.0}, that you can access / open in a web browser in order to view the served HTML document:

webserver.png


Cytoscape.js Styles: Internal JSON Data [HTML DOM]

This first example describes the manual inclusion of the Cytoscape styles data in the HTML DOM (HTML document).

Here are the necessary files, available for download from my Persagen.com website.  .

Place the HTML file in the webserver root directory, with the other files places per this directory structure:


Refer to comments inside the HTML file for a greater understanding of this approach.

The JavaScript code contained within the cytoscape.js.demo-external_styles.html file is shown here.


Note that in this example I manually copied the styles data from styles.json to the cytoscape.js.demo-external_styles.html.

The $.getJSON() data structure, above, is a JavaScript / jQuery  “promise” (see also this informative blog post).

cytoscape-bundled-vs-nonbundled_edges.png


The astute Reader will also notice that the edges in my pathways in the desktop Cytoscape application are bundled, which is the only way to show bidirectional arrows in Cytoscape. Per the comments in my HTML file, bundled edges unfortunately are not available (and not likely to be available) in Cytoscape.js. My workaround was to add the following line to the styles JSON code in the HTML code (and also in the external styles.json file):


While a satisfactory solution, bidirectionality in Cytoscape.js is indicated by paired unidirectional arrows. 


Cytoscape.js Styles: External JSON Data File

Data Files:

For the following Cytoscape.js discussion, I’ve uploaded a tarball containing the needed files:


The files needed for this subsection are also available for direct download here, from my Persagen.com website:

Again, you’ll need to run those files in a webserver.

The HTML file, cytoscape.js.demo.html, contains two approaches to loading the styles from external JSON file (hence the two styles files, above).

Here is the JavaScript portion of that HTML file, describing the two approaches.


These solutions were very kindly provided by StackOverflow users Jaromanda X and maxkfranz, in response to my StackOverflow question.  [Max Franz is also the leading – by a large margin – Cytoscape.js Contributor.] 

Simple, once you know how!    I hope that it helps others who seek this solution! 

Aside:

Sometimes you see (e.g. SO#45828931) the res => res.json() method predefined as follows:


I’m not a fan of that usage (here, at least):

  • It obfuscates the code.
  • It increases the probability of broken code; for example, if portions of the code are quoted elsewhere without the toJson definition.
  • There is very little compaction of the code: res ==> res.json() vs. toJson.

In my opinion, the explicit statements are preferred.


Glycolysis + TCA cycle rendered in Cytoscape.js

Ok, after all that here is my metabolic network, fully loaded from external {data | styles} JSON files.

cytoscape.js.demo-all_external_json.png

Demo [video]:


Q.E.D. 

Enjoy!