@complat/react-spectra-editor 0.10.13-alpha.5

package/dist/components/common/chem.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/* eslint-disable */
+
+var SmaToSvg = function SmaToSvg(sma) {
+  switch (sma) {
+    case 'C-,:O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="192.35" y="183.00">O</text> </g><line x1="86.25" y1="150.00" x2="132.70" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="132.70" y1="150.00" x2="179.16" y2="150.00" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:C(=O)-,:O-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="96.93" y="239.11">O</text> </g><g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="173.43" y="106.61">O</text> </g><line x1="35.25" y1="83.75" x2="111.75" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="103.09" y1="127.92" x2="103.09" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="103.09" y1="156.08" x2="103.09" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="120.41" y1="127.92" x2="120.41" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="120.41" y1="156.08" x2="120.41" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="111.75" y1="127.92" x2="138.02" y2="112.75" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="138.02" y1="112.75" x2="164.28" y2="97.59" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="212.22" y1="97.59" x2="238.48" y2="112.75" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="238.48" y1="112.75" x2="264.75" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:O-,:c':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.60" y="151.12">O</text> </g><line x1="39.58" y1="181.87" x2="77.49" y2="159.99" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="77.49" y1="159.99" x2="115.41" y2="138.10" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="184.59" y1="138.10" x2="222.51" y2="159.99" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="222.51" y1="159.99" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:[Cl]':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,204,0)" x="187.79" y="183.00">Cl</text> </g><line x1="86.25" y1="150.00" x2="130.42" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="130.42" y1="150.00" x2="174.59" y2="150.00" stroke="rgb(0,204,0)" stroke-width="3"></line> </svg>';
+    case 'c:,-[n&H1]:,-c':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="151.12">N</text> </g><line x1="39.58" y1="181.87" x2="78.26" y2="159.54" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="159.54" x2="116.94" y2="137.21" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="59.82" y1="199.06" x2="90.76" y2="181.19" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="90.76" y1="181.19" x2="121.71" y2="163.33" stroke="rgb(0,0,255)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="183.06" y1="137.21" x2="221.74" y2="159.54" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="221.74" y1="159.54" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="178.29" y1="163.33" x2="209.24" y2="181.19" stroke="rgb(0,0,255)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="209.24" y1="181.19" x2="240.18" y2="199.06" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> </svg>';
+    case 'c-,:O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="192.35" y="183.00">O</text> </g><line x1="86.25" y1="150.00" x2="132.70" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="132.70" y1="150.00" x2="179.16" y2="150.00" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:[Cl]':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,204,0)" x="187.79" y="183.00">Cl</text> </g><line x1="86.25" y1="150.00" x2="130.42" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="130.42" y1="150.00" x2="174.59" y2="150.00" stroke="rgb(0,204,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:C(-,:C)=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.61" y="87.37">O</text> </g><line x1="39.58" y1="245.62" x2="150.00" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="181.88" x2="162.50" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="141.22" x2="162.50" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="137.50" y1="181.88" x2="137.50" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="137.50" y1="141.22" x2="137.50" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:[N&+](=O)-,:[O&-]':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="214.88">N</text> </g> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="254.88">+</text> </g> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="239.02" y="278.62">O</text> </g><g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.61" y="87.37">O</text> </g> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="178.60" y="87.37">-</text> </g> <line x1="39.58" y1="245.62" x2="78.26" y2="223.29" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="223.29" x2="116.94" y2="200.96" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="176.81" y1="211.78" x2="198.19" y2="224.13" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="198.19" y1="224.13" x2="219.57" y2="236.48" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="189.31" y1="190.13" x2="210.69" y2="202.48" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="210.69" y1="202.48" x2="232.07" y2="214.83" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="150.00" y1="135.68" x2="150.00" y2="118.12" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="150.00" y1="118.12" x2="150.00" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:C=C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <line x1="39.58" y1="181.87" x2="150.00" y2="118.12" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="143.75" y1="128.95" x2="254.17" y2="192.70" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="156.25" y1="107.30" x2="266.67" y2="171.05" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:[Br]':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(127,76,25)" x="186.25" y="183.00">Br</text> </g><line x1="86.25" y1="150.00" x2="129.65" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="129.65" y1="150.00" x2="173.05" y2="150.00" stroke="rgb(127,76,25)" stroke-width="3"></line> </svg>';
+    case 'C-,:O-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.60" y="151.12">O</text> </g><line x1="39.58" y1="181.87" x2="77.49" y2="159.99" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="77.49" y1="159.99" x2="115.41" y2="138.10" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="184.59" y1="138.10" x2="222.51" y2="159.99" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="222.51" y1="159.99" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:[Br]':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(127,76,25)" x="186.25" y="183.00">Br</text> </g><line x1="86.25" y1="150.00" x2="129.65" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="129.65" y1="150.00" x2="173.05" y2="150.00" stroke="rgb(127,76,25)" stroke-width="3"></line> </svg>';
+    case 'C-,:C(-,:c)=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.61" y="87.37">O</text> </g><line x1="39.58" y1="245.62" x2="150.00" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="181.88" x2="162.50" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="141.22" x2="162.50" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="137.50" y1="181.88" x2="137.50" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="137.50" y1="141.22" x2="137.50" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:N':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="193.90" y="183.00">N</text> </g><line x1="86.25" y1="150.00" x2="133.47" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="133.47" y1="150.00" x2="180.69" y2="150.00" stroke="rgb(0,0,255)" stroke-width="3"></line> </svg>';
+    case 'C-,:F':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(51,204,204)" x="196.95" y="183.00">F</text> </g><line x1="86.25" y1="150.00" x2="135.00" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="135.00" y1="150.00" x2="183.75" y2="150.00" stroke="rgb(51,204,204)" stroke-width="3"></line> </svg>';
+    case 'c-,:C(=O)-,:O-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="96.93" y="239.11">O</text> </g><g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="173.43" y="106.61">O</text> </g><line x1="35.25" y1="83.75" x2="111.75" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="103.09" y1="127.92" x2="103.09" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="103.09" y1="156.08" x2="103.09" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="120.41" y1="127.92" x2="120.41" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="120.41" y1="156.08" x2="120.41" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="111.75" y1="127.92" x2="138.02" y2="112.75" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="138.02" y1="112.75" x2="164.28" y2="97.59" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="212.22" y1="97.59" x2="238.48" y2="112.75" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="238.48" y1="112.75" x2="264.75" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c:,-o:,-c':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.60" y="151.12">O</text> </g><line x1="39.58" y1="181.87" x2="77.49" y2="159.99" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="77.49" y1="159.99" x2="115.41" y2="138.10" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="59.66" y1="199.15" x2="89.99" y2="181.64" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="89.99" y1="181.64" x2="120.32" y2="164.13" stroke="rgb(255,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="184.59" y1="138.10" x2="222.51" y2="159.99" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="222.51" y1="159.99" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="179.68" y1="164.13" x2="210.01" y2="181.64" stroke="rgb(255,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="210.01" y1="181.64" x2="240.34" y2="199.15" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> </svg>';
+    case 'C-,:C(=O)-,:O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="239.02" y="278.62">O</text> </g><g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.61" y="87.37">O</text> </g><line x1="39.58" y1="245.62" x2="150.00" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="143.75" y1="192.70" x2="181.66" y2="214.59" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="181.66" y1="214.59" x2="219.57" y2="236.48" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="156.25" y1="171.05" x2="194.16" y2="192.94" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="194.16" y1="192.94" x2="232.07" y2="214.83" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="150.00" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="141.22" x2="150.00" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:F':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(51,204,204)" x="196.95" y="183.00">F</text> </g><line x1="86.25" y1="150.00" x2="135.00" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="135.00" y1="150.00" x2="183.75" y2="150.00" stroke="rgb(51,204,204)" stroke-width="3"></line> </svg>';
+    case 'c=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="192.35" y="183.00">O</text> </g><line x1="86.25" y1="162.50" x2="132.70" y2="162.50" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="132.70" y1="162.50" x2="179.16" y2="162.50" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="86.25" y1="137.50" x2="132.70" y2="137.50" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="132.70" y1="137.50" x2="179.16" y2="137.50" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:N-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="151.12">N</text> </g><line x1="39.58" y1="181.87" x2="78.26" y2="159.54" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="159.54" x2="116.94" y2="137.21" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="183.06" y1="137.21" x2="221.74" y2="159.54" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="221.74" y1="159.54" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:N(-,:C)-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="214.88">N</text> </g><line x1="39.58" y1="245.62" x2="78.26" y2="223.29" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="223.29" x2="116.94" y2="200.96" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="183.06" y1="200.96" x2="221.74" y2="223.29" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="221.74" y1="223.29" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="135.68" x2="150.00" y2="95.02" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="150.00" y1="95.02" x2="150.00" y2="54.37" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:N':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="193.90" y="183.00">N</text> </g><line x1="86.25" y1="150.00" x2="133.47" y2="150.00" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="133.47" y1="150.00" x2="180.69" y2="150.00" stroke="rgb(0,0,255)" stroke-width="3"></line> </svg>';
+    case 'C-,:n(-,:c):,-c':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="214.88">N</text> </g><line x1="39.58" y1="245.62" x2="78.26" y2="223.29" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="223.29" x2="116.94" y2="200.96" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="183.06" y1="200.96" x2="221.74" y2="223.29" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="221.74" y1="223.29" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="135.68" x2="150.00" y2="95.02" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="150.00" y1="95.02" x2="150.00" y2="54.37" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="175.00" y1="127.55" x2="175.00" y2="95.03" stroke="rgb(0,0,255)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="175.00" y1="95.03" x2="175.00" y2="62.50" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> </svg>';
+    case 'c-,:C(=O)-,:O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="239.02" y="278.62">O</text> </g><g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.61" y="87.37">O</text> </g><line x1="39.58" y1="245.62" x2="150.00" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="143.75" y1="192.70" x2="181.66" y2="214.59" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="181.66" y1="214.59" x2="219.57" y2="236.48" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="156.25" y1="171.05" x2="194.16" y2="192.94" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="194.16" y1="192.94" x2="232.07" y2="214.83" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="150.00" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="141.22" x2="150.00" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:C=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="239.02" y="214.88">O</text> </g><line x1="39.58" y1="181.87" x2="150.00" y2="118.12" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="143.75" y1="128.95" x2="181.66" y2="150.84" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="181.66" y1="150.84" x2="219.57" y2="172.73" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="156.25" y1="107.30" x2="194.16" y2="129.19" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="194.16" y1="129.19" x2="232.07" y2="151.08" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:C#N':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="240.56" y="214.88">N</text> </g><line x1="39.58" y1="181.87" x2="150.00" y2="118.12" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="118.12" x2="188.68" y2="140.46" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="188.68" y1="140.46" x2="227.36" y2="162.79" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="145.24" y1="144.24" x2="176.18" y2="162.11" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="176.18" y1="162.11" x2="207.13" y2="179.97" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="170.24" y1="100.94" x2="201.18" y2="118.81" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="201.18" y1="118.81" x2="232.13" y2="136.67" stroke="rgb(0,0,255)" stroke-width="3"></line> </svg>';
+    case 'C-,:C=C-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <line x1="35.25" y1="157.91" x2="115.26" y2="123.87" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="115.26" y1="123.87" x2="184.74" y2="176.13" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="111.96" y1="142.72" x2="167.55" y2="184.53" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="184.74" y1="176.13" x2="264.75" y2="142.09" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:C(=O)-,:N-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="96.93" y="106.61">O</text> </g><g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(0,0,255)" x="174.49" y="239.11">N</text> </g><line x1="35.25" y1="216.25" x2="111.75" y2="172.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="120.41" y1="172.08" x2="120.41" y2="143.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="120.41" y1="143.92" x2="120.41" y2="115.76" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="103.09" y1="172.08" x2="103.09" y2="143.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="103.09" y1="143.92" x2="103.09" y2="115.76" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="111.75" y1="172.08" x2="138.55" y2="187.56" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="138.55" y1="187.56" x2="165.35" y2="203.03" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="211.15" y1="203.03" x2="237.95" y2="187.56" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="237.95" y1="187.56" x2="264.75" y2="172.08" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:C#N':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="240.56" y="214.88">N</text> </g><line x1="39.58" y1="181.87" x2="150.00" y2="118.12" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="118.12" x2="188.68" y2="140.46" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="188.68" y1="140.46" x2="227.36" y2="162.79" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="145.24" y1="144.24" x2="176.18" y2="162.11" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="176.18" y1="162.11" x2="207.13" y2="179.97" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="170.24" y1="100.94" x2="201.18" y2="118.81" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="201.18" y1="118.81" x2="232.13" y2="136.67" stroke="rgb(0,0,255)" stroke-width="3"></line> </svg>';
+    case 'C-,:C(=O)-,:N-,:c':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="96.93" y="106.61">O</text> </g><g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(0,0,255)" x="174.49" y="239.11">N</text> </g><line x1="35.25" y1="216.25" x2="111.75" y2="172.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="120.41" y1="172.08" x2="120.41" y2="143.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="120.41" y1="143.92" x2="120.41" y2="115.76" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="103.09" y1="172.08" x2="103.09" y2="143.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="103.09" y1="143.92" x2="103.09" y2="115.76" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="111.75" y1="172.08" x2="138.55" y2="187.56" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="138.55" y1="187.56" x2="165.35" y2="203.03" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="211.15" y1="203.03" x2="237.95" y2="187.56" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="237.95" y1="187.56" x2="264.75" y2="172.08" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:C(-,:C)=C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <line x1="39.58" y1="245.62" x2="150.00" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="181.88" x2="162.50" y2="54.37" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="137.50" y1="181.88" x2="137.50" y2="54.37" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c:,-s:,-c':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(204,204,0)" x="131.66" y="151.12">S</text> </g><line x1="39.58" y1="181.87" x2="79.02" y2="159.11" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="79.02" y1="159.11" x2="118.46" y2="136.34" stroke="rgb(204,204,0)" stroke-width="3"></line> <line x1="59.97" y1="198.97" x2="91.52" y2="180.76" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="91.52" y1="180.76" x2="123.07" y2="162.54" stroke="rgb(204,204,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="181.54" y1="136.34" x2="220.98" y2="159.11" stroke="rgb(204,204,0)" stroke-width="3"></line> <line x1="220.98" y1="159.11" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="176.93" y1="162.54" x2="208.48" y2="180.76" stroke="rgb(204,204,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="208.48" y1="180.76" x2="240.03" y2="198.97" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> </svg>';
+    case 'C-,:C#C-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <line x1="35.25" y1="157.91" x2="115.26" y2="123.87" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="115.26" y1="123.87" x2="184.74" y2="176.13" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="111.96" y1="142.72" x2="167.55" y2="184.53" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="132.45" y1="115.47" x2="188.04" y2="157.28" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="184.74" y1="176.13" x2="264.75" y2="142.09" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C#C-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <line x1="39.58" y1="181.87" x2="150.00" y2="118.12" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="63.12" y1="197.15" x2="151.46" y2="146.15" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="38.12" y1="153.85" x2="126.46" y2="102.85" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="118.12" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:C(-,:c)=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.61" y="87.37">O</text> </g><line x1="39.58" y1="245.62" x2="150.00" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="181.88" x2="162.50" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="141.22" x2="162.50" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="137.50" y1="181.88" x2="137.50" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="137.50" y1="141.22" x2="137.50" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:C(-,:C)=C-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <line x1="35.25" y1="83.75" x2="111.75" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="111.75" y1="127.92" x2="111.75" y2="216.25" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="111.75" y1="127.92" x2="188.25" y2="83.75" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="128.06" y1="138.50" x2="189.26" y2="103.17" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="188.25" y1="83.75" x2="264.75" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:N(-,:C)-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="214.88">N</text> </g><line x1="39.58" y1="245.62" x2="78.26" y2="223.29" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="223.29" x2="116.94" y2="200.96" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="183.06" y1="200.96" x2="221.74" y2="223.29" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="221.74" y1="223.29" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="135.68" x2="150.00" y2="95.02" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="150.00" y1="95.02" x2="150.00" y2="54.37" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:N-,:c':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="151.12">N</text> </g><line x1="39.58" y1="181.87" x2="78.26" y2="159.54" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="159.54" x2="116.94" y2="137.21" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="183.06" y1="137.21" x2="221.74" y2="159.54" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="221.74" y1="159.54" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:O-,:C(-,:C)=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="96.93" y="106.61">O</text> </g><g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="173.43" y="239.11">O</text> </g><line x1="35.25" y1="127.92" x2="61.52" y2="112.75" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="61.52" y1="112.75" x2="87.78" y2="97.59" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="135.72" y1="97.59" x2="161.98" y2="112.75" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="161.98" y1="112.75" x2="188.25" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="188.25" y1="127.92" x2="264.75" y2="83.75" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="179.59" y1="127.92" x2="179.59" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="179.59" y1="156.08" x2="179.59" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="196.91" y1="127.92" x2="196.91" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="196.91" y1="156.08" x2="196.91" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:O-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.60" y="151.12">O</text> </g><line x1="39.58" y1="181.87" x2="77.49" y2="159.99" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="77.49" y1="159.99" x2="115.41" y2="138.10" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="184.59" y1="138.10" x2="222.51" y2="159.99" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="222.51" y1="159.99" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c:,-n:,-c':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="151.12">N</text> </g><line x1="39.58" y1="181.87" x2="78.26" y2="159.54" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="159.54" x2="116.94" y2="137.21" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="59.82" y1="199.06" x2="90.76" y2="181.19" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="90.76" y1="181.19" x2="121.71" y2="163.33" stroke="rgb(0,0,255)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="183.06" y1="137.21" x2="221.74" y2="159.54" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="221.74" y1="159.54" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="178.29" y1="163.33" x2="209.24" y2="181.19" stroke="rgb(0,0,255)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="209.24" y1="181.19" x2="240.18" y2="199.06" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> </svg>';
+    case 'C=C-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <line x1="45.83" y1="192.70" x2="156.25" y2="128.95" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="33.33" y1="171.05" x2="143.75" y2="107.30" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="118.12" x2="260.42" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:C(-,:C)=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(255,0,0)" x="128.60" y="87.37">O</text> </g><line x1="39.58" y1="245.62" x2="150.00" y2="181.88" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="181.88" x2="162.50" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="162.50" y1="141.22" x2="162.50" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="137.50" y1="181.88" x2="137.50" y2="141.22" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="137.50" y1="141.22" x2="137.50" y2="100.57" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'c:,-n(-,:c)-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,255)" x="130.15" y="214.88">N</text> </g><line x1="39.58" y1="245.62" x2="78.26" y2="223.29" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="78.26" y1="223.29" x2="116.94" y2="200.96" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="59.82" y1="262.81" x2="90.76" y2="244.94" stroke="rgb(0,0,0)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="90.76" y1="244.94" x2="121.71" y2="227.08" stroke="rgb(0,0,255)" stroke-width="3" stroke-dasharray="4 4"></line> <line x1="183.06" y1="200.96" x2="221.74" y2="223.29" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="221.74" y1="223.29" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="135.68" x2="150.00" y2="95.02" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="150.00" y1="95.02" x2="150.00" y2="54.37" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    case 'C-,:N-,:C(-,:C)=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(0,0,255)" x="97.99" y="106.61">N</text> </g><g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="173.43" y="239.11">O</text> </g><line x1="35.25" y1="127.92" x2="62.05" y2="112.44" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="62.05" y1="112.44" x2="88.85" y2="96.97" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="134.65" y1="96.97" x2="161.45" y2="112.44" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="161.45" y1="112.44" x2="188.25" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="188.25" y1="127.92" x2="264.75" y2="83.75" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="179.59" y1="127.92" x2="179.59" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="179.59" y1="156.08" x2="179.59" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="196.91" y1="127.92" x2="196.91" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="196.91" y1="156.08" x2="196.91" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'c-,:N-,:C(-,:C)=O':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(0,0,255)" x="97.99" y="106.61">N</text> </g><g>  <text font-family="helvetica"   font-size="38.11" fill="rgb(255,0,0)" x="173.43" y="239.11">O</text> </g><line x1="35.25" y1="127.92" x2="62.05" y2="112.44" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="62.05" y1="112.44" x2="88.85" y2="96.97" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="134.65" y1="96.97" x2="161.45" y2="112.44" stroke="rgb(0,0,255)" stroke-width="3"></line> <line x1="161.45" y1="112.44" x2="188.25" y2="127.92" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="188.25" y1="127.92" x2="264.75" y2="83.75" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="179.59" y1="127.92" x2="179.59" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="179.59" y1="156.08" x2="179.59" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> <line x1="196.91" y1="127.92" x2="196.91" y2="156.08" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="196.91" y1="156.08" x2="196.91" y2="184.24" stroke="rgb(255,0,0)" stroke-width="3"></line> </svg>';
+    case 'C=C(-,:C)-,:C':
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><polygon fill="rgb(255,255,255)" stroke="none" stroke-width="0" points="0.00,0.00 300.00,0.00 300.00,300.00 0.00,300.00 0.00,0.00"></polygon> <line x1="45.83" y1="256.45" x2="156.25" y2="192.70" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="33.33" y1="234.80" x2="143.75" y2="171.05" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="260.42" y2="245.63" stroke="rgb(0,0,0)" stroke-width="3"></line> <line x1="150.00" y1="181.88" x2="150.00" y2="54.37" stroke="rgb(0,0,0)" stroke-width="3"></line> </svg>';
+    default:
+      return '<svg version="1.1" baseProfile="full" viewBox="0 0 300 300"><g> <text font-family="helvetica"   font-size="55.00" fill="rgb(0,0,0)" x="110.00" y="170.00">N.A.</text> </g></svg>';
+  }
+};
+
+/* eslint-enable */
+
+exports.default = SmaToSvg;

