Viewing SMILES as Chemical Structures on the WebPortal

#1

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!

0 Likes

#2

Hi @michazeidan,

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

image

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

0 Likes

#3

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

0 Likes

#4

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

1 Like

#5

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

1 Like

#6

Hi Mike,

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

Best,
Martyna

0 Likes

#7

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

1 Like

#8

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

2 Likes

#9

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!

1 Like

#10

@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

0 Likes

#11

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…?)

0 Likes

#12

@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

1 Like

#13

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…?

0 Likes

#14

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:

image

Cheers

Sam

3 Likes