epam
Render api does not faithfully represent chemical structures in PNG
Summary
When exporting a chemical structure from ketcher as a PNG, the image created does not match the chemical structures shown in ketcher. SRU polymer brackets are dislocated in the PNG, and hydrogens are represented as HH instead of H2
Steps to Reproduce
I added the following structure to ketcher:
Ketcher 52424 9162D 1 1.00000 0.00000 0
8 7 0 0 0 0 0 0 0 0999 V2000
16.0547 -2.4559 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0
16.9208 -3.9559 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0
16.0547 -3.4559 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
15.1887 -3.9559 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
15.1887 -4.9559 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
14.3227 -5.4559 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
16.0547 -5.4559 0.0000 * 0 0 0 0 0 0 0 0 0 0 0 0
13.4566 -4.9559 0.0000 * 0 0 0 0 0 0 0 0 0 0 0 0
1 3 1 0 0 0
2 3 2 0 0 0
3 4 1 0 0 0
4 5 1 0 0 0
5 6 1 0 0 0
5 7 1 0 0 0
6 8 1 0 0 0
M STY 1 1 SRU
M SLB 1 1 1
M SCN 1 1 HT
M SMT 1 n
M SAL 1 6 1 2 3 4 5 6
M SBL 1 2 6 7
M SDI 1 4 15.6217 -4.4559 15.6217 -5.9559
M SDI 1 4 13.8897 -5.9559 13.8897 -4.4559
M SDS EXP 1 1
M END
When I try to save the structure as a PNG, I get the following:
In addition, if I add a hydrogen to the ketcher canvas and save this as an image, the image shows HH instead of H2.
ketcher canvas:
PNG:
Expected Behavior
I would expect the image created via the indigo render api to faithfully represent the structures created in the ketcher canvas.
Actual Behavior
The ketcher structure and exported image do not match. In the example above, the SRU polymer bracket on the right is in the wrong position and the n is added to the left bracket instead of the right bracket. For hydrogen, the image represents this as HH instead of H2.
Environment details:
- Indigo Version 1.18.0.0-g73c32dec3-x86_64-linux-gnu-11.2.1
- Ketcher Version 2.20.0 (https://lifescience.opensource.epam.com/KetcherDemo/index.html?api_path=/v2)
Bug is reproduced on Prod Ketcher (3.2.0)
On Test Ketcher (3.5.0) there is no png image preloaded and have 400 errors.
This may indicate related issues in newer versions of the export API.
1. Problem Description:
When exporting a chemical structure containing SRU (Structure-Repeat Unit) polymer brackets and implicit hydrogen atoms (Hydrogen) to PNG format, the generated image does not match the structure displayed on the Ketcher canvas. The SRU polymer brackets are dislocated, and implicit hydrogen atoms (Hidden Hydrogens), which should be represented as H2 (two hydrogen atoms), are displayed as HH (two individual hydrogen atoms). This leads to visual data distortion and can mislead the user.
Hypothetical Analysis of Causes: The probable cause lies in the rendering and PNG export mechanism. The export module may incorrectly interpret or apply coordinates and display rules for polymer brackets and hydrogen formatting when interacting with the Indigo API. This could be related to differences in rendering libraries used for on-canvas display (vector graphics) and for export (raster image via Indigo API). An error in calculating the positions for SRU brackets or in formatting hydrogen counts (H2 vs HH) when passing data to the Indigo renderer results in visual artifacts.
2. Steps to Reproduce:
- Click the "Import" or "Open" button on the toolbar.
- Paste the following MDL Molfile into the input field:
Ketcher 52424 9162D 1 1.00000 0.00000 0 8 7 0 0 0 0 0 0 0 0999 V2000 16.0547 -2.4559 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0 16.9208 -3.9559 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0 16.0547 -3.4559 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 15.1887 -3.9559 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 15.1887 -4.9559 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 14.3227 -5.4559 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 16.0547 -5.4559 0.0000 * 0 0 0 0 0 0 0 0 0 0 0 0 13.4566 -4.9559 0.0000 * 0 0 0 0 0 0 0 0 0 0 0 0 1 3 1 0 0 0 2 3 2 0 0 0 3 4 1 0 0 0 4 5 1 0 0 0 5 6 1 0 0 0 5 7 1 0 0 0 6 8 1 0 0 0 M STY 1 1 SRU M SLB 1 1 1 M SCN 1 1 HT M SMT 1 n M SAL 1 6 1 2 3 4 5 6 M SBL 1 2 6 7 M SDI 1 4 15.6217 -4.4559 15.6217 -5.9559 M SDI 1 4 13.8897 -5.9559 13.8897 -4.4559 M SDS EXP 1 1 M END - Import the structure onto the Ketcher canvas. Verify that it displays correctly, with properly positioned SRU polymer brackets and hydrogen atoms, as shown in screenshot
333600365-a8b79c16-9400-47f8-bd42-b690ed691435.png. - Save the image in PNG format (File -> Save As -> PNG Image).
- Open the saved PNG file.
3. Expected Behavior:
The generated PNG image is expected to faithfully represent the chemical structure displayed on the Ketcher canvas. This includes:
- Correct positioning and display of SRU polymer brackets.
- Proper formatting of implicit hydrogen atoms, e.g., "H2" instead of "HH".
4. Actual Behavior:
The saved PNG image does not match the structure display on the Ketcher canvas.
- SRU Polymer Brackets (Structure-Repeat Unit): The right SRU polymer bracket is missing, and the "n" label is misplaced and attached to the left bracket, although on the canvas, both brackets and the "n" label are displayed correctly.
- Hydrogen Display: Implicit hydrogen atoms (Hidden Hydrogens), which should be represented as H2, are displayed as HH.
Reproducibility: The bug is 100% reproducible on Prod Ketcher (3.2.0). Additional Observation: On the test version of Ketcher (3.5.0), 400 errors are observed when attempting to preview PNG images, and the image itself fails to load.
5. Analysis of the Problem:
The problem indicates a discrepancy between the rendering logic of the structure on the Ketcher UI canvas and the rendering logic used by the Indigo API for generating the raster PNG image. This is particularly evident with complex elements such as SRU polymer brackets and the formatting of implicit hydrogens.
Potentially Involved Systems/Modules:
- Ketcher Core (Rendering Engine): It's likely that Ketcher uses one rendering logic for on-screen display and another (or the Indigo API) for export. Differences in the implementation of these two paths can lead to inconsistencies.
- Indigo API / Indigo Service: The Indigo API itself, used by Ketcher for rendering images for export, might incorrectly process or position SRU elements and format hydrogens.
- Image Export Module: This module within Ketcher is responsible for sending structure data to the Indigo API and receiving the response. It's possible that the data is being transmitted in a format that Indigo does not fully support or interprets differently.
- Hydrogen Display Logic: There's a mismatch in how multiple hydrogens (H2) are displayed on the canvas and in the exported PNG.
6. Suggested Solutions:
High-Level Solution: Ensure full unification of the rendering mechanism for displaying structures on the Ketcher canvas and for exporting to raster formats (e.g., PNG) via the Indigo API. This means that any modification or display on the canvas must be accurately reproduced in the exported image. Conduct an audit and synchronize the rendering rules for SRU and hydrogen display between the UI and the Indigo API.
Technical Solution:
- Debug Indigo API Calls: Analyze in detail the JSON objects or other data that Ketcher sends to the Indigo API for PNG rendering. Ensure that this data correctly contains information about SRU bracket positions and hydrogen formatting.
- Indigo Configuration: Examine the Indigo API documentation for rendering options that might affect the positioning of polymer brackets and hydrogen formatting. There may be flags or settings that need to be passed to Indigo to achieve the desired result.
-
Hydrogen Handling: Check the logic responsible for the automatic display of hydrogens (explicit/implicit, H2 vs HH). Ensure that the same formatting algorithm is applied during export as on the canvas. It may be necessary to reconsider how the Molfile or other chemical notation is converted for the Indigo API to avoid the incorrect
HHdisplay. -
Code Example (Hypothetical, for Indigo API):
If the Indigo API is called via
ketcher.generateImage(molfile, options), thenoptionsshould include correct rendering parameters.// Illustrative pseudo-code for calling Indigo API for export // (assuming the problem is in the parameters passed to Indigo) async function exportPngWithCorrectRender(molfile: string): Promise<Blob> { // Get current Ketcher UI rendering settings (if available) const ketcherRenderSettings = ketcher.editor.getRenderOptions(); // Hypothetical method // Define parameters for Indigo API that should match the UI const indigoRenderParams = { ...ketcherRenderSettings, // Pass all relevant settings // Potentially specific Indigo flags for SRU and hydrogens are needed "render.sru_brackets_positioning": "auto", // Or "exact" "render.hydrogen_display": "H2", // Or "grouped" // Additional parameters for exact Molfile correspondence }; try { // Call Indigo API via Ketcher's API or directly const pngBlob = await ketcher.api.render.image(molfile, 'png', indigoRenderParams); return pngBlob; } catch (error) { console.error('Error rendering image with Indigo API:', error); throw error; } }- Documentation Improvement: Add explicit instructions to Ketcher documentation (and potentially Indigo API documentation, if the issue is there) regarding rendering options affecting SRU and hydrogen display, along with examples of their use to ensure exact correspondence between the canvas and export.
