Use VisANT to visualize networks in your own web site

One distinguished feature of VisANT is that it can be directly used in user's web site, either to visualize prepared networks, or to be used to visualize interaction/network/pathway data in user's database. There are three different ways of such usage, as detailed below.

1. Simple HTTP Link                

2. Using Embedded VisANT to Visualize Interaction Network

Customizable VisANT Applet Parameters

Scriptable APIs

Advantages/Disadvantages

Sample Pages (email us if the sample pages are not accessible)

Download Sample Pages

3. Creating A Server to Visualize the Interaction Database in VisANT

Sample Pages (email us if the sample pages are not accessible)

Download Sample Pages

Download Sample Server

Server Source Code

 

Step 1: Use simple HTTP link to load the network in VisANT 

Any web-accessible networks saved in the format of VisML or other supported formats, can be directly loaded into VisANT by a prefix of the corresponding URL. For an example, given a network at:

 

http://prelude.bu.edu/O2/O2_visant.xml

 

1.1 add prefix (http://visant.bu.edu:8080/vserver/DAI?command=link&location=) to above URL (see here for the detail of the network):

 

http://visant.bu.edu:8080/vserver/DAI?command=link&location=http://prelude.bu.edu/O2/O2_visant.xml

 

1.2 Click above link, the network will be directly loaded into VisANT. Here is another simple example:

 

http://visant.bu.edu:8080/vserver/DAI?command=link&location=http://visant.bu.edu/sample/visml_files/edge_demo.xml

 

------------------- Detailed explanation --------------------

The location parameter specified an web-accessible location of a VisML file. The VisANT is invoked through java web start technology, please reference here for more detail of how VisANT is running under this mode. The advantage of using this method to put your network online is that it is very simple and light-weighted as it is just a web link. The web page reference the network and VisML file of the network can be stored at different servers. The disadvantage is that each link will invoke a different instance of VisANT, and it does not have the capability to control the behavior of the network.

Note: The behavior of double clicking over the node can be overwritten to load customized-HTTP link instead of edge expansion.

Note:  Various customized ids for the nodes can be added to the network using ID-Mapping format.

Step 2: Embedding VisANT Applet in a Web page

2.1 make sure you have a web server installed and running. We use tomcat server in this tutorial which is free. To test whether you have tomcat server running with default configuration, try to open http://127.0.0.1:8080, if a page is opened, tomcat server is ready.

2.2 download the zip package, and extract file to the tomcat_dir/webapps/ROOT, a demo directory will be created. Here the tomcat_dir points to the install directory of tomcat, such as "C:\Program Files\Apache Software Foundation\Tomcat 5.5" for tomcat 5.5.

2.3. double-click the VisAnt.jar in the demo directory to launch the VisANT, and use the menu Files/Open to open the network file in the demo directory named y2h_homo.xml, and following the steps shown in the following picture to modify the color of the nodes to the one you preferred, and then save the file use the menu Files/Save:

2.4 close VisANT and  open the URL http://127.0.0.1:8080/demo/, you will see a page looks similar to the following:

2.5 Play around, you can search interactions similar to the following:

2.6 you can also change the species to the Yeast, and navigate the interaction network, just like what you experienced in VisANT web site, although there is NO database and application server connected.

 

------------------- Detailed explanation --------------------

VisANT can be easily be embedded in your web page as a java applet to visualize the network/pathway. Furthermore, the network/pathway can be controlled through scripting language such as java script or VB script. In general, almost all functions available in VisANT can be carried out through scripting function if necessary. For an example, the VisANT home page's search function is carried out using search function in VisANT:

<SCRIPT language="JavaScript">
<!--
function search(orf, spec){
  document.visant.search(orf, spec);
}
function openFile(fname){
  document.visant.openFile(fname);
}
//-->
</script>

the java script search function actually calls the search API of VisANT applet (by the object document.visant) and visant is the name of the VisANT applet as specified by the Name attribute of Applet tag in the html page as illustrated below:

<APPLET NAME="visant" codebase="." ARCHIVE="./VisAnt.jar"
CODE="cagt.bu.visant.VisAntApplet.class" WIDTH=1 HEIGHT=1 align="right">

Note: because by default VisANT applet is invisible, its width and height can be 1 or 0.

When manipulating the behavior of embedded VisANT applet, it is very important to cache the applet so that the applet can be used in different pages without reloading it. To achieve this goal, we suggest users to use frame pages. For an example, VisANT home page use two-page-frame, the banner page with name header and the main page with name main, as specified below:

<html>
<head>
<title>VisANT: An integrative platform for network/pathway analysis</title>
</head>
<frameset framespacing="0" border="0" frameborder="0" rows="102,*">
<frame name="header" scrolling="no" noresize target="main" src="banner2.htm">
<frame name="main" scrolling="auto" src="home2.htm" target="_self">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

the banner page actually embeds the applet ( http://visant.bu.edu/banner2.htm ) and all default pages are opened in the main frame. The search button in the default main VisANT home page using the following java script to call VisANT's search API using following line:

parent.header.search(document.searchform.orf.value, document.searchform.species.value)

Please reference the source of page http://visant.bu.edu/home2.htm for more detail about the usage of this function.

Note: The main window of VisANT Applet by default is invisible when embedding in the web page, unless the parameter visible is set to be true. VisANT provides an API showNetwork to make the applet visible. This feature, combined with the hidden frame that embeds the applet, enables unsynchronized loading of VisANT applet and its startup file, therefore the loading time of the pages will not be affected by the applet.

Note: All available APIs that can be called by script languages are available here.

In order to fit the different requirements of the users, the user interface of the VisANT applet is configurable through its parameters, please reference here for all configurable parameters.

In case that the frame page is not preferred, users can hide the frame page that embeds the applet. A sample web site of this usage can be found here and the source of the pages can be downloaded here.

VisANT has provided special functions to visualize user's interaction data sets. This tutorial illustrates how to user VisANT to visualize the interaction data set if the total interaction are less than certain threshold, say 5000 (the only thing need to be considered here is the loading time of the interaction data set in VisANT). The special functions enable users to query the interactions without the usage of database. All the files involved in this tutorial can be downloaded here, the demo pages can be tried out at http://bioinfo.bu.edu:8080/demo/index.htm. It is highly suggested for users to open a new browser to try out the demo pages. Here are the steps to achieve the demo pages:

  1. Prepare the interaction data in VisANT and save them as the VisML file. Please reference this tutorial for how to add interaction data into VisANT. Please also download the y2h interactome data used in this tutorial (prepared from Predictome database, one for Homo Sapiens (761 nodes and 874 edges) and one for Saccharomyces cerevisiae (4216 nodes and 7842 edges). In both file the node color and size has been customized, and database connection has been turned off by deselecting the Database online option under Files menu so that searching and expansion of the node's interaction will not start database query. 

  2. Prepare the pages. We need to prepare three pages: header.htm is used to hold the VisANT applet and is invisible to the users; main.htm is the page for the interaction data query; and the index.htm is the frame page that holds header.htm and main.htm. All pages used here have been zipped, and users can download the zip file and extract to any web directory. The demo pages can then be easily accessed using corresponding URL.

Header.htm: in the main.htm, we will use Homo Sapiens interaction data set as the default interaction data set, therefore we set the startup parameter as following:

<PARAM NAME=startup Value = 'y2h_homo.xml'>

which tells VisANT to load this file when it starts. The file is located in the same directory as the VisAnt.jar. This is probably the only parameter need to be customized for those users who want to visualize their own interaction data.

In addition, we also customized the Applet a little bit, for example, we removed toolbar in VisANT by using following parameter:

<PARAM NAME='toolbar' Value = 'OFF'>

Please reference here for the detailed explanation of all parameters.

index.htm: This file is similar to the one shown above, one thing need to be aware is the name of the two frames, the hidden page (header.htm) is named as header while the main page (main.htm) is named as name.

main.htm: This will be the main for user to add on their own design of the page. The main.htm is just be designed to illustrate how VisANT scriptable functions can be used to visualize user's interaction data. The interface of the demo pages shall look similar to the following figure:

When the above page opens, VisANT will load the VisML file y2h_homo.xml specified by parameter startup in the background. Clicking on the two buttons shown above will trigger the java script function as shown below:

<Button TYPE=BUTTON onClick="javascript:parent.header.searchInteraction(document.searchform.orf.value, 1)">

which in turn calls java script function searchInteraction(names, level) defined in the header.htm:

function searchInteraction(names, level){
     document.visant.showInteraction(names, level);
}

where visant is the name of the applet and showInteraction is the VisANT API that searches the interaction of a given protein and a given level. The parameter level determines the maximum path of the searched protein. Clear this function will show all connected components of the searched protein If the value of this parameter is big enough. Following figure shows the effect of this parameter:

The searched interaction network supports exploratory navigation as well, double-clicking over the node, or query the selected nodes, will also reveal the interactions of the next level, as shown in the following figure:

Java script function can also be called through HTTP link, as shown with the Show All Interactions: 

<a href="javascript:parent.header.displayAll()">Show All Interactions</a>

As there are two interaction data set, a drop-down list has been used to allow user to select different species, and the value of each selection corresponds to the VisML name of the different data set, so that when the selection of the drop-down list changes, VisANT will be notified to load the right file, as shown below:

 <SELECT NAME="species" width="5" onchange="javascript:parent.header.openFileQuite(document.searchform.species.value)">
	<OPTION SELECTED VALUE="y2h_homo.xml">Homo sapiens</OPTION>
	<OPTION VALUE="y2h_yeast.xml">Saccharomyces cerevisiae</OPTION>
</SELECT>

Be aware that the java script calls the function openFileQuite instead of openFile to allow VisANT to load the file in quite, otherwise, VisANT window will be brought to the foreground when a file is loaded.

Note: The detailed behavior of three VisANT APIs illustrated above are carried out by the the filter named "Filter the Interaction Levels", which is available under Filter menu in VisANT.

Advantage:

  1. Simple, powerful & flexible, no server/database is involved, pages can be host by any web server.

  2. Searching is fast because all interactions are loaded in memory

Disadvantage

  1. Can not support very large data set, especially for those that have multiple species, because long loading time will prevent smooth usage.

  2. Can not take the benefits of all server dependent functions, such as saving the network as high resolution graph etc.

 

Step 3:Creating A Server to Visualize the Interaction Database in VisANT

In case you have a large set of interaction data, or you want to use the all server-related functions in VisANT (such as on-line saving/loading/sharing etc.), it is suggested to have a server to support VisANT, just as the current VisANT server does. VisANT system uses three-tier architecture, therefore plug VisANT to another server will be pretty easy: simply direct VisANT to the new server by changing the applet parameter:

<PARAM NAME=DAIurl Value = 'http://bioinfo.bu.edu:8080/vserver/vproxy?'>

Above parameter tells VisANT the server address is http://bioinfo.bu.edu:8080/vserver/vproxy?, which is the demo server created for this tutorial.

VisANT communicates with the server through URL API, such as the one shown below:

http://visant.bu.edu:8080/test/DAI?command=alias&orf=YMR047C&species=sce&src=YMR047C

where command represents the action the server need to take; orf is the default name of the node and species represents the current organism; src is the original name of the node and in general should be same as the orf, but may be different in case the name of the node is case sensitive while in the database it is case insensitive. Although VIsANT uses many different URL APIs, there are at most four APIs that is directly related with the visualization of interaction data. For the rest of the server APIs, we have developed a forward function to forward the request to the VisANT server in the demo server as detail below.

This tutorial requires user to have a little knowledge of java servlet and tomcat web server that is free to download, and we assume that the user already have tomcat installed. This requirement is purely because the demo server we developed is written in java and tested on tomcat server. Users can however user any web server and CGI-program language.

  1. Download vserver.zip and extract to the zip file to the webapps directory of tomcat. A new directory named vserver will be created as shown below:

  1. Start tomcat server and your VisANT server is ready to go now. To test the new server, replace bioinfo.bu.edu of the following URL with your server's IP address, and open it in the URL:

http://bioinfo.bu.edu:8080/vserver/vproxy?command=unilink&orf=TEST&species=sce

You should get results similar to following:

04010 04020 ##TEST O_N,G protein beta subunit; forms a heterotrimer with Gpa1p and Ste18p to dampen signaling desc,854387loc,Test_1 Common Name,Test_2 Common Name,TEST ORF@@

TEST*YPL038W:M0064:-1::ww0.168,TEST*YPL038W:M0036::,TEST*YER069W:M0046:0:10688190^11283351^8417317:
ww0.634,TEST*YFR030W:M0042:-1:

  1. Download serve_demo.zip and extract to the ROOT directory of tomcat (see above figure for tomcat directory). A new directory named server_demo will be created. Open header.htm and replace bioinfo.bu.edu of the applet's parameter DAIurl with your server's IP address or domain address. 

<PARAM NAME=DAIurl Value = 'http://bioinfo.bu.edu:8080/vserver/vproxy?'>
<PARAM NAME=startup Value = 'empty.xml'>

Be aware that to speedup the loading process, we use an empty network as the startup file for VisANT.

Open the URL similar to the following (replace bioinfo.bu.edu of the following URL with your server's IP address), and you will get a page similar to VisANT's home page:

Replace P53 with test, and click the search button, you will get search result similar to the following:

.

Note: This sample server shown above may not always available. Email us if the sample server is down. Except for those genes start with "test", VisANT shown in above page shall work exactly same as the one presented in VisANT home page, including user account management.

  1. Customize your server to query your own interaction. The sample server shown above only use one java class: VisANTProxy.java. It is strongly suggested that you start with this file when building up your own servlet/CGI program. There are three APIs you may want to customize in order to visualize your own interaction data

getLinks(): this function returns the interactions of a given protein. It expects the name of the protein is same as the identification used in the interaction data set. This function call nameNormalize() function to get all identifications of the protein.

nameNormalize(): this function returns identification of a given protein name/id etc.

lookForLinks(): This functions first searches for the identification used in the interaction set for a given protein name/ids, it then carry out the exact same function as getLinks() using the searched identifcation.

Please follow the instruction in the source code of VisANTProxy.java to format the returned data for VisANT to work appropriately.