What is a Visual Style?

One of Cytoscape's strengths in network visualization is the ability to allow users to encode any attribute of their data (name, type, degree, weight, expression data, etc.) as a visual property (such as color, size, transparency, or font type). A set of these encoded or mapped attributes is called a Visual Style and can be created or edited using the Cytoscape VizMapper. With the VizMapper, the visual appearance of your network is easily customized. For example, you can:

Cytoscape 2.6.0 and later versions have additional sample Visual Styles. You can try those samples to examine how Visual Styles change the appearence of a network. The following is a list of network views based upon sample styles applied to the galFiltered.sif network :

default_style.png metro_style.png solid_style.png ripple_style.png skeleton_style.png universe_style.png

The VizMapper can be accessed by going to View → Open VizMapper or by clicking on the VizMapper icon VizMapIcon.png . Also, starting in Cytoscape 2.5, direct access to the VizMapper is provided via a tab on the Control Panel at the left-hand side of the screen (formerly known as CytoPanel 1).

Introduction to the VizMapper User Interface

There are three types of control panels in the VizMapper:

  1. Main Panel
    • VizMapperMainPanel.png

    • This panel allows you to create/delete/view/switch between different visual styles using the Current Visual Style options. The Visual Mapping Browser at the bottom displays the mapping details for a given visual style and is used to edit these details as well.
  2. Default Appearance Editor
    • DefaultEditorPanel.png

    • Clicking on the section labelled "Defaults" on the Main Panel will bring up the Default Appearance Editor, which allows you to visually edit the default appearance of nodes and edges for the selected visual style.
  3. Continuous Editors
    • These are editors for continuous mappings, which are mappings from numerical values to visual attributes. They are accessed through the Visual Mapping Browser on the Main Panel.
    • Color Gradient Editor
    • Continuous-to-Discrete Editor
    • Continuous-to-Continuous Editor

These editors will be discussed in further detail below.

Introduction to Visual Styles

The Cytoscape distribution includes several predefined visual styles to get you started. To examine these styles, try out the following example:

Step 1. Load some sample data

Step 2. Switch between different Visual Styles

You can change visual styles by making a selection from the Current Visual Style dropdown list (found at the top of the VizMapper Main Panel).

For example, if you select Sample1, a new visual style will be applied to your network, and you will see a white background and round blue nodes. If you zoom in closer, you can see that protein-DNA interactions (specified with the label "pd") are drawn with dashed red edges, whereas protein-protein interactions (specified with the label "pp") are drawn with a solid light blue edge (see sample screenshot below).

Finally, if you select Solid, you can see the graphics below:

This Visual Style does not have mappings except node/edge labels, but you can modify the network graphics by editing Default View.

Additional sample styles are available in the sampleStyles.props file in the SampleData directory. You can import the sample file from File → Import → Vizmap Property File.

Visual Attributes, Graph Attributes and Visual Mappers

The Cytoscape VizMapper uses three core concepts:

Cytoscape allows a wide variety of visual attributes to be controlled. These are summarized in the tables below.

Visual Attributes Associated with Nodes

Description

Node Shape

The shape of the node.

Node Fill Color

The color of the node.

Node Opacity

The opacity of the color of the node. Allows for transparency.

Node Border Color

The color of the border of the node.

Node Border Opacity

The opacity of the color of the border of the node. Allows for transparency.

Node Line Style

Ostensibly the type of line used for the border of the node. This is not currently functional!

Node Line Width

The width of the node border.

Node Font Face

The font used for the node label.

Node Font Size

The size of the font used for the node label.

Node Label

The text used for the node label.

Node Label Color

The color of the node label.

Node Label Opacity

The opacity of the color of the node label. Allows for transparency.

Node Label Position

The position of the node label relative to the node.

Node Label Width

The maximum width of the node label. If the node label is wider than the specified width, Cytoscape will automatically wrap the label on space characters. Cytoscape will not hyphenate words, meaning that if a single word (i.e. no spaces) is longer than maximum width, the word will be displayed beyond the maximum width.

