`setBondBackgroundColors` issues

lifenjoiner commented 1 year ago

As the following example shows, I caught 2 cases that setBondBackgroundColors doesn't work correctly. For the 1st case, there could be more than one of the last bonds that are not colored. It seems to happen on cyclic compounds. And for the 2nd case, it shows there could be more issues about loading SMILES.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--                                           -->

    <script type="text/javascript" language="javascript" src="jsme/jsme.nocache.js"></script>

    <script>
        // setBondBackgroundColors issues:
        // 1. The last x bonds could not be colored.
        function Issue_missed() {
            var startingStructure = "11 12 C 4.85 4.90 N 3.64 4.20 C 2.42 4.90 C 1.21 4.20 C 1.21 2.80 C 0.00 2.10 C 0.00 0.70 C 1.21 0.00 C 2.42 0.70 C 2.42 2.10 C 3.64 2.80 2 1 1 3 2 1 4 3 1 5 4 1 6 5 2 7 6 1 8 7 2 9 8 1 10 9 2 10 5 1 11 10 1 11 2 1";

            var jsmeApplet = new JSApplet.JSME("appletContainer", "200px", "200px", {
                "options": "depict, border, nozoom",
                "jme": startingStructure,
            });

            jsmeApplet.setBondBackgroundColors(1, '1,4,2,4,3,4,4,4,5,4,6,4,7,4,8,4,9,4,10,4,11,4,12,4');
            jsmeApplet.setBondToHighLight(1, 11);
            jsmeApplet.setBondBackgroundColors(1, '12,4');
        }

        // 2. It does not work with SMILES if called immediately. And also some other functions.
        function Issue_SMILES() {
            var startingStructure = "CN1CCC2=CC=CC=C2C1";

            var jsmeApplet = new JSApplet.JSME("appletContainer", "200px", "200px", {
                "options": "depict, border, nozoom",
                "smiles": startingStructure,
            });

            jsmeApplet.setBondBackgroundColors(1, '1,4,2,4,3,4,4,4,5,4,6,4,7,4,8,4,9,4,10,4,11,4,12,4');
            jsmeApplet.setBondToHighLight(1, 12);
            jsmeApplet.setBondBackgroundColors(1, '12,4');
        }

        //this function will be called after the JavaScriptApplet code has been loaded.
        function jsmeOnLoad() {
            Issue_missed();
            Issue_SMILES(); // doesn't work
            setTimeout(Issue_SMILES, 1000); // OK
        }
    </script>

</head>

<body>

<table align="center">
    <tr>
        <td id="appletContainer"></td>
    </tr>
</table>

</body>
</html>

lifenjoiner commented 1 year ago

Append: The same issue with setAtomBackgroundColors. Try the js from your browser console to an example page:

// one example with issues on 1 atom and 2 bonds
// jsmeApplet.readGenericMolecularInput('C1(CC2=CC=C(C3CCCCC3)C=N2)=CC=CC=C1');
jsmeApplet.readGenericMolecularInput('19 21 C 8.49 4.20 C 7.27 4.90 C 6.06 4.20 C 4.85 4.90 C 3.64 4.20 C 3.64 2.80 C 2.42 2.10 C 1.21 2.80 C 0.00 2.10 C 0.00 0.70 C 1.21 0.00 C 2.42 0.70 C 4.85 2.10 N 6.06 2.80 C 8.49 2.80 C 9.70 2.10 C 10.91 2.80 C 10.91 4.20 C 9.70 4.90 2 1 1 3 2 1 4 3 2 5 4 1 6 5 2 7 6 1 8 7 1 9 8 1 10 9 1 11 10 1 12 11 1 12 7 1 13 6 1 14 13 2 14 3 1 15 1 2 16 15 1 17 16 2 18 17 1 19 18 2 19 1 1');

// highlight all bonds
var BondsCount = jsmeApplet.totalNumberOfBonds();
var BondColors = [];
for (var i = 1; i <= BondsCount; i++) BondColors.push(i);
jsmeApplet.setBondBackgroundColors(1, BondColors.join(',4,'));

// highlight all atoms
var AtomsCount = jsmeApplet.totalNumberOfAtoms();
var AtomColors = [];
for (var i = 1; i <= AtomsCount; i++) AtomColors.push(i);
jsmeApplet.setAtomBackgroundColors(1, AtomColors.join(',1,'));

Version: JSME_2022-02-26

jsme-editor commented 1 year ago

There is indeed a bug in the code for setBondBackgroundColors(). It has been fixed. A new distribution with fixed issues is in preparation.

I did not find a bug in the code for setAtomBackgroundColors(). I believe the code example you provided has a bug. The atom color specification provided in the code is "1,1,2,1,3,1,4". Because of the use of join(), there is no color for the last atom. It should be "1,1,2,1,3,1,4,1".

lifenjoiner commented 1 year ago

Thanks!

Correct highlighting all bonds/atoms:

// highlight all bonds
var BondsCount = jsmeApplet.totalNumberOfBonds();
var BondColors = [];
for (var i = 1; i <= BondsCount; i++) BondColors.push(i);
BondColors.push('');
jsmeApplet.setBondBackgroundColors(1, BondColors.join(',4,'));

// highlight all atoms
var AtomsCount = jsmeApplet.totalNumberOfAtoms();
var AtomColors = [];
for (var i = 1; i <= AtomsCount; i++) AtomColors.push(i);
AtomColors.push('');
jsmeApplet.setAtomBackgroundColors(1, AtomColors.join(',1,'));

jsme-editor / jsme-editor.github.io

`setBondBackgroundColors` issues #27