This project has been replaced by Cytoscape.js, and is no longer active.

org.cytoscapeweb.Visualization ( containerId, [ options ] )

Initialise Cytoscape Web. It does not draw the network yet.

The draw method must be called when you want the network to be displayed.

containerId {String} : The id of the HTML element (containing your alternative content) you would like to have replaced by the Flash object.

[ options ] {Object} : Cytoscape Web parameters:

  • swfPath: The path of the compiled Cytoscape Web SWF file, but without the .swf extension. If you use the provided CytoscapeWeb.swf file and put it in the root path of the web application, this option does not need to be specified. But, for example, if you deploy the swf file at /plugin/flash, the swfPath value must be "/plugin/flash/CytoscapeWeb".
  • flashInstallerPath: The path to the compiled Flash video that should be displayed in case the browser does not have the Flash Player version required by Cytoscape Web. The default value is "playerProductInstall" and, if this option is not changed, the playerProductInstall.swf file must be deployed in the web site's root path. Otherwise, just specify the new path without the .swf extension.
  • flashAlternateContent: The text message that should be displayed if the browser does not have the Flash Player plugin. If none is provided, Cytoscape Web will show a default message and a link to the "Get Flash" page.
  • resourceBundleUrl: An optional resource bundle path. Usually a .properties file that redefines the default labels and messages used by Cytoscape Web. Example of a valid file with all the available keys: 
    global.wait = Please wait...
error.title = Error
pan.tooltip = Grab to pan
pan.up.tooltip = Pan up
pan.down.tooltip = Pan down
pan.left.tooltip = Pan left
pan.right.tooltip = Pan right
zoom.out.tooltip = Zoom out
zoom.in.tooltip = Zoom in
zoom.fit.tooltip = Fit to screen
zoom.slider.tooltip = {0}%
  • idToken: A string used to create the embedded Flash video id (usually an HTML embed or object tag). The default token is "cytoscapeWeb" and the final id will be the token followed by a number, so if the application has two instances of the Visualization in the same page, their id's will be "cytoscapeWeb1" and "cytoscapeWeb2". This token does not usually need to be changed.
  • mouseDownToDragDelay: If the user clicks (mouse-down) the background and hold if for a while, Cytoscape Web temporarily changes to grab-to-pan mode, so the user can drag the whole network. If the user do the same over a node, the grab-to-pan mode can be activated as well, but dragging the node will drag the node's disconnected component only, not necessarily the whole network--if there are other disconnected parts, they will not be dragged. This parameter lets you set the time (in milliseconds) Cytoscape Web should wait before changing modes. The default value is 400. If this parameter is set to -1, Cytoscape Web will never activate the grab-to-pan mode automatically, but users can still use the grab-to-pan option from the pan-zoom control.

{org.cytoscapeweb.Visualization} The Visualization instance.

<html>
<head> </head>
<body>

<h1>Sample</h1>
<div id="cytoWebContent" style="width: 600px;height: 400px;"></div>

<script type="text/javascript">
    var options = { swfPath: "path/to/swf/CytoscapeWeb",
                    flashInstallerPath: "path/to/swf/playerProductInstall",
                    flashAlternateContent: "Le Flash Player est nécessaire." };
                    
    var vis = new org.cytoscapeweb.Visualization("cytoWebContent", options);
    
    vis.draw({ network: '<graphml>...</graphml>' });
</script>

</body>
<html>

addContextMenuItem ( lbl, [ gr ], fn )

Adds a custom menu item to the right-click context menu.

This method can only be used after a network has been drawn, so it is better to use it after the ready callback function is called (see ready).

If an item with the same label has already been set to the same group, it will not add another callback function to that menu item. In that case, the previous function will be replaced by the new one and only one menu item will be displayed.

It is possible to add more than one menu item with the same label, but only if they are added to different groups.

Important: Since the context menu is rendered by Flash, be aware of these restrictions.

lbl {String} : The context menu item label to be displayed.

[ gr ] {Group} : The group of network elements the menu item will be assigned to. If "nodes", the menu item will be visible only on right-clicks when the cursor is over a node. If "edges", only when its over an edge. If "none" or no group is provided, the menu item will be available after a right-click over any network element, including the canvas background.

fn {Function} : The callback function that is invoked after the user selects the injected menu item. That function always receives an event object as argument. The event type is always "contextmenu". If the context menu was added to the nodes or edges group, you might want to get the right-clicked node or edge object by using the event's target property.

{org.cytoscapeweb.Visualization} The Visualization instance.

// We will use the context menu to select the first neighbors of the
// right-clicked node.

// 1. Assuming that you have created a visualization object:
var vis = new org.cytoscapeweb.Visualization("container-id");

