Skip to content

Commit 0d70f72

Browse files
jiywang3jiywang3
committed
Pull request #723: Updated "2D Diagram for Nucleotides" so that users can click on 2D Diagram to show selection on 3D view.
Merge in STRUC/icn3d from release3.49.2 to master * commit '3c9f7c67c6da5b144e57a040c13c84a08dcd3311': Updated "2D Diagram for Nucleotides" so that users can click on 2D Diagram to show selection on 3D view.
2 parents bdec93e + 3c9f7c6 commit 0d70f72

20 files changed

Lines changed: 365 additions & 31 deletions

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
## Change Log
2+
[icn3d-3.49.2](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-3.49.2.zip) was release on May 7, 2026. Updated "2D Diagram for Nucleotides" so that users can click on 2D Diagram to show selection on 3D view.
3+
24
[icn3d-3.49.1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-3.49.1.zip) was release on May 4, 2026. Upgraded "2D Diagram for Ig Domains" to have one diagram for each Ig domain in a chain.
35

46
[icn3d-3.49.0](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-3.49.0.zip) was release on April 29, 2026. Added "2D Diagram for Nucleotides" using the R2DT diagram, and "2D Diagram for Ig Domains" with predetermined Ig templates. The features are available via the menu "Analysis > 2D Diagram" in iCn3D.

‎build/icn3d.js‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129078,6 +129078,68 @@ void main() {
129078129078

129079129079
thisClass.clickNode(this);
129080129080
});
129081+
129082+
// event for R2DT
129083+
//document.addEventListener('click', (event) => {
129084+
$(document).on("click", "r2dt-web", function(e) { let ic = thisClass.icn3d;
129085+
// The 2nd element in the path is the actual clicked g element
129086+
const path = e.originalEvent.composedPath();
129087+
const clickedElement = path[1];
129088+
let titleElem = clickedElement.querySelector('title');
129089+
129090+
if(titleElem) {
129091+
titleElem.style.cursor = "pointer";
129092+
let title = titleElem.textContent; // e.g., 14 (position.label in template: 14.A)
129093+
let textArray = title.split(' ');
129094+
let position_resn = textArray[textArray.length - 1].split('.');
129095+
let pos = position_resn[0];
129096+
let resn = position_resn[1].substr(0, position_resn[1].length - 1);
129097+
129098+
let resid = ic.ncbi2resid[ic.r2dt_chainid + '_' + pos];
129099+
let atom = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid]);
129100+
129101+
if(!atom) {
129102+
alert("This residue has no 3D coordinates...");
129103+
}
129104+
else {
129105+
let oneLetterRes = me.utilsCls.residueName2Abbr(atom.resn);
129106+
129107+
let realResn = (resn == 'T') ? 'U' : resn;
129108+
129109+
if(resn != oneLetterRes && realResn != oneLetterRes) {
129110+
alert("The mouseover text in R2DT didn't match the residue number in 3D view...");
129111+
}
129112+
else {
129113+
// highlight the selected residue
129114+
if(ic.bCtrl || ic.bShift) {
129115+
ic.hAtoms = me.hashUtilsCls.unionHash(ic.hAtoms, ic.residues[resid]);
129116+
}
129117+
else {
129118+
ic.hAtoms = ic.residues[resid];
129119+
}
129120+
129121+
ic.hlUpdateCls.showHighlight();
129122+
}
129123+
}
129124+
129125+
// highlight the selected residue in 2D
129126+
let textElem = clickedElement.querySelector('text');
129127+
textElem.setAttribute("stroke", "#f8b84e");
129128+
textElem.setAttribute("stroke-width", "0.5px");
129129+
}
129130+
129131+
// set cursor for all nodes
129132+
if(!ic.bSetCursor) {
129133+
ic.bSetCursor = true;
129134+
let r2dt = document.querySelector('r2dt-web').shadowRoot;
129135+
let elemArray = r2dt.querySelectorAll('g:has(title)');
129136+
for(let i = 0, il = elemArray.length; i < il; ++i) {
129137+
if(!elemArray[i].hasAttribute('id')) { // skip the main g element
129138+
elemArray[i].style.cursor = "pointer";
129139+
}
129140+
}
129141+
}
129142+
});
129081129143
}
129082129144

