iCn3D Structure Viewer

AI Tutor for iCn3D: shows step-by-step instructions about how to build a custom view

About iCn3D

"I see in 3D" (iCn3D) Structure Viewer is not only a web-based 3D viewer, but also a structure analysis tool interactively or in the batch mode using NodeJS scripts based on the npm package icn3d. iCn3D synchronizes the display of 3D structure, 2D interaction, and 1D sequences and annotations. Users' custom display can be saved in a short URL or a PNG image. The complete package of iCn3D including Three.js and jQuery is in the directory "dist" after you get the source code with the "Code" button. You can click the file "index.html" in the "dist" directory to launch a local version of iCn3D.

• View a 3D structure in iCn3D:

As mentioned in the menu "Help > Transformation Hints", you can use Left mouse button for rotation, Middle mouse wheel for zooming, and Right mouse button for translation.

The most important point about using iCn3D is the current selection. Any operations on color, style, etc. are working on the current selection. By default, all atoms are selected. Once you select any subset, your operation will work ONLY on the subset. You can switch the selection using the toggle next to the Help menu.

• VR and AR views in iCn3D:

You can open a bowser in your Virtual Reality (VR) headset and view a 3D structure in iCn3D. Then click the button "Enter VR" at the bottom center of your browser to enter the VR view. You can select residues with the trigger button, open the menu with the squeeze button and click menus with the trigger, navigate with the thumbstick pressed forward/backward and press the trigger. There are menus for Select, Style, Color, and Analysis. You need to make one selection before clicking the Interaction button and make two selections before clicking the Distance button.

The Augmented Reality (AR) view is currently only available to iCn3D views in Chrome browser using Android phones. You can view a 3D structure in iCn3D and click the button "START AR" at the bottom center to see the 3D structure in your surroundings. You can tap twice quickly on the screen to locate a minimized 3D structure in your tapped location, and pinch to scale the 3D structure.

• Create custom 3D view:

Each operation has a corresponding command as listed at https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#commands. These commands will show up in the command/log window right beneath the 3D display. To view all previous commands, you can click "Share Link" in "File" menu. Both the original URL and the short URL can be used to display your custom view.

• Save your work:

The "iCn3D PNG Image" can also be stored in a web server (e.g., https://figshare.com, https://zenodo.org). The PNG image can then be loaded into iCn3D via the URL, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?type=icn3dpng&url=https://api.figshare.com/v2/file/download/39125801, or https://www.ncbi.nlm.nih.gov/Structure/icn3d/?type=icn3dpng&url=https://zenodo.org/api/files/1a3325c8-0c84-4f1e-be2c-c143b08c6563/3GVU-XCxR6fSTmXHxR3o1A.png, where the URL of the PNG image is retrieved from the JSON blob at https://zenodo.org/api/records/7599970. You can also save "Share Link" in "File" menu to share with your colleagues. These URLs are lifelong. You can click "Replay Each Step > On" in "File" menu to learn how a custom display was generated. (Note: Due to the retirement of Google Firebase Dynamic Link, any short URL containing "https://icn3d.page.link/" should be replaced with "https://www.ncbi.nlm.nih.gov/Structure/icn3d/share.html?". For example, "https://icn3d.page.link/2rZWsy1LZmtTS3kBA" should be replaced with "https://www.ncbi.nlm.nih.gov/Structure/icn3d/share.html?2rZWsy1LZmtTS3kBA".) All "Share Link" URLs can show the original view using the archived version of iCn3D by clicking "Open File > Share Link in Archived Ver." in "File" menu.

• Python scripts to batch process structures:

• Node.js scripts using npm "icn3d" to batch process structures:

• Annotations for AlphaFold structures:

• Align AlphaFold structures:

• Alternate SNPs in 3D:

• DelPhi Electrostatic Potential:

• Isoforms and Exons:

• Multiple Sequence Alignment (MSA) Input:

• Symmetry:

• Use iCn3D in Jupyter Notebook:

• 2D Diagram for RNAs and Ig Domains:

• 2D Cartoons in the chain, domain, and secondary structure levels:

• Contact Map for any Selected Residues:

• More features are listed at www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html: binding site, interaction interface, 3D printing, transmembrane proteins, surface, EM map, electron density map from MTZ, CCP4, or DSN6, 1D sequences and 2D interactions, align two structures, align multiple chains, align a protein sequence to a structure, realign, custom tracks, force-directed graph for interactions, solvent accessible surface area, save videos, etc.

Embed iCn3D with iframe or JavaScript libraries

iCn3D can be embedded in a web page by including the URL in HTML iframe, e.g. . This method always shows the most recent version of iCn3D.

To embed iCn3D with JavaScript libraries, the following libraries need to be included: jQuery, jQuery UI, Three.js, and iCn3D library. An html div tag to hold the 3D viewer is added. The iCn3D widget is initialized with the custom defined parameter "cfg": "let icn3dui = new icn3d.iCn3DUI(cfg); await icn3dui.show3DStructure();". Multiple iCn3D widgets can be embedded in a single page. Please see the source code of the example page for reference.

Users can choose to show the most recent version of iCn3D, or a locked version of iCn3D. To show the most recent version, use the library files without the version postfix as shown in the iCn3D Doc page. To show a locked version, use the library files with the version postfix as shown in the source code of iCn3D page. If the input is provided as an MMDB ID, both library files and backend cgis are versioned so that the 3D display will be stable.

Data Sources

iCn3D accepts the following IDs:

• mmdbafid: A list of PDB or AlphaFold UniProt IDs for realignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?mmdbafid=1HHO,4N7N,P69905,P01942. You can then input multiple PDB files with the menu "File > Open File > PDB Files (appendable)". Next you can click the menu "File > Realign Selection > by Structure Alignment" to realign all loaded structures.
• protein: Protein/Gene name to search AlphaFold structures, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?protein=TP53&showanno=1&showsets=1
• mmdbid: NCBI MMDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?mmdbid=1tup&showanno=1&show2d=1&showsets=1
• bcifid or mmtfid: Binary CIF ID or MMTF ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?bcifid=1tup&show2d=1&showsets=1
• pdbid: PDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?pdbid=1tup&showanno=1&showsets=1
• afid: AlphaFold Structure with UniProt ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?afid=A0A061AD48&showanno=1&showsets=1
• refseqid: AlphaFold Structure with NCBI Protein Accession, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?refseqid=NP_001743.1&show2d=1&showsets=1
• opmid: Orientations of Proteins in Membranes(OPM) PDB ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?opmid=6jxr&show2d=1&showsets=1
• mmcifid: mmCIF ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?mmcifid=1tup&show2d=1&showsets=1
• cid: PubChem Compound ID, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?cid=2244
• align two structures: two PDB IDs or MMDB IDs for structure alignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?align=1hho,4n7n&showalignseq=1&show2d=1&showsets=1
• align multiple chains: any multiple chains for structure alignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?chainalign=1HHO_A,4N7N_A&showalignseq=1&show2d=1&showsets=1
• blast_rep_id and query_id: NCBI protein accessions of a protein sequence and a chain of a 3D structure for sequence-structure alignment, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?from=icn3d&blast_rep_id=1TSR_A&query_id=NP_001108451.1&command=view annotations; set annotation cdd; set annotation site; set view detailed view; select chain 1TSR_A; show selection

Third-party libraries used in Frontend

• jQuery and jQuery UI: used as a general tool to write Javascript code. Some jQuery UI features are used.
• Three.js: used to set up the 3D view.
• Force-Directed Graph: "2D Graph (Force-Directed)" in the menu "Analysis > Interactions" is based on Force-Directed Graph.
• R2DT diagram: R2DT diagram via the menu "Analysis > 2D Diagram > for RNAs > R2DT Diagram" uses the R2DT widget from RNAcentral and pdb-rna-viewer.
• RNAcanvas: 2D diagram via the menu "Analysis > 2D Diagram > for RNAs > 2D Diagram with RNAcanvas" uses the RNAcanvas widget.

Third-party libraries used in Backend

• DelPhi: used to calculate electrostatic potential dynamically and is licensed from Columbia University.
• DelPhiPKa: used to add hydrogens and partial charges to proteins and nucleotides.
• Open Babel: used to add hydrogens to ligands, convert PDB to SVG, and convert SMILES to PDB.
• Antechamber: used to add partial charges to ligands.
• SymD: used to calculate symmetry dynamically.
• scap/Jackal: used to predict side chain conformation dynamically.
• TM-align: used to align two chains of 3D structures.
• FR3D: used to retrieve basepairs for PDB structures.

Tools based on

• iview: The drawing of 3D objects is based on iview.
• GLmol: The drawing of nucleotides cartoon is based on GLmol.
• 3Dmol: The surface generation and labeling are based on 3Dmol.
• NGL Viewer: The Imposter shaders are based on NGL Viewer.

• py3Dmol: The Jupyter Notebook widget "icn3dpy" is based on py3Dmol.
• Orientations of Proteins in Membranes (OPM): The membrane data of transmembrane proteins are from OPM.
• Membranome: For AlphaFold Structures, the membrane data of single-spanning transmembrane proteins are from Membranome.
• Post-Translational Modification (PTM): The PTM data are from UniProt.
• UglyMol: The electron density maps from CCP4 map or MTZ format are based on UglyMol.

Building

If you want to build your code easily, you'll need to install nodejs and npm.

Next, clone this repository, and then perform the following setup steps in your working copy of icn3d.

npm config set -g production false
npm install -g gulp
npm install
npm install [email protected]
delete package-lock.json

The first line sets the npm default as dev so that all modules will be installed. The second line installs the gulp build tool globally, making the gulp command available on the command line. The third line install all modules. The fourth line changes the version of uglify-js to an old version, which does not compress class names. The last line may be required for a fresh build to remove old package-lock.json.

You only have to perform the above steps once, to set up your working directory. From then on, to build, simply enter:

gulp

Contact

Please send all comments to [email protected].

Citing

Wang J, Youkharibache P, Marchler-Bauer A, Lanczycki C, Zhang D, Lu S, Madej T, Marchler GH, Cheng T, Chong LC, Zhao S, Yang K, Lin J, Cheng Z, Dunn R, Malkaram SA, Tai C-H, Enoma D, Busby B, Johnson NL, Tabaro F, Song G, Ge Y. iCn3D: From Web-Based 3D Viewer to Structural Analysis Tool in Batch Mode. _Front. Mol. Biosci._ 2022 9:831740. (Epub 2022 Feb 17.) doi: 10.3389/fmolb.2022.831740. PubMed PMID: 35252351, Full Text at Frontiers