// 2. Add a context menu item any time after the network is ready:
vis.ready(function () {
    vis.addContextMenuItem("Select first neighbors", "nodes", 
        function (evt) {
            // Get the right-clicked node:
            var rootNode = evt.target;
        
            // Get the first neighbors of that node:
            var fNeighbors = vis.firstNeighbors([rootNode]);
            var neighborNodes = fNeighbors.neighbors;
        
            // Select the root node and its neighbors:
            vis.select([rootNode]).select(neighborNodes);
        }
    );
});

addDataField ( [ gr ], dataField )

Add a custom attribute definition to the current node or edge data schema.

If an attribute with the same name is already defined for the same group, the attribute will not be added again or replace the previous definitions.

[ gr ] {Group} : The group of network elements. If no group is passed, Cytoscape Web will try to add the new field to both nodes and edges data schema.

dataField {DataField} : An object that contains the attribute definitions.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1: Add the same new field to nodes and edges data:
var field = { name: "url", type: "string", defValue: "http://cytoscapeweb.cytoscape.org/" };
vis.addDataField(field);

// 2: Add new field to nodes only:
var field = { name: "score", type: "number", defValue: 0.15 };
vis.addDataField("nodes", field);

addEdge ( data, [ updateVisualMappers ] )

Create a new edge linking two nodes and add it to the network view.

If the edge id is not specified, Cytoscape Web creates a new one automatically.

However the source and target data fields are mandatory, and Cytoscape Web throws an error if any of them is missing.

If the data contains attributes that have not been previously defined in the DataSchema, Cytoscape Web will throw an error. To prevent that, just add the new fields to the schema first, by calling addDataField.

You might also want to take a look at addElements, which is much faster when adding more than one element at once.

data {Object} : The object that contains the edge attributes.

[ updateVisualMappers ] {Boolean} : It tells Cytoscape Web to update and reapply the visual mappers to the network view after adding the edge.

{Edge} The new created edge object.

var data = { id: "e10",
             source: "n1",
             target: "n4",
             directed: false,
             label: "Co-expression",
             weight: 0.88 };

var edge = vis.addEdge(data, true);

addElements ( [ items ], [ updateVisualMappers ] )

Add new nodes and/or edges to the network.

The rules described in addNode and addEdge are still valid here.

You can add nodes and edges together and, when doing so, the order of the elements in the array do not matter, because Cytoscape Web will first add all the nodes, and then the edges.

The new element must have a group field set to either "nodes" or "edges", because Node and Edge objects are untype objects and Cytoscape Web has no other safe way of making the distinction between the two types.

If the new elements contain visual properties (e.g. color, opacity), they are simply ignored and Cytoscape Web applies new visual property values according to the current VisualStyle and VisualStyleBypass. The node positions (x, y), if specified, are respected, though.

[ items ] {Array} : The nodes and edges to be added to the network. The array must contain Node and/or Edge objects.

[ updateVisualMappers ] {Boolean} : It tells Cytoscape Web to reapply the visual mappers to the network view after removing the elements.

{Array} The new created elements (Node and Edge objects).

// 1. Add two nodes with no data (IDs will be created automatically):
var nodesArray = [ { group: "nodes", x: 10, y: 35 },
                   { group: "nodes", x: 20, y: 70 } ];
var nodes = vis.addElements(nodesArray, true);

// 2. Add edges and nodes altogether:
var array = [ { group: "nodes", x: 10, y: 35, data: { id: "n01" } },
              { group: "nodes", x: 20, y: 70, data: { id: "n02" } },
              { group: "edges", data: { source: "n01", target: "n02" } } ];
var elements = vis.addElements(array, true);

addListener ( evt, [ gr ], fn )

Appends an event listener to the network.

Listeners can be added or removed at any time, even before the graph is rendered, which means that you do not need to wait for the ready function to be called.

evt {EventType} : The event type.

[ gr ] {Group} : The group of network elements to assign the listener to (optional for some events).

fn {Function} : The callback function the event invokes.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1. Create the visualization instance:
var vis = new org.cytoscapeweb.Visualization("container-id");

// 2. Add listeners at any time:
vis.addListener("zoom", function(evt) {
    var zoom = evt.value;
    alert("New zoom value is " + (zoom * 100) + "%");
})
.addListener("click", "edges", function(evt) {
    var edge = evt.target;
    alert("Edge " + edge.data.id + " was clicked");
})
.addListener("select", "nodes", function(evt) {
    var nodes = evt.target;
    alert(nodes.length + " node(s) selected");
});

// 3. Draw the network:
vis.draw({ network: '<graphml>...</graphml>' });

addNode ( x, y, [ data ], [ updateVisualMappers ] )

Create a new node and add it to the network view.

You can also add a node as a child of another node, by setting the parent node ID to the "parent" data attribute.

If the node id is not specified, Cytoscape Web creates a new one automatically.

