Tutorial
Cobweb can read and write files in XGMML- and GraphML-format. Both options are XML-based file formats and are explained in more detail below (click on the format you are interested in).
Additionally, Cobweb can read SIF (Simple Interactions Format) files.
The detailed description of the formats deals with the content of the example files apoptosis.xgmml respectively apoptosis.graphml (which can be downloaded here).
The scaffold of the file is the xml-definition and the root-element graph.
<?xml version="1.0" encoding="UTF-8" ?> <graph xmlns="http://www.cs.rpi.edu/XGMML" schemaLocation="http://www.cs.rpi.edu/~puninj/XGMML/xgmml.xsd"> </graph>
The graph element contains information about the namespace and the schema that is used for the file.
Beside this neccessary information, a label for the network can be given and the information, whether edges in the network are directed or not. If no information about direction is given, an undirected network is assumed. In the example case we want to create a directed network, so the graph element looks like:
<graph label="Apoptosis" directed="1" xmlns="http://www.cs.rpi.edu/XGMML" schemaLocation="http://www.cs.rpi.edu/~puninj/XGMML/xgmml.xsd">
Inside the graph element nodes, edges and some parameters can be defined.
Defining nodes:
Each node must have an id that is unique in the network. Thus the minimal version of a node declaration is:
<node id="Bax"/>
A node may have some additional information, possibilities are:
- a label
- a description
- an icon type and colour
- a picture which is used to represent the node in the network
- a position
A node declaration containig also of these looks like:
<node id="Bax" label="Bax"> <att name="description" value="Bax is a protein of the Bcl-2 gene family"/> <graphics type="octagon" fill="#CC51FF"/> <att name="picture" value="apopbax.png"/> <att name="position" value="588;592"/> </node>
The type value of the graphics attribute determines the symbol that represents the node in the network while the fill value is the symbol's fill color in hexadecimal format (HTML notation). Possible type values are:
- circle
- triangle
- box
- rectangle
- rhombus
- hexagon
- octagon
- hor_ellipsis
- ver_ellipsis
The picture attribute contains the filename of a picture that is to be used to represent the node in the network. Details about getting pictures into the applet are given below.
Position contains the x-and y-coordinate seperated by a semicolon as it's value. If a position is given, the node is fixed when the network is created.
Defining edges:
An edge is defined by the two nodes it connects. Hence the minimal way to declare an egde is:
<edge source="Bax" target="Perm"/>
As for nodes, edges can contain additional information, in this case:
- a label
- a shape
- a weight
- a color
Again, an edge containing all information would look like:
<edge source="Bax" target="Perm" label="Pore formation" weight="1.0"> <att name="edge.shape" value="dash"/> <att name="edge.color" value="80,71,166"/> </edge>
The weight determines how thick the edge is drawn. The color is given as comma-seperated red, green and blue values, each ranging from 0 to 255.
edge.shape determines, who the ends of the edges look like. Possivle values are:
- none
- arrow
- dash
- circle
Defining graph parameters:
As stated above, the graph element also may contain parameters. They are not mandatory but allow to used pictures in the network and to dynamically add nodes to the network.
Picture path:
As explained above, each node can have a picture associated that is used to represent the node in the network. These pictures have (due to security restrictions for Java applets) to be stored on the same server as the applet, such that the applet can access them. The applet has to know the directory where the pictures are stored relativ to its own directory. This information is given via the PICTURE_PATH parameter. The pictures may be in PNG, GIF, TGA or JPEG format, with the first three formats supporting transparent images.
<att name="PICTURE_PATH" value="thumbnails/"/>
If the parameter PITCURE_PATH is not given, the applet assumes that pictures are stored in a subdirectory of the applet directory that is called "thumbnails".
Neighbourhood script:
To be able to load new nodes into the network dynamically, the information about the new nodes has to be transfered to the applet. Therefore, the applet calls a site on its server and passes the id of the node, whose neighbourhood should be loaded, as a get-parameter called id. The script then computes the neighbourhood of this node and returns an XGMML-file containing the neighbouring nodes and the edges of this nodes. For more details please look here.
<att name="NEIGHBOURHOOD_SCRIPT" value="getNeighbours.php"/>
As for the PICTURE_PATH, the location of the NEIGHBOURHOOD_SCRIPT has to be given relativ to the applet directory.
Example (apoptosis.xgmml):
<?xml version="1.0" encoding="UTF-8" ?> <graph label="Apoptosis" directed="1" xmlns="http://www.cs.rpi.edu/XGMML" schemaLocation="http://www.cs.rpi.edu/~puninj/XGMML/xgmml.xsd"> <att name="PICTURE_PATH" value="thumbnails/"/> <node id="Bad" label="Bad"> <graphics type="hor_ellipsis" fill="#F8FF00"/> <att name="description" value="Bcl-2-associated death promoter"/> <att name="picture" value="apopbad.png"/> </node> <node id="Bid" label="Bid"> <graphics type="hor_ellipsis" fill="#F8FF00"/> <att name="description" value="BH3 interacting domain death agonist"/> <att name="picture" value="apopbid.png"/> </node> <node id="Bim" label="Bim"> <graphics type="hor_ellipsis" fill="#F8FF00"/> <att name="description" value="Bcl-2-like protein 11"/> <att name="picture" value="apopbim.png"/> </node> <node id="Puma" label="Puma"> <graphics type="hor_ellipsis" fill="#F8FF00"/> <att name="description" value="p53 upregulated modulator of apoptosis"/> <att name="picture" value="apoppuma.png"/> </node> <node id="Noxa" label="Noxa"> <graphics type="hor_ellipsis" fill="#F8FF00"/> <att name="description" value="Phorbol-12-myristate-13-acetate-induced protein 1"/> <att name="picture" value="apopnoxa.png"/> </node> <node id="Bcl-2" label="Bcl-2"> <graphics type="circle" fill="#00FF00"/> <att name="description" value="Bcl-2"/> <att name="picture" value="apopbcl-2.png"/> </node> <node id="Bcl-XL" label="Bcl-XL"> <graphics type="circle" fill="#00FF00"/> <att name="description" value="Bcl-xl"/> <att name="picture" value="apopbcl-xl.png"/> </node> <node id="Mcl-1" label="Mcl-1"> <graphics type="circle" fill="#00FF00"/> <att name="description" value="Induced myeloid leukemia cell differentiation protein Mcl-1"/> <att name="picture" value="apopmcl-1.png"/> </node> <node id="IBak" label="Inactive Bak"> <graphics type="hexagon" fill="#E4A3FF"/> <att name="picture" value="apopibak.png"/> </node> <node id="Bak" label="Bak"> <graphics type="octagon" fill="#CC51FF"/> <att name="description" value="Bcl-2 homologous antagonist/killer"/> <att name="picture" value="apopbak.png"/> </node> <node id="Bax" label="Bax"> <graphics type="octagon" fill="#CC51FF"/> <att name="description" value="Bcl-2âassociated X protein"/> <att name="picture" value="apopbax.png"/> </node> <node id="IBax" label="Inactive Bax"> <graphics type="hexagon" fill="#E4A3FF"/> <att name="picture" value="apopibax.png"/> </node> <node id="Perm" label="Mitochondrial Permeabilization"> <graphics type="box" fill="#C4803D"/> <att name="description" value="Releases Cytochrome-C"/> <att name="picture" value="mitochondrium.png"/> </node> <edge label="Inhibition" source="Bad" target="Bcl-2" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bad" target="Bcl-XL" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bad" target="Mcl-1" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bid" target="Bcl-XL" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bid" target="Mcl-1" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bim" target="Bcl-2" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bim" target="Bcl-XL" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bim" target="Mcl-1" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Puma" target="Bcl-2" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Puma" target="Bcl-XL" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Puma" target="Mcl-1" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Noxa" target="Mcl-1" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bcl-2" target="Bax" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bcl-XL" target="Bak" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Bcl-XL" target="Bax" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Mcl-1" target="Bak" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Inhibition" source="Mcl-1" target="Bax" weight="1.0"> <att name="edge.shape" value="circle"/> <att name="edge.color" value="119,82,82"/> </edge> <edge label="Activated" source="IBak" target="Bak" weight="1.0"> <att name="edge.shape" value="none"/> <att name="edge.color" value="115,200,139"/> </edge> <edge label="Activated" source="IBax" target="Bax" weight="1.0"> <att name="edge.shape" value="none"/> <att name="edge.color" value="115,200,139"/> </edge> <edge label="Pore formation" source="Bak" target="Perm" weight="1.0"> <att name="edge.shape" value="arrow"/> <att name="edge.color" value="80,71,166"/> </edge> <edge label="Pore formation" source="Bax" target="Perm" weight="1.0"> <att name="edge.shape" value="arrow"/> <att name="edge.color" value="80,71,166"/> </edge> </graph>
This XGMML-file yields the following graph:
| Network with pictures | Network without pictures |
|---|---|
 |
 |