package/dist/components/common/comps.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabLabel = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var TabLabel = function TabLabel(classes, label) {
+  var extClsName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'txt-tab-label';
+  return _react2.default.createElement(
+    'span',
+    {
+      className: (0, _classnames2.default)(classes.tabLabel, extClsName)
+    },
+    label
+  );
+};
+
+exports.TabLabel = TabLabel;

package/dist/components/common/draw.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.drawDestroy = exports.drawDisplay = exports.drawLabel = exports.drawMain = undefined;
+
+var _d = require('d3');
+
+var d3 = _interopRequireWildcard(_d);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+var drawMain = function drawMain(klass, w, h) {
+  d3.select(klass).append('svg').attr('class', 'd3Svg').attr('preserveAspectRatio', 'xMinYMin meet').attr('viewBox', '0 0 ' + w + ' ' + h);
+};
+
+var drawLabel = function drawLabel(klass, cLabel, xLabel, yLabel) {
+  d3.select(klass).selectAll('.xLabel').text(xLabel);
+  d3.select(klass).selectAll('.yLabel').text(yLabel);
+  if (cLabel) {
+    d3.select(klass).selectAll('.mark-text').text(cLabel);
+  }
+};
+
+var drawDisplay = function drawDisplay(klass, isHidden) {
+  if (isHidden) {
+    d3.select(klass).selectAll('svg').style('width', 0);
+  } else {
+    d3.select(klass).selectAll('svg').style('width', '100%');
+  }
+};
+
+var drawDestroy = function drawDestroy(klass) {
+  return d3.select(klass + ' > *').remove();
+};
+
+exports.drawMain = drawMain;
+exports.drawLabel = drawLabel;
+exports.drawDisplay = drawDisplay;
+exports.drawDestroy = drawDestroy;