If the data contains attributes that have not been previously defined in the DataSchema, Cytoscape Web will throw an error. To prevent that, you simply add the new fields to the schema first, by calling addDataField.

Keep in mind that addElements is much faster if you have to add more than one element at once.

x {Object} : The horizontal coordinate of the node.

y {Object} : The vertical coordinate of the node.

[ data ] {Object} : The object that contains the node attributes.

[ updateVisualMappers ] {Boolean} : It tells Cytoscape Web to update and reapply the visual mappers to the network view after adding the node. The default value is false.

{Node} The new created node object.

// 1. Add a new node to the network (here we assume that the data fields for
// "label" and "weight" already exists in the node schema):
var data = { id: "n4",
             label: "MYO2 (Yeast)",
             weight: 0.54 };
var node1 = vis.addNode(240, 360, data, true);

// 2. Add a new node as a child of another (compound) node:
var node2 = vis.addNode(node1.x, node1.y, { parent: "n4" }, true);

childNodes ( parent )

Get all nodes that belong to a compound node.

parent {Object} : The parent node object or the parent ID (String).

{Array} List of Node objects.

customCursorsEnabled ( [ enabled ] )

If the boolean argument is passed in, it enables or disables custom mouse cursors, such as the hand icon used when panning the network.

If no argument is passed in, it returns a boolean value indicating whether or not custom cursors are enabled.

[ enabled ] {Boolean} : If true, custom (Flash) cursors can be used in some actions. If false, Cytoscape Web will never replace the operating system's cursors.

dataSchema (  )

Get the network data schema, which contains all the nodes and edges data fields.

{DataSchema} The data schema object.

var schema = vis.dataSchema();
var nodeFields = schema.nodes;
var edgeFields = schema.edges;

deselect ( [ gr ], [ items ] )

Deselect the indicated nodes and edges, if they are selected.

The same method can also be used to deselect all nodes/edges. To do that, just omit the items argument and specify the group of elements to be deselected.

If you send repeated or invalid elements, they will be ignored.

[ gr ] {Group} : The group of network elements. If not specified, it will try to deselect elements from both node and edge groups.

[ items ] {Array} : The items to be deselected. The array can contain node/edge objects or only their id values. Notice however that, if you specify only the id and do not pass the group argument, and if an edge and a node have the same id value, both will be deselected.
If this argument is null, undefined or omitted, it will deselect all selected items that belong to the indicated group.
If you send an empty array, no action will be performed.

{org.cytoscapeweb.Visualization} The Visualization instance.

// a) Deselect edges by id:
var ids = [4,6,21];
vis.deselect("edges", ids);

// b) Deselect one edge only:
// Notice that the group parameter ("edges") is optional here,
// because it's sending an edge object and not only its id.
var e = vis.selected("edges")[0]; // assuming there is at least one selected edge!
vis.deselect([e]);

// c) Deselect nodes and edges at the same time:
var n = vis.selected("nodes")[0];
var e = vis.selected("edges")[0];
vis.deselect([n,e]);

// d) Deselect all nodes:
vis.deselect("nodes");

// e) Deselect all edges:
vis.deselect("edges");

// f) Deselect all nodes and all edges:
vis.deselect();

draw ( options )

Start Cytoscape Web by drawing the network. At least the network option must be specified.

Just remember that you probably want to register a callback function with ready before calling draw().

options {Object} :

  • network: The model that describes the network. Only this option is mandatory. It can be one of the following formats:
    • NetworkModel: A simple JavaScript object that defines the raw data from which to build a network.
    • GraphML: An XML format for graphs.
    • XGMML: This XML format allows you to define visual properties (e.g. colors and shapes) and nodes positioning, if you want to, although using the visualStyle and layout options is usually better.
    • SIF: A simpler text format that can be very useful if you do not need to set custom nodes/edges attributes.
  • visualStyle: an optional VisualStyle object to be applied on this network.
  • layout: an optional Layout object, or just the layout name. The default is "ForceDirected", unless the network data is an XGMML, whose node elements contain graphics tags with defined x and y attributes. In that case, the "Preset" layout is applied by default.
  • nodeLabelsVisible: Boolean that defines whether or not the node labels will be visible. The default value is true. You can call nodeLabelsVisible later (after the network is ready) to change it.
  • edgeLabelsVisible: Boolean that defines whether or not the edge labels will be visible. The default value is false. You can use edgeLabelsVisible later to change it.
  • nodeTooltipsEnabled: Boolean value that enables or disables the node tooltips. The default value is true. You can call nodeTooltipsEnabled later to change it.
  • edgeTooltipsEnabled: Boolean that enables or disables the edge tooltips. The default value is true. You can use edgeTooltipsEnabled later to change it.
  • edgesMerged: Boolean that defines whether or not the network will be initially rendered with merged edges. The default value is false. You can call edgesMerged after the network is ready to change it.
  • panZoomControlVisible: Boolean value that sets whether or not the built-in control will be visible. The default value is true. The visibility of the control can be changed later with panZoomControlVisible.
  • panZoomControlPosition: String value that sets the initial position of the built-in control. The allowed values are:
    • topLeft
    • topCenter
    • topRight
    • middleLeft
    • middleCenter
    • middleRight
    • bottomLeft
    • bottomCenter
    • bottomRight
    The default value is "bottomRight".
  • preloadImages: Boolean that defines whether or not to load all images before rendering the network. If true, all images from a VisualStyle or VisualStyleBypass will be loaded before the network is drawn or before a visual style (or bypass) is applied. The default value is true.

