enhancedGraphics: a Cytoscape app for enhanced node graphics

Introduction

Cytoscape^1,2 provides support for coloring and sizing nodes and node borders based on data values stored in the Node Table. This provides an extremely useful mapping between data values and a single visual property, but does not solve the need for more complex visualizations. Over the years, there have been attempts to support more complex mappings of multiple data values onto node visuals in Cytoscape. These include GOlorize³, which maps GO terms to pie charts on nodes; GenePro⁴, which visualizes groups of nodes as pie charts; VistaClara⁵, which adds bar graphs to represent expression data; and more recently MultiColoredNodes⁶. Each of these plugins and apps implemented their own graph and chart capabilities that are not accessible to other apps and in some cases not applicable outside of specific types of analyses. We felt that a better approach would be to implement an app that provided general support for graphs and charts to users as well as to the developers of other apps. The initial version of this approach was developed for Cytoscape 2.8 as nodeCharts, which was used by clusterMaker⁷, for example, and numerous users (see Figure 3 in the Jäger, et al. paper⁸). For Cytoscape 3, we reimplemented this approach as an app to take advantage of the new architecture and custom graphics API. The mechanism supports saving and restoring charts, as well as high-quality image file output suitable for publication. The intent is to provide a single, consistent, mechanism to draw charts and graphs on nodes as a general solution for diverse users and other app developers, mitigating the need to reinvent this capability in future apps.

Implementation

As part of the visual property mechanism, enhancedGraphics utilizes the Cytoscape 3 custom graphics API (org.cytoscape.view.presentation.customgraphics). To use the gradients and charts provided by enhancedGraphics, an app or user would create two things: a column that contains the instructions for creating the chart, and a passthrough visual mapping that maps that column to one of the custom graphics visual properties. The format of the instruction column is type: arglist, where type is the type of gradient or chart, and arglist is a list of name=value pairs that specify the arguments to create the gradient or chart (see details and examples in the tables below). The drawing and display of the chart or graph is handled by enhancedGraphics methods that are called by the Cytoscape rendering engine.

Internally, each enhancedGraphics chart type implements a CyCustomGraphicsFactory that is registered with OSGi⁹. Each CyCustomGraphicsFactory informs the visual mapping mechanism of the chart type (e.g. lingrad) and method to create the CyCustomGraphics object given a String, which is the instruction column value. The CyCustomGraphics object parses the String as appropriate. Each CyCustomGraphics object implements a getLayers method that generates the appropriate list of CustomGraphicLayers. The API defines three types of CustomGraphicsLayers: (1) the base interface, CustomGraphicsLayers, that provides a getPaint method to return a simple java.awt.Paint for the node; (2) ImageCustomGraphicLayer, that adds a getPaint method that returns a java.awt.TexturePaint suitable for painting an image on a node; and (3) PaintedShape which adds methods to return Shapes, Strokes, and Paints to draw arbitrary shapes. enhancedGraphics utilizes the base CustomGraphicsLayer for the two gradient types and PaintedShape for all of the charts.

Results

Figure 1 shows examples of all of the gradients and charts that are provided by enhancedGraphics. Up to nine different graphs can be combined on a single node by mapping different columns to different Custom Graphics properties and then offsetting the charts using the corresponding Custom Graphics Position properties. enhancedGraphics currently provides two different types of graphics options: gradients and charts.

Figure 1. enhancedGraphics example Gradients and Charts.

Examples

The example charts shown in Figure 1 and provided in the Cytoscape session file Supplementary File 1 are generated from data columns. The instructions in the chart columns assume that the following columns exist: a, b, c, and d are integer columns in the default node table; Values is a list of Doubles also in the default node table, and Circle1 and Circle2 are also lists of Doubles. At this point, gradients are not dependent on any internal data. See Supplementary File 1 to see the instructions that generated Figure 1.

A more relevant biological example is shown in Figure 2. This image shows a portion of the galFiltered.cys network delivered as part of the sampleData with every Cytoscape download. The bar charts show the values of the expression data included as columns gal1RGexp, gal4RGexp, and gal80Rexp. A string column was created and all rows were filled with the enhancedGraphic arguments:

heatstripchart:
    attributelist="gal1RGexp,gal4RGexp,gal80Rexp"
    colorlist="yellowblue" range="-3.0,3.0"

Figure 2. Example of using enhancedGraphics to show expression data in the context of a protein-protein interaction network.

Conclusions

enhancedGraphics fills an important need for Cytoscape visualizations: the ability to display more complicated data relationships as graphical representations onto nodes. enhancedGraphics has been integrated into clusterMaker to show heatstrips on nodes corresponding to clusters, into upcoming apps such as cddApp, which connects to the NCBI CDD Database and uses enhancedGraphics to show pie charts of the domain coverage. We have also used enhancedGraphics to show sequence coverage histograms on nodes that represent sequence contigs. In the future, we want to improve the font handling and add support for small heatmaps painted on nodes. We also plan to add a graphical interface to help users construct these visualizations without having to write out instruction arguments. The concise syntax, however, will still be valuable to advanced users and other app developers seeking to create enhanced graphics. With enhancedGraphics, Cytoscape users and app developers can visualize multiple columns of data as graphs and charts on their network nodes.

Software availability

Software available from: http://apps.cytoscape.org/apps/enhancedGraphics

Latest source code: https://github.com/RBVI/enhancedGraphics

Source code as at the time of publication: https://github.com/F1000Research/enhancedGraphics/releases/tag/v1

Archived source code as at the time of publication: http://www.dx.doi.org/10.5281/zenodo.10421¹¹

Software license:

Lesser GNU Public License 3.0: https://www.gnu.org/licenses/lgpl.htmlM