Node Tooltip

The text of the tooltip that appears when a mouse hovers over the node.

Node Show Nested Network

A boolean value that indicates whether a nested network should be visualized (assuming a nested network is present for the specified node).

Node Size

The size of the node. Width and height will be equal. This visual property is mutually exclusive of Node Height and Node Width.

Node Height

The height of the node. Height will be independent of width. This visual property is mutually exclusive of Node Size.

Node Width

The width of the node. Width will be independent of height. This visual property is mutually exclusive of Node Size.

Node Custom Graphics 1 - 9

Custom Graphics objects on the node. These are selected from the Custom Graphics Manager

Node Custom Graphics Position 1 - 9

Position of Custom Graphics relative to the node. By default, this value is set to center.

Visual Attributes Associated with Edges

Description

Edge Color

The color of the edge.

Edge Opacity

The opacity of the color of the edge. Allows for transparency.

Edge Line Style

The type of stoke used to render the line (solid, dashed, etc.)

Edge Line Width

The width of the line.

Edge Label

The text used for the edge label.

Edge Label Color

The color of the edge label.

Edge Label Opacity

The opacity of the color of the edge label. Allows for transparency.

Edge Label Width

The maximum width of the edge label. If the edge label is wider than the specified width, Cytoscape will automatically wrap the label on space characters. Cytoscape will not hyphenate words, meaning that if a single word (i.e. no spaces) is longer than maximum width, the word will be displayed beyond the maximum width.

Edge Font Face

The font used for the edge label.

Edge Font Size

The size of the font used for the edge label.

Edge Tooltip

The text of the tooltip that appears when a mouse hovers over the edge.

Edge Source Arrow Color

The color of the arrow on the source node end of the edge.

Edge Source Arrow Opacity

The opacity of the color of the arrow on the source node end of the edge. Allows for transparency.

Edge Source Arrow Shape

The shape of the arrow on the source node end of the edge.

Edge Target Arrow Color

The color of the arrow on the target node end of the edge.

Edge Target Arrow Opacity

The opacity of the color of the arrow on the target node end of the edge. Allows for transparency.

Edge Target Arrow Shape

The shape of the arrow on the target node end of the edge.

Global Visual Properties

Description

Background Color

The background color of the network.

Node Selection Color

The color of the nodes when selected.

Node Reverse Selection Color

The color of the nodes when selected in the Attribute Browser.

Edge Selection Color

The color of the edges when selected.

Edge Reverse Selection Color

The color of the edgse when selected in the Attribute Browser.

Available Shapes and Line Styles

Sample

Node Shapes

NewVizMapperNodeShape.png

Edge Line Styles

NewVizMapperLineType.png

Arrow Types

NewVizMapperArrowType.png

For each visual attribute, you can specify a default value or define a dynamic visual mapping. Cytoscape currently supports three different types of visual mappers:

  1. Passthrough Mapper

    • The values of network attributes are passed directly through to visual attributes. A passthrough mapper is typically used to specify node/edge labels. For example, a passthrough mapper can label all nodes with their common gene names.
  2. Discrete Mapper

    • Discrete data attributes are mapped to discrete visual attributes. For example, a discrete mapper can map different types of molecules to different node shapes, such as rectangles for gene products and ellipses for metabolites
  3. Continuous Mapper

    • Continuous data are mapped to visual attributes. Depending on the visual attribute, there are three kinds of continuous mappers:
      1. Continuous-to-Continuous Mapper: for example, you can map a continuous numerical value to a node size.

      2. Color Gradient Mapper: This is a special case of continuous-to-continuous mapping. Continuous numerical values are mapped to a color gradient.

      3. Continuous-to-Discrete Mapper: for example, all values below 0 are mapped to square nodes, and all values above 0 are mapped to circular nodes.

    • However, note that there is no way to smoothly morph between circular nodes and square nodes.

The table below shows visual mapper support for each visual property.

Legend

Symbol

Description

-

Mapping is not supported for the specified visual property.

+

Mapping is fully supported for the specified visual property.