{org.cytoscapeweb.Visualization} The Visualization instance.

var vis = new org.cytoscapeweb.Visualization("container-id");
vis.draw({ network: '<graphml>...</graphml>',
           edgeLabelsVisible: false,
           layout: 'Circle',
           panZoomControlPosition: 'bottomLeft',
           visualStyle: {
               global: {
                   backgroundColor: "#000033",
                   nodeSelectionColor: "#ffce81"
               },
               nodes: {
                   shape: "diamond"
               },
               edges: {
                   width: 2
               }
           }
        });
var vis = new org.cytoscapeweb.Visualization("container-id");
vis.ready(function () {
    // Start interaction with the network here...
});
vis.draw({ network: '<graphml>...</graphml>' });

edge ( id )

Get one edge, including any merged edge, by its unique ID.

id {String} : The edge id.

{Edge} The edge object or null, if there is no edge with the specified id.

var edge = vis.edge("e10");

edgeLabelsVisible ( [ visible ] )

If the boolean argument is passed, it shows or hides all the edge labels and returns the Visualization object.

If not, it returns a boolean value indicating whether or not the edge labels are visible.

[ visible ] {Boolean} : true to show the labels or false to hide them.

edges (  )

Get all the regular edges from the network. Merged edges are not included.

{Array} List of edges.

edgesMerged ( [ merged ] )

If the boolean argument is passed, it merges or unmerge all the edges and returns the Visualization object.

If not, it returns a boolean value indicating whether or not the edges are merged.

[ merged ] {Boolean} : true to merge the edges or false to unmerge them.

edgeTooltipsEnabled ( [ enabled ] )

If the boolean argument is passed, it enables or disables the edge tooltips.

If not, it returns a boolean value indicating whether or not the edge tooltips are enabled.

[ enabled ] {Boolean} : true to enable the tooltips or false to disable them.

embedSWF (  )

Redefine this function if you want to use another method to detect the Flash Player version and embed the SWF file (e.g. SWFObject).

By default, Adobe's Flash Player Detection Kit is used.

void

exportNetwork ( format, url, [ options ] )

Export the network to a URL. It's useful when you want to download the network as an image or xml, for example.

This method requires a server-side part (e.g. Java, PHP, etc.) to receive the raw data from Cytoscape Web. That server-side code should send the data back to the browser.

format {String} : One of: "png", "svg", "pdf", "xgmml", "graphml", "sif".

url {String} : The url that will receive the exported image (bytes) or xml (text).

[ options ] {Object} : Additional options:

  • width: The desired width of the image in pixels (only for 'pdf' format).
  • height: The desired height of the image in pixels (only for 'pdf' format).
  • nodeAttr: Optional node attribute name to be used as the exported SIF node (only for 'sif' format).
  • interactionAttr: Optional edge attribute name to be used as the exported SIF interaction (only for 'sif' format).
  • window: The browser window or HTML frame in which to display the exported image or xml. You can enter the name of a specific window or use one of the following values:
    • _self: the current frame in the current window.
    • _blank: a new window.
    • _parent: the parent of the current frame.
    • _top: the top-level frame in the current window.
    The default is _self.

{org.cytoscapeweb.Visualization} The Visualization instance.

// The JavaScript code
vis.exportNetwork('xgmml', 'export.php?type=xml');
<?php
    # ##### The server-side code in PHP ####

    # Type sent as part of the URL:
    $type = $_GET['type'];
    # Get the raw POST data:
    $data = file_get_contents('php://input');

    # Set the content type accordingly:
    if ($type == 'png') {
        header('Content-type: image/png');
    } elseif ($type == 'pdf') {
        header('Content-type: application/pdf');
    } elseif ($type == 'svg') {
       header('Content-type: image/svg+xml');
    } elseif ($type == 'xml') {
        header('Content-type: text/xml');
    } elseif ($type == 'txt') {
        header('Content-type: text/plain');
    }

    # To force the browser to download the file:
    header('Content-disposition: attachment; filename="network.' . $type . '"');
    # Send the data to the browser:
    print $data;