129083129145
clickNode(node) { let ic = this.icn3d, me = ic.icn3dui;
@@ -129304,12 +129366,16 @@ void main() {
129304129366
}
129305129367

129306129368
async drawR2dt(chainid) { let ic = this.icn3d, me = ic.icn3dui;
129369+
ic.r2dt_chainid = chainid;
129370+
129307129371
let url = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi?chainid2rnaid=" + chainid;
129308129372

129309129373
let data = await me.getAjaxPromise(url, 'jsonp');
129310129374

129311129375
let html = '';
129312129376
if(data && data.rnaid) {
129377+
ic.bSetCursor = false;
129378+
129313129379
html += '<r2dt-web search=\'{"urs": "' + data.rnaid + '"}\' />';
129314129380
html += '<script type="text/javascript" src="https://rnacentral.github.io/r2dt-web/dist/r2dt-web.js"></script>';
129315129381
$("#" + me.pre + "2ddiagramDiv").html(html);
@@ -129355,7 +129421,7 @@ void main() {
129355129421
}
129356129422

129357129423
if(!bFound) {
129358-
alert("The Ig type for chain " + chainid + " is " + igTypeArray + ". Currently only IgV, IgC1, IgC2 and IgI types are supported for drawing Ig diagrams.");
129424+
alert("The Ig type(s) for chain " + chainid + " is/are " + igTypeArray + ". Currently only IgV, IgC1, IgC2 and IgI types are supported for drawing Ig diagrams.");
129359129425
return;
129360129426
}
129361129427

@@ -135702,7 +135768,7 @@ void main() {
135702135768
//even when multiple iCn3D viewers are shown together.
135703135769
this.pre = this.cfg.divid + "_";
135704135770

135705-
this.REVISION = '3.49.1';
135771+
this.REVISION = '3.49.2';
135706135772

135707135773
// In nodejs, iCn3D defines "window = {navigator: {}}", and added window = {navigator: {}, "__THREE__":"177"}
135708135774
this.bNode = (Object.keys(window).length < 3) ? true : false;

‎build/icn3d.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/icn3d.module.js‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129075,6 +129075,68 @@ class Diagram2d {
129075129075

129076129076
thisClass.clickNode(this);
129077129077
});
129078+
129079+
// event for R2DT
129080+
//document.addEventListener('click', (event) => {
129081+
$(document).on("click", "r2dt-web", function(e) { let ic = thisClass.icn3d;
129082+
// The 2nd element in the path is the actual clicked g element
129083+
const path = e.originalEvent.composedPath();
129084+
const clickedElement = path[1];
129085+
let titleElem = clickedElement.querySelector('title');
129086+
129087+
if(titleElem) {
129088+
titleElem.style.cursor = "pointer";
129089+
let title = titleElem.textContent; // e.g., 14 (position.label in template: 14.A)
129090+
let textArray = title.split(' ');
129091+
let position_resn = textArray[textArray.length - 1].split('.');
129092+
let pos = position_resn[0];
129093+
let resn = position_resn[1].substr(0, position_resn[1].length - 1);
129094+
129095+
let resid = ic.ncbi2resid[ic.r2dt_chainid + '_' + pos];
129096+
let atom = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid]);
129097+
129098+
if(!atom) {
129099+
var aaa = 1; //alert("This residue has no 3D coordinates...");
129100+
}
129101+
else {
129102+
let oneLetterRes = me.utilsCls.residueName2Abbr(atom.resn);
129103+
129104+
let realResn = (resn == 'T') ? 'U' : resn;
129105+
129106+
if(resn != oneLetterRes && realResn != oneLetterRes) {
129107+
var aaa = 1; //alert("The mouseover text in R2DT didn't match the residue number in 3D view...");
129108+
}
129109+
else {
129110+
// highlight the selected residue
129111+
if(ic.bCtrl || ic.bShift) {
129112+
ic.hAtoms = me.hashUtilsCls.unionHash(ic.hAtoms, ic.residues[resid]);
129113+
}
129114+
else {
129115+
ic.hAtoms = ic.residues[resid];
129116+
}
129117+
129118+
ic.hlUpdateCls.showHighlight();
129119+
}
129120+
}
129121+
129122+
// highlight the selected residue in 2D
129123+
let textElem = clickedElement.querySelector('text');
129124+
textElem.setAttribute("stroke", "#f8b84e");
129125+
textElem.setAttribute("stroke-width", "0.5px");
129126+
}
129127+
129128+
// set cursor for all nodes
129129+
if(!ic.bSetCursor) {
129130+
ic.bSetCursor = true;
129131+
let r2dt = document.querySelector('r2dt-web').shadowRoot;
129132+
let elemArray = r2dt.querySelectorAll('g:has(title)');
129133+
for(let i = 0, il = elemArray.length; i < il; ++i) {
129134+
if(!elemArray[i].hasAttribute('id')) { // skip the main g element
129135+
elemArray[i].style.cursor = "pointer";
129136+
}
129137+
}
129138+
}
129139+
});
129078129140
}
129079129141

