Question: How to embed Jmol and Cytoscape in a webpage?
0
gravatar for stackf01
4.8 years ago by
stackf0120
Mauritius
stackf0120 wrote:

Hello there.. I am intending to build a web application that will retrieve data from PPI databases, Pfam, GO, UniProt and PDB. All these will be integrated on a single database and web application will be connected to that database. Hence, when I want to query a specific protein, I want to get the PPI network representation of that protein and all other biological information from these databases.
​I intend to use Jmol to view the 3D structure of the protein and Cytoscape to display the protein network interactions. My question is how do I embed Jmol and Cytoscape on my web page ? Note that I'll be using PHP for server-side processing.
 

 

cytoscape and jmol • 2.4k views
ADD COMMENTlink modified 4.8 years ago by Jean-Karim Heriche22k • written 4.8 years ago by stackf0120

These are actually two questions... normally you would split them up.

ADD REPLYlink written 4.8 years ago by Egon Willighagen5.2k

You can choose to answer one of them if you are in a position to do so :)
Thanks..

ADD REPLYlink written 4.8 years ago by stackf0120
2
gravatar for geek_y
4.8 years ago by
geek_y11k
Barcelona
geek_y11k wrote:

Here is simple PHP script that loads a pdb file and displays them. The pdb file should be given as an argument in the where it says:

jmolApplet(800, "load uploads/<?php echo pdb_ID()?>.pdb;color background white;set frank off; select protein; hbonds off; spin off; wireframe off; spacefill off; trace off; set ambient 40; set specpower 40; slab off; ribbons off; cartoons ;color structure; label off; monitor off;");

The load function takes a pdb file as an argument. In my case its located in 'uploads' folder. You can customise it by turning off many futures that are not necessary. And you could add buttons of your choice as well.

jmol/Jmol.js is where your jmol folder lies.

A working version of my webpage exists at www.pdbparser.com . I have developed it when I started learning programming, so it may have many bugs in it. For sure it works with example file given there.

 

ADD COMMENTlink modified 4.8 years ago • written 4.8 years ago by geek_y11k

Hmm.. seems interesting !

Did you embed Cytoscape as well ? Did you integrate information from other resources as well ?

Do you have a step by step tutorial on how you managed to achieve this ?​

ADD REPLYlink written 4.8 years ago by stackf0120
2
gravatar for Jean-Karim Heriche
4.8 years ago by
EMBL Heidelberg, Germany
Jean-Karim Heriche22k wrote:

For Cytoscape, I suggest you use cytoscape.js.

ADD COMMENTlink written 4.8 years ago by Jean-Karim Heriche22k

Do you have an idea how to embed Cytoscape in php script as well ?

ADD REPLYlink written 4.8 years ago by stackf0120

I actually used the older Flash-based Cytoscape Web. Since cytoscape.js is written in javascript, you use it like any other javascript library:

<head>
<script src="js/cytoscape.js"></script>
</head>
<body>
<script>

// Create a cytoscape instance
var cytoscape = cytoscape({
container: document.getElementById('cytoscape'),
elements: [ nodes: [/*nodes in JSON format*/], edges: [/*edges in JSON format*/]],
ready: function(event){},
// Other configuration parameters

});
</script>
</body>

You can export a network in a web page directly from Cytoscape 3. This may give you ideas. You can also just grab the network data in JSON format from the data subfolder that is exported when exporting as a web page. Also make sure to read the docs.

ADD REPLYlink modified 4.8 years ago • written 4.8 years ago by Jean-Karim Heriche22k

What if I have all PPI data integrated on a MySQL database and I want to retrieve them from the db, and display the network of the protein interactions? How can this be achieved ?

Also, when the network appear, can I click on the edges and the nodes to get information about the protein ?


Thanks

ADD REPLYlink written 4.8 years ago by stackf0120

You could populate the 'elements' array from your database using php and then output the HTML page. If you need this to be doen after page load, then use an AJAX request.

As for clicking nodes/edges, You can probably do something like

cytoscape.on('select','node', function(event) {});

If you don't know javascript, I suggest you spend some time learning it, especially if you're going to make interactive web pages.

ADD REPLYlink written 4.8 years ago by Jean-Karim Heriche22k

I think its mostly about JSON that you are speaking of ? Right ?  Meaning Cytoscape.js comprises JSON ?

ADD REPLYlink written 4.8 years ago by stackf0120

I am not sure what you mean. JSON is a data format (JavaScript Object Notation). Cytoscape.js needs its graph data in this format. What I meant is that you need to convert your MySQL output into the JSON format that cytoscape.js expects. How you then pass it to the cytoscape instance running in your web page depends on how you want/need to do it. The first option I mentioned was to write the HTML page server-side so that it already contains the data when it is served. The other option was for the case when you need to get the graph data after the page has already been sent to the client.

ADD REPLYlink written 4.8 years ago by Jean-Karim Heriche22k
Hmm.. What I've understood is that your first option does not communicate with any database. But your second option re​trieve data from a database ?


Note that by data - I refer to PPI data extracted from BioGRID..
ADD REPLYlink written 4.8 years ago by stackf0120

In both cases, you first need to get the data from the database and convert it to JSON.

ADD REPLYlink written 4.8 years ago by Jean-Karim Heriche22k
Please log in to add an answer.

Help
Access

Use of this site constitutes acceptance of our User Agreement and Privacy Policy.
Powered by Biostar version 2.3.0
Traffic: 1068 users visited in the last hour