?>

filter ( [ gr ], filter, [ updateVisualMappers ] )

Filter nodes or edges. The filtered out elements will be hidden.

[ gr ] {Group} : The group of network elements to filter. If null, filter both nodes and edges.

filter {Object} : A filter function or an array of elements to be filtered. If a function is passed, it will receive a node or edge as argument and must return a boolean value indicating the visibility of that element. So, if it returns false, that node or edge will be hidden. If the argument is an array, it must contain the IDs or the Node/Edge objects you want to make or keep visible.

[ updateVisualMappers ] {Boolean} : It tells Cytoscape Web to update and reapply the visual mappers to the network view after the filtering action is done. Remember that continuous mappers ignore filtered out elements when interpolating the results. The default value is false.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1. Hide all edges that have a weight that is lower than 0.4:
vis.filter("edges", function(edge) {
    return edge.data.weight >= 0.4;
}, true);

// 2. Hide all nodes, except two of them, by id:
vis.filter("nodes", ['n01', 'n02']);

// 3. Hide all nodes (and edges, of course):
vis.filter("nodes", []);

// 4. This also hides everything:
vis.filter();

firstNeighbors ( nodes, [ ignoreFilteredOut ] )

Return the first neighbors of one or more nodes.

nodes {Array} : Array of node objects or node IDs.

[ ignoreFilteredOut ] {Boolean} : If true, the algorithm will ignore any filtered out node and edge. The default value is false.

An object that contains the following properties:

  • rootNodes {Array}: the node objects that were passed as the function parameter.
  • neighbors {Array}: the node objects that are neighbors of the root ones.
  • edges {Array}: the edge objects that connects the root and the neighbor nodes.
  • mergedEdges {Array}: the merged edge objects that connect the returned nodes.
.

graphml (  )

Return the network data as GraphML.

{String} The XML text.

hasListener ( evt, [ gr ] )

Tells whether or not there are listeners to an event type.

evt {EventType} : The event type.

[ gr ] {Group} : The group of network elements the listener was assigned to (optional for some events).

{Boolean} True if there is at least one listener to the event, false otherwise.

layout ( [ layout ] )

If the layout argument is passed, it applies the layout to the network. Otherwise it just returns the the current layout object.

In order to set a layout, you can send a layout object or just the layout name, if you want to use the default options.

See Layout for the available options.

[ layout ] {Object} : The Layout object or the layout name.

// 1. Initialise Cytoscape Web with a Circle layout (default layout options):
var vis = new org.cytoscapeweb.Visualization("container-id");
vis.draw({ network: '<graphml>...</graphml>', layout: 'Circle' });

// 2. Get the current layout:
var layout = vis.layout(); // returns: { name: 'Circle', options: { angleWidth: 360 } };

// 3. Apply a new layout, using default options:
vis.layout('ForceDirected');

// 4. Apply a new layout with custom options:
var options = { 
     drag:          0.2,
     gravitation:   -200,
     minDistance:   1,
     maxDistance:   400,
     mass:          2,
     tension:       0.2,
     weightAttr:    "weight",
     restLength:    100,
     iterations:    200,
     maxTime:       10000,
     autoStabilize: false
};
vis.layout({ name: 'ForceDirected', options: options });

mergedEdges (  )

Get all merged edges from the network.

{Array} List of merged edges.

networkModel (  )

Return the network model as an object.

{NetworkModel} The network model as a JavaScript object.

node ( id )

Get one node by its unique ID.

id {String} : The node id.

{Node} The node object or null, if there is no node with the specified id.

var node = vis.node("n4");

nodeLabelsVisible ( [ visible ] )

If the boolean argument is passed, it shows or hides all the node labels and returns the Visualization object.

If not, it returns a boolean value indicating whether or not the node labels are visible.

[ visible ] {Boolean} : true to show the labels or false to hide them.

nodes ( [ topLevelOnly ] )

Get all nodes from the network.

If the topLevelOnly parameter is true, child nodes are not returned in the list.

In order to retrieve the children of a compound node, simply pass the parent node object or its id.

[ topLevelOnly ] {Boolean} : It is optional and the default value is false, which means that all existing nodes are returned as a flat list, no matter whether or not they are regular, child or parent ones. If false, nodes that are children of other nodes are not included in the list.

{Array} List of Node objects.

nodeTooltipsEnabled ( [ enabled ] )

If the boolean argument is passed, it enables or disables the node tooltips.

If not, it returns a boolean value indicating whether or not the node tooltips are enabled.

[ enabled ] {Boolean} : true to enable the tooltips or false to disable them.

panBy ( amountX, amountY )

Pan the "camera" by the specified amount, in pixels.

amountX {Number} : If negative, pan left (the network moves to the right side).

