Skip to content

Commit

Permalink
Merge pull request #194 in STRUC/icn3d from release283 to master
Browse files Browse the repository at this point in the history 
* commit '5cf1b98bd20f3a05bb797784755f1df24bc8cd61':
  Display/output salt bridges; color helices and sheets with spectrum in the menu "Color > Secondary > Spectrum".
  • Loading branch information
@jiywang3
jiywang3 committed Nov 5, 2019
2 parents 1ce16be + 5cf1b98 commit 1f3914e
Show file tree
Hide file tree
Showing 15 changed files with 574 additions and 157 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
## Change Log
[icn3d-2.8.3](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.3.zip) was release on November 5, 2019. Display/output salt bridges; color helices and sheets with spectrum in the menu "Color > Secondary > Spectrum".

[icn3d-2.8.2](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.2.zip) was release on October 29, 2019. Reduced the size of three.js (version 103) library. Added links to dbSNP in the mouseover texts of SNP annotations.

[icn3d-2.8.1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.1.zip) was release on October 21, 2019. Fixed the 2D interaction display in structure alignment. The bug was introduced in the last release.
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ We provided two types of iCn3D widgets: [basic interface](https://www.ncbi.nlm.n

Either of these widgets could be easily added to your own web pages as shown in the section of "Embed iCn3D with iframe or JavaScript libraries" below.

<b>Complete package</b> of iCn3D including Three.js and jQuery can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.2.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.2.zip). The "Download ZIP" link in this page does not include third-party libraries.
<b>Complete package</b> of iCn3D including Three.js and jQuery can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.3.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.3.zip). The "Download ZIP" link in this page does not include third-party libraries.

## Usage

Expand Down
13 changes: 11 additions & 2 deletions icn3d.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,7 +601,7 @@ <h2>How to embed iCn3D Structure Viewer in your html page:<img src="https://www.
<ul>
<li><a name="embedIframe"></a><b>Embed using iframe</b><br>
<p>To embed iCn3D Structure Viewer in your own HTML page using iframe, simply add the following to your page:
</p><div class="indent"><code>&lt;iframe src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup&amp;width=300&amp;height=300&amp;showmenu=0&amp;rotate=0" width="320" height="320" style="border:none"&gt;&lt;/iframe&gt;</code></div><br>
</p><div class="indent"><code>&lt;iframe src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup&amp;width=300&amp;height=300&amp;showcommand=0&amp;mobilemenu=1&amp;showtitle=0" width="320" height="320" style="border:none"&gt;&lt;/iframe&gt;</code></div><br>

</li>
<li><a name="embedJS"></a><b>Embed using Javascript</b><br>
Expand Down Expand Up @@ -926,10 +926,14 @@ <h2>Menus, Commands, and Methods of the advanced interface<img src="https://www.
<tr><td valign='top'><span class="indent">Show:</span></td> <td valign='top'>set chemicalbinding show</td> <td valign='top'>me.setOption('chemicalbinding', 'show');</td></tr>
<tr><td valign='top'><span class="indent">Hide:</span></td> <td valign='top'>set chemicalbinding hide</td> <td valign='top'>me.setOption('chemicalbinding', 'hide');</td></tr>

<tr><td colspan="3"><br>f) View -&gt; H-Bonds to Selection</td> </tr>
<tr><td colspan="3"><br>f) View -&gt; H-Bonds</td> </tr>
<tr><td valign='top'><span class="indent">Show:</span></td> <td valign='top'>hbonds [hbond threshold in angstrom]</td> <td valign='top'><a href="#showHbonds">showHbonds</a></td></tr>
<tr><td valign='top'><span class="indent">Hide:</span></td> <td valign='top'>set hbonds off</td> <td valign='top'><a href="#hideHbonds">hideHbonds</a></td></tr>

<tr><td colspan="3"><br>f) View -&gt; Salt Bridge</td> </tr>
<tr><td valign='top'><span class="indent">Show:</span></td> <td valign='top'>salt bridge [salt bridge threshold in angstrom]</td> <td valign='top'><a href="#showSaltbridge">showSaltbridge</a></td></tr>
<tr><td valign='top'><span class="indent">Hide:</span></td> <td valign='top'>set salt bridge off</td> <td valign='top'><a href="#hideSaltbridge">hideSaltbridge</a></td></tr>

<tr><td colspan="3">g) View -&gt; Interactions</td> </tr>
<tr><td valign='top'><span class="indent">Display:</span></td> <td valign='top'>select zone cutoff [cutoff in angstrom]</td> <td valign='top'><a href="#pickCustomSphere">pickCustomSphere</a></td></tr>

