Scaling Issue on Importing Ketcher File

Q

Why is my reaction schema scaled badly when imported from the Ketcher editor UI?

✍: FYIcenter.com

A

The Ketcher editor UI seems to have a code bug. When a reaction schema stored in a Ketcher file is imported from the editor user interface, atom locations and the reaction arrow may be scaled down or up when mapping to the screen coordinates. However, the Scaling factor is not applied to text labels. This will result a very bad presentation of the reaction schema.

However, if you load the same Ketcher file with the Ketcher JavaScript API, text labels and atom locations are all scaled together, maintaining a good presentation.

To demonstrate this issue, create the following HTML document with a button to load the same Ketcher file with the API:

<html>
<!-- import-reaction-to-ketcher.html Copyright (c) FYIcenter.com. -->
<head>
<title>Import Reaction Structure to Ketcher</title>
</head>
<body>
<p>Load the Ketcher editor, then click the load button below the editor:</p>
<iframe id=frmKetcher src="/ketcher/index.html"
  style="width: 680px; height: 400px;"></iframe>

<p><button onclick="loadFile();">Load File</button></p>
<script>
function loadFile() {
  frm = document.getElementById("frmKetcher");
  ketcher = frm.contentWindow.ketcher;
  ketcher.setMolecule(`
{
    "root": {
        "nodes": [
            { "$ref": "mol0" },
            { "$ref": "mol1" },
            {
                "type": "arrow",
                "data": {
                    "mode": "open-angle",
                    "pos": [
                        { "x": 1, "y": 0, "z": 0 },
                        { "x": 5, "y": 0, "z": 0 }
                    ]
                }
            },
            {
                "type": "text",
                "data": {
                    "content": "{\\"blocks\\":[{\\"text\\":\\"Dummy Reaction\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}",
                    "position": { "x": 0, "y": 0.875, "z": 0 },
                    "pos": [
                        { "x": 0, "y": 0.875, "z": 0 },
                        { "x": 0, "y": 0.5, "z": 0 },
                        { "x": 2.24, "y": 0.5, "z": 0 },
                        { "x": 2.24, "y": 0.875, "z": 0 }
                    ]
                }
            },
            {
                "type": "text",
                "data": {
                    "content": "{\\"blocks\\":[{\\"text\\":\\"Dummy Reaction\\",\\"type\\":\\"unstyled\\",\\"depth\\":0,\\"inlineStyleRanges\\":[{\\"offset\\":0,\\"length\\":14,\\"style\\":\\"CUSTOM_FONT_SIZE_26px\\"}],\\"entityRanges\\":[],\\"data\\":{}}],\\"entityMap\\":{}}",
                    "position": { "x": 0, "y": 1.725, "z": 0 },
                    "pos": [
                        { "x": 0, "y": 1.725, "z": 0 },
                        { "x": 0, "y": 1, "z": 0 },
                        { "x": 4.48, "y": 1, "z": 0 },
                        { "x": 4.48, "y": 1.725, "z": 0 }
                    ]
                }
            }
        ]
    },
    "mol0": {
        "type": "molecule",
        "atoms": [
            {
                "label": "C",
                "location": [ 0, 0, 0 ]
            }
        ]
    },
    "mol1": {
        "type": "molecule",
        "atoms": [
            {
                "label": "N",
                "location": [ 6, 0, 0 ]
            }
        ]
    }
}
`);
}
</script>
</body>
</html>

Put the above HTML document on your local Web server and open it in your browser, you will see the Ketcher editor loaded and ready to use.

Click "Load File" button below the editor, you will see a dummy reaction with some text labels displayed nicely.

Import the same Ketcher file listed below using the Ketcher editor UI:

{
    "root": {
        "nodes": [
            { "$ref": "mol0" },
            { "$ref": "mol1" },
            {
                "type": "arrow",
                "data": {
                    "mode": "open-angle",
                    "pos": [
                        { "x": 1, "y": 0, "z": 0 },
                        { "x": 5, "y": 0, "z": 0 }
                    ]
                }
            },
            {
                "type": "text",
                "data": {
                    "content": "{\"blocks\":[{\"text\":\"Dummy Reaction\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],\"data\":{}}],\"entityMap\":{}}",
                    "position": { "x": 0, "y": 0.875, "z": 0 },
                    "pos": [
                        { "x": 0, "y": 0.875, "z": 0 },
                        { "x": 0, "y": 0.5, "z": 0 },
                        { "x": 2.24, "y": 0.5, "z": 0 },
                        { "x": 2.24, "y": 0.875, "z": 0 }
                    ]
                }
            },
            {
                "type": "text",
                "data": {
                    "content": "{\"blocks\":[{\"text\":\"Dummy Reaction\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":0,\"length\":14,\"style\":\"CUSTOM_FONT_SIZE_26px\"}],\"entityRanges\":[],\"data\":{}}],\"entityMap\":{}}",
                    "position": { "x": 0, "y": 1.725, "z": 0 },
                    "pos": [
                        { "x": 0, "y": 1.725, "z": 0 },
                        { "x": 0, "y": 1, "z": 0 },
                        { "x": 4.48, "y": 1, "z": 0 },
                        { "x": 4.48, "y": 1.725, "z": 0 }
                    ]
                }
            }
        ]
    },
    "mol0": {
        "type": "molecule",
        "atoms": [
            {
                "label": "C",
                "location": [ 0, 0, 0 ]
            }
        ]
    },
    "mol1": {
        "type": "molecule",
        "atoms": [
            {
                "label": "N",
                "location": [ 6, 0, 0 ]
            }
        ]
    }
}

You will see a scaled down version of the same reaction schema. However, text labels stay un-scaled, resulting a very bad presentation as shown below:

⇒ Ketcher Editor User Interface

⇐ One Molecule with Disconnected Parts

⇑ Ketcher File Format for Chemical Structures

⇑⇑ Ketcher - Chemical Structure Editor

2024-01-31, 178🔥, 0💬