amountY {Number} : If negative, pan up (the network moves down).

{org.cytoscapeweb.Visualization} The Visualization instance.

panEnabled ( [ enabled ] )

If the boolean argument is passed, it enables or disables the "grab to pan" mode. It's like clicking the "grab to pan" button in the pan-zoom control.

If no argument is passed, it returns a boolean value indicating whether or not the pan mode is enabled.

[ enabled ] {Boolean} : If true, clicking and dragging the background will pan the network. If false, the pan mode is turned off - clicking and dragging the background will start a drag-selection action.

panToCenter (  )

Center the network in the canvas area.

{org.cytoscapeweb.Visualization} The Visualization instance.

panZoomControlVisible ( [ visible ] )

If the boolean argument is passed, it shows or hides the built-in pan-zoom control.

If not, it just returns a boolean value indicating whether or not the control is visible.

[ visible ] {Boolean} : true to show it and false to hide it.

parentNodes (  )

Get only the compound nodes from the network, if there is any.

{Array} List of Node objects that contain one or more child nodes.

pdf ( [ options ] )

Return a PDF with the network vector image.

[ options ] {Object} : Additional options:

  • width: The desired width of the image in pixels.
  • height: The desired height of the image in pixels.

{String} The PDF binary data encoded to a Base64 string.

png (  )

Return the network as a PNG image.

{String} The PNG binary data encoded to a Base64 string.

ready ( fn )

Register a function to be called after a draw method is executed and the visualization is ready to receive requests, such as getting or selecting nodes, zooming, etc.

If the application wants to interact with the rendered network, this function must be used before calling the draw method.

fn {Function} : The callback function that will be invoked after the network has been drawn and the visualization is ready.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1. Create the visualization instance:
var vis = new org.cytoscapeweb.Visualization("container-id");

// 2. Register a callback function for the ready event:
vis.ready(function () {
    // Write code to interact with Cytoscape Web, e.g:
    var nodes = vis.nodes();
    // and so on...
});

// 3. And then call draw:
vis.draw({ network: '<graphml>...</graphml>' });

removeAllContextMenuItems (  )

Removes all preset menu items from the right-click context menu.

{org.cytoscapeweb.Visualization} The Visualization instance.

removeContextMenuItem ( lbl, [ gr ] )

Removes a menu item from the right-click context menu.

lbl {String} : The menu item label.

[ gr ] {Group} : The related group. If null, and there is a menu item with the same label associated with a "nodes" or "edges" group, that item will not be removed. In that case, you need to call this function again with the other groups.

For example, removeContextMenuItem("Select") does not remove the menu item added with addContextMenuItem("Select", "edge"), but only the the one added with addContextMenuItem("Select").

{org.cytoscapeweb.Visualization} The Visualization instance.

removeDataField ( [ gr ], name )

Remove a custom attribute definition from the data schema.

Remember that only custom metadata can be removed. Any attempt to remove the following data fields will be ignored:

  • id (nodes and edges)
  • source (edges)
  • target (edges)
  • directed (edges)

[ gr ] {Group} : The group of network elements. If no group is passed, Cytoscape Web will try to remove the field from both nodes and edges data schema.

name {String} : The name of the custom data field that will be removed.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1: Remove a data field from nodes and edges:
vis.removeDataField("url");

// 2: Remove a data field from edges only:
vis.removeDataField("edges", "url");

removeEdge ( edge, [ updateVisualMappers ] )

Permanently delete the specified edge from the network.

If the specified edge is a merged one, all of its "regular" edges are deleted as well.

edge {Object} : The edge to be removed from the network. It can be an Edge object or just its id (String).

[ updateVisualMappers ] {Boolean} : It tells Cytoscape Web to reapply the visual mappers to the network view after removing the element.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1. Pass the whole Edge object:
var edge = vis.edges()[0];
vis.removeEdge(edge);

// 2. Or just pass the edge id:
vis.removeEdge("e101");

removeElements ( [ gr ], [ items ], [ updateVisualMappers ] )

Permanently delete nodes and/or edges from the network.

If a node is deleted, all of its connected edges will be removed as well.

[ gr ] {Group} : The group of network elements.

[ items ] {Array} : The items to be removed from the network. The array can contain node/edge objects or only their id values. Remember that, if you pass only the id and do not pass the group argument, if an edge and a node have the same id value, both will be removed.

[ updateVisualMappers ] {Boolean} : It tells Cytoscape Web to reapply the visual mappers to the network view after removing the elements.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1. Remove edges by ID:
vis.removeElements("edges", ["1", "2", "5"]);

// 2. Remove edges and nodes altogether, by passing the objects to be deleted:
var nodes = vis.nodes();
var edges = vis.edges();
vis.removeElements([nodes[0], nodes[1], edges[0]], true);