o

Mapping is partially supported for the specified visual property. Support for “continuous to continuous” mapping is not supported.

Node Visual Mappings

Node Visual Properties

Passthrough Mapper

Discrete Mapper

Continuous Mapper

Color

Node Color

o

+

+

Node Opacity

o

+

+

Node Border Color

o

+

+

Node Border Opacity

o

+

+

Node Label Color

o

+

+

Node Label Opacity

o

+

+

Numeric

Node Size/Width/Height

o

+

+

Node Font Size

o

+

+

Node Line Width

o

+

+

Node Label Width

o

+

+

Other

Node Border Type

-

+

o

Node Shape

o

+

o

Node Label

+

+

o

Node Tooltip

+

+

o

Node Font Family

o

+

o

Node Label Position

o

+

o

Node Show Nested Network

o

+

o

Edge Visual Mappings

Edge Properties

Passthrough Mapper

Discrete Mapper

Continuous Mapper

Color

Edge Color

-

+

+

Edge Opacity

-

+

+

Edge Target Arrow Color

-

+

+

Edge Source Arrow Color

-

+

+

Edge Target Arrow Opacity

-

+

+

Edge Source Arrow Opacity

-

+

+

Edge Label Color

-

+

+

Edge Label Opacity

-

+

+

Numeric

Edge Line Width

-

+

+

Edge Font Size

-

+

+

Edge Label Width

-

+

+

Other

Edge Line Type

-

+

o

Edge Source Arrow Shape

-

+

o

Edge Target Arrow Shape

-

+

o

Edge Label

+

+

o

Edge Tooltip

+

+

o

Edge Font Family

-

+

o

Text Passthrough Mapper (New feature for version 2.8)

In Cytoscape 2.8.0 and later versions, the Passthrough Mapper can recognize some text representations of values. This means, if you have an integer attribute named Node Size Values, you can directly map those values as the Node Size by setting Node Size Values as controlling attribute name for Node Size Passthrough mapping. The following value types are supported:

Examples

  1. Color Passthrough Mapping
    • colorPt1.png colorPt2.png

  2. Node Size Passthrough Mapping
    • sizePt1.png sizePt2.png

  3. Custom Graphics Passthrough Mapping
    • cgPt1.png cglorPt2.png

Custom Graphics Manager

For Cytoscape 2.8.0 and later versions, Cytoscape supports Custom Graphics for nodes. You can add all kinds of bitmap images, such as jpg, png, or gif, on the top of network nodes. From the user's point of view, this is simply an addition to the Visual Properties, and you can use same VizMap user interface to map Custom Graphics to nodes. However, before mapping images, you need to prepare Custom Graphics in the Custom Graphics Manager. It is a simple GUI component to add/remove images to or from a Cytoscape session.

(Sample icons used in this section is created by the Crystal Project, distributed under LGPL.)

Adding New Images to Cytoscape

The Custom Graphics Manager supports drag and drop for image files and URLs. If you want to add images from a web browser or local file system, you can drag images from them and drop those images onto the list of images on the left.

If you want to add all images in a folder, press the + button on the bottom of the Custom Graphics Manager window.

Note: When you drag and drop images from web browser, make sure that you are actually dragging the URL for the image. In some cases, images are linked to an HTML page or scripts, and in such cases, this drag and drop feature may not work.

Removing Images

To remove images from the current session's Custom Graphics library, simply select graphics from the list and press the - button.

Resizing Images

You can resize images by typing width/height in the text box. If Keep Aspect Ratio box is checked, the width-height ratio is always synchronized. Any time, you can resize the image to the original size by pressing Original button.

Using Custom Graphics in the VizMapper

Custom Graphics is a new type of Visual Property and you can use them from the standard VizMap user interface. There are nine Custom Graphics Visual Properties (Node Custom Graphics 1 - 9) and they will be displayed in the standard VizMap Default View Editor or Mapping Editors.

Custom Graphics Positions

Each Custom Graphics Visual Property is associated with a position. You can edit their positions by using same UI as Label Position.

