CSDB/SNFG editor: external usage

CSDB/SNFG editor is a web application for carbohydrate building.

SNFG-compatible graphical building of glycan and glycoconjugate structures
support for all known structural features of natural carbodrates
export to multiple carbohydrate notations
export to chemical atom-based formats (SMILES, MOL, PDB)
rendering of structural formulas and optimized 3D coordinates
easy porting to any external project

This tool was designed in the framework of Carbohydrate Structure Database, coded by Andrei Bochkov, and supervised by Philip Toukach.

For user manual please refer to online help.

Usage in your project

You can use the CSDB/SNFG editor in your project for free. If you do not need the returned CSDB Linear code, users can still export structures in other notations from the editor interface, or use the editor to prepare SNFG illustrations or SNFG-colored 3D molecular models.

To integrate CSDB/SNFG editor in your code, please do the following:

1. Download the distribution bundle csdb-snfg-editor_1-0-6.zip (1-0-6 is a version number) and unpack it to a dedicated directory of your web-server. The package includes files:

/icons/*.svg - collection of icons used by the Editor
/snfgedit_X-X-X.js - main JavaScript file
/snfgedit_X-X-X.css - main CSS file
/snfgedit_extend.css - auxiliary CSS file
/snfgedit_config.js - configuration file (to be edited)
/snfgedit_hints.js - collection of messages and strings used in the Editor
/snfgedit_jsmol.html - HTML-container for the 3D-viewer used in the Editor
/molview.js - JavaScript class for the logic and programmatic interface of the 3D viewer for the Editor
/snfgedit.html - a host HTML-file for the editor (open it to start the Editor)

2. Specify URLs of your resources in snfgedit_config.js. Absolute or relative (to the editor host page URL) paths can be used.

URL_API - location of the API entry point. Connection to the API is required for the Editor to operate. It is recommended to use the existing CSDB API at http://csdb.glycoscience.ru/database/core/snfgedit_api.php
URL_JSMOL - location of JSmol (a JavaScript library to work with 3D molecular structure, usually jsmol_min.js) main file. If editor fails to load this file, the 3D view functionality will be unavailable. For correct startup of JSmol, your installation must contain ./j2s/*.* and ./php/jsmol.php files.

3A. Using editor in a separate tab (recommended)
You can use pre-configured snfgedit.html from the distribution bundle as a host HTML-file or use your own file with the following configurations:
Set id attributes for required DOMElements (HTML tags) in snfgedit_config.js:

ID_CONTAINER: id of the element, in which the editor is initialized;
ID_OPENER: set to null;
ID_CSDBLINEAR: id of the element, where editor places output CSDB Linear code on pressing Done button. This element is expected to reside in a browser document (tab), parent to the Editor tab (scenario when you launch Editor in a new tab by clicking on <a> element and wish to put the returned CSDB Linear code somewhere in the original tab). Parent tab is accessed via JavaScript object window.opener.document. As modern browsers block inter-tab communications by default, the opener-link element must contain a rel="opener" attribute to overcome this (example: <a href="path-to-snfgedit-dir/snfgedit.html" rel="opener" target="_blank">Draw in CSDB/SNFG editor</a>).

3B. Embedding editor into any existing page of your web site (host HTML file). Open editor within this page as a popup by clicking on a dedicated element.
Set id attributes for required DOMElements (HTML tags) in snfgedit_config.js:

ID_CONTAINER: id of the element, in which the editor is initialized;
ID_OPENER: id of the element, which toggles the editor visibility (open/close) on click;
ID_CSDBLINEAR: id of the element, where editor places output CSDB Linear code on pressing Done button.

4. Insert the required HTML elements according to the above configuration (3A or 3B) into the <body> section of the host HTML file.

5. Insert <script> element with proper src attribute for the main JS file (snfgedit_X-X-X.js) at the end of the <body> element (paste before </body>) of the host HTML file.

6. Insert <link> elements with proper href attributes for CSS files (snfgedit_X-X-X.css and snfgedit_extend.css) inside the <head> section of the host HTML file.

7. Please ensure that authorship is correctly referenced:

If you publish the CSDB/SNFG editor or its modification on the web or as a scientific paper, please cite CSDB. The original paper on the CSDB/SNFG editor is: A.Y. Bochkov, Ph.V. Toukach - J Chem Inf Model 2021, 61(10):4940-4948 [doi: 10.1021/acs.jcim.1c00917].
If you use the editor as is, or with minor technical reconfiguration, please ensure that URL_MANUAL option in the snfgedit_config.js file is preserved, and the copyright message below the editor displays © Carbohydrate Structure Database.
If you modify / upgrade the code, please edit the message accordingly: This software was modified by <your name or company> from the original Carbohydrate Structure Database SNFG editor

Home