Question

How to embed Jmol and Cytoscape in a webpage?

0

Entering edit mode

9.2 years ago

stackf01 ▴ 20

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 Jmol • 4.4k views

ADD COMMENT • link updated 2.2 years ago by Ram 44k • written 9.2 years ago by stackf01 ▴ 20

0

Entering edit mode

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

ADD REPLY • link 9.2 years ago by Egon Willighagen 5.4k

0

Entering edit mode

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

ADD REPLY • link 9.2 years ago by stackf01 ▴ 20

Ram · Answer 1 · 2015-09-24

Here is a 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.

Ram · Answer 2 · 2015-09-24

2

Entering edit mode

9.2 years ago

Jean-Karim Heriche 27k

For Cytoscape, I suggest you use cytoscape.js.

ADD COMMENT • link updated 2.2 years ago by Ram 44k • written 9.2 years ago by Jean-Karim Heriche 27k

0

Entering edit mode

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

ADD REPLY • link 9.2 years ago by stackf01 ▴ 20

0

Entering edit mode

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 REPLY • link 9.2 years ago by Jean-Karim Heriche 27k

0

Entering edit mode

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 REPLY • link updated 2.2 years ago by Ram 44k • written 9.2 years ago by stackf01 ▴ 20

0

Entering edit mode

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 REPLY • link 9.2 years ago by Jean-Karim Heriche 27k

0

Entering edit mode

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

ADD REPLY • link updated 2.2 years ago by Ram 44k • written 9.2 years ago by stackf01 ▴ 20

0

Entering edit mode

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 REPLY • link 9.2 years ago by Jean-Karim Heriche 27k

0

Entering edit mode

Hmm.. What I've understood is that your first option does not communicate with any database. But your second option retrieve data from a database?

Note that by data - I refer to PPI data extracted from BioGRID..

ADD REPLY • link updated 2.2 years ago by Ram 44k • written 9.2 years ago by stackf01 ▴ 20

0

Entering edit mode

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

ADD REPLY • link 9.2 years ago by Jean-Karim Heriche 27k