1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/sakura.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cheminformatics on the Web (2021)</title>
<meta name="og:site_name" content="Navan Chauhan" />
<link rel="canonical" href="https://web.navan.dev/" />
<meta name="twitter:url" content="https://web.navan.dev/" />
<meta name="og:url" content="https://web.navan.dev/" />
<meta name="twitter:title" content="Cheminformatics on the Web (2021)" />
<meta name="og:title" content="Cheminformatics on the Web (2021)" />
<meta name="description" content="Summarising Cheminformatics on the web in 2021." />
<meta name="twitter:description" content="Summarising Cheminformatics on the web in 2021." />
<meta name="og:description" content="Summarising Cheminformatics on the web in 2021." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/images/favicon.png" type="image/png" />
<link rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan" />
<meta name="twitter:image" content="/images/opengraph/posts/2021-06-26-Cheminformatics-On-The-Web-2021.png" />
<meta name="og:image" content="/images/opengraph/posts/2021-06-26-Cheminformatics-On-The-Web-2021.png" />
<link rel="manifest" href="manifest.json" />
<meta name="google-site-verification" content="LVeSZxz-QskhbEjHxOi7-BM5dDxTg53x2TwrjFxfL0k" />
<script data-goatcounter="https://navanchauhan.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
<script defer data-domain="web.navan.dev" src="https://plausible.io/js/plausible.js"></script>
<script defer data-domain="web.navan.dev" src="https://plausible.navan.dev/js/plausible.js"></script>
<!-- Begin Inspectlet Asynchronous Code. Only for some testing, will be removed soon -->
<script type="text/javascript">
(function() {
window.__insp = window.__insp || [];
__insp.push(['wid', 1038401947]);
var ldinsp = function(){
if(typeof window.__inspld != "undefined") return; window.__inspld = 1; var insp = document.createElement('script'); insp.type = 'text/javascript'; insp.async = true; insp.id = "inspsync"; insp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cdn.inspectlet.com/inspectlet.js?wid=1038401947&r=' + Math.floor(new Date().getTime()/3600000); var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(insp, x); };
setTimeout(ldinsp, 0);
})();
</script>
<!-- End Inspectlet Asynchronous Code -->
</head>
<body>
<nav style="display: block;">
|
<a href="/">home</a> |
<a href="/about/">about/links</a> |
<a href="/posts/">posts</a> |
<a href="/publications/">publications</a> |
<a href="/repo/">iOS repo</a> |
<a href="/feed.rss">RSS Feed</a> |
</nav>
<main>
<h1>Cheminformatics on the Web (2021)</h1>
<p>Here, I have compiled a list of some libraries and possible ideas.
I, personally, like static websites which don't require a server side application and can be hosted on platforms like GitHub Pages.
Or, just by opening the HTML file and running it in your browser.
WebAssembly (Wasm) has made running code written for other platforms on the web relatively easier.
Combine Wasm with some pure JavaScript libraries, and you get a platform to quickly amp up your speed in some common tasks.</p>
<h2>RDKit</h2>
<p>RDKit bundles a minimal JavaScript Wrapper in their core RDKit suite.
This is perfect for generating 2D Figures (HTML5 Canva/SVGs), Canonical SMILES, Descriptors e.t.c</p>
<h3>Substructure Matching</h3>
<p>This can be used to flag undesirable functional groups in a given compound.
Create a simple key:value pairs of name:SMARTS and use it to highlight substructure matches.
Thus, something like PostEra's Medicinal Chemistry Alert can be done with RDKit-JS alone.</p>
<p><img src="/assets/posts/cheminformatics-web/postera-demo.png" alt="PostEra Demo" /></p>
<h3>Computing Properties</h3>
<p>This is useful to calculate basic properties of a given compound.</p>
<p><img src="/assets/posts/cheminformatics-web/rdkit-demo.png" alt="RDKit-JS Demo" /></p>
<h2>Webina - Molecular Docking</h2>
<p>Webina is a JavaScript/Wasm library that runs AutoDock Vina, which can enable you to run Molecular Docking straight in the browser itself.</p>
<p><img src="/assets/posts/cheminformatics-web/webina-demo.png" alt="Webina Demo" /></p>
<p>Obviously, it takes a few hits in the time to complete the docking because the code is transpiled from C++ to Wasm.
But, the only major drawback (for now) is that it uses SharedArrayBuffer.
Due to Spectre, this feature was disabled on all browsers.
Currently, only Chromium-based and Firefox browsers have reimplemented and enabled it.
Hopefully, soon, this will be again supported by all major browsers.</p>
<h2>Machine Learning</h2>
<p>Frameworks have now evolved enough to allow exporting models to be able to run them through JavaScript/Wasm backend.
An example task can be <strong>NER</strong> or Named-entity Recognition.
It can be used to extract compounds or diseases from a large blob of text and then matched with external references.
Another example is target-prediction right in the browser: <a rel="noopener" target="_blank" href="http://chembl.blogspot.com/2021/03/target-predictions-in-browser-with.html">CHEMBL - Target Prediction in Browser</a></p>
<p>CHEMBL Group is first training the model using PyTorch (A Python ML Library), then converting it to the ONNX runtime.
A model like this can be directly implemented in TensorFlow, and then exported to be able to run with TensorFlow.js</p>
<h2>Cheminfo-to-web</h2>
<p>The project aims to port cheminformatics libraries into JavaScript via Emscripten.
They have ported InChI, Indigo, OpenBabel, and OpenMD</p>
<h3>Kekule.js</h3>
<p>It is written by @partridgejiang, who is behind the Cheminfo-to-web project</p>
<blockquote>
<p>It is molecule-centric, focusing on providing the ability to represent, draw, edit, compare and search molecule structures on web browsers.</p>
</blockquote>
<h2>Browser Extensions</h2>
<p>The previous machine learning examples can be packaged as browser-extensions to perform tasks on the article you are reading.
With iOS 15 bringing WebExtensions to iOS/iPadOS, the same browser extension source code can be now used on Desktop and Mobile Phones.
You can quickly create an extension to convert PDB codes into links to RCSB, highlight SMILES, highlight output of NER models, e.t.c</p>
<h2>Conclusion</h2>
<p>I have not even touched all the bases of cheminformatics for the web here.
There is still a lot more to unpack.
Hopefully, this encourages you to explore the world of cheminformatics on the web.</p>
<h2>Further Reading</h2>
<p><a rel="noopener" target="_blank" href="https://blueobelisk.github.io/greasemonkey.html">Blueobelisk Userscripts</a></p>
<p><a rel="noopener" target="_blank" href="https://depth-first.com/articles/2019/05/01/javascript-for-cheminformatics-part-2/">JavaScript for Cheminformatics</a></p>
<p><a rel="noopener" target="_blank" href="https://unpkg.com/@rdkit/rdkit@2021.3.3/Code/MinimalLib/dist/GettingStartedInJS.html">Getting Started with RDKit-JS</a></p>
<blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote>
<script data-isso="//comments.navan.dev/"
src="//comments.navan.dev/js/embed.min.js"></script>
<section id="isso-thread">
<noscript>Javascript needs to be activated to view comments.</noscript>
</section>
</main>
<script src="assets/manup.min.js"></script>
<script src="/pwabuilder-sw-register.js"></script>
</body>
</html>
|