The scaffold of the file is the xml-definition and the root-element graphml.
<?xml version="1.0" encoding="UTF-8" ?> <graphml xmlns="http://graphml.graphdrawing.org/xmlns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd"> </graphml>
The graphml element contains information about the namespace and the schema that is used for the file. All other information in the file are given within the graphml element
Defining keys:
In GraphML, attributes for nodes, the edges and the graph itself are identified using keys. These keys are defined first of all in the graphml element. Each key definition states the id and name of the key, the element it applies to and its data format. An example of a key definition is:
<key id="name" for="node" attr.name="label" attr.type="string"/>
This defines a key whose id (that is, how it is referenced later on in the file) is "name" while it is refered to as "label" by programs parsing the file (given by attr.name). Data with this key must be of type "string". For more information on GraphML, please take a look at the GraphML Primer.
For Cobweb, more keys are necessary to be able to use all features. Below all keys for all possible kinds of data is stated, we will discuss the meaning when presenting the elements to which they apply.
<key id="picturepath" for="graph" attr.name="picturepath" attr.type="string" /> <key id="neighbourhoodscript" for="graph" attr.name="neighbourhoodscript" attr.type="string" /> <key id="name" for="node" attr.name="label" attr.type="string" /> <key id="shape" for="node" attr.name="shape" attr.type="string" /> <key id="r" for="node" attr.name="r" attr.type="string" /> <key id="g" for="node" attr.name="g" attr.type="string" /> <key id="b" for="node" attr.name="b" attr.type="string" /> <key id="description" for="node" attr.name="description" attr.type="string" /> <key id="picture" for="node" attr.name="picture" attr.type="string" /> <key id="x" for="node" attr.name="x" attr.type="float" /> <key id="y" for="node" attr.name="y" attr.type="float" /> <key id="edgelabel" for="edge" attr.name="label" attr.type="string" /> <key id="edgeshape" for="edge" attr.name="shape" attr.type="string" /> <key id="weight" for="edge" attr.name="weight" attr.type="float" /> <key id="edger" for="edge" attr.name="r" attr.type="string" /> <key id="edgeg" for="edge" attr.name="g" attr.type="string" /> <key id="edgeb" for="edge" attr.name="b" attr.type="string" />
Defining the graph:
After the keys definition, the graph element is given, that contains all further graph parameter-, node-, and edge-definition.
<graph></graph>
While this graph definition is sufficient, it may also include a label for the network and information, whether edges in the network are directed or not. If no information about direction is given, an undirected network is assumed. In the example case we want to create a directed network, so the graph element looks like:
<graph id="Apoptosis" edgedefault="directed"> </graph>
For undirected networks, it would be edgedefault="undirected".
Inside the graph element nodes, edges and some parameters can be defined.
Defining nodes:
Each node must have an id that is unique in the network. Thus the minimal version of a node declaration is:
<node id="Bax"/>
A node may have some additional information, possibilities are:
- a label
- a description
- an icon type and colour
- a picture which is used to represent the node in the network
- a position
A node declaration containig also of these looks like:
<node id="Bax"> <data key="name">Bax</data> <data key="description">Bax is a protein of the Bcl-2 gene family</data> <data key="shape">octagon</data> <data key="r">204</data> <data key="g">81</data> <data key="b">255</data> <data key="picture">apopbax.png</data> <data key="x">584.0705</data> <data key="y">641.11566</data> </node>
Here we can see how the key ids declared above are used to identify the attributes.
The name attribute contains the node's description.
The shape attribute determines the symbol that represents the node in the network. Possible shape values are:
- circle
- triangle
- box
- rectangle
- rhombus
- hexagon
- octagon
- hor_ellipsis
- ver_ellipsis
The r, g and b attributes define the red, green and blue values for the symbol's fill color each ranging from 0 to 255.
The picture attribute contains the filename of a picture that is to be used to represent the node in the network. Details about getting pictures into the applet are given below.
The x and y attributes contain the x- respectively y-coordinate of the node. If they are given, the node is fixed when the network is created.
Defining edges:
An edge is defined by the two nodes it connects. Hence the minimal way to declare an egde is:
<edge source="Bax" target="Perm"/>
As for nodes, edges can contain additional information, in this case:
- a label
- a shape
- a weight
- a color
Again, an edge containing all information would look like:
<edge source="Bax" target="Perm"> <data key="weight">1.0</data> <data key="edgelabel">Pore formation</data> <data key="edgeshape">dash</data> <data key="edger">80</data> <data key="edgeg">71</data> <data key="edgeb">166</data> </edge>
The weight determines how thick the edge is drawn. The color is given by it's red, green and blue values, each ranging from 0 to 255.
edgeshape determines, who the ends of the edges look like. Possivle values are:
- none
- arrow
- dash
- circle
Defining graph parameters:
As stated above, the graph element also may contain parameters. They are not mandatory but allow to used pictures in the network and to dynamically add nodes to the network.
Picture path:
As explained above, each node can have a picture associated that is used to represent the node in the network. These pictures have (due to security restrictions for Java applets) to be stored on the same server as the applet, such that the applet can access them. The applet has to know the directory where the pictures are stored relativ to its own directory. This information is given via the picturepath parameter. The pictures may be in PNG, GIF, TGA or JPEG format, with the first three formats supporting transparent images.
<data key="picturepath">thumbnails/</data>
If the parameter picturepath is not given, the applet assumes that pictures are stored in a subdirectory of the applet directory that is called "thumbnails".
Neighbourhood script:
To be able to load new nodes into the network dynamically, the information about the new nodes has to be transfered to the applet. Therefore, the applet calls a site on its server and passes the id of the node, whose neighbourhood should be loaded, as a get-parameter called id. The script then computes the neighbourhood of this node and returns an GraphML-file containing the neighbouring nodes and the edges of this nodes. For more details please look here.
<data key="neighbourhoodscript">getNeighbours.php</data>
As for the picturepath, the location of the neighbourhoodscript has to be given relativ to the applet directory.
Example (apoptosis.graphml):
<?xml version="1.0" encoding="UTF-8" ?> <graphml xmlns="http://graphml.graphdrawing.org/xmlns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://graphml.graphdrawing.org/xmlns http://graphml.graphdrawing.org/xmlns/1.0/graphml.xsd"> <key id="picturepath" for="graph" attr.name="picturepath" attr.type="string" /> <key id="neighbourhoodscript" for="graph" attr.name="neighbourhoodscript" attr.type="string" /> <key id="name" for="node" attr.name="label" attr.type="string" /> <key id="shape" for="node" attr.name="shape" attr.type="string" /> <key id="r" for="node" attr.name="r" attr.type="string" /> <key id="g" for="node" attr.name="g" attr.type="string" /> <key id="b" for="node" attr.name="b" attr.type="string" /> <key id="description" for="node" attr.name="description" attr.type="string" /> <key id="picture" for="node" attr.name="picture" attr.type="string" /> <key id="x" for="node" attr.name="x" attr.type="float" /> <key id="y" for="node" attr.name="y" attr.type="float" /> <key id="edgelabel" for="edge" attr.name="label" attr.type="string" /> <key id="edgeshape" for="edge" attr.name="shape" attr.type="string" /> <key id="weight" for="edge" attr.name="weight" attr.type="float" /> <key id="edger" for="edge" attr.name="r" attr.type="string" /> <key id="edgeg" for="edge" attr.name="g" attr.type="string" /> <key id="edgeb" for="edge" attr.name="b" attr.type="string" /> <graph id="Apoptosis" edgedefault="directed"> <data key="picturepath">thumbnails/</data> <node id="Bad"> <data key="name">Bad</data> <data key="shape">hor_ellipsis</data> <data key="r">248</data> <data key="g">255</data> <data key="b">0</data> <data key="description">Bcl-2-associated death promoter</data> <data key="picture">apopbad.png</data> </node> <node id="Bid"> <data key="name">Bid</data> <data key="shape">hor_ellipsis</data> <data key="r">248</data> <data key="g">255</data> <data key="b">0</data> <data key="description">BH3 interacting domain death agonist</data> <data key="picture">apopbid.png</data> </node> <node id="Bim"> <data key="name">Bim</data> <data key="shape">hor_ellipsis</data> <data key="r">248</data> <data key="g">255</data> <data key="b">0</data> <data key="description">Bcl-2-like protein 11</data> <data key="picture">apopbim.png</data> </node> <node id="Puma"> <data key="name">Puma</data> <data key="shape">hor_ellipsis</data> <data key="r">248</data> <data key="g">255</data> <data key="b">0</data> <data key="description">p53 upregulated modulator of apoptosis</data> <data key="picture">apoppuma.png</data> </node> <node id="Noxa"> <data key="name">Noxa</data> <data key="shape">hor_ellipsis</data> <data key="r">248</data> <data key="g">255</data> <data key="b">0</data> <data key="description">Phorbol-12-myristate-13-acetate-induced protein 1</data> <data key="picture">apopnoxa.png</data> </node> <node id="Bcl-2"> <data key="name">Bcl-2</data> <data key="shape">circle</data> <data key="r">0</data> <data key="g">255</data> <data key="b">0</data> <data key="description">Bcl-2</data> <data key="picture">apopbcl-2.png</data> </node> <node id="Bcl-XL"> <data key="name">Bcl-XL</data> <data key="shape">circle</data> <data key="r">0</data> <data key="g">255</data> <data key="b">0</data> <data key="description">Bcl-xl</data> <data key="picture">apopbcl-xl.png</data> </node> <node id="Mcl-1"> <data key="name">Mcl-1</data> <data key="shape">circle</data> <data key="r">0</data> <data key="g">255</data> <data key="b">0</data> <data key="description">Induced myeloid leukemia cell differentiation protein Mcl-1</data> <data key="picture">apopmcl-1.png</data> </node> <node id="IBak"> <data key="name">Inactive Bak</data> <data key="shape">hexagon</data> <data key="r">228</data> <data key="g">163</data> <data key="b">255</data> <data key="picture">apopibak.png</data> </node> <node id="Bak"> <data key="name">Bak</data> <data key="shape">octagon</data> <data key="r">204</data> <data key="g">81</data> <data key="b">255</data> <data key="description">Bcl-2 homologous antagonist/killer</data> <data key="picture">apopbak.png</data> </node> <node id="Bax"> <data key="name">Bax</data> <data key="shape">octagon</data> <data key="r">204</data> <data key="g">81</data> <data key="b">255</data> <data key="description">Bcl-2âassociated X protein</data> <data key="picture">apopbax.png</data> </node> <node id="IBax"> <data key="name">Inactive Bax</data> <data key="shape">hexagon</data> <data key="r">228</data> <data key="g">163</data> <data key="b">255</data> <data key="picture">apopibax.png</data> </node> <node id="Perm"> <data key="name">Mitochondrial Permeabilization</data> <data key="shape">box</data> <data key="r">196</data> <data key="g">128</data> <data key="b">61</data> <data key="description">Releases Cytochrome-C</data> <data key="picture">mitochondrium.png</data> </node> <edge source="Bad" target="Bcl-2"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bad" target="Bcl-XL"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bad" target="Mcl-1"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bid" target="Bcl-XL"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bid" target="Mcl-1"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bim" target="Bcl-2"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bim" target="Bcl-XL"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bim" target="Mcl-1"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Puma" target="Bcl-2"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Puma" target="Bcl-XL"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Puma" target="Mcl-1"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Noxa" target="Mcl-1"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bcl-2" target="Bax"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bcl-XL" target="Bak"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Bcl-XL" target="Bax"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Mcl-1" target="Bak"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="Mcl-1" target="Bax"> <data key="weight">1.0</data> <data key="edgeshape">circle</data> <data key="edgelabel">Inhibition</data> <data key="edger">119</data> <data key="edgeg">82</data> <data key="edgeb">82</data> </edge> <edge source="IBak" target="Bak"> <data key="weight">1.0</data> <data key="edgeshape">none</data> <data key="edgelabel">Activated</data> <data key="edger">115</data> <data key="edgeg">200</data> <data key="edgeb">139</data> </edge> <edge source="IBax" target="Bax"> <data key="weight">1.0</data> <data key="edgeshape">none</data> <data key="edgelabel">Activated</data> <data key="edger">115</data> <data key="edgeg">200</data> <data key="edgeb">139</data> </edge> <edge source="Bak" target="Perm"> <data key="weight">1.0</data> <data key="edgeshape">arrow</data> <data key="edgelabel">Pore formation</data> <data key="edger">80</data> <data key="edgeg">71</data> <data key="edgeb">166</data> </edge> <edge source="Bax" target="Perm"> <data key="weight">1.0</data> <data key="edgeshape">arrow</data> <data key="edgelabel">Pore formation</data> <data key="edger">80</data> <data key="edgeg">71</data> <data key="edgeb">166</data> </edge> </graph> </graphml>
This GraphML-file yields the following graph:
| Network with pictures | Network without pictures |
|---|---|
 |
 |
