icn3d 3.28.7 → 3.28.9

package/icn3d.js

@@ -8456,8 +8456,8 @@ class SetMenu {
         
         html += this.getMenuText('mn1_searchgrooup', 'Search Structure ' + me.htmlCls.wifiStr, undefined, 1, 1);
         html += "<ul>";
-        html += this.getMenuUrl('mn1_searchstru', 'https://www.ncbi.nlm.nih.gov/structure', 'PDB Structures ' + me.htmlCls.wifiStr, undefined, 2);
-        html += this.getLink('mn1_proteinname', 'AlphaFold Structures ' + me.htmlCls.wifiStr, undefined, 2);
+        html += this.getMenuUrl('mn1_searchstru', 'https://www.ncbi.nlm.nih.gov/structure', 'PDB Structures ' + me.htmlCls.wifiStr, 1, 2);
+        html += this.getLink('mn1_proteinname', 'AlphaFold Structures ' + me.htmlCls.wifiStr, 1, 2);
         html += this.getMenuUrl('mn1_afdatabase', 'https://alphafold.ebi.ac.uk', 'AlphaFold UniProt Database ' + me.htmlCls.wifiStr, undefined, 2);
         html += "</ul>";
         html += "</li>";
@@ -8869,7 +8869,7 @@ class SetMenu {
         html += this.getRadio('mn6_showslab', 'mn6_showslabNo', 'Off', true, undefined, 2);
         html += "</ul>";
         html += "</li>";
-        html += this.getMenuText('mn2_axes', 'XYZ-axes', undefined, 1);
+        html += this.getMenuText('mn2_axes', 'XYZ-axes', undefined, undefined, 1);
         html += "<ul>";
         html += this.getRadio('mn6_showaxis', 'mn6_showaxisYes', 'Original', undefined, undefined, 2);
         html += this.getRadio('mn6_showaxis', 'mn6_showaxisSel', 'Prin. Axes on Sel.', undefined, undefined, 2);
@@ -14959,7 +14959,7 @@ class SetHtml {
         let nucleotideribbonwidth =(type == '3dprint') ? '1.4' : '0.8';
 
         let shininess = 40;
-        let light1 = 0.6;
+        let light1 = 0.8;
         let light2 = 0.4;
         let light3 = 0.2;
         let bGlycansCartoon = 0;
@@ -15007,7 +15007,7 @@ class SetHtml {
 
             html += "<b>1. Shininess</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "shininess' value='" + shininess + "' size=4>" + me.htmlCls.space3 + "(for the shininess of the 3D objects, default 40)<br/><br/>";
             html += "<b>2. Three directional lights</b>: <br>";
-            html += "<b>Key Light</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "light1' value='" + light1 + "' size=4>" + me.htmlCls.space3 + "(for the light strength of the key light, default 0.6)<br/>";
+            html += "<b>Key Light</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "light1' value='" + light1 + "' size=4>" + me.htmlCls.space3 + "(for the light strength of the key light, default 0.8)<br/>";
             html += "<b>Fill Light</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "light2' value='" + light2 + "' size=4>" + me.htmlCls.space3 + "(for the light strength of the fill light, default 0.4)<br/>";
             html += "<b>Back Light</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "light3' value='" + light3 + "' size=4>" + me.htmlCls.space3 + "(for the light strength of the back light, default 0.2)<br/><br/>";
             html += "<b>3. Thickness</b>: <br>";
@@ -15622,7 +15622,7 @@ class SetHtml {
         if(postfix == 'style') {
             if(bReset) {
                 $("#" + me.pre + "shininess").val('40');
-                $("#" + me.pre + "light1").val('0.6');
+                $("#" + me.pre + "light1").val('0.8');
                 $("#" + me.pre + "light2").val('0.4');
                 $("#" + me.pre + "light3").val('0.2');
                 $("#" + me.pre + "glycan").val('0');
@@ -22160,6 +22160,9 @@ class Scene {
         // show cross-linkages, set side chains
         ic.applyClbondsCls.applyClbondsOptions();
 
+        // add dashed lines for missing residues
+        ic.applyMissingResCls.applyMissingResOptions();
+
         ic.applyDisplayCls.applyDisplayOptions(ic.opts, ic.dAtoms);
 
         ic.applyOtherCls.applyOtherOptions();
@@ -22253,7 +22256,7 @@ class Scene {
           ic.lightPos3 = new THREE.Vector3(1, 1, 1); //(0, 1, 1);
         }
 
-        let ambientLight = new THREE.AmbientLight(0x888888); //(0x404040);
+        let ambientLight = new THREE.AmbientLight(0x404040); //(0x888888); //(0x404040);
 
         ic.scene.add(ic.directionalLight);
         ic.scene.add(ambientLight);
@@ -25447,15 +25450,16 @@ class Strip {
             let mesh;
 
             if(bHighlight === 2) {
+              //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
               mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac,
-                shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
+                    shininess: ic.shininess, emissive: ic.emissive, vertexColors: true, side: THREE.DoubleSide }));
 
               ic.mdl.add(mesh);
               ic.prevHighlightObjects.push(mesh);
             }
             else {
-              mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac,
-                shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
+              //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
+              mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: true, side: THREE.DoubleSide }));
 
               ic.mdl.add(mesh);
               ic.objects.push(mesh);
@@ -25860,7 +25864,8 @@ class Tube {
 */
         let mesh;
         if(bHighlight === 2) {
-          mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
+          //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
+          mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: true, side: THREE.DoubleSide }));
 
           if(ic.mdl) ic.mdl.add(mesh);
         }
@@ -25871,8 +25876,8 @@ class Tube {
           if(ic.mdl) ic.mdl.add(mesh);
         }
         else {
-          mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
-          //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, color: 0xFFFFFF, side: THREE.DoubleSide }));
+          //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
+          mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: true, side: THREE.DoubleSide }));
 
           if(ic.mdl) ic.mdl.add(mesh);
         }
