Help creating html widget for Chemical Sketcher

[iainmwallace]

Hi all,

I would really appreciate any help/guidance you could provide on creating a html widget for a wonderful chemical sketcher application. I would love to be able to draw a chemical structure in my shiny app and return the smiles string which would allow me to use the structure in many wonderful ways.

The chemical sketcher is an open source tool from Peter Ertl that was originally written in Java but recently ported to JavaScript. (http://peter-ertl.com/jsme/JSME_2015-12-06/doc.html#javascript_install )

I have tried to follow the guidelines on how to set up my own widget, but as someone with no javascript experience, I am at loss on how to get started linking the javascript file to my htmlwidget. From the javascript instructions it looks straight forward to use the chemical sketcher, if I was able to figure out this first step. The minimal example is very short!

Thanks

Iain

[iainmwallace]

FYI, using this guide, http://rstudio.github.io/shiny/tutorial/#html-ui I have been able to re-create the minimal example that loads the sketcher using Shiny which means the javascript is working as expected.

The next step is try and package it up as a widget!

[timelyportfolio]

@iainmwallace if you can put it up on Github, I could possibly help you package it up. I looked and couldn't find it in your profile.

[iainmwallace]

@timelyportfolio If you could, that would be wonderful!

The files are located here: https://github.com/iainmwallace/chemical_sketcher

Based on http://rstudio.github.io/shiny/tutorial/#html-ui

index.html should be stored in www directory Also needs "jsme" directory in the zip file JSME 2015-12-06 downloaded from http://peter-ertl.com/jsme/ in the www directory

[iainmwallace]

Hi all,

After playing around with this, I think this alternative chemical sketcher might be more appropriate to wrap as a htmlwidget, https://web.chemdoodle.com/installation/download/ It has a similar type of dependency as the other htmlwidgets <link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css"> <script type="text/javascript" src="[path]/ChemDoodleWeb.js">

I have posted my attempt at porting this library to htmlwidgets following the examples to this github repository https://github.com/iainmwallace/chemdoodle

That being said, I am at loss of how to modify the htmlwidget template files so that R can talk to this javascript library.

If @timelyportfolio, or anyone else interested, could have a look and suggest how to bundle it properly I would really appreciate it,

Thanks a million,

Iain

[timelyportfolio]

@iainmwallace happy to help but I just remembered #123 in which @zachcp worked through the initial stages of a chemdoodle htmlwidget. Let's see if he has any ideas, or if we can team up.

[zachcp]

hi guys,

@iainmwallace , I wrote basic Chemdoodle HTMLWidget a while back. The basic idea is that I was using rcdk to handle parsing and structure determination and then simply passing a JSON representation of the molecule to the HTMLwidget. You can check out the code at zachcp/chemdoodle. However running it right now is throwing errors which is prabably due to changes in the rcdk/CDK code. I'll try to take a look at it this week. In any event, unless chemdoodle has made major changes, you will need a server-side chemistry library. At the time CDK was the only one I saw that was ready to use.

zach cp

[zachcp]

FYI: If you install version rcdk (== 3.3.0) and rcdklibs (== 1.5.8.3) the basic viewer works. It might be worth revisiting this widget in the face of the nice reactive/interactive developments in shiny/htmlwidgets/gadgets.

[iainmwallace]

That is great! Thanks, I don't know how I missed that repo.

Just tried it, and the viewer works which is brilliant!

I think there is so much one could with this library and Shiny.

What I would like to be able to do with the library is to use the sketcher functionality, so that a user can draw a structure and then a smiles string can be returned to the shiny app. I will then use the rcdk library (or something similar) to compare that structure to a database of structures or predict a property of the structure based on a pre-built model.

Thanks again, very excited.

Iain

Cheers,

Iain

On Sun, Mar 13, 2016 at 10:53 PM, zachcp notifications@github.com wrote:

FYI: If you install version rcdk (== 3.3.0) and rcdklibs (== 1.5.8.3) the basic viewer works. It might be worth revisiting this widget in the face of the nice reactive/interactive developments in shiny/htmlwidgets/gadgets.

— Reply to this email directly or view it on GitHub https://github.com/ramnathv/htmlwidgets/issues/192#issuecomment-196115718 .

[iainmwallace]

It is the SketchCanvas that I am planning to use which is just an additional canvas from what @zachcp https://github.com/zachcp built thus far.

(https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/ ) new ChemDoodle.SketcherCanvas(name, width, height, options)

On Sun, Mar 13, 2016 at 11:09 PM, Iain Wallace iain.m.wallace@gmail.com wrote:

That is great! Thanks, I don't know how I missed that repo.

Just tried it, and the viewer works which is brilliant!

I think there is so much one could with this library and Shiny.

What I would like to be able to do with the library is to use the sketcher functionality, so that a user can draw a structure and then a smiles string can be returned to the shiny app. I will then use the rcdk library (or something similar) to compare that structure to a database of structures or predict a property of the structure based on a pre-built model.

Thanks again, very excited.

Iain

Cheers,

Iain

On Sun, Mar 13, 2016 at 10:53 PM, zachcp notifications@github.com wrote:

FYI: If you install version rcdk (== 3.3.0) and rcdklibs (== 1.5.8.3) the basic viewer works. It might be worth revisiting this widget in the face of the nice reactive/interactive developments in shiny/htmlwidgets/gadgets.

— Reply to this email directly or view it on GitHub https://github.com/ramnathv/htmlwidgets/issues/192#issuecomment-196115718 .

[iainmwallace]

Thanks @timelyportfolio! That repo is a really great help

On Sun, Mar 13, 2016 at 10:07 PM, timelyportfolio notifications@github.com wrote:

@iainmwallace https://github.com/iainmwallace happy to help but I just remembered #123 https://github.com/ramnathv/htmlwidgets/issues/123 in which @zachcp https://github.com/zachcp worked through the initial stages of a chemdoodle htmlwidget. Let's see if he has any ideas, or if we can team up.

— Reply to this email directly or view it on GitHub https://github.com/ramnathv/htmlwidgets/issues/192#issuecomment-196106856 .

[zachcp]

@iainmwallace

this page has some info on obtaining the molecule from a sketcher as JSON. https://web.chemdoodle.com/docs/chemdoodle-json-format/

You will need to be able to consume that and pass it into rCDK. I pencilled out a basic sketcher widget in my repo but there are still the following issues:

1. the toolbar is not rendered in the widget. We need to figure out how this is loaded and make sure they are within the HTMLwidget div.
2. there is no communication yet for consuming the JSON into R.

I can probably work on this a little bit here and there over the next week.

zach cp

[iainmwallace]

@zachcp, nice! just tried your updated sketcher component. It installs, but as you pointed out the toolbar isn't showing up.

I am hoping that we can consume the data from chemdoodle into R after using this type of construct

rCDK should be able to handle the MDL mol file returned (once we convert it from the JSON format), and convert it to a smiles string if desired.

On Mon, Mar 14, 2016 at 12:51 PM, zachcp notifications@github.com wrote:

@iainmwallace https://github.com/iainmwallace

this page has some info on obtaining the molecule from a sketcher as JSON. https://web.chemdoodle.com/docs/chemdoodle-json-format/

You will need to be able to consume that and pass it into rCDK. I pencilled out a basic sketcher widget in my repo but there are still the following issues:

1.

the toolbar is not rendered in the widget. We need to figure out how this is loaded and make sure they are within the HTMLwidget div. 2.

there is no communication yet for consuming the JSON into R.

I can probably work on this a little bit here and there over the next week.

zach cp

— Reply to this email directly or view it on GitHub https://github.com/ramnathv/htmlwidgets/issues/192#issuecomment-196407771 .

[zachcp]

@iainmwallace the writeMol function calls to the ChemDoodle server, I believe, as do the SMILES functions etc. There are limits to using that server so I would recommend a more general solution of handling the JSON and using rCDK as your backend.

I don't know why the toolbar isn't working but I have three theories:

1. incorrect loading of IMG files. (fixed the css/image problem so this isn't it)
2. DOM manipulation of the toolbar drawing is at odds with the HTMLwidget container hierarchy. Maybe we need to add the canvas as a sub-div to allow the toolbar divs to live under the htmlwidget container. Or something like that.
3. I didn't call the toolbar correctly. (I've never used the sketcher/toolbar before). It looks like there is also an API for drawing the toolbar directly and we could try that.

If you want to give it a go just fork the repo and have at it. I will try to keep at it on my spare time.

zach cp

[iainmwallace]

@zachcp, I would agree that we shouldn't rely on the server.

However, according to the docs (not sure if it is true) the MDL format is natively supported by the chemdoodle web components rather than the server which would be really useful if true.

From https://web.chemdoodle.com/tutorial/retrieving-data/ The ChemDoodle Web Components library natively supports the MDL MOLFile format. Additional file support is available via iChemLabs cloud services ( iChemLabs cloud services support all 24 popular chemical formats handled by ChemDoodle). Just use the ChemDoodle.writeMOL() function, as shown in the following example:

I will certainly try and fork the repo, but javascript and htmlwidgets are very new to me!

On Mon, Mar 14, 2016 at 1:59 PM, zachcp notifications@github.com wrote:

@iainmwallace https://github.com/iainmwallace the writeMol function calls to the ChemDoodle server, I believe, as do the SMILES functions etc. There are limits to using that server so I would recommend a more general solution of handling the JSON and using rCDK as your backend.

I don't know why the toolbar isn't working but I have three theories:

1. incorrect loading of IMG files. (fixed the css/image problem so this isn't it)
2. DOM manipulation of the toolbar drawing is at odds with the HTMLwidget container hierarchy. Maybe we need to add the canvas as a sub-div to allow the toolbar divs to live under the htmlwidget container. Or something like that.
3. I didn't call the toolbar correctly. (I've never used the sketcher/toolbar before). It looks like there is also an API for drawing the toolbar directly and we could try that.

If you want to give it a go just fork the repo and have at it. I will try to keep at it on my spare time.

zach cp

— Reply to this email directly or view it on GitHub https://github.com/ramnathv/htmlwidgets/issues/192#issuecomment-196443038 .

[timelyportfolio]

@zachcp and @iainmwallace, I thought it might be better to close the issue here and move to a new issue in the chemdoodle repo, since this is rapidly moving to non-htmlwidgets specific items. Hope that is ok.

[timelyportfolio]

See https://github.com/zachcp/chemdoodle/issues/1