package/dist/components/d3_line/index.js

@@ -0,0 +1,236 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _chem = require('../../helpers/chem');
+
+var _manager = require('../../actions/manager');
+
+var _ui = require('../../actions/ui');
+
+var _line_focus = require('./line_focus');
+
+var _line_focus2 = _interopRequireDefault(_line_focus);
+
+var _draw = require('../common/draw');
+
+var _list_ui = require('../../constants/list_ui');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var W = Math.round(window.innerWidth * 0.90 * 9 / 12); // ROI
+var H = Math.round(window.innerHeight * 0.90 * 0.85); // ROI
+
+var ViewerLine = function (_React$Component) {
+  _inherits(ViewerLine, _React$Component);
+
+  function ViewerLine(props) {
+    _classCallCheck(this, ViewerLine);
+
+    var _this = _possibleConstructorReturn(this, (ViewerLine.__proto__ || Object.getPrototypeOf(ViewerLine)).call(this, props));
+
+    var clickUiTargetAct = props.clickUiTargetAct,
+        selectUiSweepAct = props.selectUiSweepAct,
+        scrollUiWheelAct = props.scrollUiWheelAct;
+
+    _this.rootKlass = '.d3Line';
+    _this.focus = new _line_focus2.default({
+      W: W, H: H, clickUiTargetAct: clickUiTargetAct, selectUiSweepAct: selectUiSweepAct, scrollUiWheelAct: scrollUiWheelAct
+    });
+
+    _this.normChange = _this.normChange.bind(_this);
+    return _this;
+  }
+
+  _createClass(ViewerLine, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _props = this.props,
+          seed = _props.seed,
+          peak = _props.peak,
+          cLabel = _props.cLabel,
+          xLabel = _props.xLabel,
+          yLabel = _props.yLabel,
+          feature = _props.feature,
+          freq = _props.freq,
+          comparisons = _props.comparisons,
+          tTrEndPts = _props.tTrEndPts,
+          tSfPeaks = _props.tSfPeaks,
+          editPeakSt = _props.editPeakSt,
+          layoutSt = _props.layoutSt,
+          integationSt = _props.integationSt,
+          mtplySt = _props.mtplySt,
+          sweepExtentSt = _props.sweepExtentSt,
+          isUiAddIntgSt = _props.isUiAddIntgSt,
+          isUiNoBrushSt = _props.isUiNoBrushSt,
+          isHidden = _props.isHidden,
+          resetAllAct = _props.resetAllAct;
+
+      (0, _draw.drawDestroy)(this.rootKlass);
+      resetAllAct(feature);
+
+      var filterSeed = seed;
+      var filterPeak = peak;
+
+      (0, _draw.drawMain)(this.rootKlass, W, H);
+      this.focus.create({
+        filterSeed: filterSeed,
+        filterPeak: filterPeak,
+        freq: freq,
+        comparisons: comparisons,
+        tTrEndPts: tTrEndPts,
+        tSfPeaks: tSfPeaks,
+        editPeakSt: editPeakSt,
+        layoutSt: layoutSt,
+        integationSt: integationSt,
+        mtplySt: mtplySt,
+        sweepExtentSt: sweepExtentSt,
+        isUiAddIntgSt: isUiAddIntgSt,
+        isUiNoBrushSt: isUiNoBrushSt
+      });
+      (0, _draw.drawLabel)(this.rootKlass, cLabel, xLabel, yLabel);
+      (0, _draw.drawDisplay)(this.rootKlass, isHidden);
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      var _props2 = this.props,
+          seed = _props2.seed,
+          peak = _props2.peak,
+          freq = _props2.freq,
+          comparisons = _props2.comparisons,
+          tTrEndPts = _props2.tTrEndPts,
+          tSfPeaks = _props2.tSfPeaks,
+          editPeakSt = _props2.editPeakSt,
+          layoutSt = _props2.layoutSt,
+          integationSt = _props2.integationSt,
+          mtplySt = _props2.mtplySt,
+          sweepExtentSt = _props2.sweepExtentSt,
+          isUiAddIntgSt = _props2.isUiAddIntgSt,
+          isUiNoBrushSt = _props2.isUiNoBrushSt,
+          isHidden = _props2.isHidden;
+
+      this.normChange(prevProps);
+
+      var filterSeed = seed;
+      var filterPeak = peak;
+
+      this.focus.update({
+        filterSeed: filterSeed,
+        filterPeak: filterPeak,
+        freq: freq,
+        comparisons: comparisons,
+        tTrEndPts: tTrEndPts,
+        tSfPeaks: tSfPeaks,
+        editPeakSt: editPeakSt,
+        layoutSt: layoutSt,
+        integationSt: integationSt,
+        mtplySt: mtplySt,
+        sweepExtentSt: sweepExtentSt,
+        isUiAddIntgSt: isUiAddIntgSt,
+        isUiNoBrushSt: isUiNoBrushSt
+      });
+      (0, _draw.drawDisplay)(this.rootKlass, isHidden);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      (0, _draw.drawDestroy)(this.rootKlass);
+    }
+  }, {
+    key: 'normChange',
+    value: function normChange(prevProps) {
+      var _props3 = this.props,
+          feature = _props3.feature,
+          resetAllAct = _props3.resetAllAct;
+
+      var oldFeature = prevProps.feature;
+      if (oldFeature !== feature) {
+        resetAllAct(feature);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement('div', { className: 'd3Line' });
+    }
+  }]);
+
+  return ViewerLine;
+}(_react2.default.Component);
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return {
+    seed: (0, _chem.Topic2Seed)(state, props),
+    peak: (0, _chem.Feature2Peak)(state, props),
+    freq: (0, _chem.ToFrequency)(state, props),
+    comparisons: (0, _chem.GetComparisons)(state, props),
+    tTrEndPts: (0, _chem.ToThresEndPts)(state, props),
+    tSfPeaks: (0, _chem.ToShiftPeaks)(state, props),
+    editPeakSt: state.editPeak.present,
+    layoutSt: state.layout,
+    integationSt: state.integration.present,
+    mtplySt: state.multiplicity.present,
+    sweepExtentSt: state.ui.sweepExtent,
+    isUiAddIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
+    isUiNoBrushSt: _list_ui.LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({
+    resetAllAct: _manager.resetAll,
+    clickUiTargetAct: _ui.clickUiTarget,
+    selectUiSweepAct: _ui.selectUiSweep,
+    scrollUiWheelAct: _ui.scrollUiWheel
+  }, dispatch);
+};
+
+ViewerLine.propTypes = {
+  seed: _propTypes2.default.array.isRequired,
+  peak: _propTypes2.default.array.isRequired,
+  freq: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.number]).isRequired,
+  comparisons: _propTypes2.default.array.isRequired,
+  cLabel: _propTypes2.default.string.isRequired,
+  xLabel: _propTypes2.default.string.isRequired,
+  yLabel: _propTypes2.default.string.isRequired,
+  feature: _propTypes2.default.object.isRequired,
+  tTrEndPts: _propTypes2.default.array.isRequired,
+  tSfPeaks: _propTypes2.default.array.isRequired,
+  editPeakSt: _propTypes2.default.object.isRequired,
+  layoutSt: _propTypes2.default.string.isRequired,
+  integationSt: _propTypes2.default.object.isRequired,
+  mtplySt: _propTypes2.default.object.isRequired,
+  sweepExtentSt: _propTypes2.default.object.isRequired,
+  isUiAddIntgSt: _propTypes2.default.bool.isRequired,
+  isUiNoBrushSt: _propTypes2.default.bool.isRequired,
+  resetAllAct: _propTypes2.default.func.isRequired,
+  clickUiTargetAct: _propTypes2.default.func.isRequired,
+  selectUiSweepAct: _propTypes2.default.func.isRequired,
+  scrollUiWheelAct: _propTypes2.default.func.isRequired,
+  isHidden: _propTypes2.default.bool.isRequired
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ViewerLine);