@@ -29283,7 +29288,8 @@ class Surface {
                 specular: ic.frac,
                 shininess: 0, //10, //30,
                 emissive: ic.emissive,
-                vertexColors: THREE.VertexColors,
+                //vertexColors: THREE.VertexColors,
+                vertexColors: true,
                 wireframe: wireframe,
                 opacity: opacity,
                 transparent: true,
@@ -29350,7 +29356,8 @@ class Surface {
                 specular: ic.frac,
                 shininess: 20, //10, //30,
                 emissive: ic.emissive,
-                vertexColors: THREE.VertexColors,
+                //vertexColors: THREE.VertexColors,
+                vertexColors: true,
                 wireframe: wireframe,
                 opacity: opacity,
                 transparent: true,
@@ -29628,7 +29635,7 @@ class ApplyClbonds {
 
        if (options.clbonds.toLowerCase() === 'yes' && options.chemicals !== 'nothing') {
          let color = '#006400';
-         let colorObj = me.parasCls.thr(0x006400);
+         me.parasCls.thr(0x006400);
 
          ic.lines['clbond'] = [];
          ic.residuesHashClbonds = {};
@@ -29647,6 +29654,8 @@ class ApplyClbonds {
                     line.color = color;
                     line.dashed = false;
 
+                    line.radius = ic.crosslinkRadius;
+
                     line.serial1 = ic.clbondResid2serial[resid0 + ',' + resid1];
                     line.serial2 = ic.clbondResid2serial[resid1 + ',' + resid0];
 
@@ -29656,7 +29665,7 @@ class ApplyClbonds {
                     line.position2 = ic.atoms[line.serial2].coord;
 
                     ic.lines['clbond'].push(line);
-                    ic.cylinderCls.createCylinder(line.position1, line.position2, ic.crosslinkRadius, colorObj);
+                    //ic.cylinderCls.createCylinder(line.position1, line.position2, ic.crosslinkRadius, colorObj);
 
                     // show stick for these two residues
                     let residueAtoms = {};
@@ -29717,6 +29726,117 @@ class ApplyClbonds {
     }
 }
 
+/**
+ * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
+ */
+
+class ApplyMissingRes {
+    constructor(icn3d) {
+        this.icn3d = icn3d;
+    }
+
+    applyMissingResOptions(options) { let ic = this.icn3d; ic.icn3dui;
+
+        if(!ic.bCalcMissingRes) {
+            // find all bonds to chemicals
+            ic.missingResPnts = {};
+            ic.missingResResid2serial = {};
+
+            this.applyMissingResOptions_base();
+
+            ic.bCalcMissingRes = true;
+        }
+
+        ic.lines['missingres'] = [];
+
+        if(ic.structures) {
+            let strucArray = Object.keys(ic.structures);
+            for(let i = 0, il = strucArray.length; i < il; ++i) {
+                 let struc = strucArray[i];
+                 if(!ic.missingResPnts[struc]) continue;
+
+                 for(let j = 0, jl = ic.missingResPnts[struc].length; j < jl; j += 2) {
+                    let resid0 = ic.missingResPnts[struc][j];
+                    let resid1 = ic.missingResPnts[struc][j+1];
+
+                    let line = {};
+                    
+                    line.dashed = true;
+
+                    line.serial1 = ic.missingResResid2serial[resid0 + ',' + resid1];
+                    line.serial2 = ic.missingResResid2serial[resid1 + ',' + resid0];
+
+                    line.color = "#" + ic.atoms[line.serial1].color.getHexString();
+
+                    line.radius = ic.coilWidth;
+
+                    if(!ic.dAtoms.hasOwnProperty(line.serial1) || !ic.dAtoms.hasOwnProperty(line.serial2)) continue;
+
+                    line.position1 = ic.atoms[line.serial1].coord;
+                    line.position2 = ic.atoms[line.serial2].coord;
+
+                    ic.lines['missingres'].push(line);
+                } // for j
+            } // for i
+        } // if
+    }
+
+    applyMissingResOptions_base(type) { let ic = this.icn3d; ic.icn3dui;
+        let misingResArray = [];
+        for(let chainid in ic.chainsSeq) {
+            let bStart = false;
+            let startResid, currResid, prevResid;
+            let bCurrCoord, bPrevCoord = false;
+            for(let i = 0, il = ic.chainsSeq[chainid].length; i < il; ++i) {
+                currResid = chainid + '_' + ic.chainsSeq[chainid][i].resi;
+
+                if(ic.residues.hasOwnProperty(currResid)) {
+                    bStart = true;
+
+                    bCurrCoord = true;
+                }
+                else {
+                    bCurrCoord = false;
+                }
+
+                if(!bCurrCoord && bPrevCoord) {
+                    startResid = prevResid;
+                }
+                else if(bStart && startResid && bCurrCoord && !bPrevCoord) {
+                    misingResArray.push(startResid);
+                    misingResArray.push(currResid);
+
+                    startResid = undefined;
+                }
+
+                bPrevCoord = bCurrCoord;
+                prevResid = currResid;
+            }
+        }
+
+        for(let i = 0, il = misingResArray.length; i < il; i += 2) {
+            let resid0 = misingResArray[i];
+            let resid1 = misingResArray[i + 1];
+
+            let structure = resid0.substr(0, resid0.indexOf('_'));
+            resid0.substr(0, resid1.indexOf('_'));
+
+            let atom0 = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[resid0]);
+            let atom1 = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[resid1]);
+
+            // one residue may have different atom for different clbond
+            if(atom0 && atom1) {
+                if(ic.missingResPnts[structure] === undefined) ic.missingResPnts[structure] = [];
+                ic.missingResPnts[structure].push(resid0);
+                ic.missingResPnts[structure].push(resid1);
+
+                ic.missingResResid2serial[resid0 + ',' + resid1] = atom0.serial;
+                ic.missingResResid2serial[resid1 + ',' + resid0] = atom1.serial;
+            }
+        } // for i
+    }
+}
+
 /**
  * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
  */
@@ -30356,7 +30476,7 @@ class ApplySsbonds {
 
                 let line = {};
                 line.color = color;
-                line.dashed = true;
+                line.dashed = false;
 
                 // each Cys has two S atoms
                 let serial1Array = [], serial2Array = [];
@@ -30457,14 +30577,17 @@ class ApplySsbonds {
                 //if(ic.lines['ssbond'] === undefined) ic.lines['ssbond'] = [];
                 ic.lines['ssbond'].push(line);
 
-                // create bonds for disulfide bonds
-                ic.cylinderCls.createCylinder(line.position1, line.position2, ic.cylinderRadius, colorObj);
-
                 // show ball and stick for these two residues
                 let residueAtoms;
                 residueAtoms = me.hashUtilsCls.unionHash(residueAtoms, ic.residues[res1]);
                 residueAtoms = me.hashUtilsCls.unionHash(residueAtoms, ic.residues[res2]);
 
+                let atom = ic.firstAtomObjCls.getFirstAtomObj(residueAtoms);
+                let style = (atom.style == 'lines') ? 'lines' : 'stick';
+
+                // create bonds for disulfide bonds
+                if(atom.style != 'lines') ic.cylinderCls.createCylinder(line.position1, line.position2, ic.cylinderRadius, colorObj);
+
                 // show side chains for the selected atoms
                 let atoms = me.hashUtilsCls.intHash(residueAtoms, ic.sidec);
     //            let calpha_atoms = me.hashUtilsCls.intHash(residueAtoms, ic.calphas);
@@ -30473,7 +30596,7 @@ class ApplySsbonds {
 
                 // draw sidec separatedly
                 for(let j in atoms) {
-                  ic.atoms[j].style2 = 'stick';
+                  ic.atoms[j].style2 = style;
                 }
               } // for(let i = 0,
           } // for(let s = 0,
@@ -32694,6 +32817,9 @@ class Alternate {
         }
 
         if(ic.scene) {
+            // https://github.com/gkjohnson/three-gpu-pathtracer/blob/main/example/basic.js
+            ic.renderer.outputEncoding = THREE.sRGBEncoding;
+
             ic.renderer.render(ic.scene, cam);
         }
     }
@@ -39946,26 +40072,26 @@ class AddTrack {
                         endColorStr = this.getExonColor(startExon.rangeStart, startExon.rangeEnd, to);
 
                         colorGradient = startColorStr + ' 0%, #FFF 50%, ' + endColorStr + ' 100%';
-                        htmlTmp2 += this.getExonHtml(startExon.exonIndex, colorGradient, startExon.from, endExon.to, startExon.genomeRange);
+                        htmlTmp2 += this.getExonHtml(startExon.exonIndex, colorGradient, startExon.from, endExon.to, startExon.genomeRange, chnid, simpTitle);
                     }
                     else {
                         if(startExon) {
                             startColorStr = this.getExonColor(startExon.rangeStart, startExon.rangeEnd, from);
 
                             colorGradient = startColorStr + ' 0%, #FFF 50%, #00F 100%';
-                            htmlTmp2 += this.getExonHtml(startExon.exonIndex, colorGradient, startExon.from, startExon.rangeEnd, startExon.genomeRange);
+                            htmlTmp2 += this.getExonHtml(startExon.exonIndex, colorGradient, startExon.from, startExon.rangeEnd, startExon.genomeRange, chnid, simpTitle);
                         }
 
                         if(startExon && endExon) {
                             for(let j = startExon.exonIndex + 1; j < endExon.exonIndex; ++j) {
                                 colorGradient = '#F00 0%, #FFF 50%, #00F 100%';
-                                htmlTmp2 += this.getExonHtml(j, colorGradient, exonArray[j].resStart, exonArray[j].resEnd, exonArray[j].genomeRange);
+                                htmlTmp2 += this.getExonHtml(j, colorGradient, exonArray[j].resStart, exonArray[j].resEnd, exonArray[j].genomeRange, chnid, simpTitle);
                             }
 
                             endColorStr = this.getExonColor(endExon.rangeStart, endExon.rangeEnd, to);
 
                             colorGradient = '#F00 0%, #FFF 50%, ' + endColorStr + ' 100%';
-                            htmlTmp2 += this.getExonHtml(endExon.exonIndex, colorGradient, endExon.rangeStart, endExon.to, endExon.genomeRange);
+                            htmlTmp2 += this.getExonHtml(endExon.exonIndex, colorGradient, endExon.rangeStart, endExon.to, endExon.genomeRange, chnid, simpTitle);
                         }
                     }
 
@@ -39999,8 +40125,8 @@ class AddTrack {
         }
     }
 
-    getExonHtml(exonIndex, colorGradient, from, to, genomeRange) { let ic = this.icn3d; ic.icn3dui;
-        return '<div style="display:inline-block; color:white!important; width:' + Math.round(ic.seqAnnWidth *(to - from + 1) /(ic.maxAnnoLength + ic.nTotalGap)) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" title="Exon ' + (exonIndex + 1) + ': ' + genomeRange + ' genomic interval" anno="sequence" title="' + (exonIndex + 1) + '"><div style="height: 12px; border: 1px solid #000; background: linear-gradient(to right, ' + colorGradient + ');"></div></div>';
+    getExonHtml(exonIndex, colorGradient, from, to, genomeRange, chainid, simpTitle) { let ic = this.icn3d; ic.icn3dui;
+        return '<div style="display:inline-block; color:white!important; width:' + Math.round(ic.seqAnnWidth *(to - from + 1) /(ic.maxAnnoLength + ic.nTotalGap)) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" domain="' + (exonIndex + 1) + '" from="' + from + '" to="' + to + '" setname="' + simpTitle + ', Exon ' + (exonIndex + 1) + '" title="Exon ' + (exonIndex + 1) + ': ' + genomeRange + ' genomic interval" anno="sequence" chain="' + chainid + '"><div style="height: 12px; border: 1px solid #000; background: linear-gradient(to right, ' + colorGradient + ');"></div></div>';
     }
 
     getExonColor(start, end, pos) { let ic = this.icn3d; ic.icn3dui;
@@ -45629,12 +45755,12 @@ class LineGraph {
             let domainid = domainidpairArray[i].substr(0, domainidpairArray[i].indexOf('|'));
             let refpdbname = domainidpairArray[i].substr(domainidpairArray[i].indexOf('|') + 1);
             //let chainid = domainid.split('-')[0];
-
+            
             if(!bRound1) {
                 if(!me.bNode) console.log("refpdbname " + refpdbname + " TM-score: " + queryData[0].score);
             }
             else {
-                if(!me.bNode) console.log("refpdbname " + refpdbname + " RMSD: " + queryData[0].super_rmsd);
+                if(!me.bNode) console.log("domainid: " + domainid + " refpdbname " + refpdbname + " RMSD: " + queryData[0].super_rmsd + ", num_res: " + queryData[0].num_res + ",  10/RMSD + num_res/5: " + (10 / queryData[0].super_rmsd + queryData[0].num_seg / 5).toFixed(1));
             }
 
             // Ig-like domains: B (2150, 2150a, 2150b), C (3150, 3250), E (7150, 7250), F (8150, 8250) strands
@@ -45682,8 +45808,10 @@ class LineGraph {
                 }
             }
             else {
-                if(!domainid2score.hasOwnProperty(domainid) || queryData[0].super_rmsd < domainid2score[domainid]) {
-                    domainid2score[domainid] = queryData[0].super_rmsd;  
+                let mixScore = 10 / queryData[0].super_rmsd + queryData[0].num_seg / 5; 
+
+                if(!domainid2score.hasOwnProperty(domainid) || mixScore > domainid2score[domainid]) {
+                    domainid2score[domainid] = mixScore;  
         
                     ic.domainid2refpdbname[domainid] = refpdbname;
                     domainid2segs[domainid] = queryData[0].segs;
@@ -46028,9 +46156,8 @@ class LineGraph {
             let atom = ic.firstAtomObjCls.getFirstAtomObj(ic.chains[chnid]);
             if(ic.proteins.hasOwnProperty(atom.serial)) {
                 for(let i = 0; i < ic.chainsSeq[chnid].length; ++i) {
-                const resid = chnid + '_' + ic.chainsSeq[chnid][i].resi + '_' + ic.chainsSeq[chnid][i].name;
-    
-                refData += "'" + resid + "': '" + resid2refnum[resid] + "',\n";
+                    const resid = chnid + '_' + ic.chainsSeq[chnid][i].resi + '_' + ic.chainsSeq[chnid][i].name;
+                    refData += '"' + resid + '": "' + resid2refnum[resid] + '",\n';
                 }
             }
             }
@@ -47395,22 +47522,16 @@ class ViewInterPairs {
            }
 
            if(ic.bD3 === undefined) {
-                //var url = "https://d3js.org/d3.v4.min.js";
-                var url = "https://www.ncbi.nlm.nih.gov/Structure/icn3d/script/d3v4-force-all.min.js";
+                //let url = "https://d3js.org/d3.v4.min.js";
+                let url = "https://www.ncbi.nlm.nih.gov/Structure/icn3d/script/d3v4-force-all.min.js";
                 await me.getAjaxPromise(url, 'script');
 
                 ic.bD3 = true;
-
-                $("#" + me.svgid).empty();
-                me.htmlCls.dialogCls.openDlg('dl_graph', 'Force-directed graph');
-                ic.drawGraphCls.drawGraph(ic.graphStr, ic.pre + 'dl_graph');
-                /// if(ic.deferredGraphinteraction !== undefined) ic.deferredGraphinteraction.resolve();
-           }
-           else {
-               $("#" + me.svgid).empty();
-               me.htmlCls.dialogCls.openDlg('dl_graph', 'Force-directed graph');
-               ic.drawGraphCls.drawGraph(ic.graphStr, ic.pre + 'dl_graph');
            }
+
+            $("#" + me.svgid).empty();
+            me.htmlCls.dialogCls.openDlg('dl_graph', 'Force-directed graph');
+            ic.drawGraphCls.drawGraph(ic.graphStr, ic.pre + 'dl_graph');
        }
 
        return {interactionTypes: interactionTypes.toString(), bondCnt: bondCnt};
@@ -49029,7 +49150,6 @@ class ChainalignParser {
                 let ajaxArray = [], indexArray = [], struArray = [];
                 let urlalign = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi";
                 let urltmalign = me.htmlCls.baseUrl + "tmalign/tmalign.cgi";
-                //let urltmalign = "https://test.ncbi.nlm.nih.gov/Structure/tmalign/tmalign.cgi";
 
                 for(let index in ic.afChainIndexHash) {
                     let idArray = ic.afChainIndexHash[index].split('_');
@@ -54122,13 +54242,10 @@ class ParserUtils {
 
     getMissingResidues(seqArray, type, chainid) { let ic = this.icn3d, me = ic.icn3dui;
         ic.chainsSeq[chainid] = [];
-
-        // find the offset of MMDB sequence
-        let offset = 0;
         if(type === 'mmdbid' || type === 'align') {
             for(let i = 0, il = seqArray.length; i < il; ++i) {
                 if(seqArray[i][0] != 0) {
-                    offset = seqArray[i][0] - (i + 1);
+                    seqArray[i][0] - (i + 1);
                     break;
                 }
             }
@@ -54163,14 +54280,12 @@ class ParserUtils {
                 resObject.resi = i + 1;
             }
             else {
-                //let offset =(ic.chainid2offset[chainid]) ? ic.chainid2offset[chainid] : 0;
-                
-                if(type === 'mmdbid' || type === 'align') {
-                    resObject.resi =(seqArray[i][resiPos] == '0') ? i + 1 + offset : seqArray[i][resiPos];
-                }
-                else {
+                //if(type === 'mmdbid' || type === 'align') {
+                //    resObject.resi =(seqArray[i][resiPos] == '0') ? i + 1 + offset : seqArray[i][resiPos];
+                //}
+                //else {
                     resObject.resi =(seqArray[i][resiPos] == '0') ? parseInt(prevResi) + 1 : seqArray[i][resiPos];
-                }
+                //}
             }
 
             //resObject.resi =(seqArray[i][resiPos] == '0') ? i + 1 + offset : seqArray[i][resiPos];
@@ -61913,7 +62028,7 @@ class LoadScript {
     }
 
     //When reading a list of commands, apply transformation at the last step.
-    renderFinalStep(steps) { let ic = this.icn3d, me = ic.icn3dui;
+    async renderFinalStep(steps) { let ic = this.icn3d, me = ic.icn3dui;
         // enable ic.ParserUtilsCls.hideLoading
         ic.bCommandLoad = false;
 
@@ -63631,6 +63746,15 @@ class FirstAtomObj {
             }
         }
 
+        if(!firstIndex) {
+            for(let i in atomsHash) {
+                if(ic.atoms[i].name == "O3'" || ic.atoms[i].name == "O3*") {
+                    firstIndex = i;
+                    break;
+                }
+            }
+        }
+
         return (firstIndex !== undefined) ? ic.atoms[firstIndex] : this.getFirstAtomObj(atomsHash);
     }
 
@@ -71933,7 +72057,7 @@ class iCn3D {
     this.shininess = 40; //30
     this.emissive = 0x111111; //0x000000
 
-    this.light1 = 0.6; //1
+    this.light1 = 0.8; //0.6; //1
     this.light2 = 0.4;
     this.light3 = 0.2;
 
@@ -72247,6 +72371,8 @@ class iCn3D {
 
     this.applyCenterCls = new ApplyCenter(this);
     this.applyClbondsCls = new ApplyClbonds(this);
+    this.applyMissingResCls = new ApplyMissingRes(this);
+    
     this.applyDisplayCls = new ApplyDisplay(this);
     this.applyMapCls = new ApplyMap(this);
     this.applyOtherCls = new ApplyOther(this);
@@ -72569,7 +72695,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.28.1';
+    this.REVISION = '3.28.2';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;