Z-Ordering

This number that appears with the Custom Graphics Visual Property represents an ordering of layers. Basic node color and shape are always rendered first, then Node Custom Graphics 1, 2, ..., through 9.

Synchronize Custom Graphics to Node Size

By default, Custom Graphics objects are automatically resized to be consistent with the Node Size Visual Property. To control Custom Graphics size separately, uncheck the Synchronize Custom Graphics Size to Node Size dependency. You can find this check box in the Default Editor's Dependencies panel.

Custom Graphics Selector

To select an Custom Graphics, just click one of them and press Apply. To remove a value from mappings/defaults, select Empty Custom Graphics.

Saving and Loading Custom Graphics

In general, saving and loading Custom Graphics is automatic. When you quit Cytoscape, all of the Custom Graphics in the manager will be saved automatically. There are two types of saving:

  1. To session file
    • When you save the current session to a file, the Custom Graphics used in Visual Styles will be saved to that file. For example, if you have a Visual Style with a discrete mapping for Custom Graphics, all Custom Graphics used in the style will be saved to the session file. Other graphics will not be saved in your session file. This is because your image library can be huge when you add thousands of images to the Custom Graphics Manager and it takes very long time to save and load the session file.

  2. Automatic saving to .cytoscape/images directory

    • When you select File-->Quit, all of Custom Graphics in the Manager will be saved automatically to your Cytoscape setting directory. Usually, it's YOUR_HOME_DIRECTORY/.cytoscape/images.

In any case, Custom Graphics will be saved automatically to your system or session and will be restored when you restart Cytoscape or load a session.

Visual Styles Tutorials

The following tutorials demonstrate some of the basic VizMapper features. Each tutorial is independent of the others.

Tutorial 1: Create a Basic Visual Style and Set Default Values

The goal of this tutorial is to learn how to create a new Visual Style and set some default values.

Step 1. Load a sample network. From the main menu, select File → Import → Network (Multiple file types), and select sampleData/galFiltered.sif.

Step 2. Open the VizMapper. Select the View → Open VizMapper menu option, or select the VizMapper icon in the main button bar, or click on the VizMapper tab in the Control Panel at the left of the screen. You will now see a VizMapper Main Panel, as shown below.

Step 3. Create a new visual style. Click the Options VizMapOptionIcon.png button, and select Create new visual style... Then enter a name for your new visual style when prompted. You will see an empty visual style in the VizMapper Main Panel, as shown below.

Since no mappings are set up yet, all visual attributes are listed in the Unused Properties category. From this panel, you can create node/edge mappings for all visual properties.

Step 4. Edit default values. Open the Default Appearance Editor by clicking on the Defaults graphics window (shown below) in the VizMapper Main Panel.

Step 5. Change the default node shape. To set the default node shape to triangles, click "Node Shape" in the Default Visual Properties list. A list of available node shapes will be shown. Click on the Triangle icon and then click the Apply button. The Default Appearance Editor will be automatically updated. You can edit other default values by clicking on visual attribute names on the list. In the example shown below, the node shape is set to Triangle, while the node color is set to blue.

Step 6. Apply your settings. When you finish editing, click the Apply button at the bottom of the editor. Your new Visual Style will be applied to the current network, as shown below.

Tutorial 2: Creating a New Visual Style with a Discrete Mapper

The following tutorial demonstrates how to create a new visual style using a discrete mapper. The goal is to draw protein-DNA interactions as dashed blue lines, and protein-protein interactions as solid red lines.

Step 1. Load a sample network. From the main menu, select File → Import → Network (Multiple file types), and select sampleData/galFiltered.sif.

Step 2. Open the VizMapper. Select the View → Open VizMapper menu option, or select the VizMapper icon in the main button bar, or click on the VizMapper tab in the Control Panel at the left of the screen.

Step 3. Create a new visual style. Click the Options VizMapOptionIcon.png button, and select Create new visual style... Name your new style “Tutorial VS2”.

