Hi Greg,
that’s what I have been thinking, unlucky. Essentially, I want to color the molecule in web-browser with various annotations and make it interactive. For that part I’m converting it internally to the d3.js internal representation (https://d3js.org/) and connecting it to its environment. For most of the parts I’m just fine with the position of atoms in svg using the tag property. What I wanted to avoid is to replicate rdkit svg drawing code in javascript so that I don’t want to consume the dump of rdkit.Mol object. What I wanted to do instead is to use existing svg images and parse them into d3.js, so I know which paths belong to which bond. At this point my only idea is to color bonds individually and based on the overlay/proximity use kd-tree to reverse-engineer which bonds the paths belong to, which is a bit overkill in my view. Lukas From: Greg Landrum <greg.land...@gmail.com> Date: Tuesday, 4 December 2018 at 17:24 To: Lukas Pravda <lpra...@ebi.ac.uk> Cc: RDKIT mailing list <rdkit-discuss@lists.sourceforge.net> Subject: Re: [Rdkit-discuss] Bond tags in SVGs Hi Lukas, There's not currently a way to do this at the moment. The closest you can get is by calling AddMoleculeMetadata(): In [6]: d = Draw.MolDraw2DSVG(200,200) In [8]: d.DrawMolecule(nm) In [10]: d.AddMoleculeMetadata(nm) In [11]: d.FinishDrawing() In [12]: svg = d.GetDrawingText() In [14]: print(svg) <?xml version='1.0' encoding='iso-8859-1'?> <svg version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg' xmlns:rdkit='http://www.rdkit.org/xml' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' width='200px' height='200px' > <rect style='opacity:1.0;fill:#FFFFFF;stroke:none' width='200' height='200' x='0' y='0'> </rect> <path d='M 9.09091,126.243 100,73.7568' style='fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoi n:miter;stroke-opacity:1' /> <path d='M 100,73.7568 190.909,126.243' style='fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoi n:miter;stroke-opacity:1' /> <metadata> <rdkit:mol xmlns:rdkit = "http://www.rdkit.org/xml"; version="0.9"> <rdkit:atom idx="1" atom-smiles="[CH3]" drawing-x="9.09091" drawing-y="126.243" x="-1.29904" y="-0.25" z="0" /> <rdkit:atom idx="2" atom-smiles="[CH2]" drawing-x="100" drawing-y="73.7568" x="0" y="0.5" z="0" /> <rdkit:atom idx="3" atom-smiles="[CH3]" drawing-x="190.909" drawing-y="126.243" x="1.29904" y="-0.25" z="0" /> <rdkit:bond idx="1" begin-atom-idx="1" end-atom-idx="2" bond-smiles="-" /> <rdkit:bond idx="2" begin-atom-idx="2" end-atom-idx="3" bond-smiles="-" /> </rdkit:mol></metadata> </svg> This gets you the information you need to connect bond indices to the atoms, but I suspect that's not what you're looking for. In general you are guaranteed that the order of the bonds in the output SVG is the same as the order in the input molecule, but you can have multiple paths for a given bond. For example here, where the end atoms have different colors: In [25]: print(svg) <?xml version='1.0' encoding='iso-8859-1'?> <svg version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg' xmlns:rdkit='http://www.rdkit.org/xml' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' width='200px' height='200px' > <rect style='opacity:1.0;fill:#FFFFFF;stroke:none' width='200' height='200' x='0' y='0'> </rect> <path d='M 9.09091,100 59.1479,100' style='fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:mi ter;stroke-opacity:1' /> <path d='M 59.1479,100 109.205,100' style='fill:none;fill-rule:evenodd;stroke:#FF0000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:mi ter;stroke-opacity:1' /> <text x='109.205' y='107.5' style='font-size:15px;font-style:normal;font-weight:normal;fill-opacity:1;stroke:none;font-family:sans-serif;text -anchor:start;fill:#FF0000' ><tspan>OH</tspan></text> <metadata> <rdkit:mol xmlns:rdkit = "http://www.rdkit.org/xml"; version="0.9"> <rdkit:atom idx="1" atom-smiles="[CH3]" drawing-x="9.09091" drawing-y="100" x="-0.75" y="5.55112e-17" z="0" /> <rdkit:atom idx="2" atom-smiles="[OH]" drawing-x="122.71" drawing-y="100" x="0.75" y="-5.55112e-17" z="0" /> <rdkit:bond idx="1" begin-atom-idx="1" end-atom-idx="2" bond-smiles="-" /> </rdkit:mol></metadata> </svg> What are you looking to be able to do? That may make it easier to either come up with a work around or figure out what a new feature addition might look like. -greg On Mon, Dec 3, 2018 at 6:57 PM Lukas Pravda <lpra...@ebi.ac.uk> wrote: Hi all, I was wondering if there is a way how you can tag <path> elements (bonds) in the svg created by rdkit. i.e. transform something like this: <path d='M 265.658,263.25 342.74,218.746' style='...' /> <path d='M 342.74,218.746 419.822,174.241' style='...' /> Into: <path bondId='1' d='M 265.658,263.25 342.74,218.746' style='...' /> <path bondId='2' d='M 342.74,218.746 419.822,174.241' style='...' /> Or similar. I’ve found possibility of tagging atoms in the SVG using Draw.rdMolDraw2D.MolDraw2DSVG.drawOptions() method that exposes property includeAtomTags. This then renders following additional elements into the SVG: rdkit:atom idx="4" label="O<sup>-</sup>" x="153.479" y="82.8259" /> But I have not seen anything like this for bonds (latest release of RDKIT and python). Thanks, in advance for any hints. I was wondering about using highlightBondLists and then based on the svg infer the bond annotation, but that seems to be a bit of an overkill. Cheers, Lukas _______________________________________________ Rdkit-discuss mailing list Rdkit-discuss@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/rdkit-discuss
_______________________________________________ Rdkit-discuss mailing list Rdkit-discuss@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/rdkit-discuss
