Skip to content

Instantly share code, notes, and snippets.

@churnikov

churnikov/README.md

Last active March 7, 2024 12:01
Show Gist options
  • Save churnikov/b38940f190efea1f6f13e3f29204ff88 to your computer and use it in GitHub Desktop.
Save churnikov/b38940f190efea1f6f13e3f29204ff88 to your computer and use it in GitHub Desktop.
Download ZIP
Ketcher and PyScript: draw molecules and use them in python
Raw
README.md

How to use molecule drawing software Ketcher and PyScript together

This small example shows how to use Ketcher and PyScript.

The process is the following: Ketcher is a JavaScript app, that has js API. PyScript allows us call this api inside of browser.

In order to setup Ketcher and PyScript on your local machine do the following:

  1. Create a new folder. E.g. pyketch;
  2. cd into it;
  3. Download and unpack Ketcher standalone in this folder. You should get the following folder structure: 
    pyketch
└── ketcher
   ├── apple-touch-icon.png
   ├── asset-manifest.json
   ├── favicon-16x16.png
   ├── favicon-32x32.png
   ├── favicon.ico
   ├── index.html
   ├── logo.svg
   ├── manifest.json
   ├── robots.txt
   ├── static
   │   ├── css
   │   │   └── main.8e693d51.css
   │   ├── js
   │   │   ├── main.22c72ca0.js
   │   │   └── main.22c72ca0.js.LICENSE.txt
   │   └── media
   │       └── overlay.8faf238632c16c841197.svg
   └── templates
       ├── fg.sdf
       ├── library.sdf
       └── library.svg
  4. Now download index.html file from this gist into pyketch folder;
  5. Inside pyketch folder run the following command (you should have python installed): 
    python -m http.server 8000
    This should be done, because ketcher and pyscript must run on the same page.
  6. In your browser go to the http://localhost:8000

You should see the following:

image

Follow this link to try all this out in browser.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PyScript Mol demo</title>
<link rel="stylesheet" href="assets/styles/main.css">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<script src="https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js"></script>
<!-- Instantiate the WASM module. The inline script below could live elsewhere inside your application code. -->
</head>
<script>
initRDKitModule().then(function (instance) {
RDKitModule = instance;
console.log("version: " + RDKitModule.version());
});
</script>
<body>
<h1> PyScript demo with Ketcher and Rdkit.js</h1>
<h2> Ketcher window</h2>
<iframe id="ifKetcher" src="https://churnikov.github.io/demo/pyketch/ketcher/index.html" width="800" height="600"></iframe>
<!-- <iframe id="ifKetcher" src="ketcher/index.html" width="800" height="600"></iframe> -->
<script src="assets/scripts/main.js"></script>
<h2> Access JavaScript elements from python</h2>
<p>
Run this cell to add molecule to the drawing board and get its smiles back
To run cell, click on it and press Shift+Enter.
<py-repl>
import js
import asyncio
async def get_smiles():
ketcherFrame = js.document.getElementById('ifKetcher')
ketcher = ketcherFrame.contentWindow.ketcher
await ketcher.setMolecule("CN1C=NC2=C1C(=O)N(C(=O)N2C)C")
return await ketcher.getSmiles()
asyncio.ensure_future(get_smiles())
</py-repl>
<py-repl>
smiles = asyncio.ensure_future(get_smiles())
smiles
</py-repl>
</p>
<p>
Run this cell to convert ketcher smiles to rdkit smiles with rdkit.js
<py-repl>
mol = js.RDKitModule.get_mol(smiles.result())
mol.get_smiles()
</py-repl>
</p>
<p>
There are many more <a href="https://lifescience.opensource.epam.com/ketcher/index.html">Ketcher</a> and <a href="https://www.rdkitjs.com">Rdkit.js</a> javascript methods. Refer to their documentation for more info:
<ul>
<li><a href="https://lifescience.opensource.epam.com/ketcher/developers-manual.html">Ketcher JS docs</a></li>
<li><a href="https://www.rdkitjs.com">Rdkit.js docs</a></li>
</ul>
</p>
<h2>How it works</h2>
<p>
You can <a href="https://engineering.anaconda.com/2022/04/welcome-pyscript.html">read anacondas announcement </a> on what is PyScript. Essentially it's python that runs in the browser. Important that it's not python translated to javascript, but it's actual python compiled for browser.
</p>
<p>
PyScript was created in such a way that you can easily use python functions in JavaScript and parts of JavaScript in python.
</p>
<p>
In <a href="https://gist.github.com/churnikov/b38940f190efea1f6f13e3f29204ff88">this gist</a> you can find how to set up ketcher and PyScript for local development.
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment