rdkit / rdkit-js

A powerful cheminformatics and molecule rendering toolbelt for JavaScript, powered by RDKit .
https://rdkitjs.com
BSD 3-Clause "New" or "Revised" License
131 stars 35 forks source link

Add reactions drawing examples #123

Open MichelML opened 2 years ago

willfinnigan commented 1 year ago

Is this already possible? I'd love to use this feature.

jacksund commented 2 months ago

This features looks like it is low priority for RDKit.js, so I'm currently using python to generate the image in the backend and then feeding that to the web UI as a media asset: https://www.rdkit.org/docs/GettingStartedInPython.html#drawing-chemical-reactions

Non-ideal and puts extra load on the backend, but I don't see any easier route yet (aside from splitting the reaction up and rendering each component individually)

willfinnigan commented 2 months ago

Splitting it up and manually joining the pieces together with svg2 is what I ended up doing. I could do with finding the time to make the arrow a bit nicer, but its functional for now.

Screenshot 2024-05-13 at 10 46 38

I did used to render on the server, but I wanted to make a totally client side version.

molhanec commented 2 months ago

RDKit JS can render reactions, it's just not documented. E.g. something like:

const rdkit = await window.initRDKitModule()
const rxn = rdkit.get_rxn(smiles)
const svg = rxn.get_svg(width, height) 
willfinnigan commented 1 month ago

That's awesome!

However to my eye the reaction drawing doesn't look as nice as the stand alone molecules

Screenshot 2024-06-29 at 17 32 09