129080129142
clickNode(node) { let ic = this.icn3d, me = ic.icn3dui;
@@ -129301,12 +129363,16 @@ class Diagram2d {
129301129363
}
129302129364

129303129365
async drawR2dt(chainid) { let ic = this.icn3d, me = ic.icn3dui;
129366+
ic.r2dt_chainid = chainid;
129367+
129304129368
let url = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi?chainid2rnaid=" + chainid;
129305129369

129306129370
let data = await me.getAjaxPromise(url, 'jsonp');
129307129371

129308129372
let html = '';
129309129373
if(data && data.rnaid) {
129374+
ic.bSetCursor = false;
129375+
129310129376
html += '<r2dt-web search=\'{"urs": "' + data.rnaid + '"}\' />';
129311129377
html += '<script type="text/javascript" src="https://rnacentral.github.io/r2dt-web/dist/r2dt-web.js"></script>';
129312129378
$("#" + me.pre + "2ddiagramDiv").html(html);
@@ -129352,7 +129418,7 @@ class Diagram2d {
129352129418
}
129353129419

129354129420
if(!bFound) {
129355-
var aaa = 1; //alert("The Ig type for chain " + chainid + " is " + igTypeArray + ". Currently only IgV, IgC1, IgC2 and IgI types are supported for drawing Ig diagrams.");
129421+
var aaa = 1; //alert("The Ig type(s) for chain " + chainid + " is/are " + igTypeArray + ". Currently only IgV, IgC1, IgC2 and IgI types are supported for drawing Ig diagrams.");
129356129422
return;
129357129423
}
129358129424

@@ -135699,7 +135765,7 @@ class iCn3DUI {
135699135765
//even when multiple iCn3D viewers are shown together.
135700135766
this.pre = this.cfg.divid + "_";
135701135767

135702-
this.REVISION = '3.49.1';
135768+
this.REVISION = '3.49.2';
135703135769

135704135770
// In nodejs, iCn3D defines "window = {navigator: {}}", and added window = {navigator: {}, "__THREE__":"177"}
135705135771
this.bNode = (Object.keys(window).length < 3) ? true : false;

‎dist/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
## Change Log
2+
[icn3d-3.49.2](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-3.49.2.zip) was release on May 7, 2026. Updated "2D Diagram for Nucleotides" so that users can click on 2D Diagram to show selection on 3D view.
3+
24
[icn3d-3.49.1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-3.49.1.zip) was release on May 4, 2026. Upgraded "2D Diagram for Ig Domains" to have one diagram for each Ig domain in a chain.
35

46
[icn3d-3.49.0](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-3.49.0.zip) was release on April 29, 2026. Added "2D Diagram for Nucleotides" using the R2DT diagram, and "2D Diagram for Ig Domains" with predetermined Ig templates. The features are available via the menu "Analysis > 2D Diagram" in iCn3D.

‎dist/full.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
<div id="div0"></div>
3636

3737
<link rel="stylesheet" href="lib/jquery-ui-1.13.2.min.css">
38-
<link rel="stylesheet" href="icn3d_3.49.1.css">
38+
<link rel="stylesheet" href="icn3d_3.49.2.css">
3939
<script src="lib/jquery-3.5.0.min.js"></script>
4040
<script src="lib/jquery-ui-1.13.2.min.js"></script>
4141
<!---script src="lib/three_0.151.0.min.js"></script-->
42-
<script src="icn3d_3.49.1.min.js"></script>
42+
<script src="icn3d_3.49.2.min.js"></script>
4343

4444
<script type="text/javascript">
4545

@@ -57,7 +57,7 @@
5757
alert("IE does NOT work with the current iCn3D version 3. The old iCn3D version 2 is used instead.");
5858
}
5959
else {
60-
//$.getScript('icn3d_3.49.1.min.js', function() {
60+
//$.getScript('icn3d_3.49.2.min.js', function() {
6161
var version = 3;
6262
await launchIcn3d(version); //await
6363
//});

‎dist/full2.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@
3333
<div id="div1" style="float:left;"></div>
3434

3535
<link rel="stylesheet" href="lib/jquery-ui-1.13.2.min.css">
36-
<link rel="stylesheet" href="icn3d_3.49.1.css">
36+
<link rel="stylesheet" href="icn3d_3.49.2.css">
3737
<script src="lib/jquery-3.5.0.min.js"></script>
3838
<script src="lib/jquery-ui-1.13.2.min.js"></script>
3939
<!---script src="lib/three_0.151.0.min.js"></script-->
40-
<script src="icn3d_3.49.1.min.js"></script>
40+
<script src="icn3d_3.49.2.min.js"></script>
4141

4242
<script type="text/javascript">
4343
$( document ).ready(async function() {
@@ -54,7 +54,7 @@
5454
alert("IE does NOT work with the current iCn3D version 3. The old iCn3D version 2 is used instead.");
5555
}
5656
else {
57-
//$.getScript('icn3d_3.49.1.min.js', function() {
57+
//$.getScript('icn3d_3.49.2.min.js', function() {
5858
var version = 3;
5959
await launchIcn3d(version);
6060
//});

dist/full2_3.49.1.html renamed to dist/full2_3.49.2.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@
3333
<div id="div1" style="float:left;"></div>
3434

3535
<link rel="stylesheet" href="lib/jquery-ui-1.13.2.min.css">
36-
<link rel="stylesheet" href="icn3d_3.49.1.css">
36+
<link rel="stylesheet" href="icn3d_3.49.2.css">
3737
<script src="lib/jquery-3.5.0.min.js"></script>
3838
<script src="lib/jquery-ui-1.13.2.min.js"></script>
3939
<!---script src="lib/three_0.151.0.min.js"></script-->
40-
<script src="icn3d_3.49.1.min.js"></script>
40+
<script src="icn3d_3.49.2.min.js"></script>
4141

4242
<script type="text/javascript">
4343
$( document ).ready(async function() {
@@ -54,7 +54,7 @@
5454
alert("IE does NOT work with the current iCn3D version 3. The old iCn3D version 2 is used instead.");
5555
}
5656
else {
57-
//$.getScript('icn3d_3.49.1.min.js', function() {
57+
//$.getScript('icn3d_3.49.2.min.js', function() {
5858
var version = 3;
5959
await launchIcn3d(version);
6060
//});

dist/full_3.49.1.html renamed to dist/full_3.49.2.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
<div id="div0"></div>
3636

3737
<link rel="stylesheet" href="lib/jquery-ui-1.13.2.min.css">
38-
<link rel="stylesheet" href="icn3d_3.49.1.css">
38+
<link rel="stylesheet" href="icn3d_3.49.2.css">
3939
<script src="lib/jquery-3.5.0.min.js"></script>
4040
<script src="lib/jquery-ui-1.13.2.min.js"></script>
4141
<!---script src="lib/three_0.151.0.min.js"></script-->
42-
<script src="icn3d_3.49.1.min.js"></script>
42+
<script src="icn3d_3.49.2.min.js"></script>
4343

4444
<script type="text/javascript">
4545

@@ -57,7 +57,7 @@
5757
alert("IE does NOT work with the current iCn3D version 3. The old iCn3D version 2 is used instead.");
5858
}
5959
else {
60-
//$.getScript('icn3d_3.49.1.min.js', function() {
60+
//$.getScript('icn3d_3.49.2.min.js', function() {
6161
var version = 3;
6262
await launchIcn3d(version); //await
6363
//});

dist/icn3d-3.49.1.zip renamed to dist/icn3d-3.49.2.zip

5.55 MB
Binary file not shown.

0 commit comments

Comments
 (0)