Step 4. Choose a visual attribute. Double click the Edge Color entry listed in Unused Properties. Edge Color will now appear at the top of the list, under the Edge Visual Mapping category (as shown below).

Step 5. Choose a network attribute. Click on the cell to the right of the Edge Color entry and select "interaction" from the dropdown list that appears.

Step 6. Choose a mapping type. Set the Discrete Mapper option as the Mapping Type. All available attribute values for "interaction" will be displayed, as shown below.

Step 7. Set the mapping relationship. Click the empty cell next to "pd" (protein-DNA interactions). On the right side of the cell, ... and X buttons will appear. Click on the ... button. A popup window will appear; select blue, and the change will immediately appear on the network window.

Repeat step 7 for "pp" (protein-protein interactions), but select red as the edge color. Then repeat steps 4 through 7 for the Edge Line Style attribute. You can select the correct line style (dashed or solid) from the dropdown list.

Now your network should show "pd" interactions as dashed blue lines and "pp" interactions as solid red lines. A sample screenshot is provided below.

NewVizMapperInteractionsRedBlue.png

Tutorial 3: Creating a New Visual Style with a Continuous Mapper

The following tutorial demonstrates how to create a new visual style using a continuous mapper. The goal is to superimpose gene expression data onto a network and display gene expression values along a color gradient.

Step 1. Load a sample network. From the main menu, select File → Import → Network (Multiple file types), and select sampleData/galFiltered.sif.

Step 2. Load sample expression data. From the main menu, select File → Import → Attribute/Expression Matrix, and select sampleData/galExpData/pvals.

Step 3. Open the VizMapper. Select the View → Open VizMapper menu option, or select the VizMapper icon in the main button bar, or click on the VizMapper tab in the Control Panel at the left of the screen.

Step 4. Create a new visual style. Click the Options VizMapOptionIcon.png button, and select Create new visual style... Name your new style “Tutorial VS3”.

Step 5. Choose a visual attribute. Double click the Node Color entry listed in Unused Properties. Node Color will now appear at the top of the list, under the Node Visual Mapping category.

Step 6. Choose a network attribute. Click on the cell to the right of the Node Color entry and select "gal1RGexp" from the dropdown list that appears.

Step 7. Choose a mapping type. Set the Continuous Mapping option as the Mapping Type. This automatically creates a default mapping

Step 8. Define the points where colors will change. Double-click on the black-and-white gradient rectangle next to Graphical View to open the Color Gradient Mapper. Click and drag one point to -1, or type the value in the Range Setting box. Set the second point to 2.

Step 9. Define the colors between points. Double-click on the leftmost triangle (facing left) and a color palette will appear. Choose a shade of yellow and click OK. Double-click on the triangle at -1 and set the color white. For the triangle at 2.000, set its color to red. Set the rightmost triangle to black.

The color gradients will immediately appear in the network window. All nodes with a gal1RGexp value less than –1 will be set to yellow, and all nodes with a gal1RGExp value greater than 2 will be black. Additionally, all values between –1 and 2 will be painted with a white/red color gradient. A sample screenshot is below.

VizMapperExpRedBlack.png

Tutorial 4: How to Use Utilities for Discrete Mappers

The following tutorial demonstrates utilities for editing discrete mappings. The goal of this section is learning how to set and adjust values for discrete mappings automatically.

  1. Load a sample network: From the main menu, select File → Import → Network, and select sampleData/galFiltered.sif.

  2. Apply layout to the network: From the main menu, select Layout → Cytoscape Layouts → Degree Sorted Circle Layout. This layout algorithm sort nodes in a circle by degree of the nodes. Degrees will be stored as node attribute names Degree after you applied this algorithm.

  3. Click the VizMap VizMapIcon.png button on the tool bar.

  4. Click Defaults panel on the VizMapper main panel. Default Apearence Editor pops up (see below.)

  5. Edit the following visual properties and press Apply. Since you changed opacity of the node, you can see the nodes bihind the front node (see below.)

    • Node Oppacity - 100
    • Edge Color - White
    • Background Color - Black

    Opacity1.png

  6. Cretate a Discrete Node Color Mapping. Select Degree as controlling attribute.

  7. Select Node Color, then right click to show popup menu. Select Generate discrete values → Rainbow 1. It generates different colors for different attribute values as shown below. Rainbow1.png

  8. Cretate a Discrete Node Size Mapping. Select Degree as controlling attribute.

  9. Select Node Size and right click to show popup menu. Select Generate Discrete Values → Series (Numbers Only). Type 30 for the first value and click OK. Enter 15 for increment.

  10. Apply Force-Directed layout. The final view is shown below:
    tutorial4_last.png

