Metabolite structure visualization in Pvjs

[egonw]

Background

Biological pathways provide intuitive diagrams of the interactions underlying biological processes. For example, WikiPathways has an overview of biochemical reactions showing reactions between metabolites. WikiPathways is an open, collaborative platform dedicated to drawing and sharing biological pathways. These pathways often use boxes to represent metabolites, but often we like to look at the chemical structure (2D diagram) of the metabolites too. This is currently not possible without going to another database.

Goal

The goal of this project is develop a Pvjs extension that takes Scalable Vector Graphics (SVG) from a remote service (possibly CDK Depict) and visualize this in a popup window while hovering over metabolites or so. This service takes SMILES as an input structure which can be retrieved from, for example, Wikidata. The following depiction is a PNG screenshot of this SVG (be sure to visit this URL and view the source of the returned file).

Technologies

WikiPathways, JavaScript required. Your code will need to make asynchronous web calls to retrieve a SMILES string for a metabolite, and use this to retrieve the SVG from a remote server.

Difficulty level: 2

Prior experience with asynchronous web calls and GUIs in JS is highly recommended. Familiarity with molecular structures is a plus.

Potential Mentors

Egon Willighagen, Anders Riutta

Contact

Egon Willighagen, Anders Riutta

[baoilleach]

Have you considered compiling CDK to JS?

[egonw]

@baoilleach yes, I have many times... that would be a great project idea in itself... some thoughts:

• it likely needs trimming of the set of core interfaces (which is mostly done now)
• it may need further modularization to ensure the JS libs don't get too large
• I hope we don't run into issues with having API methods to return Object, like with Jmol(JS)

[jacobwindsor]

Hi, I am interested in taking part in this project but would like to get a little more information on what and how the extension would work. Below I have written a little jQuery flavored pseudo code to represent how I have understood the flow of the extension

$("metabolite_box").hover( function() {
    $.ajax({
        url: "some_external_service",
        data: "SMILE_representation_of_metabolite"
     }).done(function() {
         # Show pop up window of the returned SVG graphic
     });
});

Please let me know if I have misunderstood something.

I am struggling to understand how CDK depict works. Although I've seen the github repo, I am confused as to whether there is already a public API to make calls to or is it something that would have to be made?

[egonw]

Hi @jacobwindsor, sorry for the late reply. The AJAX call can be easier, at least for CDKDepict: the URL can just include the SMILES (encoded), e.g.: http://cdkdepict-openchem.rhcloud.com/depict/bow/svg?smi=CN1C%3DNC2%3DC1C(%3DO)N(C(%3DO)N2C)C

But that does not change your call that much. That would return a SVG document which you an insert in the right place in the popup HTML. So, the API is really basic.

@johnmay, do you have a description of the CDKDepict "API"?

[jacobwindsor]

Hi, @egonw thanks for the response. Could you possibly give me some more information on the application procedure for the project? In terms of the motivation letter

[johnmay]

Sorry meant to list this, depict API, can be post or get:

/depict/{style}/{fmt}/?key=val

Where path variables style and fmt can be:

{style} := bow | cow | wob | cob | nob (black-on-white, color-on-white, etc)
{fmt} := svg | png | pdf | gif

Params

smi (string), SMILES String of molfile (POST only)
zoom (float), scaling factor for depction
w (int), width - in PX for raster formats and MM for vector
h (int), height - in PX for raster formats and MM for vector
showTitle (bool) - display molecule title
annotation (string) - add atom numbers or maps to depiction
sma (string) - highlight SMARTS pattern
anon (string) - display '*' as unlabelled carbons

It's implemented in Spring so easy to change if needed, heres the method
signature.

[jacobwindsor]

Thanks @johnmay. Seems simple enough!

[khanspers]

@jacobwindsor You can find information and resources related to applying for GSoC here: http://nrnb.org/gsoc.html

[egonw]

@jacobwindsor for getting the SMILES, we can use the BridgeDb webservice in the first place:

For example, for HMDB00161 we can ask all attributes (SMILES, InChIKey, synomyms, and a bit more):

http://webservice.bridgedb.org/Human/attributes/Ch/HMDB00161

For the SMILES specific, we add the attribute name we want:

http://webservice.bridgedb.org/Human/attributes/Ch/HMDB00161?attrName=SMILES

[ariutta]

Applicants, you may want to review the other Pvjs ideas. Do you see any overlap or a better separation of concerns in terms of implementing the desired functionality? If so, don't feel constrained to a rigid interpretation of this idea. Feel free to use composition (putting together parts from any of the ideas) when drafting your proposal, as long as you keep the scope realistic for a summer project.

[khanspers]

Closing for GSoC 2018