// 3. Remove all edges:
vis.removeElements("edges");

// 4. Remove everything (nodes and edges):
vis.removeElements();

removeFilter ( [ gr ], [ updateVisualMappers ] )

Remove a nodes or edges filter.

[ gr ] {Group} : The group of network elements to remove the filter from. If null, remove any existing filters from both nodes and edges.

[ updateVisualMappers ] {Boolean} : It tells Cytoscape Web to update and reapply the visual mappers to the network view after the filtering action is done. Remember that continuous mappers ignore filtered out elements when interpolating the results. The default value is false.

{org.cytoscapeweb.Visualization} The Visualization instance.

removeListener ( evt, [ gr ], [ fn ] )

Removes an event listener.

evt {EventType} : The event type.

[ gr ] {Group} : The group of network elements to assign the listener to (optional for some events).

[ fn ] {Function} : The function the event invokes. If undefined, all registered functions for the specified event are removed.

{org.cytoscapeweb.Visualization} The Visualization instance.

removeNode ( node, [ updateVisualMappers ] )

Permanently delete the specified node and its associated edges from the network.

If a node is deleted, all of its connected edges will be removed as well.

node {Object} : The node to be removed from the network. It can be a Node object or just its id (String).

[ updateVisualMappers ] {Boolean} : It tells Cytoscape Web to reapply the visual mappers to the network view after removing the element.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1. Pass the whole Node object:
var node = vis.nodes()[0];
vis.removeNode(node);

// 2. Or just specify the node id:
vis.removeNode("n3");

select ( [ gr ], [ items ] )

Select the indicated nodes and edges.

The same method can also be used to select all nodes/edges. To do that, just omit the items argument and specify the group of elements to be selected.

If you send repeated or invalid elements, they will be ignored.

[ gr ] {Group} : The group of network elements.

[ items ] {Array} : The items to be selected. The array can contain node/edge objects or only their id values. Notice however that, if you specify only the id and do not pass the group argument, if an edge and a node have the same id value, both will be selected.

{org.cytoscapeweb.Visualization} The Visualization instance.

// a) Select nodes by id:
var ids = [1,3,5,10];
vis.select("nodes", ids);

// b) Select one node:
// Notice that the group parameter ("nodes") is optional here,
// because it's sending a node object and not only its id.
var n = vis.nodes()[0];
vis.select([n]);

// c) Select nodes and edges at the same time:
var n = vis.nodes()[0];
var e = vis.edges()[0];
vis.select([n,e]);

// d) Select all nodes:
vis.select("nodes");

// e) Select all edges:
vis.select("edges");

// f) Select all nodes and all edges:
vis.select();

selected ( [ gr ] )

Get all selected nodes or edges from the network.

[ gr ] {Group} : The group of network elements.

{Array} List of node or edge objects. If the group is not passed or is null, the returned array may contain both nodes and edges.

sif ( [ options ] )

Return the network data as Simple Interaction Format (SIF).

Cytoscape Web uses tab characters to delimit the fields, because the node and interaction names may contain spaces.

By default, the node name in the SIF text is taken from the node's data.id attribute. You can choose any other node attribute to be the node name by passing the nodeAttr option. Of course the custom node field should have unique values.

Cytoscape Web tries to get the interaction name from the edge's data.interaction attribute. You can choose any other edge attribute to be the interaction name by passing the interactionAttr option. If the edge data does not have the defined interaction field, Cytoscape Web just uses the edge id.

[ options ] {Object} : Non-mandatory settings:

  • nodeAttr: Optional node attribute name to be used as node name.
  • interactionAttr: Optional edge attribute name to be used as interaction name.

{String} The SIF text.

var xml = '<graphml>' +
              // Create a custom node "label" attribute:
              '<key id="label" for="node" attr.name="label" attr.type="string"/>' +
              // Create a custom  edge "type" attribute:
              '<key id="type" for="edge" attr.name="type" attr.type="string"/>' +
              '<graph>' +
                  '<node id="1">' +
                      '<data key="label">Node 1</data>' +
                  '</node>' +
                  '<node id="2">' +
                      '<data key="label">Node 2</data>' +
                  '</node>' +
                  '<edge source="1" target="2">' +
                      '<data key="type">co-expression</data>' +
                  '</edge>' +
                  '<edge source="2" target="1">' +
                      '<data key="type">co-localization</data>' +
                  '</edge>' +
              '</graph>' +
          '</graphml>';
          
var vis = new org.cytoscapeweb.Visualization("container_id");

vis.ready(function() {
    // Export to SIF, using the "label" as node ID and edge "type" as edge interaction:
    var text = vis.sif({ nodeAttr: 'label', interactionAttr: 'type'});
    
    // text ==  'Node 1\tco-expression\tNode 2\n' +
    //          'Node 2\tco-localization\Node 1\n'
});

