search

cheminfo / openchemlib-js

JavaScript port of OpenChemLib
https://cheminfo.github.io/openchemlib-js/index.html
BSD 3-Clause "New" or "Revised" License
71 stars 21 forks source link

"unknown chirality" is being added to SVGs when converting from SMILES #119

Closed bylethviva closed 2 years ago

bylethviva commented 2 years ago

When I update the SVG.html example to generate a SVG from a SMILES code, I end up getting a text field of unknown chirality added to the SVG. How can I get the SVG without the 'unknown chirality' in there? I can remove it from the SVG using some string replacement, but I'd expect it to not have that in the first place. I provided the SMILES code and the snippet of code that I used to generate the SVG down below.

If I go to this page and input the same SMILES code, it outputs the image as expected.

Is there a better place to ask questions (email, google group, Discord, etc) about this library instead of opening issues? If there was a Discussions section for this repo, I'd ask there instead.

SVG generated from canonical SMILES code: CN1C2=CC=CC=C2C3=C4C(=C5C6=C(C=CC(=C6)OC)N(C5=C31)CC(CN(C)C)O)C(=O)NC4=O

const mol = OCL.Molecule.fromSmiles('CN1C2=CC=CC=C2C3=C4C(=C5C6=C(C=CC(=C6)OC)N(C5=C31)CC(CN(C)C)O)C(=O)NC4=O');
console.log(mol.toSVG(200, 100))
<svg id="mol2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="100px" viewBox="0 0 200 100">
  <style> #mol2 { pointer-events:none; } #mol2 .event  { pointer-events:all; } line { stroke-linecap:round; } polygon { stroke-linejoin:round; } </style>
  <text x="80.83" y="97" font-family=" Helvetica" font-size="5" fill="rgb(160,0,0)">unknown chirality</text>
  <text x="102.67" y="76.03" font-family=" Helvetica" font-size="6" fill="rgb(48,80,248)">N</text>
  <text x="105.81" y="11.03" font-family=" Helvetica" font-size="6" fill="rgb(255,13,13)">O</text>
  <text x="94.93" y="52.22" font-family=" Helvetica" font-size="6" fill="rgb(48,80,248)">N</text>
  <text x="57.85" y="52.22" font-family=" Helvetica" font-size="6" fill="rgb(48,80,248)">N</text>
  <text x="76.22" y="41.52" font-family=" Helvetica" font-size="6" fill="rgb(255,13,13)">O</text>
  <text x="80.89" y="41.52" font-family=" Helvetica" font-size="6" fill="rgb(255,13,13)">H</text>
  <text x="130.85" y="33.85" font-family=" Helvetica" font-size="6" fill="rgb(255,13,13)">O</text>
  <text x="139.68" y="50.85" font-family=" Helvetica" font-size="6" fill="rgb(48,80,248)">N</text>
  <text x="144.01" y="50.85" font-family=" Helvetica" font-size="6" fill="rgb(48,80,248)">H</text>
  <text x="142.49" y="69.69" font-family=" Helvetica" font-size="6" fill="rgb(255,13,13)">O</text>
  <line x1="112" y1="81.99" x2="110.88" y2="92.64" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="113.48" y1="83.29" x2="112.6" y2="91.67" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="119.54" y1="98.93" x2="129.32" y2="94.57" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="119.93" y1="97" x2="127.63" y2="93.57" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="130.44" y1="83.93" x2="121.78" y2="77.63" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="128.58" y1="84.55" x2="121.76" y2="79.6" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="120.66" y1="66.99" x2="127.83" y2="59.03" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="120.23" y1="65.06" x2="125.87" y2="58.8" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="124.52" y1="48.85" x2="114.05" y2="46.62" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="123.07" y1="50.18" x2="114.83" y2="48.43" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="108.69" y1="37.35" x2="98.22" y2="39.57" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="107.24" y1="36.02" x2="99" y2="37.77" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="91.06" y1="31.62" x2="94.36" y2="21.44" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="92.94" y1="31.03" x2="95.54" y2="23.02" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="104.84" y1="19.21" x2="112" y2="27.17" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="104.41" y1="21.13" x2="110.04" y2="27.39" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="106.88" y1="54.58" x2="110.19" y2="64.76" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="105.63" y1="55.91" x2="108.39" y2="64.42" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="133.98" y1="43.14" x2="133.98" y2="34.85" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="132.38" y1="43.14" x2="132.38" y2="34.85" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="137.54" y1="59.03" x2="142" y2="65.16" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="138.84" y1="58.09" x2="143.3" y2="64.22" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="94.19" y1="75.15" x2="102.67" y2="74.26" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="107" y1="76.44" x2="112" y2="81.99" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="110.88" y1="92.64" x2="119.54" y2="98.93" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="129.32" y1="94.57" x2="130.44" y2="83.93" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="112" y1="81.99" x2="121.78" y2="77.63" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="121.78" y1="77.63" x2="120.66" y2="66.99" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="127.83" y1="59.03" x2="124.52" y2="48.85" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="114.05" y1="46.62" x2="108.69" y2="37.35" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="98.22" y1="39.57" x2="91.06" y2="31.62" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="94.36" y1="21.44" x2="104.84" y2="19.21" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="108.69" y1="37.35" x2="112" y2="27.17" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="104.84" y1="19.21" x2="107.17" y2="12.03" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="105.81" y1="6.43" x2="100.98" y2="1.07" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="98.22" y1="39.57" x2="97.42" y2="47.22" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="99.27" y1="51.19" x2="106.88" y2="54.58" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="114.05" y1="46.62" x2="106.88" y2="54.58" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="120.66" y1="66.99" x2="110.19" y2="64.76" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="106.57" y1="71.03" x2="110.19" y2="64.76" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="94.93" y1="51.47" x2="87.83" y2="55.58" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="87.83" y1="55.58" x2="83.19" y2="52.9" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="83.19" y1="52.9" x2="78.56" y2="50.22" stroke="rgb(192,0,255)" stroke-width="1"></line>
  <line x1="78.56" y1="50.22" x2="73.92" y2="52.9" stroke="rgb(192,0,255)" stroke-width="1"></line>
  <line x1="73.92" y1="52.9" x2="69.28" y2="55.58" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="69.28" y1="55.58" x2="62.18" y2="51.47" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="60.01" y1="47.22" x2="60.01" y2="39.52" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="57.85" y1="51.47" x2="50.74" y2="55.58" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="78.56" y1="50.22" x2="78.56" y2="46.37" stroke="rgb(192,0,255)" stroke-width="1"></line>
  <line x1="78.56" y1="46.37" x2="78.56" y2="42.52" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="124.52" y1="48.85" x2="133.18" y2="42.55" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="133.18" y1="42.55" x2="139.68" y2="47.27" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="140.87" y1="51.85" x2="138.53" y2="59.03" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line x1="127.83" y1="59.03" x2="138.53" y2="59.03" stroke="rgb(0,0,0)" stroke-width="1"></line>
  <line id="mol2:Bond:2" class="event" x1="112" y1="81.99" x2="110.88" y2="92.64" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:4" class="event" x1="119.54" y1="98.93" x2="129.32" y2="94.57" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:6" class="event" x1="130.44" y1="83.93" x2="121.78" y2="77.63" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:9" class="event" x1="120.66" y1="66.99" x2="127.83" y2="59.03" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:11" class="event" x1="124.52" y1="48.85" x2="114.05" y2="46.62" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:13" class="event" x1="108.69" y1="37.35" x2="98.22" y2="39.57" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:15" class="event" x1="91.06" y1="31.62" x2="94.36" y2="21.44" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:17" class="event" x1="104.84" y1="19.21" x2="112" y2="27.17" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:24" class="event" x1="106.88" y1="54.58" x2="110.19" y2="64.76" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:35" class="event" x1="133.18" y1="42.55" x2="133.18" y2="31.85" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:39" class="event" x1="138.53" y1="59.03" x2="144.83" y2="67.69" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:0" class="event" x1="94.19" y1="75.15" x2="104.84" y2="74.03" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:1" class="event" x1="104.84" y1="74.03" x2="112" y2="81.99" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:3" class="event" x1="110.88" y1="92.64" x2="119.54" y2="98.93" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:5" class="event" x1="129.32" y1="94.57" x2="130.44" y2="83.93" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:7" class="event" x1="112" y1="81.99" x2="121.78" y2="77.63" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:8" class="event" x1="121.78" y1="77.63" x2="120.66" y2="66.99" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:10" class="event" x1="127.83" y1="59.03" x2="124.52" y2="48.85" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:12" class="event" x1="114.05" y1="46.62" x2="108.69" y2="37.35" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:14" class="event" x1="98.22" y1="39.57" x2="91.06" y2="31.62" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:16" class="event" x1="94.36" y1="21.44" x2="104.84" y2="19.21" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:18" class="event" x1="108.69" y1="37.35" x2="112" y2="27.17" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:19" class="event" x1="104.84" y1="19.21" x2="108.15" y2="9.03" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:20" class="event" x1="108.15" y1="9.03" x2="100.98" y2="1.07" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:21" class="event" x1="98.22" y1="39.57" x2="97.1" y2="50.22" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:22" class="event" x1="97.1" y1="50.22" x2="106.88" y2="54.58" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:23" class="event" x1="114.05" y1="46.62" x2="106.88" y2="54.58" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:25" class="event" x1="120.66" y1="66.99" x2="110.19" y2="64.76" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:26" class="event" x1="104.84" y1="74.03" x2="110.19" y2="64.76" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:27" class="event" x1="97.1" y1="50.22" x2="87.83" y2="55.58" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:28" class="event" x1="87.83" y1="55.58" x2="78.56" y2="50.22" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:29" class="event" x1="78.56" y1="50.22" x2="69.28" y2="55.58" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:30" class="event" x1="69.28" y1="55.58" x2="60.01" y2="50.22" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:31" class="event" x1="60.01" y1="50.22" x2="60.01" y2="39.52" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:32" class="event" x1="60.01" y1="50.22" x2="50.74" y2="55.58" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:33" class="event" x1="78.56" y1="50.22" x2="78.56" y2="39.52" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:34" class="event" x1="124.52" y1="48.85" x2="133.18" y2="42.55" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:36" class="event" x1="133.18" y1="42.55" x2="141.84" y2="48.85" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:37" class="event" x1="141.84" y1="48.85" x2="138.53" y2="59.03" stroke-width="8" opacity="0"></line>
  <line id="mol2:Bond:38" class="event" x1="127.83" y1="59.03" x2="138.53" y2="59.03" stroke-width="8" opacity="0"></line>
  <circle id="mol2:Atom:0" class="event" cx="94.19" cy="75.15" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:1" class="event" cx="104.84" cy="74.03" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:2" class="event" cx="112" cy="81.99" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:3" class="event" cx="110.88" cy="92.64" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:4" class="event" cx="119.54" cy="98.93" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:5" class="event" cx="129.32" cy="94.57" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:6" class="event" cx="130.44" cy="83.93" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:7" class="event" cx="121.78" cy="77.63" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:8" class="event" cx="120.66" cy="66.99" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:9" class="event" cx="127.83" cy="59.03" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:10" class="event" cx="124.52" cy="48.85" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:11" class="event" cx="114.05" cy="46.62" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:12" class="event" cx="108.69" cy="37.35" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:13" class="event" cx="98.22" cy="39.57" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:14" class="event" cx="91.06" cy="31.62" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:15" class="event" cx="94.36" cy="21.44" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:16" class="event" cx="104.84" cy="19.21" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:17" class="event" cx="112" cy="27.17" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:18" class="event" cx="108.15" cy="9.03" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:19" class="event" cx="100.98" cy="1.07" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:20" class="event" cx="97.1" cy="50.22" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:21" class="event" cx="106.88" cy="54.58" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:22" class="event" cx="110.19" cy="64.76" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:23" class="event" cx="87.83" cy="55.58" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:24" class="event" cx="78.56" cy="50.22" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:25" class="event" cx="69.28" cy="55.58" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:26" class="event" cx="60.01" cy="50.22" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:27" class="event" cx="60.01" cy="39.52" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:28" class="event" cx="50.74" cy="55.58" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:29" class="event" cx="78.56" cy="39.52" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:30" class="event" cx="133.18" cy="42.55" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:31" class="event" cx="133.18" cy="31.85" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:32" class="event" cx="141.84" cy="48.85" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:33" class="event" cx="138.53" cy="59.03" r="8" opacity="0"></circle>
  <circle id="mol2:Atom:34" class="event" cx="144.83" cy="67.69" r="8" opacity="0"></circle>
</svg>
targos commented 2 years ago

If I'm not mistaken, it's the suppressChiralText option: https://cheminfo.github.io/openchemlib-js/interfaces/IMoleculeToSVGOptions.html#suppressChiralText

On the page that you linked from cheminfo, we use the following options:

  const defaultOpenChemLibStructureOptions = {
    suppressChiralText: true,
    suppressESR: true,
    suppressCIPParity: true,
    noStereoProblem: true,
  };
bylethviva commented 2 years ago

@targos thank you so much! That was exactly what I needed.