Expand All @@ -954,6 +958,7 @@ <h2>Menus, Commands, and Methods of the advanced interface<img src="https://www.
<tr><td colspan="3"><br>l) View -&gt; Label</td> </tr>
<tr><td valign='top'><span class="indent">by Picking Atoms:</span></td> <td valign='top'>add label [label text] | x [x] y [y] z [z] | size [label size] | color [FF0000] | background [FFFFFF]</td> <td valign='top'><a href="#addLabel">addLabel</a></td></tr>
<tr><td valign='top'><span class="indent">per Selection:</span></td> <td valign='top'>add label [label text] | size [label size] | color [FF0000] | background [FFFFFF]</td> <td valign='top'><a href="#addLabel">addLabel</a></td></tr>
<tr><td valign='top'><span class="indent">per Atom:</span></td> <td valign='top'>add atom labels</td> <td valign='top'><a href="#addAtomLabels">addAtomLabels</a></td></tr>
<tr><td valign='top'><span class="indent">per Residue:</span></td> <td valign='top'>add residue labels</td> <td valign='top'><a href="#addResiudeLabels">addResiudeLabels</a></td></tr>
<tr><td valign='top'><span class="indent">per Chain:</span></td> <td valign='top'>add chain labels</td> <td valign='top'><a href="#addLabel">addLabel</a></td></tr>
<tr><td valign='top'><span class="indent">N- & C- Termini:</span></td> <td valign='top'>add terminal labels</td> <td valign='top'><a href="#addTerminiLabels">addTerminiLabels</a></td></tr>
Expand Down Expand Up @@ -1127,6 +1132,7 @@ <h2>Menus, Commands, and Methods of the advanced interface<img src="https://www.
<tr><td width="240">Color -&gt; Spectrum:</td> <td valign='top'>color spectrum</td> <td valign='top'><a href="#setColorByOptions">setColorByOptions</a></td></tr>
<tr><td width="240">Color -&gt; Secondary (Sheet in Green):</td> <td valign='top'>color secondary structure</td> <td valign='top'><a href="#setColorByOptions">setColorByOptions</a></td></tr>
<tr><td width="240">Color -&gt; Secondary (Sheet in Yellow):</td> <td valign='top'>color secondary structure yellow</td> <td valign='top'><a href="#setColorByOptions">setColorByOptions</a></td></tr>
<tr><td width="240">Color -&gt; Secondary (Spectrum):</td> <td valign='top'>color secondary structure spectrum</td> <td valign='top'><a href="#setColorByOptions">setColorByOptions</a></td></tr>
<tr><td valign='top'>Color -&gt; Charge:</td> <td valign='top'>color charge</td> <td valign='top'><a href="#setColorByOptions">setColorByOptions</a></td></tr>
<tr><td valign='top'>Color -&gt; Hydrophobic:</td> <td valign='top'>color hydrophobic</td> <td valign='top'><a href="#setColorByOptions">setColorByOptions</a></td></tr>
<tr><td valign='top'>Color -&gt; Chain:</td> <td valign='top'>color chain</td> <td valign='top'><a href="#setColorByOptions">setColorByOptions</a></td></tr>
Expand Down Expand Up @@ -1269,6 +1275,7 @@ <h2>Display Options<img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/spacer.g
opts['opacity'] = '1.0'; //1.0, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1
opts['wireframe'] = 'no'; //yes, no
opts['hbonds'] = 'no'; //yes, no
opts['saltbridge'] = 'no'; //yes, no
opts['ssbonds'] = 'yes'; //yes, no
opts['chemicalbinding'] = 'hide'; //show, hide
opts['axis'] = 'no'; //yes, no
Expand Down Expand Up @@ -2014,6 +2021,8 @@ <h3>Methods <a href="#Top"><span class="top">&nbsp;&nbsp;&nbsp;</span></a></h3>

<a name="log"></a>
<h2>Change Log:<img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/spacer.gif" width="25" height="1" border="0"><a href="#Top"><img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/arrowup_blue.gif" width="12" height="12" border="0" alt="back to top"></a></h2>
<a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.3.zip">icn3d-2.8.3</a> was release on November 5, 2019. Display/output salt bridges; color helices and sheets with spectrum in the menu "Color > Secondary > Spectrum".

