Viewing SMILES as Chemical Structures on the WebPortal

michazeidan · September 27, 2019, 9:36am

Hi all,

Does anyone know of a way to enable the viewing of SMILES strings as molecular structures on the WebPortal? Is there a Chemical Cartridge or molecule structure renderer that can be used for this purpose?
I’ve tried converting the structures to images first for viewing on the WebPortal but due to the large number of structures that need to be viewed this takes a long time to convert and is slow to view on the webportal…

Thanks in advance for your help!

Martyna · September 27, 2019, 11:07am

Hi @michazeidan,

So basically to create images from smiles you need three nodes:

Am I right that you know how to create images based on smiles to show in the WebPortal, but the issue is the performance as it takes a while for long lists for the renderer to image node to create that images?

Unfortunately the image renderer is not streamable, so there is currently no other way.

How many compounds are you trying to show in the WebPortal?

Best,
Martyna

michazeidan · September 27, 2019, 11:28am

Hi Martyna,

Thanks for getting back to me.

Yes you are right that I know how to create images. We’re dealling with large tables containing thousands of structures each that users wish to scroll down. The time it takes to render thousands of images, the file size of tables containing thousands of such rendered images and the speed of viewing them on the webportal are all issues.

On the KNIME Desktop application such large tables containing throusands of SDF of Smiles structures can be ‘understood’ by the software which provides a view of the structure for each respective smiles and the table is fast to navigate around - i’m after the same functionality on the WebPortal if possible. I wondered whether there is some chemistry cartridge or the like that could facilitate that, or maybe there is another solution?

Thanks again,

Mike

Martyna · September 30, 2019, 9:49am

Hi Mike,

I agree with you that this takes long while having thousands of structures. One way would be to send the user back to refine the search options in order to get a smaller amount of compounds. I know this is not perfect but works for some use cases.

The thing is the Table and Tile View which you use for the WebPortal are Java Script based and what you see in the output of the output port data table is JAVA based. What works in one language does not always work in the other.
We have it already on our list but I can’t say anything specific about timelines.
I will let you know if something is done.

Sorry for not having a solution or better news!

Best,
Martyna

michazeidan · September 30, 2019, 12:29pm

Hi Martyna,

Thanks for your message. Understood. Please keep me posted on developements.
In the meatime if you know of any other solution like purchasing a third party renderer that will allow for SMILES or SDFS to be shown as chemicals structures on the WebPortal please let me know.

Thanks again for your help,

Regards,

Mike

Martyna · September 30, 2019, 3:00pm

Hi Mike,

No, unfortunately I don’t know anything, but I would recommend asking there directly

Best,
Martyna

swebb · September 30, 2019, 3:10pm

I’m not a user of the web portal but presumably I could test this locally if I had some free time.

Would it be possible to deploy an instance of the CDK depiction web application:

https://www.simolecule.com/cdkdepict/depict.html

Then have the javascript view render on the fly by making REST calls to this service which will return an SVG depiction of the structure? This may be a pain to set up though.

Cheers

Sam

arofab · October 1, 2019, 6:49am

Hi
it seems the SmilesDrawer Javascript library is capable to render SMILES: https://github.com/reymond-group/smilesDrawer.
Another library which can render molecules is Kekule.js: https://github.com/partridgejiang/Kekule.js

michazeidan · October 1, 2019, 7:24am

Hi Simon and Arofab,

Thank you both for your great comments and suggestions. These look really promising! I’m afraid my technical/IT skills are very limited and due to policy our IT would probably need to be involved with any installation on our system so i’ll pass these suggestions to them - are all these solutions free to use for commercial entities?
Perhaps this might be something that KNIME support could help us set up on our KNIME server…I’ll ask.

Thanks again - very much appreciated!

swebb · October 1, 2019, 9:01am

@arofab’s solution is better I wasn’t aware of any pure javascript renderers.

@michazeidan Do you just want to see the structures or do you need to be rendering them in the tile/table view?

Cheers

Sam

michazeidan · October 1, 2019, 12:16pm

Hi Simon,
As a minimum just seeing the structures would be great. but since large tables containing many structures sometimes have both very small and very large structures in adjacent rows, it would be very useful to enlarge/shrink the cell down to the best size for viewing any particular structures - just as you can do when viewing Knime tables within the Knime desktop application…
(i’m not sure what the oficial definition of ‘rendering’ is…?)

