Merge pull request #26 in STRUC/icn3d from release120 to master

added 2d interactions * commit '3002c340c70f27cb8cd404924acc13fb94e250ca': add 2D interactions, calculate secondary structures if necessary, separate files in different directories add 2D interactions, calculate secondary structures if necessary, separate files in different directories
ncbi · Aug 17, 2016 · ebacb0e · ebacb0e
2 parents 230d4a5 + 3002c34
commit ebacb0e
Show file tree

Hide file tree

Showing 22 changed files with 10,274 additions and 13,628 deletions.
diff --git a/README.md b/README.md
@@ -1,100 +1,102 @@
-# iCn3D Structure Viewer
-
-## iCn3D
-
-"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. It is based on the 3D styles of [iview](http://istar.cse.cuhk.edu.hk/iview/) and [GLmol](https://en.osdn.jp/projects/webglmol/), and the surface generation of [3Dmol](http://3dmol.csb.pitt.edu/). iCn3D has a feature-rich user interface and allows users to: use a url or a state file to capture the custom display of 3D structures, define custom atom sets, show both 3D structure and 1D sequence together and select residues on both of them, display custom labeling, go back and forth to different stage, show highlight, etc. iCn3D can also show the aligned 3D structures by providing two PDB IDs or MMDB IDs, whose alignment has been pre-calculated at NCBI.  
-
-We provided two versions of iCn3D widgets: [basic interface](https://www.ncbi.nlm.nih.gov/Structure/icn3d/index.html?mmdbid=2por) and [advanced interface](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por). 
-
-1. The basic interface has the minimum javascript code for the interface and is easy to understand. It has the basic features such as changing color and styles.
-2. The advanced interface has a library for the interface and is more complicated to understand. It has many features.
-
-Either of these widgets could be easily added to your own web pages. Please see the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html) for more details.
-
-<b>Complete package</b> of iCn3D including Three.js and jQuery can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.1.1.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.1.1.zip). The "Download ZIP" link in this page does not include these third-party libraries. 
-
-## Usage
-
-iCn3D accepts the following IDs:
-
-* <b>mmtfid</b>: MMTF ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=2por)
-* <b>pdbid</b>: PDB ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=2por)
-* <b>mmcifid</b>: mmCIF ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=2por)
-* <b>mmdbid</b>: NCBI MMDB ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por)
-* <b>gi</b>: NCBI protein gi number, [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=827343227](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=827343227)
-* <b>cid</b>: PubChem Compound ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=2244](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=2244)
-* <b>align</b>: Two PDB IDs or MMDB IDs for structure alignment, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n)
-
-iCn3D also accepts the following file types: PDB, mmCIF, Mol2, SDF, and XYZ. The files can be passed through a url, e.g., <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb">https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb</a>:
-
-See the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html) for more details.
-
-
-## Third-party libraries used
-
-* **[jQuery and jQuery UI](https://jquery.com/)**: used as a general tool to write Javascript code. Some jQuery UI features are used.
-* **[Three.js](http://threejs.org/)**: used to set up the 3D view.
-
-
-## Tools based on
-
-* **[iview](http://istar.cse.cuhk.edu.hk/iview/)**: The drawing of 3D objects is mainly based on iview.
-* **[GLmol](https://en.osdn.jp/projects/webglmol/)**: The drawing of nucleotides cartoon is from GLmol.
-* **[3Dmol](http://3dmol.csb.pitt.edu/)**: The surface generation and labeling are from 3Dmol.
-
-## Building
-
-If you want to work with the development version, then you'll need to use the Node.js build tools. We recommend using [nvm](https://github.com/creationix/nvm) (Node version manager). First, install that per the instructions in that README file, and then install the latest LTS version of Node.js, with, for example,
-
-```
-nvm install 4.2.2
-nvm alias default 4.2.2   #=> Use this as default from now on
-node --version            #=> expect "v4.2.2"
-```
-
-Next, clone this repository, and then perform the following setup steps in your working copy of icn3d. 
-
-```
-npm install -g gulp
-npm install
-```
-
-The first line installs the gulp build tool globally, making the `gulp` command available on the command line. The next line installs all of the dependences for this project.
-
-You only have to perform the above steps once, to set up your working directory. From then on, to build, simply enter:
-
-```
-gulp
-```
-
-Then, serve the site from an HTTP server, to test it. If you don't have one readily available, you could uses the `http-server` app, with:
-
-```
-npm install -g http-server
-http-server
-```
-
-Then point your browser at http://localhost:8080/icn3d.html.
-
-Run `gulp help` to get a list of the available tasks.
-
-A special task "gh-pages" will build the distribution files, and then push
-them to GitHub pages. Make sure, in your working clone, that you define a 
-remote named "github" that points to a repo on GitHub that you have write
-permission to, and then enter
-
-```
-gulp gh-pages
-```
-
-## Change log
-
-The production version [icn3d-1.1.1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.1.1.zip) was release on July 25, 2016. Some bugs were fixed.
-
-The production version [icn3d-1.1.0](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.1.0.zip) was release on July 18, 2016. The new binary MMTF file format was supported. A new "Analysis" menu was added with an option to show disulfide bonds. Users can also input data from a url, either through the UI or through a encoded url parameter "?type=pdb&url=...", e.g., <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb">https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb</a>.
-
-All previous releases can be found at the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#log).
-
-## Contact
-
-Please send all comments to wangjiy@ncbi.nlm.nih.gov. 
+# iCn3D Structure Viewer
+
+## iCn3D
+
+"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. It is based on the 3D styles of [iview](http://istar.cse.cuhk.edu.hk/iview/) and [GLmol](https://en.osdn.jp/projects/webglmol/), and the surface generation of [3Dmol](http://3dmol.csb.pitt.edu/). iCn3D has a feature-rich user interface and allows users to: use a url or a state file to capture the custom display of 3D structures, define custom atom sets, show 3D structure, 2D interactions, and 1D sequence together and select residues on all of them, display custom labeling, go back and forth to different stage, show highlight, etc. iCn3D can also show the aligned 3D structures by providing two PDB IDs or MMDB IDs, whose alignment has been pre-calculated at NCBI.  
+
+We provided two versions of iCn3D widgets: [basic interface](https://www.ncbi.nlm.nih.gov/Structure/icn3d/index.html?mmdbid=2por) and [advanced interface](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por). 
+
+1. The basic interface has the minimum javascript code for the interface and is easy to understand. It has the basic features such as changing color and styles.
+2. The advanced interface has a library for the interface and is more complicated to understand. It has many features.
+
+Either of these widgets could be easily added to your own web pages. Please see the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html) for more details.
+
+<b>Complete package</b> of iCn3D including Three.js and jQuery can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.0.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.0.zip). The "Download ZIP" link in this page does not include these third-party libraries. 
+
+## Usage
+
+iCn3D accepts the following IDs:
+
+* <b>mmdbid</b>: NCBI MMDB ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por&showseq=1&show2d=1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por&showseq=1&show2d=1)
+* <b>mmtfid</b>: MMTF ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=2por)
+* <b>pdbid</b>: PDB ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=2por)
+* <b>mmcifid</b>: mmCIF ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=2por)
+* <b>gi</b>: NCBI protein gi number, [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=827343227](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=827343227)
+* <b>cid</b>: PubChem Compound ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=2244](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=2244)
+* <b>align</b>: Two PDB IDs or MMDB IDs for structure alignment, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n)
+
+iCn3D also accepts the following file types: PDB, mmCIF, Mol2, SDF, and XYZ. The files can be passed through a url, e.g., <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb">https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb</a>:
+
+See the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html) for more details.
+
+
+## Third-party libraries used
+
+* **[jQuery and jQuery UI](https://jquery.com/)**: used as a general tool to write Javascript code. Some jQuery UI features are used.
+* **[Three.js](http://threejs.org/)**: used to set up the 3D view.
+
+
+## Tools based on
+
+* **[iview](http://istar.cse.cuhk.edu.hk/iview/)**: The drawing of 3D objects is mainly based on iview.
+* **[GLmol](https://en.osdn.jp/projects/webglmol/)**: The drawing of nucleotides cartoon is from GLmol.
+* **[3Dmol](http://3dmol.csb.pitt.edu/)**: The surface generation and labeling are from 3Dmol.
+
+## Building
+
+If you want to work with the development version, then you'll need to use the Node.js build tools. We recommend using [nvm](https://github.com/creationix/nvm) (Node version manager). First, install that per the instructions in that README file, and then install the latest LTS version of Node.js, with, for example,
+
+```
+nvm install 4.2.2
+nvm alias default 4.2.2   #=> Use this as default from now on
+node --version            #=> expect "v4.2.2"
+```
+
+Next, clone this repository, and then perform the following setup steps in your working copy of icn3d. 
+
+```
+npm install -g gulp
+npm install
+```
+
+The first line installs the gulp build tool globally, making the `gulp` command available on the command line. The next line installs all of the dependences for this project.
+
+You only have to perform the above steps once, to set up your working directory. From then on, to build, simply enter:
+
+```
+gulp
+```
+
+Then, serve the site from an HTTP server, to test it. If you don't have one readily available, you could uses the `http-server` app, with:
+
+```
+npm install -g http-server
+http-server
+```
+
+Then point your browser at http://localhost:8080/icn3d.html.
+
+Run `gulp help` to get a list of the available tasks.
+
+A special task "gh-pages" will build the distribution files, and then push
+them to GitHub pages. Make sure, in your working clone, that you define a 
+remote named "github" that points to a repo on GitHub that you have write
+permission to, and then enter
+
+```
+gulp gh-pages
+```
+
+## Change log
+
+The production version [icn3d-1.2.0](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.0.zip) was release on August 17, 2016. The dialog of 2D interactions was added to show the interactions among different chains. Both the nodes (chains) and lines (interactions) can be selected. Secondary structures will be calculated if the input PDB file has no defined secondary structure information. The previous files src/icn3d.js, src/full_ui.js, and src/simple_ui.js were separated into small files.
+
+The production version [icn3d-1.1.1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.1.1.zip) was release on July 25, 2016. Some bugs were fixed.
+
+The production version [icn3d-1.1.0](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.1.0.zip) was release on July 18, 2016. The new binary MMTF file format was supported. A new "Analysis" menu was added with an option to show disulfide bonds. Users can also input data from a url, either through the UI or through a encoded url parameter "?type=pdb&url=...", e.g., <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb">https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb</a>.
+
+All previous releases can be found at the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#log).
+
+## Contact
+
+Please send all comments to wangjiy@ncbi.nlm.nih.gov. 
diff --git a/full.html b/full.html
@@ -112,6 +112,14 @@
       showalignseq = false;
     }
 
+    var show2d = params.show2d;
+    if(show2d == 'true' || show2d == '1') {
+      show2d = true;
+    }
+    else if(show2d === undefined || show2d == 'false' || show2d == '0') {
+      show2d = false;
+    }
+
     var rotate = params.rotate;
     if(rotate === undefined) {
       rotate = 'right';
@@ -143,6 +151,7 @@
               showmenu: showmenu,
               showcommand: showcommand,
               showseq: showseq,
+              show2d: show2d,
               command: command
           };
           if(idName !== '') cfg[idName] = idArray[i];
@@ -190,6 +199,7 @@
               showcommand: showcommand,
               showseq: showseq,
               showalignseq: showalignseq,
+              show2d: show2d,
               align: align,
               command: command
           };

diff --git a/gulpfile.js b/gulpfile.js
@@ -97,12 +97,26 @@ var common_js = [
     "src/ProteinSurface4.js",
     "src/setupsurface.js",
     "src/mmtf.js",
-    "src/icn3d.js",
+    "src/icn3d/icn3d.js",
+    "src/icn3d/loadpdb.js",
+    "src/icn3d/drawing.js",
+    "src/icn3d/display.js",
+    "src/icn3d/other.js"
+];
+
+var common_uijs = [
+    "src/icn3dui/common.js",
+    "src/icn3dui/parsers/mmcif_mmdb_parser.js",
+    "src/icn3dui/parsers/mmtf_parser.js",
+    "src/icn3dui/parsers/mol2_parser.js",
+    "src/icn3dui/parsers/pdb_parser.js",
+    "src/icn3dui/parsers/sdf_parser.js",
+    "src/icn3dui/parsers/xyz_parser.js"
 ];
 
 // Create the gulp tasks for simple and full:
-make_js_task("simple", common_js.concat("src/simple_ui.js"));
-make_js_task("full", common_js.concat("src/full_ui.js"));
+make_js_task("simple", common_js.concat("src/icn3dui/simple_ui.js").concat(common_uijs));
+make_js_task("full", common_js.concat("src/icn3dui/full_ui.js").concat(common_uijs));
 
 gulp.task('html',
   'Rewrite the link and script tags in the html',