<a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.8.2.zip">icn3d-2.8.2</a> was release on October 29, 2019. Reduced the size of three.js (version 103) library. Added links to dbSNP in the mouseover texts of SNP annotations.
<br><br>

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "icn3d",
"version": "2.8.2",
"version": "2.8.3",
"description": "iCn3D Structure Viewer",
"main": "index.html",
"scripts": {
Expand Down
68 changes: 65 additions & 3 deletions src/icn3d/display/display_common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,11 @@ iCn3D.prototype.setColorByOptions = function (options, atoms, bUseInputColor) {
if(!atom.het) ++cnt;
}

var lastTerSerialInv = 1 / cnt;
var lastTerSerialInv = (cnt > 1) ? 1 / (cnt - 1) : 1;
for (var i in atoms) {
var atom = this.atoms[i];
atom.color = atom.het ? this.atomColors[atom.elem] || this.defaultAtomColor : new THREE.Color().setHSL(2 / 3 * (1 - idx++ * lastTerSerialInv), 1, 0.45);
//atom.color = this.atomColors[atom.elem] || this.defaultAtomColor;
//atom.color = atom.het ? this.atomColors[atom.elem] || this.defaultAtomColor : new THREE.Color().setHSL(2 / 3 * (1 - idx++ * lastTerSerialInv), 1, 0.45);
atom.color = atom.het ? this.atomColors[atom.elem] || this.defaultAtomColor : new THREE.Color().setHSL(3 / 4 * (1 - idx++ * lastTerSerialInv), 1, 0.45);

this.atomPrevColors[i] = atom.color;
}
Expand Down Expand Up @@ -149,6 +149,68 @@ iCn3D.prototype.setColorByOptions = function (options, atoms, bUseInputColor) {

break;

case 'secondary structure spectrum':
var idx = 0, cnt = 0;

var ssArray = [], coilArray = [];
var prevI = -9999, start;
var currSS, prevSS, currResi, prevResi;
for (var i in atoms) {
// only for proteins
if(!this.proteins.hasOwnProperty(i)) continue;

var atom = this.atoms[i];

currSS = atom.ss;
currResi = atom.resi;

if(prevI == -9999) start = parseInt(i);

if(prevI != -9999 && (currSS != prevSS || Math.abs(currResi - prevResi) > 1) ) {
if(prevSS == 'coil') {
coilArray.push([start, prevI]);
}
else {
ssArray.push([start, prevI]);
}
start = i;
}

prevI = parseInt(i);
prevSS = currSS;
prevResi = currResi;
}

if(prevSS == 'coil') {
coilArray.push([start, prevI]);
}
else {
ssArray.push([start, prevI]);
}

cnt = ssArray.length;
var lastTerSerialInv = (cnt > 1) ? 1 / (cnt - 1) : 1;
for (var i = 0, il = ssArray.length; i < il; ++i) {
//var color = new THREE.Color().setHSL(2 / 3 * (1 - idx++ * lastTerSerialInv), 1, 0.45);
var color = new THREE.Color().setHSL(3 / 4 * (1 - idx++ * lastTerSerialInv), 1, 0.45);

for(var serial = ssArray[i][0]; serial <= ssArray[i][1]; ++serial) {
var atom = this.atoms[serial];
atom.color = color;
this.atomPrevColors[serial] = atom.color;
}
}

var color = this.ssColors2['coil']
for (var i = 0, il = coilArray.length; i < il; ++i) {
for(var serial = coilArray[i][0]; serial <= coilArray[i][1]; ++serial) {
var atom = this.atoms[serial];
atom.color = color;
this.atomPrevColors[serial] = atom.color;
}
}
break;

case 'residue':
for (var i in atoms) {
var atom = this.atoms[i];
Expand Down
62 changes: 59 additions & 3 deletions src/icn3d/display/display_full.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,29 @@ iCn3D.prototype.hideHbonds = function () {
}
};

iCn3D.prototype.hideSaltbridge = function () {
this.opts["saltbridge"] = "no";
if(this.lines === undefined) this.lines = {};
this.lines['saltbridge'] = [];
this.saltbridgepnts = [];

for(var i in this.atoms) {
this.atoms[i].style2 = 'nothing';
}

for(var i in this.sidec) {
if(this.hAtoms.hasOwnProperty(i)) {
this.atoms[i].style2 = this.opts["sidec"];
}
}

for(var i in this.water) {
if(this.hAtoms.hasOwnProperty(i)) {
this.atoms[i].style = this.opts["water"];
}
}
};

iCn3D.prototype.applySsbondsOptions = function (options) {
if(options === undefined) options = this.opts;

Expand Down Expand Up @@ -477,16 +500,46 @@ iCn3D.prototype.applySurfaceOptions = function (options) {
}
};

iCn3D.prototype.setHbondsSaltbridge = function (options, bSaltbridge) {
var hbond_saltbridge = (bSaltbridge !== undefined && bSaltbridge) ? 'saltbridge' : 'hbond';
var hbonds_saltbridge = (bSaltbridge !== undefined && bSaltbridge) ? 'saltbridge' : 'hbonds';

this.lines[hbond_saltbridge] = [];

if (options[hbonds_saltbridge].toLowerCase() === 'yes') {
var color = '#00FF00';
var pnts = (bSaltbridge !== undefined && bSaltbridge) ? this.saltbridgepnts : this.hbondpnts;

for (var i = 0, lim = Math.floor(pnts.length / 2); i < lim; i++) {
var line = {};
line.position1 = pnts[2 * i].coord;
line.serial1 = pnts[2 * i].serial;
line.position2 = pnts[2 * i + 1].coord;
line.serial2 = pnts[2 * i + 1].serial;
line.color = color;
line.dashed = true;

// only draw bonds connected with currently displayed atoms
if(line.serial1 !== undefined && line.serial2 !== undefined && !this.dAtoms.hasOwnProperty(line.serial1) && !this.dAtoms.hasOwnProperty(line.serial2)) continue;

//if(this.lines[hbond_saltbridge] === undefined) this.lines[hbond_saltbridge] = [];
this.lines[hbond_saltbridge].push(line);
}
}
};

iCn3D.prototype.applyOtherOptions = function (options) {
if(options === undefined) options = this.opts;

if(this.lines !== undefined) {
this.lines['hbond'] = [];
//this.lines['hbond'] = [];
//this.lines['saltbridge'] = [];

//common part options

// lines
//if (options.hbonds.toLowerCase() === 'yes' || options.ncbonds.toLowerCase() === 'yes') {
// hbond lines
this.setHbondsSaltbridge(options);
/*
if (options.hbonds.toLowerCase() === 'yes') {
var color = '#00FF00';
var pnts = this.hbondpnts;
Expand All @@ -509,6 +562,9 @@ iCn3D.prototype.applyOtherOptions = function (options) {
//this.createLines(this.lines);
}
*/
// salt bridge lines
this.setHbondsSaltbridge(options, true);

if (this.pairArray !== undefined && this.pairArray.length > 0) {
this.updateStabilizer(); // to update this.stabilizerpnts
Expand Down
2 changes: 2 additions & 0 deletions src/icn3d/icn3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ var iCn3D = function (id) {
//labels: 'no',
//effect: 'none',
hbonds: 'no',
saltbridge: 'no',
//stabilizer: 'no',
ssbonds: 'no',
//ncbonds: 'no',
Expand Down Expand Up @@ -1169,6 +1170,7 @@ iCn3D.prototype = {
this.calphas = {};

this.hbondpnts = [];
this.saltbridgepnts = [];
this.stabilizerpnts = [];
//this.ncbondpnts = []; // non-covalent bonds

Expand Down
2 changes: 0 additions & 2 deletions src/icn3d/loadpdb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,6 @@ iCn3D.prototype.loadPDB = function (src) {

this.ssbondpnts[id].push(resid1);
this.ssbondpnts[id].push(resid2);

console.log("this.ssbondpnts: " + JSON.stringify(this.ssbondpnts));
} else if (record === 'REMARK') {
var type = parseInt(line.substr(7, 3));
// from GLMol
Expand Down
30 changes: 30 additions & 0 deletions src/icn3d/other.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -738,6 +738,36 @@ iCn3D.prototype.addResiudeLabels = function (atoms, bSchematic, alpha) {
this.removeHlObjects();
};

iCn3D.prototype.addAtomLabels = function (atoms) {
var size = 18;
var background = "#CCCCCC";

var atomsHash = this.intHash(this.hAtoms, atoms);

if(this.labels['residue'] === undefined) this.labels['residue'] = [];

for(var i in atomsHash) {
var atom = this.atoms[i];

var label = {}; // Each label contains 'position', 'text', 'color', 'background'

label.position = atom.coord;

label.bSchematic = 0;

label.text = atom.name;
label.size = size;

var atomColorStr = atom.color.getHexString().toUpperCase();
label.color = (atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
label.background = background;

this.labels['residue'].push(label);
}

this.removeHlObjects();
};

iCn3D.prototype.setCenter = function(center) {
if(!this.bChainAlign) {
this.mdl.position.set(0,0,0);
Expand Down
Loading

0 comments on commit 1f3914e

Please sign in to comment.