Martyna · October 1, 2019, 12:40pm

@michazeidan did you try to use the Parallel Chunk Loop? It splits the data set into chunks and processes in parallel.
I quickly tested with a smaller data set and already having 500 compounds made a difference:

And please ignore the way how I’m multiplying data using the concatenate node, just had no bigger data set in place…

Best,
Martyna

michazeidan · October 1, 2019, 1:22pm

Hi Martyna,

Thanks for your suggestion. As the very large file containing lots of images will be slow to open and scroll through on the WebPortal I would prefer a solution like the one arofab is suggesting like using SmilesViewer to show smiles as structures on the fly. However, not being technical I have no idea of how to implement this… whould i need to enter some relevant code into a Generic JavaScript node? Or download something from the GitHub and install it somewhere…?

swebb · October 3, 2019, 12:04pm

The library does work for rendering smiles in a Generic JavaScript view

require.config({
    paths: {
        'SmilesDrawer': 'https://unpkg.com/smiles-drawer@1.0.10/dist/smiles-drawer.min'
    }
});

require(["SmilesDrawer",], function(lib1) {
	SmilesDrawer.apply();
});

var body = document.getElementsByTagName('body')[0];


var html = `
  <canvas data-smiles="CCCNC"></canvas>
  <canvas data-smiles="C1CCCCC1"></canvas>
`



body.innerHTML = html;

I’m not sure I’ll personally have the time to a structure matrix view in a Generic JavaScript view. It would be cool if this renderer could be incorporated into the Tile View or Generic JavaScript view so you can take advantage of the event listening, filtering, pagination etc.

If this isn’t likely to happen anytime soon I may try and see what I can come up with when I have some spare time.

EDIT:

And here is an example that will render sequentially smiles from a column of smiles strings from the table input. The example assumes the input table column is named smiles.

// Setup the SmilesDrawer library developed by the Reymond Group - https://github.com/reymond-group/smilesDrawer
require.config({
    paths: {
        'SmilesDrawer': 'https://unpkg.com/smiles-drawer@1.0.10/dist/smiles-drawer.min'
    }
});

require(["SmilesDrawer",], function(lib1) {
	SmilesDrawer.apply();
});

// This is where you set the column name
// ideally this would be a dialog option
// Shane the value if you have a different
// column name
var smilesColumnName = 'smiles';

/**
 * Find the column name - does table provide a method for doing this?  
 * Need ot locate the JavaScript API
 */
function indexOfColumnName(name) {
	var columnNames = knimeDataTable.getColumnNames();

	var index;

	for (var i = 0; i < columnNames.length; i++)
	{
		if(name === columnNames[i]) {
			index = i;
			break;
		}
	}

	return index;
}

var colIndex = indexOfColumnName(smilesColumnName);


var body = document.getElementsByTagName('body')[0];
var html = "<h1>Rendered smiles</h1>";

// Iterate through the data and add the renders
if (knimeDataTable) {
	
	html += '<div>';

	var data = knimeDataTable.getColumn(colIndex);

	for (var col of data) {
		html += `<canvas data-smiles="${col}"></canvas>`;
	}
	html += '</div>';
    
} else {
    html += '<div class="failure">No data available.</div>';
}
body.innerHTML = html;

This is what the input table looks like:

Cheers

Sam

chf42 · October 22, 2021, 7:39pm

Hi all,

Thank you for the insightful discussion there. I wonder if there are any updates on rendering a larger number of molecules via WebPortal after two years.

I found the RDKIT JavaScript version has released recently. rdkit/Code/MinimalLib at master · rdkit/rdkit · GitHub
Not sure if using RDKIT JS on WebPortal directly would be a potential solution.

Thanks,
Cheng

temesgen-dadi · October 28, 2021, 11:08am

Hi there,

Thanks for your question.

You can have a look at this example workflow on the KNIME Hub, to see how you could render molecules on the webportal.

In order to view images one has to use Renderer to Image – KNIME Hub first before passing it to any of the view nodes. That has a performance implications. Currently the existing JS views don’t have a way to use renderers directly.

I have checked with the RDKit people that RDKit JS wrappers won’t help with this, unfortunately.

Best,
Temesgen

chf42 · October 28, 2021, 1:02pm

Thanks Temesgen for your kind response! Hopefully, it will be a way to render Mol object directly in JS views some day in the future.

Thanks,
Cheng