Tutorial 5: Using Custom Graphics in Visual Styles

This tutorial is a quick introduction to the new Custom Graphics feature in Cytoscape 2.8.0.

  1. Prepare images. These can be any type of bitmap graphics. In this tutorial, we are going to use theCrystal Project's PNG icons. You can download it from here.

  2. Start Cytoscape and select View → Open Custom Graphics Manager

  3. Click + button and select an image folder.

  4. All images in the folder should appear in the Custom Graphics Manager.
    • cgTutorial1.png

  5. Load a network and apply Degree Sorted Circle Layout. This creates new integer node attribute Degree.

  6. Click VizMapper tab in the Control Panel, and select Solid style.

  7. Click default view to open Default Appearance Editor.
  8. Click NODE_CUSTOM_GRAPHICS_1 and select any of a custom graphics from the list and press Apply.

    • cgTutorial2.png

  9. Open Default Appearance Editor again. Click NODE_OPACITY and set opacity to 0.

    • cgTutorial3.png

  10. Double-click Node Custom Graphics 2 in the ViaMapper panel and create a new Discrete Mapping. Set the controlling attribute name to Degree.

  11. For degree value 1, set a Custom Graphics.
  12. Open Default Appearance Editor. Click NODE_CUSTOM_GRAPHICS_POSITION_2 and move the position from the center.

  13. Apply Force-Directed Layout. Now you can see that all leaf nodes have two Custom Graphics.

    • cgTutorial4.png

  14. Double-click Node Custom Graphics 3 in the VizMapper panel and create a new Continuous Mapping. Set controlling attribute name to Degree.

  15. Set a Custom Graphics for nodes with degree grater than 10.
    • cgTutorial5.png

  16. Open th eDefault Appearance Editor and modify NODE_CUSTOM_GRAPHICS_POSITION_3.

  17. Edit the default appearance to get a look that suits you. The network should look something like the image below:



    cgTutorial6.png

Advanced Topics

Editing Discrete Mappings

Several utility functions are available for Discrete Mappings. You can use those functions by right clicking anywhere on the Visual Mapping Browser (shown below.)

VizMapperPopupMenu.png

Automatic Value Generators

Edit Selected Values at Once

You can set multiple values at once. First, you need to select rows in which you want to change values then select Edit selected values at once.... A dialog pops up and you can enter the new value for the selected rows.

Visual Property Dependencies

The fourth tab in the Default Editor lists available dependencies that can be established between different visual properties. The two that currently exist are Lock Node Width/Height and Make Arrow Color Match Edge Color.

DefaultEditorPanelDependencies.png

Working with Continuous Mapping Editors

There are three kinds of Continuous Mapping Editors. Each of them are associated with a specific visual attributes:

Editor Type

Supported Data Type

Visual Attributes

Color Gradient Editor

Color

node/edge/border/label colors

Continuous-Continuous Editor

Numbers

size/width/opacity

Continuous-Discrete Editor

All others

font/shape/text

Range Setting Panel

RangeSetting26.png

Each editor has a common section named Range Setting.

  1. Handle Value Box - This box displays current value for selected slider handle. Also you can directly type value in this box to move the slider to an exact location.

  2. Min/Max Button - Set the overall range of this editor. First time you open the editor, the Min and Max values are set by the range of attribute you selected, i.e., minimum and maximum value of the attribute will be set to the range of this editor. You can change this range anytime you want by pressing this button.

  3. Add Handle Button - Add a new handle to the editor.

  4. Delete Handle Button - Delete selected handle from the slider widget.