SIF-files (Simple Interactions Format) provide a very simple way to define networks. As a drawback, they can only contain node- and edge-names but no additional informations.
Each line in an SIF-file has to contain the name of a source node, a description of the edge and the names of one or more target nodes. Networks given as SIF-files are treated as directed networks by Cobweb.
Bid Inhibition Bcl-XL Mcl-1
Delimiters between the single names can be either tabs or whitespaces. If the file contains any tab, tabs are assumed to be the delimiters, thus names can contain whitespaces. If no tab is present in the file, any whitespace will be a delimiter.
Example (apoptosis.sif):
Bad Inhibition Bcl-2 Bcl-XL Mcl-1 Bid Inhibition Bcl-XL Mcl-1 Bim Inhibition Bcl-2 Bcl-XL Mcl-1 Puma Inhibition Bcl-2 Bcl-XL Mcl-1 Noxa Inhibition Mcl-1 Bcl-2 Inhibition Bax Bcl-XL Inhibition Bax Bak Mcl-1 Inhibition Bax Bak IBak Activated Bak IBax Activated Bax Bak Pore formation Mitochondrion Bax Pore formation Mitochondrion
This SIF-file yields the following graph:
Here it is shown, how the applet can be used in a webpage. The Cobweb-applet is designed to interact with several containers on the website. One can aswell only include the applet, but then some of its functionallity will not be available. Nevertheless, we start with this case just to show how the applet can be added to the page.
Please note, that the examples assume that you have downloaded the applet's java libraries and stored them in a directory named applet/. You can download an example implementation of the applet here, containing all neccessary files in the right place. You can just download and open it to have the applet running.
Adding the applet:
To add the applet to a webpage, import it as any Java applet is added to a website.
<applet name="vis_applet" code="cobweb/Cobweb.class" codebase="applet/" archive="cobweb.jar,core.jar,particlesystem.jar,guicomponents.jar,commons-codec-1.4.jar" width="740" height="600"> <param name="width" value="740"> <param name="height" value="600"> JAVA not available </applet>
This opens the Cobweb applet not showing a network. If you want Cobweb to show network data, there are two possibilities: either give the name of a network-file or the network data itself as a parameter. Both is possible with data in XGMML- as well as in GraphML-format.
Filename as parameter:
If cobweb should open a network file that is stored on the server, the filename can be given as parameter fileXGMML respectively fileGraphML, depending on the format of the network file. The filename has to be relative to the applet directory.
<applet name="vis_applet" code="cobweb/Cobweb.class" codebase="applet/" archive="cobweb.jar,core.jar,particlesystem.jar,guicomponents.jar,commons-codec-1.4.jar" width="740" height="600"> <param name="fileXGMML" value="apoptosis.xgmml"> <param name="width" value="740"> <param name="height" value="600"> JAVA not available </applet>
Network data as parameter:
With the parameter networkXGMML respectively networkGraphML, the network data can be directly handed over to the applet. The network data has to be contained in the HTML-file.
<applet name="vis_applet" code="cobweb/Cobweb.class" codebase="applet/" archive="cobweb.jar,core.jar,particlesystem.jar,guicomponents.jar,commons-codec-1.4.jar" width="740" height="600"> <param name="networkXGMML" value='<?xml version="1.0" encoding="UTF-8" ?><graph label="Apoptosis" directed="1" xmlns="http://www.cs.rpi.edu/XGMML" schemaLocation="http://www.cs.rpi.edu/~puninj/XGMML/xgmml.xsd"><node label="Bad" id="Bad"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Bid" id="Bid"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Bim" id="Bim"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Puma" id="Puma"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Noxa" id="Noxa"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Bcl-2" id="Bcl-2"><graphics type="circle" fill="#00FF00"/></node><node label="Bcl-XL" id="Bcl-XL"><graphics type="circle" fill="#00FF00"/></node><node label="Mcl-1" id="Mcl-1"><graphics type="circle" fill="#00FF00"/></node><node label="Inactive Bak" id="IBak"><graphics type="hexagon" fill="#E4A3FF"/></node><node label="Bak" id="Bak"><graphics type="octagon" fill="#CC51FF"/></node><node label="Bax" id="Bax"><graphics type="octagon" fill="#CC51FF"/></node><node label="Inactive Bax" id="IBax"><graphics type="hexagon" fill="#E4A3FF"/></node><node label="Mitochondrial Permeabilization" id="Perm"><graphics type="box" fill="#C4803D"/></node><edge source="Bad" target="Bcl-2" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bad" target="Bcl-XL" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bad" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bid" target="Bcl-XL" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bid" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bim" target="Bcl-2" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bim" target="Bcl-XL" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bim" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Puma" target="Bcl-2" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Puma" target="Bcl-XL" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Puma" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Noxa" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bcl-2" target="Bax" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bcl-XL" target="Bak" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bcl-XL" target="Bax" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Mcl-1" target="Bak" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Mcl-1" target="Bax" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="IBak" target="Bak" label="Activated"><att name="edge.shape" value="none"/><att name="edge.color" value="115,200,139"/></edge><edge source="IBax" target="Bax" label="Activated"><att name="edge.shape" value="none"/><att name="edge.color" value="115,200,139"/></edge><edge source="Bak" target="Perm" label="Pore formation"><att name="edge.shape" value="arrow"/><att name="edge.color" value="80,71,166"/></edge><edge source="Bax" target="Perm" label="Pore formation"><att name="edge.shape" value="arrow"/><att name="edge.color" value="80,71,166"/></edge></graph>'> <param name="width" value="740"> <param name="height" value="600"> JAVA not available </applet>
Other parameters:
The applet can get a couple of other parameters that influence the way the networks look. These are:
| Parameter | Effect |
|---|---|
| edgeLength | Starting value for the edges between nodes (default 150) |
| scaleFactor | Starting value for the zoom (default 1.0) |
| edgeStrength | Strength of edges between nodes (default 0.04) |
| repulsionStrength | Strength of repulsive forces between the nodes (default 4000) |
<applet name="vis_applet" code="cobweb/Cobweb.class" codebase="applet/" archive="cobweb.jar,core.jar,particlesystem.jar,guicomponents.jar,commons-codec-1.4.jar" width="740" height="600"> <param name="fileXGMML" value="apoptosis.xgmml"> <param name="edgeLength" value="100"> <param name="scaleFactor" value="0.9"> <param name="edgeStrength" value="0.03"> <param name="repulsionStrength" value="3500"> <param name="width" value="740"> <param name="height" value="600"> JAVA not available </applet>
Enhance feedback:
When adding the applet with one of the possiblities shown above, the site will just contain the applet without the sidebar and the statusbar. Therefore the feedback you can get from the applet is limited. To improve this, specialy named div-containers can be added to the page.
The enhanced feedback works via two div-elements called statusbar and sidebar. The statusbar shows feedback about the latest user actions (e.g. "removed node xyz") and what the applet is doing (e.g. "loading neighbourhood for node xyz"). The sidebar gives the opportunity to show details about selected nodes and edges as well as to display buttons for more sophisticated actions. These can be added easily in the applets sourceode. Examples for such more sophisticated actions are for example showing structuraly related drugs to the selected drug as implemented in PROMISCUOUS.
These divs are filled with content using some JavaScript functions. So we have to add two scripts, applet.js and prototype.js (that can be downloaded here). The resulting code is:
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/applet.js"></script> <div id="statusbar"></div> <applet name="vis_applet" code="cobweb/Cobweb.class" codebase="applet/" archive="cobweb.jar,core.jar,particlesystem.jar,guicomponents.jar,commons-codec-1.4.jar" width="740" height="600"> <param name="networkXGMML" value='<?xml version="1.0" encoding="UTF-8" ?><graph label="Apoptosis" directed="1" xmlns="http://www.cs.rpi.edu/XGMML" schemaLocation="http://www.cs.rpi.edu/~puninj/XGMML/xgmml.xsd"><node label="Bad" id="Bad"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Bid" id="Bid"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Bim" id="Bim"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Puma" id="Puma"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Noxa" id="Noxa"><graphics type="hor_ellipsis" fill="#F8FF00"/></node><node label="Bcl-2" id="Bcl-2"><graphics type="circle" fill="#00FF00"/></node><node label="Bcl-XL" id="Bcl-XL"><graphics type="circle" fill="#00FF00"/></node><node label="Mcl-1" id="Mcl-1"><graphics type="circle" fill="#00FF00"/></node><node label="Inactive Bak" id="IBak"><graphics type="hexagon" fill="#E4A3FF"/></node><node label="Bak" id="Bak"><graphics type="octagon" fill="#CC51FF"/></node><node label="Bax" id="Bax"><graphics type="octagon" fill="#CC51FF"/></node><node label="Inactive Bax" id="IBax"><graphics type="hexagon" fill="#E4A3FF"/></node><node label="Mitochondrial Permeabilization" id="Perm"><graphics type="box" fill="#C4803D"/></node><edge source="Bad" target="Bcl-2" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bad" target="Bcl-XL" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bad" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bid" target="Bcl-XL" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bid" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bim" target="Bcl-2" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bim" target="Bcl-XL" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bim" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Puma" target="Bcl-2" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Puma" target="Bcl-XL" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Puma" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Noxa" target="Mcl-1" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bcl-2" target="Bax" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bcl-XL" target="Bak" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Bcl-XL" target="Bax" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Mcl-1" target="Bak" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="Mcl-1" target="Bax" label="Inhibition"><att name="edge.shape" value="circle"/><att name="edge.color" value="119,82,82"/></edge><edge source="IBak" target="Bak" label="Activated"><att name="edge.shape" value="none"/><att name="edge.color" value="115,200,139"/></edge><edge source="IBax" target="Bax" label="Activated"><att name="edge.shape" value="none"/><att name="edge.color" value="115,200,139"/></edge><edge source="Bak" target="Perm" label="Pore formation"><att name="edge.shape" value="arrow"/><att name="edge.color" value="80,71,166"/></edge><edge source="Bax" target="Perm" label="Pore formation"><att name="edge.shape" value="arrow"/><att name="edge.color" value="80,71,166"/></edge></graph>'> <param name="width" value="740"> <param name="height" value="600"> JAVA not available </applet> <div id="sidebar"></div>
As stated above, the neighbourhood script gets the id of the node whose neighbourhood shall be loaded and returns a the neighbourhood data as a string. Cobweb expects the string to be in the format in which the starting network was given to it (GraphML or XGMML). The id is transfered to the script as a GET parameter named id. The script can be written in any language that can be handeled by your webserver to get input and return output, we have used PHP. You can also choose how the script obtains neighbourhood information. We have used MySQL-based databases, but you could as well e.g. parse textfiles for the neighbourhood information. Basically, the script is stored on your server, so you can do whatever you want. You just have to be able to read the GET paramter id and return a string in the appropriate network format.
Below we show an example how a PHP-script could look like, that queries a database for neighbours and returns the information as an XGMML string. Please take a look at the description of the input formats above to see how the applets gets to know the location of the neighbourhood script.
<?php
// id of the node whose neighbourhood is loaded
$id = $_GET['id'];
// connect with mysql
$dbh=mysql_connect("host", "user", "pw") or die ("Could not connect to mysql host");
// connect to database
mysql_select_db("db", $dbh) or die("Could not connect to database");
echo '<?xml version="1.0"?>';
echo '<graph label="Neighbours of node ' . $id . '">';
// query the database for the ids, labels, classes and images of the neighbouring nodes
$sql = "SELECT id, label, image FROM nodes WHERE root_node_id='" . $id . "'";
$res = mysql_query($sql);
// print the node- and edge-information in XGMML format
while ($row = mysql_fetch_array($res)) {
echo '<node id="' . $row["id"] . '" label="' . $row["label"] . '">';
echo '<att name="picture" value="' . $row["image"] . '"/>';
echo '</node>';
echo '<edge source="' . $id . '" target="' . $row["id"] . '"/>';
}
echo '</graph>';
?>