vis.draw({ network: xml });

svg ( [ options ] )

Return an SVG image.

[ options ] {Object} : Additional options:

  • width: The desired width of the image in pixels.
  • height: The desired height of the image in pixels.

{String} The SVG image.

swf (  )

Get Cytoscape Web's Flash object.

{Object} The appropriate reference to the Flash object.

updateData ( [ gr ], [ items ], [ data ] )

This method updates nodes and edges data attributes. You can use it to change the value of any existing data attribute, except:

  • id (nodes and edges)
  • source (edges)
  • target (edges)

You can only update data attributes. Visual properties such as color and width cannot be updated with this method. In order to change visual properties, use visualStyle or visualStyleBypass.

If you try to change an attribute that has not been previously defined, Cytoscape Web will throw an Error. In this case, you have to add the attribute definition first, by calling addDataField.

Another important thing to remember is that you cannot update merged edges data, since they are derived attributes.

Finally, all the continuous and custom mappers - defined by the current visual style - will be automatically recomputed after updating the data.

[ gr ] {Group} : The group of network elements.

[ items ] {Array} : The items to be updated. The array can contain node/edge objects or only their id values. Notice however that, if you specify only the id and do not pass the group argument, if an edge and a node have the same id value, both will be updated.

[ data ] {Object} : The data object that contains the attributes with the new values to be applied to all the elements of the specified group or to the passed items only.

{org.cytoscapeweb.Visualization} The Visualization instance.

// 1: Update only one node or edge:
var n = vis.nodes()[0];
n.data.label = "New Label...";
n.data.weight *= 2;
vis.updateData([n]);

// 2: Update more than one object at once:
var nodes = vis.nodes();
var n1 = nodes[0];
var n2 = nodes[1];
n1.data.label = "New Label for N1";
n2.data.label = "New Label for N2";

var e = vis.edges[0];
e.data.weight = 0.8;

vis.updateData([n1, n2, e]);

// 3: Update more than one object from the same group at once,
//    setting the same values to all of them:
var edge_ids = ["1","3","7"];
var data = { weight: 0.5, interaction: "pp" };
vis.updateData("edges", edge_ids, data);

// 4: Update more than one node and edge at once,
//    setting the same values to all of them:
var ids = ["n1","n2","e7","e10"];
var data = { weight: 0 };
vis.updateData(ids, data);

// 5: Update all nodes and edges with the same attribute values:
var data = { weight: 0 };
vis.updateData(data);

visualStyle ( [ style ] )

If the style argument is passed, it applies that visual style to the network. Otherwise it just returns the current visual style object.

[ style ] {VisualStyle} : An object that contains the desired visual properties and attribute mappings.

var style = {
        global: {
            backgroundColor: "#000000"
        },
        nodes: {
            color: "#ffffff",
            size: 40
        }
};

vis.visualStyle(style);

visualStyleBypass ( bypass )

If the bypass argument is passed, it sets a visual style bypass on top of the regular styles. Otherwise it just returns the current bypass object.

It allows you to override the visual styles (including the ones set by mappers) for individual nodes and edges, which is very useful when the default visual style mechanism is not enough to create the desired effect.

bypass {VisualStyleBypass} : The visual properties for nodes and edges. Must be a map that has nodes/edges ids as keys and the desired visual properties as values. The visual properties are the same ones used by the VisualStyle objects, except that global properties cannot be bypassed and are just ignored. Another difference is that you cannot set visual mappers, but only static values.

// Change the labels of selected nodes and edges:
var selected = vis.selected();

var bypass = { nodes: { }, edges: { } };
var props = { 
        labelFontSize: 16,
        labelFontColor: "#ff0000",
        labelFontWeight: "bold"
};

for (var i=0; i < selected.length; i++) {
    var obj = selected[i];
    
    // obj.group is either "nodes" or "edges"...
    bypass[obj.group][obj.data.id] = props;
}

vis.visualStyleBypass(bypass);
// To remove a bypass, just set null or an empty object:
vis.visualStyleBypass(null);

xgmml (  )

Return the network data as XGMML.

{String} The XML text.

zoom ( [ scale ] )

If the scale argument is passed, it changes the zoom level of the network. Otherwise it gets the current zoom value.

[ scale ] {Number} : Value between 0 and 1.

zoomToFit (  )

Change the scale of the network until it fits the screen.

If the network scale is or reaches 1 (100%) and it's not cropped, it is not zoomed in to more than that. It also centers the network, even if the scale was not changed.

It does not return the result scale. If you want to get the applied zoom level, add an event listener before calling zoomToFit.

{org.cytoscapeweb.Visualization} The Visualization instance.

var scale;
vis.addListener("zoom", function(evt) {
    scale = evt.value;
});
vis.zoomToFit();