Gradient Editor

GradientEditorSample26.png

The Gradient Editor is an editor for creating continuous mappings for colors. To change the color of each region, just double click the handles (small triangles on the top). A Color gradient will be created only when the editor has two or more handles (see the example below).

1 Slider (No Graient)

2 Sliders

OneSlider.png

TwoSliders.png

Continuous-Continuous Editor

C2CEditor26.png

The Continuous-Continuous Editor is for creating mappings between numerical attributes and numerical visual properties (size/opacity). To change the value assigned on Y-axis (the visual property shown in the example above is node size), drag the red squares or double click on the squares to directly type an exact value.

Continuous-Discrete Editor

C2DEditor26.png

The Continuous-Discrete Editor is used to create mappings from numerical attribute values to discrete visual properties, such as font, shape, or line style. To edit a value for a specific region, double click on the icon on the track.

Managing Visual Styles

All Cytoscape Visual Style settings are initially loaded from a a default file called vizmap.props that cannot be altered by users. When users make changes to the visual properties, a vizmap.props file is saved in the session file. This means that if you save your session, you will not lose your visual properties. No other vizmap.props files are saved during normal operation.

Saving Visual Styles

Visual styles are automatically saved with the session they were created in. Before Cytoscape exits, you will be prompted to make sure you save the session before quitting. It is also possible to save your visual styles in a file separate from the session file. To do this, navigate to the File → Export → Vizmap Property File menu option and save the properties as a file. This feature can be used to share visual styles with other users.

Importing Visual Styles

To import existing visual styles, navigate to the File → Import → Vizmap Property File menu option and select a vizmap.props file. Imported properties will supplement existing properties or override existing properties if the properties have the same name. You can also specify a visual properties file using the -V command line option (cytoscape.sh -V myVizmap.props). Visual properties loaded from the command line will override any default properties.

Default Visual Styles

It is possible to change the default visual properties for all sessions of Cytoscape. To do this, navigate to the Edit → Preferences → Properties... menu option, check the "Make Current Visual Styles Default" box in the Default Visual Styles section, and click the OK button. This will save the current visual styles as a vizmap.props file to your .cytoscape directory (found in your home directory). These visual styles will then be loaded each time Cytoscape is started.

Bypassing Visual Styles

Cytoscape has a feature that allows users to override visualizations created by the VizMapper for individual nodes and edges. This feature is available by right-clicking on a node or edge and then clicking on the Visual Mapping Bypass menu.

Each visual property of the node or edge is displayed. When a property is overridden, a checkmark appears next to the property and a [Reset <Property Name>] menu option appears directly below it. By clicking this Reset option, the bypass will be removed and the attribute will be displayed as defined by the VizMapper. At the bottom of the menu a Reset All option appears. When clicked, this will remove all bypasses for the specified node or edge. In the example above, you can see the selected node size, color, and shape have been overridden. This is apparent in the appearance of the node itself and by the check marks in the popup menu.

It is important to realize that the Visual Mapping Bypass only works for individual nodes and edges and not for all nodes or edges of a specific type. Using the bypass function is not particularly resource intensive, you can use it as much as you like. However, if you find yourself repeating the same bypasses, then you should consider using the VizMapper instead.

Bypass is accomplished using special attributes with names like node.fillColor and node.shape. These are normal Cytoscape attributes and can be seen and edited in the Data Panel. The value of the attribute is a string representation of a property. For example, color is represented by 3 integers representing the RGB (red, green, blue) value of the color. Different types of properties have different string representations. When in doubt, just use the right click menu to create valid attribute values.

Because bypass values are specified using normal attributes, these attributes will persist between sessions only as long as you save your session. If you don't save your session, you will lose whatever bypass values you set.

Cytoscape_User_Manual/Visual_Styles (last edited 2010-10-16 18:19:48 by cosiapat1)

MoinMoin Appliance - Powered by TurnKey Linux