icn3d 3.5.0 → 3.8.0

package/icn3d.js

@@ -2462,7 +2462,10 @@ THREE.TrackballControls = function ( object, domElement, icn3d ) {
 
             _eye.multiplyScalar( factor );
 
-            if(icn3d !== undefined && icn3d._zoomFactor !== undefined && (bUpdate === undefined || bUpdate === true)) icn3d._zoomFactor *= factor;
+            if(icn3d !== undefined && icn3d._zoomFactor !== undefined && (bUpdate === undefined || bUpdate === true)) {
+                icn3d._zoomFactor *= factor;
+                icn3d.fogCls.setFog();
+            }
 
         } else {
 
@@ -2475,7 +2478,10 @@ THREE.TrackballControls = function ( object, domElement, icn3d ) {
               factor = 1.0 + ( _this._zoomEnd.y - _this._zoomStart.y ) * _this.zoomSpeed;
             }
 
-            if(icn3d !== undefined && icn3d._zoomFactor !== undefined && (bUpdate === undefined || bUpdate === true)) icn3d._zoomFactor *= factor;
+            if(icn3d !== undefined && icn3d._zoomFactor !== undefined && (bUpdate === undefined || bUpdate === true)) {
+                icn3d._zoomFactor *= factor;
+                icn3d.fogCls.setFog();
+            }
 
             //if ( factor !== 1.0 && factor > 0.0 ) {
             if ( factor !== 1.0 ) {
@@ -3952,7 +3958,7 @@ class ParasCls {
             black: this.thr(0x000000),
              grey: this.thr(0xCCCCCC),
             white: this.thr(0xFFFFFF),
-            transparent: this.thr(0x000000)
+            transparent: this.thr(0xFFFFFF) //this.thr(0x000000)
         };
 
         this.residueColors = {
@@ -4484,6 +4490,16 @@ class UtilsCls {
         if(viewer_width && me.htmlCls.WIDTH > viewer_width) me.htmlCls.WIDTH = viewer_width;
         if(viewer_height && me.htmlCls.HEIGHT > viewer_height) me.htmlCls.HEIGHT = viewer_height;
     }
+
+    sumArray(numArray) {
+      let sum = 0;
+
+      for(let i = 0, il = numArray.length; i < il; ++i) {
+        sum += numArray[i];
+      }
+
+      return sum;
+    }
 }
 
 /**
@@ -5844,7 +5860,8 @@ class Fog {
         if(bZoomin) {
             let centerAtomsResults = ic.applyCenterCls.centerAtoms(ic.hAtoms);
             ic.maxD = centerAtomsResults.maxD;
-            if (ic.maxD < 5) ic.maxD = 5;
+            //if (ic.maxD < 5) ic.maxD = 5;
+            if (ic.maxD < 25) ic.maxD = 25;
         }
 
         let bInstance = (ic.biomtMatrices !== undefined && ic.biomtMatrices.length * ic.cnt > ic.maxatomcnt) ? true : false;
@@ -5861,7 +5878,9 @@ class Fog {
                     ic.bSetFog = false;
                 }
                 else {
-                    ic.scene.fog = new THREE.Fog(background, 2.5*ic.maxD, 4*ic.maxD);
+                    // adjust
+                    let zoomFactor = (ic._zoomFactor > 1) ? ic._zoomFactor * 1.0 : ic._zoomFactor;
+                    ic.scene.fog = new THREE.Fog(background, 2.5 * ic.maxD * zoomFactor, 4 * ic.maxD * zoomFactor);
                     ic.bSetFog = true;
                     ic.camMaxDFactorFog = 3;
                 }
@@ -5880,9 +5899,9 @@ class Fog {
             ic.bSetFog = false;
         }
 
-        if(bZoomin && !bInstance) {
-            ic.transformCls.zoominSelection();
-        }
+        //if(bZoomin && !bInstance) {
+        //    ic.transformCls.zoominSelection();
+        //}
     }
 }
 
@@ -11887,7 +11906,8 @@ class ShareLink {
 
            if(ic.commands.length > start) {
                let command_tf = ic.commands[start].split('|||');
-               prevCommandStr = command_tf[0].trim();
+               let command_tf2 = command_tf[0].split('&command=');
+               prevCommandStr = command_tf2[0].trim();
 
                //statefile += ic.commands[start] + "\n";
 
@@ -11898,7 +11918,8 @@ class ShareLink {
            let tmpUrl = '';
            for(let il = ic.commands.length; i < il; ++i) {
                let command_tf = ic.commands[i].split('|||');
-               let commandStr = command_tf[0].trim();
+               let command_tf2 = command_tf[0].split('&command=');
+               let commandStr = command_tf2[0].trim();
 
                //statefile += ic.commands[i] + "\n";
 
@@ -15147,24 +15168,7 @@ class Saltbridge {
             || (atom.het && me.parasCls.cationsTrimArray.indexOf(atom.elem) !== -1)
             || (atom.het && atom.elem === "N" && atom.bonds.length == 1);
 
-          // For ligand, "O" in carboxy group may be negatively charged. => to be improved
-          let bLigNeg = undefined;
-          if(atom.het && atom.elem === "O" && atom.bonds.length == 1) {
-               let cAtom = ic.atoms[atom.bonds[0]];
-               for(let j = 0; j < cAtom.bonds.length; ++j) {
-                   let serial = cAtom.bonds[j];
-                   if(ic.atoms[serial].elem == "O" && serial != atom.serial) {
-                       bLigNeg = true;
-                       break;
-                   }
-               }
-          }
-
-          let bAtomCondAnion = ( atom.resn === 'GLU' && (atom.name === "OE1" || atom.name === "OE2") )
-            || ( atom.resn === 'ASP' && (atom.name === "OD1" || atom.name === "OD2") )
-            || ( ic.nucleotides.hasOwnProperty(atom.serial) && (atom.name === "OP1" || atom.name === "OP2" || atom.name === "O1P" || atom.name === "O2P"))
-            || (atom.het && me.parasCls.anionsTrimArray.indexOf(atom.elem) !== -1)
-            || bLigNeg;
+          let bAtomCondAnion = this.isAnion(atom);
 
           bAtomCondCation = (ic.bOpm) ? bAtomCondCation && atom.resn !== 'DUM' : bAtomCondCation;
           bAtomCondAnion = (ic.bOpm) ? bAtomCondAnion && atom.resn !== 'DUM' : bAtomCondAnion;
@@ -15195,10 +15199,7 @@ class Saltbridge {
             || ( atom.resn === 'ARG' && (atom.name === "NH1" || atom.name === "NH2"))
             || (atom.het && me.parasCls.cationsTrimArray.indexOf(atom.elem) !== -1);
 
-          let bAtomCondAnion = ( atom.resn === 'GLU' && (atom.name === "OE1" || atom.name === "OE2") )
-            || ( atom.resn === 'ASP' && (atom.name === "OD1" || atom.name === "OD2") )
-            || ( ic.nucleotides.hasOwnProperty(atom.serial) && (atom.name === "OP1" || atom.name === "OP2" || atom.name === "O1P" || atom.name === "O2P"))
-            || (atom.het && me.parasCls.anionsTrimArray.indexOf(atom.elem) !== -1);
+          let bAtomCondAnion = this.isAnion(atom);
 
           bAtomCondCation = (ic.bOpm) ? bAtomCondCation && atom.resn !== 'DUM' : bAtomCondCation;
           bAtomCondAnion = (ic.bOpm) ? bAtomCondAnion && atom.resn !== 'DUM' : bAtomCondAnion;
@@ -15309,6 +15310,35 @@ class Saltbridge {
         return hbondsAtoms;
     }
 
+    isAnion(atom) { let ic = this.icn3d, me = ic.icn3dui;
+      // For ligand, "O" in carboxy group may be negatively charged. => to be improved
+      let bLigNeg = undefined;
+      if(atom.het && atom.elem === "O" && atom.bonds.length == 1) {
+            let cAtom = ic.atoms[atom.bonds[0]];
+            for(let j = 0; j < cAtom.bonds.length; ++j) {
+                let serial = cAtom.bonds[j];
+                if(ic.atoms[serial].elem == "O" && serial != atom.serial) {
+                    bLigNeg = true;
+                    break;
+                }
+            }
+      }
+
+      // "O" in phosphae or sulfate group is neagatively charged
+      if(atom.elem === "O" && atom.bonds.length == 1) {
+        let pAtom = ic.atoms[atom.bonds[0]];
+        if(pAtom.elem == "P" || pAtom.elem == "S") bLigNeg = true;      
+      }          
+
+      let bAtomCondAnion = ( atom.resn === 'GLU' && (atom.name === "OE1" || atom.name === "OE2") )
+        || ( atom.resn === 'ASP' && (atom.name === "OD1" || atom.name === "OD2") )
+        || ( ic.nucleotides.hasOwnProperty(atom.serial) && (atom.name === "OP1" || atom.name === "OP2" || atom.name === "O1P" || atom.name === "O2P"))
+        || (atom.het && me.parasCls.anionsTrimArray.indexOf(atom.elem) !== -1)
+        || bLigNeg;
+          
+      return bAtomCondAnion;
+    }
+    
     hideSaltbridge() { let ic = this.icn3d; ic.icn3dui;
         ic.opts["saltbridge"] = "no";
         if(ic.lines === undefined) ic.lines = { };
@@ -15456,7 +15486,7 @@ class GetGraph {
        return resStr;
     }
 
-    drawResNode(node, i, r, gap, margin, y, setName, bVertical, bContactMap) { let ic = this.icn3d; ic.icn3dui;
+    drawResNode(node, i, r, gap, margin, y, setName, bVertical, bContactMap, bAfMap) { let ic = this.icn3d; ic.icn3dui;
         let  x, resid = node.r.substr(4);
         if(bVertical) {
             x = margin - i *(r + gap);
@@ -15482,7 +15512,7 @@ class GetGraph {
         let  strokewidth = '1';
         let  textcolor = '#000';
         let  fontsize = '6px'; // '6';
-        let  html = "<g class='icn3d-node' resid='" + resid + "' >";
+        let  html = (bAfMap) ? "<g>" : "<g class='icn3d-node' resid='" + resid + "' >";
         html += "<title>" + node.id + "</title>";
         if(bVertical) {
             html += "<circle cx='" + y + "' cy='" + x + "' r='" + r + "' fill='" + color + "' stroke-width='" + strokewidth + "' stroke='" + strokecolor + "' resid='" + resid + "' />";
@@ -15495,23 +15525,40 @@ class GetGraph {
         html += "</g>";
         return html;
     }
-    getNodeTopBottom(nameHash, name2node, bReverseNode) { let ic = this.icn3d; ic.icn3dui;
+    getNodeTopBottom(nameHash, name2node, bReverseNode, bCommonDiff, nameHashCommon) { let  ic = this.icn3d, me = ic.icn3dui;
         let  thisClass = this;
-        let  nodeArray1 = [], nodeArray2 = [];
+        let  nodeArray1 = [], nodeArray2 = [], name2nodeCommon = {};
+
+        let separatorCommon = "=>", separatorDiff = "==>", postCommon = "-", postDiff = "--";
         for(let name in nameHash) {
             let  node = name2node[name];
             if(!node) continue;
 
+            if(bCommonDiff == 1 || bCommonDiff == 2) {
+                node = me.hashUtilsCls.cloneHash(node);
+
+                if(bCommonDiff == 1) {
+                    let mapping = (nameHashCommon[name]) ? nameHashCommon[name] : postCommon;
+                    node.id += separatorCommon + mapping;
+                }
+                else {
+                    let mapping = (nameHashCommon[name]) ? nameHashCommon[name] : postDiff;
+                    node.id += separatorDiff + mapping;
+                }
+
+                name2nodeCommon[node.id] = node;
+            }
+
             if(node.s == 'a') {
                 nodeArray1.push(node);
             }
             else if(node.s == 'b') {
                 nodeArray2.push(node);
             }
-            else if(node.s == 'ab') {
-                nodeArray1.push(node);
-                nodeArray2.push(node);
-            }
+            //else if(node.s == 'ab') {
+            //    nodeArray1.push(node);
+            //    nodeArray2.push(node);
+            //}
         }
         // sort array
         nodeArray1.sort(function(a,b) {
@@ -15520,7 +15567,7 @@ class GetGraph {
         nodeArray2.sort(function(a,b) {
           return thisClass.compNode(a, b, bReverseNode);
         });
-        return {"nodeArray1": nodeArray1, "nodeArray2": nodeArray2}
+        return {"nodeArray1": nodeArray1, "nodeArray2": nodeArray2, "name2node": name2nodeCommon};
     }
     updateGraphJson(struc, index, nodeArray1, nodeArray2, linkArray) { let  ic = this.icn3d, me = ic.icn3dui;
         let  lineGraphStr = '';
@@ -15843,22 +15890,37 @@ class LineGraph {
         let structureArray = ic.resid2specCls.atoms2structureArray(ic.hAtoms);
         //if(Object.keys(ic.structures).length > 1) {
         if(structureArray.length > 1) {
-            let  nodeArray1a = [],
-                nodeArray1b = [],
-                nodeArray2a = [],
-                nodeArray2b = [],
-                nodeArray3a = [],
-                nodeArray3b = [];
-            //let  struc1 = Object.keys(ic.structures)[0],
-            //    struc2 = Object.keys(ic.structures)[1];
-            let  struc1 = structureArray[0],
-                struc2 = structureArray[1];
-            let  linkArrayA = [],
-                linkArrayB = [],
-                linkArrayAB = [];
-            let  nameHashA = {},
-                nameHashB = {},
-                nameHashAB = {};
+
+            let struc2index= {};
+            let nodeArray1Split = [], nodeArray2Split = [], linkArraySplit = [], nameHashSplit = [];
+
+            // show common interactions: nodes will be the same. The links/interactins are different.
+            // The mapped residue name and number are attached to "id".
+            // Original node: {id : "Q24.A.2AJF", r : "1_1_2AJF_A_24", s: "a", ...}
+            // Node for common interaction: {id : "Q24.A.2AJF|Q24", r : "1_1_2AJF_A_24", s: "a", ...}
+            let nodeArray1SplitCommon = [], nodeArray2SplitCommon = [], linkArraySplitCommon = [], nameHashSplitCommon = [];
+            let nodeArray1SplitDiff = [], nodeArray2SplitDiff = [], linkArraySplitDiff = [], nameHashSplitDiff = [];
+            let linkedNodeCnt = {};
+
+            for(let i = 0, il = structureArray.length; i < il; ++i) {   
+                nodeArray1Split[i] = [];
+                nodeArray2Split[i] = [];
+                linkArraySplit[i] = [];
+                nameHashSplit[i] = {};
+
+                nodeArray1SplitCommon[i] = [];
+                nodeArray2SplitCommon[i] = [];
+                linkArraySplitCommon[i] = [];
+                nameHashSplitCommon[i] = {};
+
+                nodeArray1SplitDiff[i] = [];
+                nodeArray2SplitDiff[i] = [];
+                linkArraySplitDiff[i] = [];
+                nameHashSplitDiff[i] = {};
+
+                struc2index[structureArray[i]] = i;
+            }
+
             for(let i = 0, il = linkArray.length; i < il; ++i) {
                 let  link = linkArray[i];
                 let  nodeA = name2node[link.source];
@@ -15868,119 +15930,188 @@ class LineGraph {
                     continue;
                 }
 
-                //var idArrayA = nodeA.r.split('_'); // 1_1_1KQ2_A_1
-                let  idArrayA = [];
-                idArrayA.push('');
-                idArrayA.push('');
+                let  idArrayA = this.getIdArrayFromNode(nodeA);
+                let  idArrayB = this.getIdArrayFromNode(nodeB);
 
-                let  tmpStr = nodeA.r.substr(4);
-                idArrayA = idArrayA.concat(me.utilsCls.getIdArray(tmpStr));
+                let index = struc2index[idArrayA[2]];
 
-                //var idArrayB = nodeB.r.split('_'); // 1_1_1KQ2_A_1
-                let  idArrayB = [];
-                idArrayB.push('');
-                idArrayB.push('');
+                if(idArrayA[2] == structureArray[index] && idArrayB[2] == structureArray[index]) {
+                    linkArraySplit[index].push(link);
+                    nameHashSplit[index][link.source] = 1;
+                    nameHashSplit[index][link.target] = 1;
 
-                tmpStr = nodeB.r.substr(4);
-                idArrayB = idArrayB.concat(me.utilsCls.getIdArray(tmpStr));
+                    let chainid1 = idArrayA[2] + '_' + idArrayA[3];
+                    let chainid2 = idArrayB[2] + '_' + idArrayB[3];
+                    let resid1 = chainid1 + '_' + idArrayA[4];
+                    let resid2 = chainid2 + '_' + idArrayB[4];
 
-                if(idArrayA[2] == struc1 && idArrayB[2] == struc1) {
-                    linkArrayA.push(link);
-                    nameHashA[link.source] = 1;
-                    nameHashA[link.target] = 1;
-                } else if(idArrayA[2] == struc2 && idArrayB[2] == struc2) {
-                    linkArrayB.push(link);
-                    nameHashB[link.source] = 1;
-                    nameHashB[link.target] = 1;
-                } else {
-                    linkArrayAB.push(link);
-                    nameHashAB[link.source] = 1;
-                    nameHashAB[link.target] = 1;
-                }
-            }
-            let  nodeArraysA = ic.getGraphCls.getNodeTopBottom(nameHashA, name2node);
-            nodeArray1a = nodeArraysA.nodeArray1;
-            nodeArray1b = nodeArraysA.nodeArray2;
-            let  nodeArraysB = ic.getGraphCls.getNodeTopBottom(nameHashB, name2node);
-            nodeArray2a = nodeArraysB.nodeArray1;
-            nodeArray2b = nodeArraysB.nodeArray2;
-            let  nodeArraysAB = ic.getGraphCls.getNodeTopBottom(nameHashAB, name2node, true);
-            nodeArray3a = nodeArraysAB.nodeArray1;
-            nodeArray3b = nodeArraysAB.nodeArray2;
-            let  len1a = nodeArray1a.length,
-                len1b = nodeArray1b.length;
-            let  len2a = nodeArray2a.length,
-                len2b = nodeArray2b.length;
-            let  len3a = nodeArray3a.length,
-                len3b = nodeArray3b.length;
-            let  maxLen = Math.max(len1a, len1b, len2a, len2b, len3a, len3b);
+                    let mapping1, mapping2;
+                    
+                    if(ic.chainsMapping[chainid1] && ic.chainsMapping[chainid1][resid1]
+                      && ic.chainsMapping[chainid2] && ic.chainsMapping[chainid2][resid2]) { 
+                        mapping1 = (nodeA.s == "a") ? ic.chainsMapping[chainid1][resid1] : ic.chainsMapping[chainid2][resid2];
+                        mapping2 = (nodeA.s == "a") ? ic.chainsMapping[chainid2][resid2] : ic.chainsMapping[chainid1][resid1];
+
+                        let mappingid = mapping1 + '_' + mapping2 + '_' + link.c; // link.c determines the interaction type
+                        if(!linkedNodeCnt.hasOwnProperty(mappingid)) {
+                            linkedNodeCnt[mappingid] = 1;
+                        }
+                        else {
+                            ++linkedNodeCnt[mappingid];
+                        }
+                    }
+                } 
+            }
+            
+            // set linkArraySplitCommon and nameHashSplitCommon
+            // set linkArraySplitDiff and nameHashSplitDiff
+            let separatorCommon = "=>", separatorDiff = "==>", postCommon = "-", postDiff = "--";
+            for(let i = 0, il = linkArray.length; i < il; ++i) {
+                let  link = linkArray[i];
+                let  nodeA = name2node[link.source];
+                let  nodeB = name2node[link.target];
+
+                if(!nodeA || !nodeB || !nodeA.r || !nodeB.r) {
+                    continue;
+                }
+
+                let  idArrayA = this.getIdArrayFromNode(nodeA);
+                let  idArrayB = this.getIdArrayFromNode(nodeB);
+
+                let index = struc2index[idArrayA[2]];
+
+                if(idArrayA[2] == structureArray[index] && idArrayB[2] == structureArray[index]) {
+                    let chainid1 = idArrayA[2] + '_' + idArrayA[3];
+                    let chainid2 = idArrayB[2] + '_' + idArrayB[3];
+                    let resid1 = chainid1 + '_' + idArrayA[4];
+                    let resid2 = chainid2 + '_' + idArrayB[4];
+
+                    let mapping1, mapping2;
+                    
+                    if(ic.chainsMapping[chainid1] && ic.chainsMapping[chainid1][resid1]
+                      && ic.chainsMapping[chainid2] && ic.chainsMapping[chainid2][resid2]) { 
+                        mapping1 = (nodeA.s == "a") ? ic.chainsMapping[chainid1][resid1] : ic.chainsMapping[chainid2][resid2];
+                        mapping2 = (nodeA.s == "a") ? ic.chainsMapping[chainid2][resid2] : ic.chainsMapping[chainid1][resid1];
+
+                        let mappingid = mapping1 + '_' + mapping2 + '_' + link.c; // link.c determines the interaction type
+
+                        let linkCommon = me.hashUtilsCls.cloneHash(link);
+                        linkCommon.source += (ic.chainsMapping[chainid1][resid1]) ? separatorCommon + ic.chainsMapping[chainid1][resid1] : separatorCommon + postCommon;
+                        linkCommon.target += (ic.chainsMapping[chainid2][resid2]) ? separatorCommon + ic.chainsMapping[chainid2][resid2] : separatorCommon + postCommon;
+
+                        let linkDiff = me.hashUtilsCls.cloneHash(link);
+                        linkDiff.source += (ic.chainsMapping[chainid1][resid1]) ? separatorDiff + ic.chainsMapping[chainid1][resid1] : separatorDiff + postDiff;
+                        linkDiff.target += (ic.chainsMapping[chainid2][resid2]) ? separatorDiff + ic.chainsMapping[chainid2][resid2] : separatorDiff + postDiff;
+                    
+                        if(linkedNodeCnt[mappingid] == structureArray.length) {
+                            linkArraySplitCommon[index].push(linkCommon);
+                        }  
+                        else {
+                            linkArraySplitDiff[index].push(linkDiff);
+                        }
+
+                        // use the original node names and thus use the original link
+                        nameHashSplitCommon[index][link.source] = ic.chainsMapping[chainid1][resid1];
+                        nameHashSplitCommon[index][link.target] = ic.chainsMapping[chainid2][resid2];
+ 
+                        nameHashSplitDiff[index][link.source] = ic.chainsMapping[chainid1][resid1];
+                        nameHashSplitDiff[index][link.target] = ic.chainsMapping[chainid2][resid2];
+                    }
+                } 
+            }
+
+            let len1Split = [], len2Split = [], maxWidth = 0;
             let  strucArray = [];
-            if(linkArrayA.length > 0) strucArray.push(struc1);
-            if(linkArrayB.length > 0) strucArray.push(struc2);
-            if(linkArrayAB.length > 0) strucArray.push(struc1 + '_' + struc2);
+            let bCommonDiff = 1;
+            for(let i = 0, il = structureArray.length; i < il; ++i) {  
+                let  nodeArraysTmp = ic.getGraphCls.getNodeTopBottom(nameHashSplit[i], name2node);
+                nodeArray1Split[i] = nodeArraysTmp.nodeArray1;
+                nodeArray2Split[i] = nodeArraysTmp.nodeArray2;
+
+                // common interactions
+                bCommonDiff = 1;
+                nodeArraysTmp = ic.getGraphCls.getNodeTopBottom(nameHashSplit[i], name2node, undefined, bCommonDiff, nameHashSplitCommon[i]);
+                nodeArray1SplitCommon[i] = nodeArraysTmp.nodeArray1;
+                nodeArray2SplitCommon[i] = nodeArraysTmp.nodeArray2;
+                name2node = me.hashUtilsCls.unionHash(name2node, nodeArraysTmp.name2node);
+
+                // different interactions
+                bCommonDiff = 2;
+                nodeArraysTmp = ic.getGraphCls.getNodeTopBottom(nameHashSplit[i], name2node, undefined, bCommonDiff, nameHashSplitDiff[i]);
+                nodeArray1SplitDiff[i] = nodeArraysTmp.nodeArray1;
+                nodeArray2SplitDiff[i] = nodeArraysTmp.nodeArray2;
+                name2node = me.hashUtilsCls.unionHash(name2node, nodeArraysTmp.name2node);
+                
+                len1Split[i] = nodeArray1Split[i].length;
+                len2Split[i] = nodeArray2Split[i].length;
+                
+                maxWidth = Math.max(maxWidth, len2Split[i]);
+
+                //if(linkArraySplit[i].length > 0) strucArray.push(structureArray[i]);
+                strucArray.push(structureArray[i]);
+            }
+
             let  factor = 1;
             let  r = 3 * factor;
             let  gap = 7 * factor;
             let  height, width, heightAll;
             let  marginX = 10,
                 marginY = 10,
-                legendWidth = 30;
+                legendWidth = 30,
+                textHeight = 20;
+            
             if(bScatterplot) {
-                heightAll =(len1a + 2 + len2a + 2) *(r + gap) + 4 * marginY + 2 * legendWidth;
-                width =(Math.max(len1b, len2b) + 2) *(r + gap) + 2 * marginX + legendWidth;
+                //heightAll =(len1a + 2 + len2a + 2) *(r + gap) + 4 * marginY + 2 * legendWidth;
+                //width =(Math.max(len1b, len2b) + 2) *(r + gap) + 2 * marginX + legendWidth;
+                heightAll =(me.utilsCls.sumArray(len1Split) + 2*strucArray.length) *(r + gap) + 4 * marginY 
+                  + 2 * legendWidth + textHeight*strucArray.length;
+                // show common and diff interaction as well
+                heightAll *= 3;
+
+                width = (maxWidth + 2) * (r + gap) + 2 * marginX + legendWidth;
+                  
             } else {
-                height = 110;
+                height = 110 + textHeight;
                 heightAll = height * strucArray.length;
-                width = maxLen *(r + gap) + 2 * marginX;
+                // show common and diff interaction as well
+                heightAll *= 3;
+
+                width = (maxWidth + 2) * (r + gap) + 2 * marginX;
             }
-            let  id, graphWidth;
+            let id;
             if(bScatterplot) {
                 ic.scatterplotWidth = 2 * width;
-                graphWidth = ic.scatterplotWidth;
+                ic.scatterplotWidth;
                 id = me.scatterplotid;
             } else {
                 ic.linegraphWidth = 2 * width;
-                graphWidth = ic.linegraphWidth;
+                ic.linegraphWidth;
                 id = me.linegraphid;
             }
             html =(strucArray.length == 0) ? "No interactions found for each structure<br><br>" :
-                "2D integration graph for structure(s) <b>" + strucArray + "</b><br><br>";
-            html += "<svg id='" + id + "' viewBox='0,0," + width + "," + heightAll + "' width='" + graphWidth + "px'>";
-            let  heightFinal = 0;
-            if(linkArrayA.length > 0) {
-                if(bScatterplot) {
-                    heightFinal -= 15;
-                    html += this.drawScatterplot_base(nodeArray1a, nodeArray1b, linkArrayA, name2node, heightFinal);
-                    heightFinal = 15;
-                    height =(len1a + 1) *(r + gap) + 2 * marginY;
-                } else {
-                    html += this.drawLineGraph_base(nodeArray1a, nodeArray1b, linkArrayA, name2node, heightFinal);
-                }
-                heightFinal += height;
-                ic.lineGraphStr += ic.getGraphCls.updateGraphJson(struc1, 1, nodeArray1a, nodeArray1b, linkArrayA);
-            }
-            if(linkArrayB.length > 0) {
-                if(bScatterplot) {
-                    html += this.drawScatterplot_base(nodeArray2a, nodeArray2b, linkArrayB, name2node, heightFinal);
-                    height =(len2a + 1) *(r + gap) + 2 * marginY;
-                } else {
-                    html += this.drawLineGraph_base(nodeArray2a, nodeArray2b, linkArrayB, name2node, heightFinal);
-                }
-                heightFinal += height;
-                if(linkArrayA.length > 0) ic.lineGraphStr += ', \n';
-                ic.lineGraphStr += ic.getGraphCls.updateGraphJson(struc2, 2, nodeArray2a, nodeArray2b, linkArrayB);
-            }
-            if(linkArrayAB.length > 0 && !bScatterplot) {
-                html += this.drawLineGraph_base(nodeArray3a, nodeArray3b, linkArrayAB, name2node, heightFinal);
-                if(linkArrayA.length > 0 || linkArrayB.length > 0) ic.lineGraphStr += ', \n';
-                ic.lineGraphStr += '"structure1_2": {"id1": "' + struc1 + '", "id2": "' + struc2 + '", "nodes1":[';
-                ic.lineGraphStr += me.utilsCls.getJSONFromArray(nodeArray3a);
-                ic.lineGraphStr += '], \n"nodes2":[';
-                ic.lineGraphStr += me.utilsCls.getJSONFromArray(nodeArray3b);
-                ic.lineGraphStr += '], \n"links":[';
-                ic.lineGraphStr += me.utilsCls.getJSONFromArray(linkArrayAB);
-                ic.lineGraphStr += ']}';
-            }
+                "2D integration graph for " + strucArray.length + " structure(s) <b>" + strucArray + "</b>. There are three sections: \"Interactions\", \"Common interactions\", and \"Different interactions\". Each section has " + strucArray.length + " graphs.<br><br>";
+            html += "<svg id='" + id + "' viewBox='0,0," + width + "," + heightAll + "'>";
+
+            let  result, heightFinal = 0;            
+ 
+            bCommonDiff = 0; // 0: all interactions, 1: common interactions, 2: different interactions
+            result = this.drawGraphPerType(bCommonDiff, structureArray, bScatterplot, nodeArray1Split, nodeArray2Split, linkArraySplit, name2node, heightFinal, height, textHeight, len1Split, r, gap, marginY);
+
+            heightFinal = result.heightFinal;
+            html += result.html;
+
+            bCommonDiff = 1;
+            result = this.drawGraphPerType(bCommonDiff, structureArray, bScatterplot, nodeArray1SplitCommon, nodeArray2SplitCommon, linkArraySplitCommon, name2node, heightFinal, height, textHeight, len1Split, r, gap, marginY);
+
+            heightFinal = result.heightFinal;
+            html += result.html;
+
+            bCommonDiff = 2;
+            result = this.drawGraphPerType(bCommonDiff, structureArray, bScatterplot, nodeArray1SplitDiff, nodeArray2SplitDiff, linkArraySplitDiff, name2node, heightFinal, height, textHeight, len1Split, r, gap, marginY);
+
+            heightFinal = result.heightFinal;
+            html += result.html;
+            
             html += "</svg>";
         } else {
             if(!bScatterplot) {
@@ -16038,7 +16169,57 @@ class LineGraph {
         return html;
     }
 
-    drawLineGraph_base(nodeArray1, nodeArray2, linkArray, name2node, height) { let  ic = this.icn3d, me = ic.icn3dui;
+    drawGraphPerType(bCommonDiff, structureArray, bScatterplot, nodeArray1, nodeArray2, linkArray, name2node, heightFinal, height, textHeight, len1Split, r, gap, marginY) { let ic = this.icn3d; ic.icn3dui;
+        let html = "";
+
+        // draw common interaction
+        let label, postfix;
+        if(bCommonDiff == 0) {
+            label = "Interactions in structure ";
+            postfix = "";
+        }
+        else if(bCommonDiff == 1) {
+            label = "Common interactions in structure ";
+            postfix = "_common";
+        }
+        else if(bCommonDiff == 2) {
+            label = "Different interactions in structure ";
+            postfix = "_diff";
+        }
+
+        for(let i = 0, il = structureArray.length; i < il; ++i) {  
+            if(bScatterplot) {
+                html += this.drawScatterplot_base(nodeArray1[i], nodeArray2[i], linkArray[i], name2node, heightFinal, undefined, label + structureArray[i], textHeight);
+                height =(len1Split[i] + 1) *(r + gap) + 2 * marginY + textHeight;
+            } else {
+                html += this.drawLineGraph_base(nodeArray1[i], nodeArray2[i], linkArray[i], name2node, heightFinal, label + structureArray[i], textHeight);
+            }
+            heightFinal += height;
+
+            if(bCommonDiff) { // very beginning
+                if(i > 0) ic.lineGraphStr += ', \n';
+            }
+            else {
+                ic.lineGraphStr += ', \n';
+            }
+            ic.lineGraphStr += ic.getGraphCls.updateGraphJson(structureArray[i], i + postfix, nodeArray1[i], nodeArray2[i], linkArray[i]);
+        }
+
+        return {"heightFinal": heightFinal, "html": html};
+    }
+
+    getIdArrayFromNode(node) { let  ic = this.icn3d, me = ic.icn3dui;
+        let  idArray = []; // 1_1_1KQ2_A_1
+        idArray.push('');
+        idArray.push('');
+
+        let  tmpStr = node.r.substr(4); 
+        idArray = idArray.concat(me.utilsCls.getIdArray(tmpStr));
+
+        return idArray;
+    }
+
+    drawLineGraph_base(nodeArray1, nodeArray2, linkArray, name2node, height, label, textHeight) { let  ic = this.icn3d, me = ic.icn3dui;
         let  html = '';
         let  len1 = nodeArray1.length,
             len2 = nodeArray2.length;
@@ -16055,6 +16236,13 @@ class LineGraph {
             margin2 = margin;
             margin1 = Math.abs(len1 - len2) *(r + gap) * 0.5 + margin;
         }
+
+        // draw label
+        if(label) {
+            height += textHeight;
+            html += "<text x='" + margin1 + "' y='" + height + "' style='font-size:8px; font-weight:bold'>" + label + "</text>";
+        }
+
         let  h1 = 30 + height,
             h2 = 80 + height;
         let  nodeHtml = '';
@@ -16110,7 +16298,7 @@ class LineGraph {
         return html;
     }
 
-    drawScatterplot_base(nodeArray1, nodeArray2, linkArray, name2node, height, bContactMap) { let ic = this.icn3d; ic.icn3dui;
+    drawScatterplot_base(nodeArray1, nodeArray2, linkArray, name2node, height, bContactMap, label, textHeight, bAfMap) { let ic = this.icn3d; ic.icn3dui;
         let  html = '';
         let  len1 = nodeArray1.length,
             len2 = nodeArray2.length;
@@ -16121,19 +16309,27 @@ class LineGraph {
         let  marginX = 10,
             marginY = 20;
         let  heightTotal =(len1 + 1) *(r + gap) + legendWidth + 2 * marginY;
+
+        // draw label
+        if(label) {
+            height += textHeight;
+            html += "<text x='" + marginX + "' y='" + (height + 15).toString() + "' style='font-size:8px; font-weight:bold'>" + label + "</text>";
+        }
+
         let  margin1 = height + heightTotal -(legendWidth + marginY +(r + gap)); // y-axis
         let  margin2 = legendWidth + marginX +(r + gap); // x-axis
-        let  x = legendWidth + marginX;
+
         let  nodeHtml = '';
         let  node2posSet1 = {},
             node2posSet2 = {};
+        let  x = legendWidth + marginX;
         for(let i = 0; i < len1; ++i) {
-            nodeHtml += ic.getGraphCls.drawResNode(nodeArray1[i], i, r, gap, margin1, x, 'a', true);
+            nodeHtml += ic.getGraphCls.drawResNode(nodeArray1[i], i, r, gap, margin1, x, 'a', true, undefined, bAfMap);
             node2posSet1[nodeArray1[i].id] = { x: x, y: margin1 - i *(r + gap) };
         }
         let  y = height + heightTotal -(legendWidth + marginY);
         for(let i = 0; i < len2; ++i) {
-            nodeHtml += ic.getGraphCls.drawResNode(nodeArray2[i], i, r, gap, margin2, y, 'b', false, bContactMap);
+            nodeHtml += ic.getGraphCls.drawResNode(nodeArray2[i], i, r, gap, margin2, y, 'b', false, bContactMap, bAfMap);
             node2posSet2[nodeArray2[i].id] = { x: margin2 + i *(r + gap), y: y };
         }
         for(let i = 0, il = linkArray.length; i < il; ++i) {
@@ -16143,10 +16339,10 @@ class LineGraph {
 
             if(!node1 || !node2) continue;
 
-            html += this.drawOnePairNode(link, node1, node2, node2posSet1, node2posSet2, bContactMap);
+            html += this.drawOnePairNode(link, node1, node2, node2posSet1, node2posSet2, bContactMap, bAfMap);
 
-            if(bContactMap) { // draw symmetric contact map
-                html += this.drawOnePairNode(link, node2, node1, node2posSet1, node2posSet2, bContactMap);
+            if(bContactMap && !bAfMap) { // draw symmetric contact map, bAfmap just need to draw once          
+                html += this.drawOnePairNode(link, node2, node1, node2posSet1, node2posSet2, bContactMap, bAfMap);
             }
         }
         // show nodes later
@@ -16154,7 +16350,7 @@ class LineGraph {
         return html;
     }
 
-    drawOnePairNode(link, node1, node2, node2posSet1, node2posSet2, bContactMap) { let  ic = this.icn3d, me = ic.icn3dui;
+    drawOnePairNode(link, node1, node2, node2posSet1, node2posSet2, bContactMap, bAfMap) { let  ic = this.icn3d, me = ic.icn3dui;
         let html = '';
 
         let  factor = 1;
@@ -16184,21 +16380,31 @@ class LineGraph {
             strokecolor = "#" + me.htmlCls.contactColor;
         }
 
+        if(bContactMap) strokecolor = "#" + link.c;
+
         let  linestrokewidth;
         if(link.v == me.htmlCls.contactValue) {
             linestrokewidth = 1;
         } else {
             linestrokewidth = 2;
         }
-        html += "<g class='icn3d-interaction' resid1='" + resid1 + "' resid2='" + resid2 + "' >";
-        html += "<title>Interaction of residue " + node1.id + " with residue " + node2.id + "</title>";
-        if(bContactMap) {
-            html += "<rect x='" +(pos2.x - halfSize).toString() + "' y='" +(pos1.y - halfSize).toString() + "' width='" + rectSize + "' height='" + rectSize + "' fill='" + strokecolor + "' stroke-width='" + linestrokewidth + "' stroke='" + strokecolor + "' />";
+        
+        if(bAfMap && ic.hex2skip[link.c]) ;
+        else if(bAfMap && ic.hex2id[link.c]) {
+            let id = ic.hex2id[link.c];
+            html += "<use href='#" + id + "' x='" +(pos2.x - halfSize).toString() + "' y='" +(pos1.y - halfSize).toString() + "' />";
         }
         else {
-            html += "<rect x='" +(pos2.x - halfSize).toString() + "' y='" +(pos1.y - halfSize).toString() + "' width='" + rectSize + "' height='" + rectSize + "' fill='" + strokecolor + "' fill-opacity='0.6' stroke-width='" + linestrokewidth + "' stroke='" + strokecolor + "' />";
+            html += "<g class='icn3d-interaction' resid1='" + resid1 + "' resid2='" + resid2 + "' >";
+            html += "<title>Interaction of residue " + node1.id + " with residue " + node2.id + "</title>";
+            if(bContactMap) {
+                html += "<rect x='" +(pos2.x - halfSize).toString() + "' y='" +(pos1.y - halfSize).toString() + "' width='" + rectSize + "' height='" + rectSize + "' fill='" + strokecolor + "' stroke-width='" + linestrokewidth + "' stroke='" + strokecolor + "' />";
+            }
+            else {
+                html += "<rect x='" +(pos2.x - halfSize).toString() + "' y='" +(pos1.y - halfSize).toString() + "' width='" + rectSize + "' height='" + rectSize + "' fill='" + strokecolor + "' fill-opacity='0.6' stroke-width='" + linestrokewidth + "' stroke='" + strokecolor + "' />";
+            }
+            html += "</g>";
         }
-        html += "</g>";
 
         return html;
     }
@@ -16498,8 +16704,9 @@ class ViewInterPairs {
                tmpText = 'Set 2';
            }
            html += '<div style="text-align:center"><br><b>Interactions Sorted on ' + tmpText + '</b>: <button class="' + ic.pre + 'showintercntonly" style="margin-left:20px">Show Count Only</button><button class="' + ic.pre + 'showinterdetails" style="margin-left:20px">Show Details</button></div>';
-           html += this.getAllInteractionTable(type).html;
-           bondCnt = this.getAllInteractionTable(type).bondCnt;
+           let result = this.getAllInteractionTable(type);
+           html += result.html;
+           bondCnt = result.bondCnt;
 
            $("#" + ic.pre + "dl_interactionsorted").html(html);
            me.htmlCls.dialogCls.openDlg('dl_interactionsorted', 'Show sorted interactions');
@@ -18412,8 +18619,15 @@ class ResidueLabels {
                 label.factor = 0.3;
 
                 let atomColorStr = atom.color.getHexString().toUpperCase();
-                label.color = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //(atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
-                if(bSchematic) label.color = (atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
+                //label.color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //(atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
+                //if(bSchematic) label.color = (atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
+                // don't change residue labels
+                if(bNumber) {
+                    label.color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd;
+                }
+                else {
+                    label.color = (atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
+                }
                 label.background = background;
                 //label.alpha = alpha; // ic.labelCls.hideLabels() didn't work. Remove this line for now
 
@@ -18457,7 +18671,7 @@ class ResidueLabels {
             label.text = atom.elem;
             label.size = size;
 
-            label.color = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : atom.color.getHexString();
+            label.color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : atom.color.getHexString();
             label.background = background;
 
             ic.labels['schematic'].push(label);
@@ -18495,7 +18709,7 @@ class ResidueLabels {
             }
 
             let atomColorStr = atom.color.getHexString().toUpperCase();
-            label.color = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //(atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr; 
+            label.color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //(atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr; 
             if(bElement) label.color = (atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
             label.background = background;
 
@@ -19275,7 +19489,8 @@ class Scap {
                   if(!ic.alertAlt) {
                     ic.alertAlt = true;
 
-                    if(ic.bRender) var aaa = 1; //alert('Please press the letter "a" to alternate between wild type and mutant.');
+                    //if(ic.bRender) var aaa = 1; //alert('Please press the letter "a" to alternate between wild type and mutant.');
+                    var aaa = 1; //alert('Please press the letter "a" to alternate between wild type and mutant.');
                   }
               }
 
@@ -19923,7 +20138,7 @@ class LoadPDB {
     // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
     //This PDB parser feeds the viewer with the content of a PDB file, pdbData.
     loadPDB(src, pdbid, bOpm, bVector, bMutation, bAppend) { let  ic = this.icn3d, me = ic.icn3dui;
-        //ic.atoms = {}
+        let bNMR = false;
         let  lines = src.split('\n');
 
         let  chainsTmp = {}; // serial -> atom
@@ -20108,6 +20323,11 @@ class LoadPDB {
                  if(line.indexOf('1/2 of bilayer thickness:') !== -1) { // OPM transmembrane protein
                     ic.halfBilayerSize = parseFloat(line.substr(line.indexOf(':') + 1).trim());
                  }
+                 else if (type == 210) {
+                     if((line.substr(11, 32).trim() == 'EXPERIMENT TYPE') && line.substr(45).trim() == 'NMR') {
+                        bNMR = true;
+                     }
+                 }
                  else if (type == 350 && line.substr(13, 5) == 'BIOMT') {
                     let  n = parseInt(line[18]) - 1;
                     //var m = parseInt(line.substr(21, 2));
@@ -20165,12 +20385,14 @@ class LoadPDB {
 
                 //helices = [];
                 //sheets = [];
-                sheetArray = [];
-                sheetStart = [];
-                sheetEnd = [];
-                helixArray = [];
-                helixStart = [];
-                helixEnd = [];
+                if(!bNMR) {
+                    sheetArray = [];
+                    sheetStart = [];
+                    sheetEnd = [];
+                    helixArray = [];
+                    helixStart = [];
+                    helixEnd = [];
+                }
             } else if (record === 'JRNL  ') {
                 if(line.substr(12, 4) === 'PMID') {
                     ic.pmid = line.substr(19).trim();
@@ -20268,27 +20490,26 @@ class LoadPDB {
 
                 // Assign secondary structures from the input
                 // if a residue is assigned both sheet and helix, it is assigned as sheet
-                if($.inArray(residueNum, sheetArray) !== -1) {
+                if(this.isSecondary(residueNum, sheetArray, bNMR)) {
                   ic.atoms[serial].ss = 'sheet';
-
-                  if($.inArray(residueNum, sheetStart) !== -1) {
+                  if(this.isSecondary(residueNum, sheetStart, bNMR)) {
                     ic.atoms[serial].ssbegin = true;
                   }
 
                   // do not use else if. Some residues are both start and end of secondary structure
-                  if($.inArray(residueNum, sheetEnd) !== -1) {
+                  if(this.isSecondary(residueNum, sheetEnd, bNMR)) {
                     ic.atoms[serial].ssend = true;
                   }
                 }
-                else if($.inArray(residueNum, helixArray) !== -1) {
+                else if(this.isSecondary(residueNum, helixArray, bNMR)) {
                   ic.atoms[serial].ss = 'helix';
 
-                  if($.inArray(residueNum, helixStart) !== -1) {
+                  if(this.isSecondary(residueNum, helixStart, bNMR)) {
                     ic.atoms[serial].ssbegin = true;
                   }
 
                   // do not use else if. Some residues are both start and end of secondary structure
-                  if($.inArray(residueNum, helixEnd) !== -1) {
+                  if(this.isSecondary(residueNum, helixEnd, bNMR)) {
                     ic.atoms[serial].ssend = true;
                   }
                 }
@@ -20729,6 +20950,24 @@ class LoadPDB {
         return {'chainresiCalphaHash': chainCalphaHash, 'center': ic.center.clone()}
     }
 
+    isSecondary(resid, residArray, bNMR) { let ic = this.icn3d; ic.icn3dui;
+        if(!bNMR) {
+            return $.inArray(resid, residArray) != -1;
+        }
+        else {
+            let chain_resi = resid.substr(resid.indexOf('_') + 1);
+
+            let bFound = false;
+            for(let i = 0, il = residArray.length; i < il; ++i) {
+                if(chain_resi == residArray[i].substr(residArray[i].indexOf('_') + 1)) {
+                    bFound = true;
+                    break;
+                }
+            }
+
+            return bFound;
+        }
+    }
 }
 
 /**
@@ -20776,6 +21015,7 @@ class LoadAtomData {
           let  refinedStr =(me.cfg.inpara && me.cfg.inpara.indexOf('atype=1') !== -1) ? 'Invariant Core ' : '';
           ic.molTitle = refinedStr + 'Structure Alignment of ';
 
+          let bTitle = false;
           for(let i = 0, il = data.alignedStructures[0].length; i < il; ++i) {
               let  structure = data.alignedStructures[0][i];
 
@@ -20813,10 +21053,13 @@ class LoadAtomData {
                   ic.molTitle += " and ";
                   if(structure.descr !== undefined) ic.pmid += "_";
               }
+
+              bTitle = true;
           }
 
           ic.molTitle += ' from VAST+';
 
+          if(!bTitle) ic.molTitle = '';
         }
         else { // mmdbid or mmcifid
             if(data.descr !== undefined) ic.molTitle += data.descr.name;
@@ -22316,7 +22559,7 @@ class PdbParser {
        let  url, dataType;
 
        if(bAf) {
-           url = "https://alphafold.ebi.ac.uk/files/AF-" + pdbid + "-F1-model_v1.pdb";
+           url = "https://alphafold.ebi.ac.uk/files/AF-" + pdbid + "-F1-model_v2.pdb";
            ic.ParserUtilsCls.setYourNote(pdbid.toUpperCase() + '(AlphaFold) in iCn3D');
        }
        else {
@@ -23121,11 +23364,11 @@ class AlignParser {
                 ic.alignmolid2color.push(tmpHash);
             }
 
-            //var url3 = me.htmlCls.baseUrl + 'mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&atomonly=1&uid=' + ic.mmdbidArray[0];
-            //var url4 = me.htmlCls.baseUrl + 'mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&atomonly=1&uid=' + ic.mmdbidArray[1];
+            //var url3 = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&bu=" + me.cfg.bu + "&atomonly=1&uid=" + ic.mmdbidArray[0];
+            //var url4 = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&bu=" + me.cfg.bu + "&atomonly=1&uid=" + ic.mmdbidArray[1];
             // need the parameter moleculeInfor
-            let  url3 = me.htmlCls.baseUrl + 'mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&uid=' + ic.mmdbidArray[0];
-            let  url4 = me.htmlCls.baseUrl + 'mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&uid=' + ic.mmdbidArray[1];
+            let  url3 = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&bu=" + me.cfg.bu + "&uid=" + ic.mmdbidArray[0];
+            let  url4 = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&bu=" + me.cfg.bu + "&uid=" + ic.mmdbidArray[1];
 
             let  d3 = $.ajax({
               url: url3,
@@ -23660,14 +23903,14 @@ class MmdbParser {
        // b: b-factor, s: water, ft: pdbsite
        //&ft=1
        if(bGi) {
-           url = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&simple=1&gi=" + mmdbid;
+           url = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&bu=" + me.cfg.bu + "&simple=1&gi=" + mmdbid;
        }
        else {
-           url = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&simple=1&uid=" + mmdbid;
-       }
+           url = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&bu=" + me.cfg.bu + "&simple=1&uid=" + mmdbid;
+        }
 
-       // use asymmetric unit for BLAST search, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?from=blast&blast_rep_id=5XZC_B&query_id=1TUP_A&command=view+annotations;set+annotation+cdd;set+annotation+site;set+view+detailed+view;select+chain+5XZC_B;show+selection&log$=align&blast_rank=1&RID=EPUCYNVV014&buidx=0
-       if(me.cfg.blast_rep_id !== undefined) url += '&buidx=0';
+       // use asymmetric unit for BLAST search, e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?from=blast&blast_rep_id=5XZC_B&query_id=1TUP_A&command=view+annotations;set+annotation+cdd;set+annotation+site;set+view+detailed+view;select+chain+5XZC_B;show+selection&log$=align&blast_rank=1&RID=EPUCYNVV014&bu=0
+       if(me.cfg.blast_rep_id !== undefined) url += '&bu=0';
 
        ic.bCid = undefined;
 
@@ -23923,7 +24166,7 @@ class MmdbParser {
             } // for each domainArray
         } // for each molid
 
-        // "asuAtomCount" is defined when: 1) atom count is over the threshold 2) buidx=1 3) asu atom count is smaller than biological unit atom count
+        // "asuAtomCount" is defined when: 1) atom count is over the threshold 2) bu=1 3) asu atom count is smaller than biological unit atom count
         ic.bAssemblyUseAsu =(data.asuAtomCount !== undefined) ? true : false;
         if(type !== undefined) {
             ic.bAssemblyUseAsu = false;
@@ -24549,7 +24792,7 @@ class ChainalignParser {
         let  pos1 = alignArray[0].indexOf('_');
         ic.mmdbid_t = alignArray[0].substr(0, pos1).toUpperCase();
         ic.chain_t = alignArray[0].substr(pos1+1);
-        let  url_t = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&uid=" + ic.mmdbid_t;
+        let  url_t = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&bu=" + me.cfg.bu + "&uid=" + ic.mmdbid_t;
         if(me.cfg.inpara !== undefined) url_t += me.cfg.inpara;
 
         let  ajaxArray = [];
@@ -24575,7 +24818,7 @@ class ChainalignParser {
             let  chainalignFinal = ic.mmdbid_q + "_" + ic.chain_q + "," + ic.mmdbid_t + "_" + ic.chain_t;
 
             let  urlalign = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi?chainpairs=" + chainalignFinal;
-            let  url_q = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&uid=" + ic.mmdbid_q;
+            let  url_q = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&bu=" + me.cfg.bu + "&uid=" + ic.mmdbid_q;
 
             if(me.cfg.inpara !== undefined) url_q += me.cfg.inpara;
 
@@ -26452,6 +26695,19 @@ class LoadScript {
 
             return;
           }
+          else if(ic.commands[i].trim().indexOf('set af align error map') == 0) {
+            let  strArray = ic.commands[i].split("|||");
+            let  command = strArray[0].trim();
+
+            $.when(thisClass.applyCommandAfmap(command)).then(function() {
+               //if(!me.cfg.notebook && dialog && dialog.hasClass("ui-dialog-content")) dialog.dialog( "close" );
+
+               //ic.drawCls.draw();
+               thisClass.execCommandsBase(i + 1, end, steps);
+            });
+
+            return;
+          }
           else {
               ic.applyCommandCls.applyCommand(ic.commands[i]);
           }
@@ -26644,11 +26900,18 @@ class LoadScript {
           me.cfg.mmcifid = id;
           ic.mmcifParserCls.downloadMmcif(id);
         }
-        else if(command.indexOf('load mmdb') !== -1) {
+        else if(command.indexOf('load mmdb') !== -1 || command.indexOf('load mmdb1') !== -1) {
           me.cfg.mmdbid = id;
+          me.cfg.bu = 1;
 
           ic.mmdbParserCls.downloadMmdb(id);
         }
+        else if(command.indexOf('load mmdb0') !== -1) {
+            me.cfg.mmdbid = id;
+            me.cfg.bu = 0;
+  
+            ic.mmdbParserCls.downloadMmdb(id);
+        }
         else if(command.indexOf('load gi') !== -1) {
           me.cfg.gi = id;
           ic.mmdbParserCls.downloadGi(id);
@@ -26778,6 +27041,23 @@ class LoadScript {
       return ic.deferredRealign.promise();
     }
 
+    applyCommandAfmapBase(command) { let ic = this.icn3d; ic.icn3dui;
+        let afid = command.substr(command.lastIndexOf(' ') + 1);
+     
+        ic.contactMapCls.afErrorMap(afid);
+    }
+
+    applyCommandAfmap(command) { let ic = this.icn3d; ic.icn3dui;
+      let  thisClass = this;
+
+      // chain functions together
+      ic.deferredAfmap = new $.Deferred(function() {
+         thisClass.applyCommandAfmapBase(command);
+      }); // end of me.deferred = $.Deferred(function() {
+
+      return ic.deferredAfmap.promise();
+    }
+
     applyCommandGraphinteractionBase(command) { let ic = this.icn3d; ic.icn3dui;
         let  paraArray = command.split(' | ');
         if(paraArray.length >= 3) {
@@ -28925,7 +29205,7 @@ class Analysis {
             label.text = 'Chain ' + chainName + ': ' + proteinName;
             label.size = size;
             ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.chains[chainid]).color.getHexString().toUpperCase();
-            label.color = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //(atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
+            label.color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //(atomColorStr === "CCCCCC" || atomColorStr === "C8C8C8") ? "#888888" : "#" + atomColorStr;
             label.background = background;
             ic.labels['chain'].push(label);
         }
@@ -28959,10 +29239,10 @@ class Analysis {
             }
             labelN.size = size;
             labelC.size = size;
-            let atomNColorStr = firstAtom.color.getHexString().toUpperCase();
-            let atomCColorStr = lastAtom.color.getHexString().toUpperCase();
-            labelN.color = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : (atomNColorStr === "CCCCCC" || atomNColorStr === "C8C8C8") ? "#888888" : "#" + atomNColorStr;
-            labelC.color = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : (atomCColorStr === "CCCCCC" || atomCColorStr === "C8C8C8") ? "#888888" : "#" + atomCColorStr;
+            firstAtom.color.getHexString().toUpperCase();
+            lastAtom.color.getHexString().toUpperCase();
+            labelN.color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //(atomNColorStr === "CCCCCC" || atomNColorStr === "C8C8C8") ? "#888888" : "#" + atomNColorStr;
+            labelC.color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //(atomCColorStr === "CCCCCC" || atomCColorStr === "C8C8C8") ? "#888888" : "#" + atomCColorStr;
             labelN.background = background;
             labelC.background = background;
             ic.labels['chain'].push(labelN);
@@ -29551,7 +29831,7 @@ class Picking {
             let  text =(ic.pk == 1) ? atom.resn + atom.resi + '@' + atom.name : atom.resn + atom.resi;
             if(ic.structures !== undefined && Object.keys(ic.structures).length > 1) {
                 text = atom.structure + '_' + atom.chain + ' ' + text;
-                $("#" + ic.pre + "popup").css("width", "140px");
+                $("#" + ic.pre + "popup").css("width", "160px");
             }
             else {
                 $("#" + ic.pre + "popup").css("width", "80px");
@@ -29779,8 +30059,9 @@ class ApplyCommand {
       ic.bAddCommands = false;
 
       let  commandTransformation = commandStr.split('|||');
+      let commandTransformation2 = commandTransformation[0].split('%7C%7C%7C'); // sometimes encoded transformation is also included
 
-      let  commandOri = commandTransformation[0].replace(/\s+/g, ' ').trim();
+      let  commandOri = commandTransformation2[0].replace(/\s+/g, ' ').trim();
       let  command = commandOri.toLowerCase();
 
     // exact match =============
@@ -30376,15 +30657,18 @@ class ApplyCommand {
         let  value = command.substr(command.lastIndexOf(' ') + 1);
         ic.opts['background'] = value;
 
-        if(value == 'white' || value == 'grey') {
-            $("#" + ic.pre + "title").css("color", "black");
-            $("#" + ic.pre + "titlelink").css("color", "black");
+        if(value == 'black') {
+          $("#" + ic.pre + "title").css("color", me.htmlCls.GREYD);
+          $("#" + ic.pre + "titlelink").css("color", me.htmlCls.GREYD);
         }
         else {
-            $("#" + ic.pre + "title").css("color", me.htmlCls.GREYD);
-            $("#" + ic.pre + "titlelink").css("color", me.htmlCls.GREYD);
+          $("#" + ic.pre + "title").css("color", "black");
+          $("#" + ic.pre + "titlelink").css("color", "black");
         }
       }
+      else if(command.indexOf('set label color') == 0) {
+        ic.labelcolor = command.substr(command.lastIndexOf(' ') + 1);
+      }
       else if(commandOri.indexOf('set thickness') == 0) {
         let  paraArray = command.split(' | ');
 
@@ -30769,6 +31053,14 @@ class ApplyCommand {
 
         $("#" + me.contactmapid).attr("width",(ic.contactmapWidth * parseFloat(scale)).toString() + "px");
       }
+      else if(command.indexOf('alignerrormap scale') == 0) {
+        let  pos = command.lastIndexOf(' ');
+        let  scale = command.substr(pos + 1);
+
+        $("#" + me.alignerrormapid + "_scale").val(scale);
+
+        $("#" + me.alignerrormapid).attr("width",(ic.alignerrormapWidth * parseFloat(scale)).toString() + "px");
+      }
       else if(command.indexOf('graph force') == 0) {
         let  pos = command.lastIndexOf(' ');
         me.htmlCls.force = parseInt(command.substr(pos + 1));
@@ -32216,6 +32508,8 @@ class SetSeqAlign {
               ic.alnChainsAnTtl[chainid1][6].push("");
 
               let  alignIndex = 1;
+              if(!ic.chainsMapping[chainid1]) ic.chainsMapping[chainid1] = {};
+              if(!ic.chainsMapping[chainid2]) ic.chainsMapping[chainid2] = {};
               //for(let j = 0, jl = alignData.sseq.length; j < jl; ++j) {
               for(let j = start; j <= end; ++j) {
                   // 0: internal resi id, 1: pdb resi id, 2: resn, 3: aligned or not
@@ -32247,6 +32541,10 @@ class SetSeqAlign {
                           ic.nconsHash2[chainid2 + '_' + resi] = 1;
                       }
 
+                      // mapping, use the firstsequence as the reference structure
+                      ic.chainsMapping[chainid1][chainid1 + '_' + id2aligninfo[j].resi] = id2aligninfo[j].resn + id2aligninfo[j].resi;
+                      ic.chainsMapping[chainid2][chainid2 + '_' + resi] = id2aligninfo[j].resn + id2aligninfo[j].resi;
+
                       color2 = '#' + ic.showAnnoCls.getColorhexFromBlosum62(id2aligninfo[j].resn, resn);
 
                       // expensive and thus remove
@@ -32431,6 +32729,8 @@ class SetSeqAlign {
           if(ic.qt_start_end[chainIndex] === undefined) return;
 
           let  alignIndex = 1;
+          if(!ic.chainsMapping[chainid1]) ic.chainsMapping[chainid1] = {};
+          if(!ic.chainsMapping[chainid2]) ic.chainsMapping[chainid2] = {};
           for(let i = 0, il = ic.qt_start_end[chainIndex].length; i < il; ++i) {
               //var start1 = ic.qt_start_end[chainIndex][i].q_start - 1;
               //var start2 = ic.qt_start_end[chainIndex][i].t_start - 1;
@@ -32524,6 +32824,10 @@ class SetSeqAlign {
                       ic.nconsHash2[chainid2 + '_' + resi2] = 1;
                   }
 
+                  // mapping, use the firstsequence as the reference structure
+                  ic.chainsMapping[chainid1][chainid1 + '_' + resi1] = resn1 + resi1;
+                  ic.chainsMapping[chainid2][chainid2 + '_' + resi2] = resn1 + resi1;
+
                   color2 = '#' + ic.showAnnoCls.getColorhexFromBlosum62(resn1, resn2);
 
                   let  bFirstResi =(i === 0 && j === 0) ? true : false;
@@ -32573,6 +32877,8 @@ class SetSeqAlign {
     //      let  prevChainid1 = '', prevChainid2 = '', cnt1 = 0, cnt2 = 0;
 
           let  residuesHash = {};
+          if(!ic.chainsMapping[chainid_t]) ic.chainsMapping[chainid_t] = {};
+          if(!ic.chainsMapping[chainid]) ic.chainsMapping[chainid] = {};
 
           for(let i = 0, il = ic.realignResid[structure1].length; i < il; ++i) {
               let  resObject1 = ic.realignResid[structure1][i];
@@ -32599,6 +32905,11 @@ class SetSeqAlign {
               else {
                   color = "#0000FF";
               }
+
+              // mapping, use the firstsequence as the reference structure
+              ic.chainsMapping[chainid_t][chainid_t + '_' + resObject1.resi] = resObject1.resn + resObject1.resi;
+              ic.chainsMapping[chainid][chainid + '_' + resObject2.resi] = resObject1.resn + resObject1.resi;
+
               let  color2 = '#' + ic.showAnnoCls.getColorhexFromBlosum62(resObject1.resn, resObject2.resn);
 
               resObject1.color = color;
@@ -34178,7 +34489,7 @@ class HlSeq {
 
                         //var size = parseInt(ic.LABELSIZE * 10 / commandname.length);
                         let size = ic.LABELSIZE;
-                        let color = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //"FFFF00";
+                        let color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //"FFFF00";
                         if(position !== undefined) ic.analysisCls.addLabel(commanddescr, position.center.x, position.center.y, position.center.z, size, color, undefined, 'custom');
 
                         ic.drawCls.draw();
@@ -34582,7 +34893,7 @@ class ShowAnno {
                     $.ajax(this);
                     return;
                 }
-                this.enableHlSeq();
+                thisClass.enableHlSeq();
                 console.log( "No data were found for the protein " + chnidBaseArray + "..." );
                 for(let chnid in ic.protein_chainid) {
                     let chnidBase = ic.protein_chainid[chnid];
@@ -35272,7 +35583,7 @@ class AnnoDomain {
                 }
                 ic.showAnnoCls.enableHlSeq();
                 ic.bAjax3ddomain = true;
-                bAjaxDone1 = true;
+                //bAjaxDone1 = true;
                 if(ic.deferred3ddomain !== undefined) {
                     if(me.cfg.align === undefined || me.cfg.chainalign === undefined) {
                         ic.deferred3ddomain.resolve();
@@ -35485,7 +35796,7 @@ class AnnoSnpClinVar {
           ic.labels['clinvar'] = [];
           //var size = Math.round(ic.LABELSIZE * 10 / label.length);
           let size = ic.LABELSIZE;
-          let color = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //"#FFFF00";
+          let color = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd; //"#FFFF00";
           ic.analysisCls.addLabel(label, position.center.x + 1, position.center.y + 1, position.center.z + 1, size, color, undefined, 'clinvar');
           ic.hAtoms = {};
           for(let j in ic.residues[residueid]) {
@@ -38387,9 +38698,12 @@ class Selection {
           ic.graphStr = this.getGraphDataForDisplayed();
         }
 
+        // don not redraw graphs after the selection changes
+        /*
         if(ic.bGraph) ic.drawGraphCls.drawGraph(ic.graphStr, ic.pre + 'dl_graph');
         if(ic.bLinegraph) ic.lineGraphCls.drawLineGraph(ic.graphStr);
         if(ic.bScatterplot) ic.lineGraphCls.drawLineGraph(ic.graphStr, true);
+        */
     }
 
     hideSelection() { let  ic = this.icn3d, me = ic.icn3dui;
@@ -38597,7 +38911,7 @@ class Selection {
     }
 
     toggleMembrane(bShowMembrane) {var ic = this.icn3d, me = ic.icn3dui;
-        let  structureArray = Object.keys(ic.structures);
+        let  structureArray = (ic.structures) ? Object.keys(ic.structures) : [];
 
         for(let i = 0, il = structureArray.length; i < il; ++i) {
             let  structure = structureArray[i];
@@ -38918,7 +39232,8 @@ class SetStyle {
     setBackground(color) {var ic = this.icn3d, me = ic.icn3dui;
        ic.setOptionCls.setOption('background', color);
        me.htmlCls.clickMenuCls.setLogCmd('set background ' + color, true);
-       let titleColor =(color == 'black' || color == 'transparent') ? me.htmlCls.GREYD : 'black';
+       //let titleColor =(color == 'black' || color == 'transparent') ? me.htmlCls.GREYD : 'black';
+       let titleColor = (color == 'black') ? me.htmlCls.GREYD : 'black';
        $("#" + ic.pre + "title").css("color", titleColor);
        $("#" + ic.pre + "titlelink").css("color", titleColor);
     }
@@ -39468,7 +39783,7 @@ class TextSprite {
         // default yellow
         //let textColor = parameters.hasOwnProperty("textColor") &&  parameters["textColor"] !== undefined ? me.utilsCls.hexToRgb(parameters["textColor"], textAlpha) : { r:255, g:255, b:0, a:1.0 };
         // default black or white
-        let defaultColor = ( ic.opts.background == 'white' || ic.opts.background == 'gray' ) ? { r:0, g:0, b:0, a:1.0 } : { r:255, g:255, b:0, a:1.0 };
+        let defaultColor = (ic.opts.background != 'black') ? { r:0, g:0, b:0, a:1.0 } : { r:255, g:255, b:0, a:1.0 };
         let textColor = parameters.hasOwnProperty("textColor") &&  parameters["textColor"] !== undefined ? me.utilsCls.hexToRgb(parameters["textColor"], textAlpha) 
             : defaultColor;
         if(!textColor) textColor = defaultColor;
@@ -39608,7 +39923,7 @@ class Label {
 
         for(let name in labels) {
             let labelArray = (labels[name] !== undefined) ? labels[name] : [];
-            let defaultColor = (ic.opts.background == 'white' || ic.opts.background == 'gray') ? ic.colorWhitebkgd : ic.colorBlackbkgd;
+            let defaultColor = (ic.opts.background != 'black') ? ic.colorWhitebkgd : ic.colorBlackbkgd;
 
             for (let i = 0, il = labelArray.length; i < il; ++i) {
                 let label = labelArray[i];
@@ -39620,6 +39935,8 @@ class Label {
 
                 let labelsize = (label.size !== undefined) ? label.size : ic.LABELSIZE;
                 let labelcolor = (label.color !== undefined) ? label.color : defaultColor;
+                if(ic.labelcolor) labelcolor = ic.labelcolor;
+                
                 let labelbackground = (label.background !== undefined) ? label.background : '#cccccc';
                 let labelalpha = (label.alpha !== undefined) ? label.alpha : 1.0;
 
@@ -39645,7 +39962,8 @@ class Label {
                     }
                 }
 
-                bb.position.set(label.position.x, label.position.y, label.position.z);
+                let labelOffset = (name == 'schematic' || name == 'residue') ? 0 : ic.coilWidth; // 0.3
+                bb.position.set(label.position.x + labelOffset, label.position.y + labelOffset, label.position.z + labelOffset);
                 ic.mdl.add(bb);
                 // do not add labels to objects for pk
             }
@@ -39986,10 +40304,10 @@ class ApplyDisplay {
         if(labelArray) {
             for(let i = 0, il = labelArray.length; i < il; ++i) {
                 let label = labelArray[i];
-                if((ic.opts.background == 'white' || ic.opts.background == 'grey') && label.color == ic.colorBlackbkgd) {
+                if((ic.opts.background != 'black') && label.color == ic.colorBlackbkgd) {
                     label.color = ic.colorWhitebkgd;
                 }
-                else if((ic.opts.background == 'black' || ic.opts.background == 'transparent') && label.color == ic.colorWhitebkgd) {
+                else if((ic.opts.background == 'black') && label.color == ic.colorWhitebkgd) {
                     label.color = ic.colorBlackbkgd;
                 }
             }
@@ -42476,10 +42794,10 @@ class Transform {
 
       if(ic.bRender) ic.drawCls.render();
     }
-
+/*
     //Zoom in the structure at certain ratio, e.g., 0.1 is a reasonable value.
     zoomIn(normalizedFactor) {  let  ic = this.icn3d, me = ic.icn3dui;
-      let  para = {};
+      let  para = {}
       para._zoomFactor = 1 - normalizedFactor;
       para.update = true;
       if(ic.bControlGl && !me.bNode) {
@@ -42489,12 +42807,14 @@ class Transform {
           ic.controls.update(para);
       }
 
-      if(ic.bRender) ic.drawCls.render();
+      if(ic.bRender) {
+          ic.drawCls.render();
+      }
     }
 
     //Zoom out the structure at certain ratio, e.g., 0.1 is a reasonable value.
     zoomOut(normalizedFactor) {  let  ic = this.icn3d, me = ic.icn3dui;
-      let  para = {};
+      let  para = {}
       para._zoomFactor = 1 + normalizedFactor;
       para.update = true;
 
@@ -42504,8 +42824,11 @@ class Transform {
       else {
           ic.controls.update(para);
       }
-      if(ic.bRender) ic.drawCls.render();
+      if(ic.bRender) {
+          ic.drawCls.render();
+      }
     }
+*/
 
     //Center on the selected atoms and zoom in.
     zoominSelection(atoms) { let  ic = this.icn3d, me = ic.icn3dui;
@@ -42708,20 +43031,29 @@ class SaveFile {
         }
     }
 
-    saveSvg(id, filename) { let ic = this.icn3d; ic.icn3dui;
-        let svg = this.getSvgXml(id);
+    saveSvg(id, filename, bContactmap) { let ic = this.icn3d, me = ic.icn3dui;
+        if(me.bNode) return '';
+        
+        let width = $("#" + id).width();
+        let height = $("#" + id).height();
+
+        if(bContactmap) height = width;
 
-        let blob = new Blob([svg], {type: "image/svg+xml"});
+        let svgXml = this.getSvgXml(id, width, height, bContactmap);
+
+        let blob = new Blob([svgXml], {type: "image/svg+xml"});
         saveAs(blob, filename);
     }
 
-    getSvgXml(id) { let ic = this.icn3d, me = ic.icn3dui;
+    getSvgXml(id, width, height, bContactmap) { let ic = this.icn3d, me = ic.icn3dui;
         if(me.bNode) return '';
 
         // font is not good
         let svg_data = document.getElementById(id).innerHTML; //put id of your svg element here
 
-        let head = "<svg title=\"graph\" version=\"1.1\" xmlns:xl=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\">";
+        let viewbox = (width && height) ? "<svg viewBox=\"0 0 " + width + " " + height + "\"" : "<svg";
+        //let head = viewbox + " title=\"graph\" version=\"1.1\" xmlns:xl=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\">";
+        let head = viewbox + " title=\"graph\" xmlns:xl=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\">";
 
         //if you have some additional styling like graph edges put them inside <style> tag
         let style = "<style>text {font-family: sans-serif; font-weight: bold; font-size: 18px;}</style>";
@@ -42731,9 +43063,14 @@ class SaveFile {
         return full_svg;
     }
 
-    savePng(id, filename, width, height) { let ic = this.icn3d, me = ic.icn3dui;
+    savePng(id, filename, bContactmap) { let ic = this.icn3d, me = ic.icn3dui;
         if(me.bNode) return '';
 
+        let width = $("#" + id).width();
+        let height = $("#" + id).height();
+
+        if(bContactmap) height = width;
+
         // https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser
         let svg = document.getElementById(id);
         let bbox = svg.getBBox();
@@ -42747,7 +43084,7 @@ class SaveFile {
         let ctx = canvas.getContext("2d");
         ctx.clearRect(0, 0, bbox.width, bbox.height);
 
-        let data = this.getSvgXml(id); //(new XMLSerializer()).serializeToString(copy); //ic.saveFileCls.getSvgXml();
+        let data = this.getSvgXml(id, width, height, bContactmap); //(new XMLSerializer()).serializeToString(copy); //ic.saveFileCls.getSvgXml();
         let DOMURL = window.URL || window.webkitURL || window;
         let svgBlob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
 
@@ -43266,7 +43603,7 @@ class SaveFile {
         if(ic.molTitle !== undefined && ic.molTitle !== '') {
             let title = ic.molTitle;
 
-            let titlelinkColor =(ic.opts['background'] == 'white' || ic.opts['background'] == 'grey') ? 'black' : me.htmlCls.GREYD;
+            let titlelinkColor =(ic.opts['background'] == 'black') ?  me.htmlCls.GREYD : 'black';
 
             if(ic.inputid === undefined) {
                 if(ic.molTitle.length > 40) title = ic.molTitle.substr(0, 40) + "...";
@@ -43459,6 +43796,10 @@ class ClickMenu {
         me.myEventCls.onIds("#" + me.pre + "mn1_xyzfile", "click", function(e) { me.icn3d;
            me.htmlCls.dialogCls.openDlg('dl_xyzfile', 'Please input XYZ File');
         });
+
+        me.myEventCls.onIds("#" + me.pre + "mn1_afmapfile", "click", function(e) { me.icn3d;
+            me.htmlCls.dialogCls.openDlg('dl_afmapfile', 'Please input AlphaFold aligned error File');
+         });
     //    },
     //    clkMn1_urlfile: function() {
         me.myEventCls.onIds("#" + me.pre + "mn1_urlfile", "click", function(e) { me.icn3d;
@@ -44869,6 +45210,10 @@ class ClickMenu {
         me.myEventCls.onIds("#" + me.pre + "mn6_addlabelSelection", "click", function(e) { me.icn3d;
            me.htmlCls.dialogCls.openDlg('dl_addlabelselection', 'Add custom labels by the selected');
         });
+
+         me.myEventCls.onIds("#" + me.pre + "mn6_labelColor", "click", function(e) { me.icn3d;
+           me.htmlCls.dialogCls.openDlg('dl_labelColor', 'Change color for all labels');
+        });
     //    },
     //    clkMn2_saveselection: function() {
         me.myEventCls.onIds("#" + me.pre + "mn2_saveselection", "click", function(e) { me.icn3d;
@@ -44877,7 +45222,8 @@ class ClickMenu {
     //    },
     //    clkMn6_addlabelNo: function() {
         me.myEventCls.onIds(["#" + me.pre + "mn6_addlabelNo", "#" + me.pre + "removeLabels"], "click", function(e) { let ic = me.icn3d;
-           ic.pickpair = false;
+           ic.labelcolor = undefined;
+            ic.pickpair = false;
            //ic.labels['residue'] = [];
            //ic.labels['custom'] = [];
            let select = "set labels off";
@@ -45430,6 +45776,8 @@ class SetMenu {
     setTopMenusHtml(id, str1, str2) { let me = this.icn3dui;
         if(me.bNode) return '';
 
+        let titleColor =(me.htmlCls.opts['background'] == 'black') ? me.htmlCls.GREYD : 'black';
+
         let html = "";
 
         html += "<div style='position:relative;'>";
@@ -45473,7 +45821,7 @@ class SetMenu {
         html += this.setTools();
 
         // show title at the top left corner
-        html += me.htmlCls.divStr + "title' class='icn3d-commandTitle' style='font-size:1.2em; font-weight:normal; position:absolute; z-index:1; float:left; display:table-row; margin: 85px 0px 0px 5px; color:" + me.htmlCls.GREYD + "; width:" + me.htmlCls.WIDTH + "px'></div>";
+        html += me.htmlCls.divStr + "title' class='icn3d-commandTitle' style='font-size:1.2em; font-weight:normal; position:absolute; z-index:1; float:left; display:table-row; margin: 85px 0px 0px 5px; color:" + titleColor + "; width:" + me.htmlCls.WIDTH + "px'></div>";
 
         html += me.htmlCls.divStr + "viewer' style='position:relative; width:100%; height:100%; background-color: " + me.htmlCls.GREYD + ";'>";
 
@@ -45490,7 +45838,7 @@ class SetMenu {
             let tmpStr = 'top:180px; font-size: 1.8em;';
             html += me.htmlCls.divStr + "wait' style='position:absolute; left:50px; " + tmpStr + " color: #444444;'>Loading data...</div>";
         }
-        html += "<canvas id='" + me.pre + "canvas' style='width:100%; height: 100%; background-color: #000;'>Your browser does not support WebGL.</canvas>";
+        html += "<canvas id='" + me.pre + "canvas' style='width:100%; height: 100%; background-color: #FFF;'>Your browser does not support WebGL.</canvas>";
 
         // separate for the log box
         if(me.cfg.showcommand === undefined || me.cfg.showcommand) {
@@ -45526,6 +45874,8 @@ class SetMenu {
     setTopMenusHtmlMobile(id, str1, str2) { let me = this.icn3dui;
         if(me.bNode) return '';
 
+        let titleColor =(me.htmlCls.opts['background'] == 'black') ? me.htmlCls.GREYD : 'black';
+
         let html = "";
 
         html += "<div style='position:relative;'>";
@@ -45595,8 +45945,6 @@ class SetMenu {
         //html += me.htmlCls.setMenuCls.setTools();
 
         // show title at the top left corner
-        let titleColor =(me.htmlCls.opts['background'] == 'white' || me.htmlCls.opts['background'] == 'grey') ? 'black' : me.htmlCls.GREYD;
-
         html += me.htmlCls.divStr + "title' class='icn3d-commandTitle' style='font-size:1.2em; font-weight:normal; position:absolute; z-index:1; float:left; display:block; margin: 12px 0px 0px 40px; color:" + titleColor + "; width:" +(me.htmlCls.WIDTH - 40).toString() + "px'></div>";
         html += me.htmlCls.divStr + "viewer' style='position:relative; width:100%; height:100%; background-color: " + me.htmlCls.GREYD + ";'>";
         html += me.htmlCls.divStr + "mnLogSection'>";
@@ -45608,7 +45956,7 @@ class SetMenu {
             let tmpStr = 'top:180px; font-size: 1.8em;';
             html += me.htmlCls.divStr + "wait' style='position:absolute; left:50px; " + tmpStr + " color: #444444;'>Loading data...</div>";
         }
-        html += "<canvas id='" + me.pre + "canvas' style='width:100%; height: 100%; background-color: #000;'>Your browser does not support WebGL.</canvas>";
+        html += "<canvas id='" + me.pre + "canvas' style='width:100%; height: 100%; background-color: #FFF;'>Your browser does not support WebGL.</canvas>";
 
         // separate for the log box
         if(me.cfg.showcommand === undefined || me.cfg.showcommand) {
@@ -45800,6 +46148,7 @@ class SetMenu {
         let html = "";
 
         html += "<ul class='icn3d-mn-item'>";
+        html += "<li><a href='https://www.ncbi.nlm.nih.gov/structure' target='_blank'>Search Structure " + me.htmlCls.wifiStr + "</a></li>";
         html += "<li><span>Retrieve by ID</span>";
         html += "<ul>";
         html += me.htmlCls.setHtmlCls.getLink('mn1_mmdbid', 'MMDB ID ' + me.htmlCls.wifiStr);
@@ -45824,6 +46173,7 @@ class SetMenu {
         html += me.htmlCls.setHtmlCls.getLink('mn1_mol2file', 'Mol2 File');
         html += me.htmlCls.setHtmlCls.getLink('mn1_sdffile', 'SDF File');
         html += me.htmlCls.setHtmlCls.getLink('mn1_xyzfile', 'XYZ File');
+        html += me.htmlCls.setHtmlCls.getLink('mn1_afmapfile', 'AlphaFold Aligned Error File');
         if(!me.cfg.simplemenu) html += me.htmlCls.setHtmlCls.getLink('mn1_urlfile', 'URL(Same Host) ' + me.htmlCls.wifiStr);
         html += "<li>-</li>";
         html += me.htmlCls.setHtmlCls.getLink('mn1_pngimage', 'iCn3D PNG Image');
@@ -46392,8 +46742,8 @@ class SetMenu {
 
         html += "<li><span>Background</span>";
         html += "<ul>";
-        html += me.htmlCls.setHtmlCls.getRadio('mn6_bkgd', 'mn6_bkgdTransparent', 'Transparent', true);
-        html += me.htmlCls.setHtmlCls.getRadio('mn6_bkgd', 'mn6_bkgdBlack', 'Black');
+        html += me.htmlCls.setHtmlCls.getRadio('mn6_bkgd', 'mn6_bkgdTransparent', 'Transparent');
+        html += me.htmlCls.setHtmlCls.getRadio('mn6_bkgd', 'mn6_bkgdBlack', 'Black', true);
         html += me.htmlCls.setHtmlCls.getRadio('mn6_bkgd', 'mn6_bkgdGrey', 'Gray');
         html += me.htmlCls.setHtmlCls.getRadio('mn6_bkgd', 'mn6_bkgdWhite', 'White');
         html += "</ul>";
@@ -46874,6 +47224,8 @@ class SetMenu {
             html += me.htmlCls.setHtmlCls.getRadio('mn6_addlabel', 'mn6_addlabelTermini', 'N- & C-Termini');
         }
 
+        html += "<li>-</li>";
+        html += me.htmlCls.setHtmlCls.getRadio('mn6_addlabel', 'mn6_labelColor', 'Change Label Color', true);
         html += me.htmlCls.setHtmlCls.getRadio('mn6_addlabel', 'mn6_addlabelNo', 'Remove', true);
         html += "</ul>";
         html += "</li>";
@@ -46929,12 +47281,13 @@ class SetMenu {
             }
 
             let bOnePdb = me.cfg.mmtfid !== undefined || me.cfg.pdbid !== undefined || me.cfg.opmid !== undefined || me.cfg.mmcifid !== undefined || me.cfg.mmdbid !== undefined || me.cfg.gi !== undefined || me.cfg.blast_rep_id !== undefined;
+
             if(bOnePdb) {
               html += "<li id='" + me.pre + "assemblyWrapper'><span>Assembly</span>";
               html += "<ul>";
 
-              html += me.htmlCls.setHtmlCls.getRadio('mn6_assembly', 'mn6_assemblyYes', 'Biological Assembly', true);
-              html += me.htmlCls.setHtmlCls.getRadio('mn6_assembly', 'mn6_assemblyNo', 'Asymmetric Unit');
+              html += me.htmlCls.setHtmlCls.getRadio('mn6_assembly', 'mn6_assemblyYes', 'Biological Assembly');
+              html += me.htmlCls.setHtmlCls.getRadio('mn6_assembly', 'mn6_assemblyNo', 'Asymmetric Unit', true);
 
               html += "</ul>";
               html += "</li>";
@@ -47178,6 +47531,7 @@ class Dialog {
         let bLineGraph = $('#' + me.pre + 'dl_linegraph').hasClass('ui-dialog-content'); // initialized
         let bScatterplot = $('#' + me.pre + 'dl_scatterplot').hasClass('ui-dialog-content'); // initialized
         let bContactmap = $('#' + me.pre + 'dl_contactmap').hasClass('ui-dialog-content'); // initialized
+        let bAlignerrormap = $('#' + me.pre + 'dl_alignerrormap').hasClass('ui-dialog-content'); // initialized
         let bTable = $('#' + me.pre + 'dl_interactionsorted').hasClass('ui-dialog-content'); // initialized
         let bAlignmentInit = $('#' + me.pre + 'dl_alignment').hasClass('ui-dialog-content'); // initialized
         let bTwoddgmInit = $('#' + me.pre + 'dl_2ddgm').hasClass('ui-dialog-content'); // initialized
@@ -47193,6 +47547,7 @@ class Dialog {
         if(bLineGraph) status.bLineGraph2 = $('#' + me.pre + 'dl_linegraph').dialog( 'isOpen' );
         if(bScatterplot) status.bScatterplot2 = $('#' + me.pre + 'dl_scatterplot').dialog( 'isOpen' );
         if(bContactmap) status.bContactmap2 = $('#' + me.pre + 'dl_contactmap').dialog( 'isOpen' );
+        if(bAlignerrormap) status.bAlignerror2 = $('#' + me.pre + 'dl_alignerrormap').dialog( 'isOpen' );
         if(bTable) status.bTable2 = $('#' + me.pre + 'dl_interactionsorted').dialog( 'isOpen' );
         if(bAlignmentInit) status.bAlignmentInit2 = $('#' + me.pre + 'dl_alignment').dialog( 'isOpen' );
         if(bTwoddgmInit) status.bTwoddgmInit2 = $('#' + me.pre + 'dl_2ddgm').dialog( 'isOpen' );
@@ -47237,13 +47592,14 @@ class Dialog {
           close: function(e) {
               let status = thisClass.getDialogStatus();
 
-              if((id === me.pre + 'dl_selectannotations' &&(!status.bAlignmentInit2) && !status.bGraph2 && !status.bTable2 && !status.bLineGraph2 && !status.bScatterplot2 && !status.bContactmap2)
-                ||(id === me.pre + 'dl_graph' &&(!status.bSelectannotationsInit2) &&(!status.bAlignmentInit2) && !status.bTable2 && !status.bLineGraph2  && !status.bScatterplot2 && !status.bContactmap2)
-                ||(id === me.pre + 'dl_alignment' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bTable2 && !status.bLineGraph2 && !status.bScatterplot2 && !status.bContactmap2)
-                ||(id === me.pre + 'dl_interactionsorted' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bLineGraph2 && !status.bScatterplot2 && !status.bContactmap2)
-                ||(id === me.pre + 'dl_linegraph' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bTable2 && !status.bScatterplot2 && !status.bContactmap2)
-                ||(id === me.pre + 'dl_scatterplot' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bTable2 && !status.bLineGraph2 && !status.bContactmap2)
-                ||(id === me.pre + 'dl_contactmap' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bTable2 && !status.bLineGraph2 && !status.bScatterplot2)
+              if((id === me.pre + 'dl_selectannotations' &&(!status.bAlignmentInit2) && !status.bGraph2 && !status.bTable2 && !status.bLineGraph2 && !status.bScatterplot2 && !status.bContactmap2 && !status.bAlignerrormap2)
+                ||(id === me.pre + 'dl_graph' &&(!status.bSelectannotationsInit2) &&(!status.bAlignmentInit2) && !status.bTable2 && !status.bLineGraph2  && !status.bScatterplot2 && !status.bContactmap2 && !status.bAlignerrormap2)
+                ||(id === me.pre + 'dl_alignment' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bTable2 && !status.bLineGraph2 && !status.bScatterplot2 && !status.bContactmap2 && !status.bAlignerrormap2)
+                ||(id === me.pre + 'dl_interactionsorted' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bLineGraph2 && !status.bScatterplot2 && !status.bContactmap2 && !status.bAlignerrormap2)
+                ||(id === me.pre + 'dl_linegraph' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bTable2 && !status.bScatterplot2 && !status.bContactmap2 && !status.bAlignerrormap2)
+                ||(id === me.pre + 'dl_scatterplot' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bTable2 && !status.bLineGraph2 && !status.bContactmap2 && !status.bAlignerrormap2)
+                ||(id === me.pre + 'dl_contactmap' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bTable2 && !status.bLineGraph2 && !status.bScatterplot2 && !status.bAlignerrormap2)
+                ||(id === me.pre + 'dl_alignerrormap' &&(!status.bSelectannotationsInit2) && !status.bGraph2 && !status.bAlignmentInit2 && !status.bTable2 && !status.bLineGraph2 && !status.bScatterplot2 && !status.bContactmap2)
                 ) {
                   if(status.bTwoddgmInit2 || status.bTwodctnInit2 || status.bSetsInit2) {
                       //ic.resizeCanvasCls.resizeCanvas(me.htmlCls.WIDTH - me.htmlCls.LESSWIDTH - twoddgmWidth, me.htmlCls.HEIGHT - me.htmlCls.LESSHEIGHT - me.htmlCls.EXTRAHEIGHT, true);
@@ -47270,7 +47626,7 @@ class Dialog {
 
                   d3.select("#" + me.svgid).attr("width", width).attr("height", height);
               }
-              else if(id == me.pre + 'dl_linegraph' || id == me.pre + 'dl_scatterplot' || id == me.pre + 'dl_contactmap') {
+              else if(id == me.pre + 'dl_linegraph' || id == me.pre + 'dl_scatterplot' || id == me.pre + 'dl_contactmap' || id == me.pre + 'dl_alignerrormap') {
                     //var bTwoddgmInit = $('#' + me.pre + 'dl_2ddgm').hasClass('ui-dialog-content'); // initialized
                     //var bSetsInit = $('#' + me.pre + 'dl_definedsets').hasClass('ui-dialog-content'); // initialized
 
@@ -47293,6 +47649,10 @@ class Dialog {
                       let width = ic.contactmapWidth * ratio;
                       $("#" + me.contactmapid).attr("width", width);
                   }
+                  else if(id == me.pre + 'dl_alignerrormap') {
+                    let width = ic.alignerrormapWidth * ratio;
+                    $("#" + me.alignerrormapid).attr("width", width);
+                }
               }
           }
         });
@@ -47388,7 +47748,7 @@ class Dialog {
 
         let status = this.getDialogStatus();
 
-        if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_contactmap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
+        if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
             //var dialogWidth = 0.5 *(me.htmlCls.WIDTH - me.htmlCls.LESSWIDTH) - twoddgmWidth * 0.5;
             let dialogWidth = 0.5 *(me.htmlCls.WIDTH) - twoddgmWidth * 0.5;
 
@@ -47424,13 +47784,14 @@ class Dialog {
                   modal: false,
                   position: position,
                   close: function(e) {
-                      if((id === me.pre + 'dl_selectannotations' &&(!status.bAlignmentInit2) &&(!status.bGraph2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2))
-                        ||(id === me.pre + 'dl_graph' &&(!status.bSelectannotationsInit2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2))
-                        ||(id === me.pre + 'dl_alignment' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2))
-                        ||(id === me.pre + 'dl_interactionsorted' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2))
-                        ||(id === me.pre + 'dl_linegraph' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bScatterplot2) &&(!status.bContactmap2))
-                        ||(id === me.pre + 'dl_scatterplot' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bContactmap2))
-                        ||(id === me.pre + 'dl_contactmap' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2))
+                      if((id === me.pre + 'dl_selectannotations' &&(!status.bAlignmentInit2) &&(!status.bGraph2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
+                        ||(id === me.pre + 'dl_graph' &&(!status.bSelectannotationsInit2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
+                        ||(id === me.pre + 'dl_alignment' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
+                        ||(id === me.pre + 'dl_interactionsorted' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
+                        ||(id === me.pre + 'dl_linegraph' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bScatterplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
+                        ||(id === me.pre + 'dl_scatterplot' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
+                        ||(id === me.pre + 'dl_contactmap' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bAlignerrormap2))
+                        ||(id === me.pre + 'dl_alignerrormap' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2))
                         ) {
                           if(status.bTwoddgmInit2 || status.bTwodctnInit2 || status.bSetsInit2) {
                               let canvasWidth = me.utilsCls.isMobile() ? me.htmlCls.WIDTH : me.htmlCls.WIDTH - twoddgmWidth;
@@ -47456,7 +47817,7 @@ class Dialog {
 
                           d3.select("#" + me.svgid).attr("width", width).attr("height", height);
                       }
-                      else if(id == me.pre + 'dl_linegraph' || id == me.pre + 'dl_scatterplot' || id == me.pre + 'dl_contactmap') {
+                      else if(id == me.pre + 'dl_linegraph' || id == me.pre + 'dl_scatterplot' || id == me.pre + 'dl_contactmap' || id == me.pre + 'dl_alignerrormap') {
                             //var bTwoddgmInit = $('#' + me.pre + 'dl_2ddgm').hasClass('ui-dialog-content'); // initialized
                             //var bSetsInit = $('#' + me.pre + 'dl_definedsets').hasClass('ui-dialog-content'); // initialized
 
@@ -47479,6 +47840,10 @@ class Dialog {
                               let width = ic.contactmapWidth * ratio;
                               $("#" + me.contactmapid).attr("width", width);
                           }
+                          else if(id == me.pre + 'dl_alignerrormap') {
+                            let width = ic.alignerrormapWidth * ratio;
+                            $("#" + me.alignerrormapid).attr("width", width);
+                        }
                       }
                   }
                 });
@@ -47601,7 +47966,7 @@ class Dialog {
         let width = 400, height = 150;
         let twoddgmWidth = me.htmlCls.width2d + 20;
 
-        if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_contactmap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
+        if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
             $( "#" + id ).show();
 
             height =(me.htmlCls.HEIGHT) * 0.5;
@@ -47639,6 +48004,11 @@ class Dialog {
 
                       $("#" + me.contactmapid).attr("width", width);
                   }
+                  else if(id == me.pre + 'dl_alignerrormap') {
+                    let width = ic.alignerrormapWidth * ratio;
+
+                    $("#" + me.alignerrormapid).attr("width", width);
+                }
             });
         }
         else {
@@ -47772,8 +48142,11 @@ class SetDialog {
         html += "Note: AlphaFold produces a per-residue confidence score (pLDDT) between 0 and 100:<br>";
         html += me.htmlCls.clickMenuCls.setAlphaFoldLegend() + "<br>";
 
-        html += "<a href='https://alphafold.ebi.ac.uk/' target='_blank'>AlphaFold Uniprot</a> ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "afid' value='A0A061AD48' size=10> ";
-        html += me.htmlCls.buttonStr + "reload_af'>Load</button>";
+        let afid = (me.cfg.afid) ? me.cfg.afid : 'Q76EI6';
+
+        html += "<a href='https://alphafold.ebi.ac.uk/' target='_blank'>AlphaFold Uniprot</a> ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "afid' value='" + afid + "' size=10><br><br>";
+        html += me.htmlCls.buttonStr + "reload_af'>Load Structure</button>" 
+            + me.htmlCls.buttonStr + "reload_afmap' style='margin-left:30px'>Load Aligned Error Map (slow)</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_opmid' class='" + dialogClass + "'>";
@@ -47844,7 +48217,7 @@ class SetDialog {
         html += "<b>Optional 1</b>, full chains are used for structure alignment<br/><br/>";
         html += "<b>Optional 2</b>, sequence alignment (followed by structure alignemnt) based on residue numbers in the First/Master chain: <br>" + me.htmlCls.inputTextStr + "id='" + me.pre + "resalignids' placeholder='1,5,10-50' size=50><br/><br/>";
         html += "<b>Optional 3</b>, predefined alignment with residue numbers in each chain specified (one chain per line): <br><textarea id='" + me.pre + "predefinedres' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;' placeholder='1,5,10-50\n1,5,10-50\n1,5,10-50'></textarea><br/><br/>";
-        html += me.htmlCls.buttonStr + "reload_chainalign'>Align Biological Unit</button>" + me.htmlCls.buttonStr + "reload_chainalign_asym' style='margin-left:30px'>Align Asymmetric Unit</button><br/><br/>";
+        html += me.htmlCls.buttonStr + "reload_chainalign_asym'>Align Asymmetric Unit</button>" + me.htmlCls.buttonStr + "reload_chainalign' style='margin-left:30px'>Align Biological Unit</button><br/><br/>";
         html += "(Note: To align chains in custom PDB files, you could concatenate PDB files in a single PDB file with the separation line \"ENDMDL\". Then load it in \"Open File > PDB File\" in the \"File\" menu and click \"View Sequences & Annotations\" in the \"Window\" menu. Finally select multiple chains in the sequence window and click \"Realign Selection\" in the \"File\" menu.)<br><br>";
         html += "</div></div>";
 
@@ -47869,6 +48242,12 @@ class SetDialog {
         html += "XYZ File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "xyzfile' size=8> ";
         html += me.htmlCls.buttonStr + "reload_xyzfile'>Load</button>";
         html += "</div>";
+
+        html += me.htmlCls.divStr + "dl_afmapfile' class='" + dialogClass + "'>";
+        html += "AlphaFold Aligned Error File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "afmapfile' size=8> ";
+        html += me.htmlCls.buttonStr + "reload_afmapfile'>Load</button>";
+        html += "</div>";
+
         html += me.htmlCls.divStr + "dl_urlfile' class='" + dialogClass + "'>";
         html += "File type: ";
         html += "<select id='" + me.pre + "filetype'>";
@@ -47892,9 +48271,16 @@ class SetDialog {
         html += me.htmlCls.buttonStr + "reload_mmcif'>Load</button>";
         html += "</div>";
 
-        html += me.htmlCls.divStr + "dl_mmdbid' class='" + dialogClass + "'>";
-        html += "MMDB or PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbid' value='1TUP' size=8> ";
-        html += me.htmlCls.buttonStr + "reload_mmdb'>Load</button>";
+        html += me.htmlCls.divStr + "dl_mmdbid' class='" + dialogClass + "' style='max-width:500px'>";
+        html += "MMDB or PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbid' value='1TUP' size=8> <br><br>";
+        html += me.htmlCls.buttonStr + "reload_mmdb_asym'>Load Asymmetric Unit (All Chains)</button>" + me.htmlCls.buttonStr + "reload_mmdb' style='margin-left:30px'>Load Biological Unit</button><br/><br/><br>";
+        html += '<b>Note</b>: The "<b>biological unit</b>" is the <b>biochemically active form of a biomolecule</b>, <div style="width:20px; margin:6px 0 0 20px; display:inline-block;"><span id="'
+          + me.pre + 'asu_bu_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="'
+          + me.pre + 'asu_bu_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="display:none; width:15px;" title="Shrink"></span></div>';
+
+        html += me.htmlCls.divStr + "asu_bu' style='display:none;'>";
+        html += 'which can range from a monomer (single protein molecule) to an oligomer of 100+ protein molecules.<br><br>The "<b>asymmetric unit</b>" is the raw 3D structure data resolved by X-ray crystallography, NMR, or Cryo-electron microscopy. The asymmetric unit is equivalent to the biological unit in approximately 60% of structure records. In the remaining 40% of the records, the asymmetric unit represents a portion of the biological unit that can be reconstructed using crystallographic symmetry, or it represents multiple copies of the biological unit.</div>';
+
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_blast_rep_id' style='max-width:500px;' class='" + dialogClass + "'>";
@@ -48230,6 +48616,33 @@ class SetDialog {
 
         html += "</div>";
 
+        html += me.htmlCls.divStr + "dl_alignerrormap' style='background-color:white' class='" + dialogClass + "'>";
+
+        //html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
+      
+        me.alignerrormapid = me.pre + 'alignerrormap';
+        html += me.htmlCls.divNowrapStr + buttonStrTmp + me.alignerrormapid + '_svg">SVG</button>' + me.htmlCls.space2;
+        html += buttonStrTmp + me.alignerrormapid + '_png">PNG (slow)</button>' + me.htmlCls.space2;
+        html += buttonStrTmp + me.alignerrormapid + '_json">JSON</button>' + me.htmlCls.space4;
+        html += "<b>Scale</b>: <select id='" + me.alignerrormapid + "_scale'>";
+
+        //let optArray5 = ['0.01', '0.02', '0.04', '0.06', '0.08', '0.1', '0.2', '0.4', '0.6', '0.8', '1'];
+        html += me.htmlCls.setHtmlCls.getOptionHtml(optArray5, 2);
+
+        html += "</select></div><br>";
+
+        //min: 004d00, max: FFFFFF
+        let startColorStr = '#004d00';
+        let endColorStr = '#FFFFFF';
+        let rangeStr = startColorStr + ' 0%, ' + endColorStr + ' 100%';
+
+        html += "<div style='width:200px'><div style='height: 12px; border: 1px solid #000; background: linear-gradient(to right, " + rangeStr + ");'></div>";
+        html += "<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td width='15%'>0</td><td width='15%'>5</td><td width='15%'>10</td><td width='15%'>15</td><td width='15%'>20</td><td width='15%'>25</td><td>30</td></tr><tr><td colspan='7' align='center'>Expected position error (Angstroms)</td></tr></table></div><br>";
+  
+        html += '<div id="' + me.pre + 'alignerrormapDiv"></div>';
+
+        html += "</div>";
+
         html += me.htmlCls.divStr + "dl_elecmap2fofc' class='" + dialogClass + "'>";
         html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigma2fofc'>";
 
@@ -48286,22 +48699,27 @@ class SetDialog {
         html += "1. Text: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labeltext' value='Text' size=4><br/>";
         html += "2. Size: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelsize' value='18' size=4 maxlength=2><br/>";
         html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolor' value='" + defaultColor + "' size=4><br/>";
-        html += "4. Background: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelbkgd' value='' size=4><br/>";
+        //html += "4. Background: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelbkgd' value='' size=4><br/>";
         if(me.utilsCls.isMobile()) {
-            html += me.htmlCls.spanNowrapStr + "5. Touch TWO atoms</span><br/>";
+            html += me.htmlCls.spanNowrapStr + "4. Touch TWO atoms</span><br/>";
         }
         else {
-            html += me.htmlCls.spanNowrapStr + "5. Pick TWO atoms while holding \"Alt\" key</span><br/>";
+            html += me.htmlCls.spanNowrapStr + "4. Pick TWO atoms while holding \"Alt\" key</span><br/>";
         }
-        html += me.htmlCls.spanNowrapStr + "6. " + me.htmlCls.buttonStr + "applypick_labels'>Display</button></span>";
+        html += me.htmlCls.spanNowrapStr + "5. " + me.htmlCls.buttonStr + "applypick_labels'>Display</button></span>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_addlabelselection' class='" + dialogClass + "'>";
         html += "1. Text: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labeltext2' value='Text' size=4><br/>";
         html += "2. Size: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelsize2' value='18' size=4 maxlength=2><br/>";
         html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolor2' value='" + defaultColor + "' size=4><br/>";
-        html += "4. Background: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelbkgd2' value='' size=4><br/>";
-        html += me.htmlCls.spanNowrapStr + "5. " + me.htmlCls.buttonStr + "applyselection_labels'>Display</button></span>";
+        //html += "4. Background: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelbkgd2' value='' size=4><br/>";
+        html += me.htmlCls.spanNowrapStr + "4. " + me.htmlCls.buttonStr + "applyselection_labels'>Display</button></span>";
+        html += "</div>";
+
+        html += me.htmlCls.divStr + "dl_labelColor' class='" + dialogClass + "'>";
+        html += "Color for all labels: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolorall' value='" + defaultColor + "' size=4><br/><br/>";
+        html += me.htmlCls.spanNowrapStr + me.htmlCls.buttonStr + "applylabelcolor'>Display</button></span>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_distance' class='" + dialogClass + "'>";
@@ -48959,6 +49377,16 @@ class Events {
            window.open(hostUrl + '?afid=' + $("#" + me.pre + "afid").val(), '_blank');
         });
 
+        me.myEventCls.onIds("#" + me.pre + "reload_afmap", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            if(!me.cfg.notebook) dialog.dialog( "close" );
+            let afid = me.cfg.afid ? me.cfg.afid : $("#" + me.pre + "afid").val();
+
+            me.htmlCls.clickMenuCls.setLogCmd("set af align error map " + afid, true);
+            
+            ic.contactMapCls.afErrorMap(afid);
+        });
+
         me.myEventCls.onIds("#" + me.pre + "afid", "keyup", function(e) { me.icn3d;
            if (e.keyCode === 13) {
                e.preventDefault();
@@ -49042,8 +49470,8 @@ class Events {
            }
 
            me.htmlCls.clickMenuCls.setLogCmd("load chains " + alignment + " on asymmetric unit | residues " + resalign + " | resdef " + predefinedres, false);
-           //window.open(me.htmlCls.baseUrl + 'icn3d/full.html?chainalign=' + alignment + '&resnum=' + resalign + '&resdef=' + predefinedres + '&showalignseq=1&buidx=0', '_blank');
-           window.open(hostUrl + '?chainalign=' + alignment + '&resnum=' + resalign + '&resdef=' + predefinedres + '&showalignseq=1&buidx=0', '_blank');
+           //window.open(me.htmlCls.baseUrl + 'icn3d/full.html?chainalign=' + alignment + '&resnum=' + resalign + '&resdef=' + predefinedres + '&showalignseq=1&bu=0', '_blank');
+           window.open(hostUrl + '?chainalign=' + alignment + '&resnum=' + resalign + '&resdef=' + predefinedres + '&showalignseq=1&bu=0', '_blank');
         });
 
         me.myEventCls.onIds("#" + me.pre + "reload_mutation_3d", "click", function(e) { me.icn3d;
@@ -49118,21 +49546,25 @@ class Events {
     //    clickReload_mmdb: function() {
         me.myEventCls.onIds("#" + me.pre + "reload_mmdb", "click", function(e) { me.icn3d;
            e.preventDefault();
-           if(!me.cfg.notebook) dialog.dialog( "close" );
-           me.htmlCls.clickMenuCls.setLogCmd("load mmdb " + $("#" + me.pre + "mmdbid").val(), false);
-           //ic.mmdbParserCls.downloadMmdb($("#" + me.pre + "mmdbid").val());
-           //window.open(me.htmlCls.baseUrl + 'icn3d/full.html?mmdbid=' + $("#" + me.pre + "mmdbid").val(), '_blank');
-           window.open(hostUrl + '?mmdbid=' + $("#" + me.pre + "mmdbid").val(), '_blank');
+           //if(!me.cfg.notebook) dialog.dialog( "close" );
+           me.htmlCls.clickMenuCls.setLogCmd("load mmdb1 " + $("#" + me.pre + "mmdbid").val(), false);
+           window.open(hostUrl + '?mmdbid=' + $("#" + me.pre + "mmdbid").val() + '&bu=1', '_blank');
         });
 
+        me.myEventCls.onIds("#" + me.pre + "reload_mmdb_asym", "click", function(e) { me.icn3d;
+            e.preventDefault();
+            //if(!me.cfg.notebook) dialog.dialog( "close" );
+            me.htmlCls.clickMenuCls.setLogCmd("load mmdb0 " + $("#" + me.pre + "mmdbid").val(), false);
+            window.open(hostUrl + '?mmdbid=' + $("#" + me.pre + "mmdbid").val() + '&bu=0', '_blank');
+         });
+
         me.myEventCls.onIds("#" + me.pre + "mmdbid", "keyup", function(e) { me.icn3d;
            if (e.keyCode === 13) {
                e.preventDefault();
-               if(!me.cfg.notebook) dialog.dialog( "close" );
-               me.htmlCls.clickMenuCls.setLogCmd("load mmdb " + $("#" + me.pre + "mmdbid").val(), false);
-               //window.open(me.htmlCls.baseUrl + 'icn3d/full.html?mmdbid=' + $("#" + me.pre + "mmdbid").val(), '_blank');
-               window.open(hostUrl + '?mmdbid=' + $("#" + me.pre + "mmdbid").val(), '_blank');
-           }
+               //if(!me.cfg.notebook) dialog.dialog( "close" );
+               me.htmlCls.clickMenuCls.setLogCmd("load mmdb0 " + $("#" + me.pre + "mmdbid").val(), false);
+               window.open(hostUrl + '?mmdbid=' + $("#" + me.pre + "mmdbid").val() + '&bu=0', '_blank');
+              }
         });
 
     //    },
@@ -49517,6 +49949,35 @@ class Events {
              reader.readAsText(file);
            }
         });
+
+        me.myEventCls.onIds("#" + me.pre + "reload_afmapfile", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            ic.bInitial = true;
+            if(!me.cfg.notebook) dialog.dialog( "close" );
+            //close all dialog
+            if(!me.cfg.notebook) {
+                $(".ui-dialog-content").dialog("close");
+            }
+            else {
+                ic.resizeCanvasCls.closeDialogs();
+            }
+            let file = $("#" + me.pre + "afmapfile")[0].files[0];
+            if(!file) {
+              var aaa = 1; //alert("Please select a file before clicking 'Load'");
+            }
+            else {
+              me.htmlCls.setHtmlCls.fileSupport();
+              let reader = new FileReader();
+              reader.onload = function(e) {
+                let dataStr = e.target.result; // or = reader.result;
+                me.htmlCls.clickMenuCls.setLogCmd('load AlphaFold aligned error file ' + $("#" + me.pre + "afmapfile").val(), false);
+                
+                me.htmlCls.dialogCls.openDlg('dl_alignerrormap', 'Show predicted aligned error map');
+                ic.contactMapCls.processAfErrorMap(JSON.parse(dataStr));
+              };
+              reader.readAsText(file);
+            }
+         });
     //    },
     //    clickReload_urlfile: function() {
         me.myEventCls.onIds("#" + me.pre + "reload_urlfile", "click", function(e) { let ic = me.icn3d;
@@ -49769,9 +50230,7 @@ class Events {
         me.myEventCls.onIds("#" + me.svgid + "_png", "click", function(e) { let ic = me.icn3d;
            e.preventDefault();
            //if(!me.cfg.notebook) dialog.dialog( "close" );
-           let width = $("#" + me.pre + "dl_graph").width();
-           let height = $("#" + me.pre + "dl_graph").height();
-           ic.saveFileCls.savePng(me.svgid, ic.inputid + "_force_directed_graph.png", width, height);
+           ic.saveFileCls.savePng(me.svgid, ic.inputid + "_force_directed_graph.png");
         });
         me.myEventCls.onIds("#" + me.svgid + "_json", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
@@ -49790,9 +50249,7 @@ class Events {
         $(document).on("click", "#" + me.svgid_ct + "_png", function(e) { let ic = me.icn3d;
            e.preventDefault();
            //if(!me.cfg.notebook) dialog.dialog( "close" );
-           let width = $("#" + me.pre + "dl_2dctn").width();
-           let height = $("#" + me.pre + "dl_2dctn").height();
-           ic.saveFileCls.savePng(me.svgid_ct, ic.inputid + "_cartoon.png", width, height);
+           ic.saveFileCls.savePng(me.svgid_ct, ic.inputid + "_cartoon.png");
         });
         $(document).on("click", "#" + me.svgid_ct + "_json", function(e) { let ic = me.icn3d;
             e.preventDefault();
@@ -49818,9 +50275,7 @@ class Events {
         me.myEventCls.onIds("#" + me.linegraphid + "_png", "click", function(e) { let ic = me.icn3d;
            e.preventDefault();
            //if(!me.cfg.notebook) dialog.dialog( "close" );
-           let width = $("#" + me.pre + "dl_linegraph").width();
-           let height = $("#" + me.pre + "dl_linegraph").height();
-           ic.saveFileCls.savePng(me.linegraphid, ic.inputid + "_line_graph.png", width, height);
+           ic.saveFileCls.savePng(me.linegraphid, ic.inputid + "_line_graph.png");
         });
         me.myEventCls.onIds("#" + me.linegraphid + "_json", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
@@ -49846,9 +50301,7 @@ class Events {
         me.myEventCls.onIds("#" + me.scatterplotid + "_png", "click", function(e) { let ic = me.icn3d;
            e.preventDefault();
            //if(!me.cfg.notebook) dialog.dialog( "close" );
-           let width = $("#" + me.pre + "dl_scatterplot").width();
-           let height = $("#" + me.pre + "dl_scatterplot").height();
-           ic.saveFileCls.savePng(me.scatterplotid, ic.inputid + "_scatterplot.png", width, height);
+           ic.saveFileCls.savePng(me.scatterplotid, ic.inputid + "_scatterplot.png");
         });
         me.myEventCls.onIds("#" + me.scatterplotid + "_json", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
@@ -49870,14 +50323,12 @@ class Events {
         me.myEventCls.onIds("#" + me.contactmapid + "_svg", "click", function(e) { let ic = me.icn3d;
            e.preventDefault();
            //if(!me.cfg.notebook) dialog.dialog( "close" );
-           ic.saveFileCls.saveSvg(me.contactmapid, ic.inputid + "_contactmap.svg");
+           ic.saveFileCls.saveSvg(me.contactmapid, ic.inputid + "_contactmap.svg", true);
         });
         me.myEventCls.onIds("#" + me.contactmapid + "_png", "click", function(e) { let ic = me.icn3d;
            e.preventDefault();
            //if(!me.cfg.notebook) dialog.dialog( "close" );
-           let width = $("#" + me.pre + "dl_contactmap").width();
-           let height = $("#" + me.pre + "dl_contactmap").height();
-           ic.saveFileCls.savePng(me.contactmapid, ic.inputid + "_contactmap.png", width, height);
+           ic.saveFileCls.savePng(me.contactmapid, ic.inputid + "_contactmap.png", true);
         });
         me.myEventCls.onIds("#" + me.contactmapid + "_json", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
@@ -49889,11 +50340,39 @@ class Events {
             ic.saveFileCls.saveFile(ic.inputid + "_contactmap.json", "text", [graphStr2]);
         });
         me.myEventCls.onIds("#" + me.contactmapid + "_scale", "change", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            //if(!me.cfg.notebook) dialog.dialog( "close" );
+            let scale = $("#" + me.contactmapid + "_scale").val();
+            $("#" + me.contactmapid).attr("width",(ic.contactmapWidth * parseFloat(scale)).toString() + "px");
+            me.htmlCls.clickMenuCls.setLogCmd("contactmap scale " + scale, true);
+         });
+
+        me.myEventCls.onIds("#" + me.alignerrormapid + "_svg", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            //if(!me.cfg.notebook) dialog.dialog( "close" );
+            ic.saveFileCls.saveSvg(me.alignerrormapid, ic.inputid + "_alignerrormap.svg", true);
+         });
+         me.myEventCls.onIds("#" + me.alignerrormapid + "_png", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            //if(!me.cfg.notebook) dialog.dialog( "close" );
+            ic.saveFileCls.savePng(me.alignerrormapid, ic.inputid + "_alignerrormap.png", true);
+         });
+         me.myEventCls.onIds("#" + me.alignerrormapid + "_json", "click", function(e) { let ic = me.icn3d;
+             e.preventDefault();
+             //if(!me.cfg.notebook) dialog.dialog( "close" );
+             let graphStr2 = ic.alignerrormapStr.substr(0, ic.alignerrormapStr.lastIndexOf('}'));
+ 
+             graphStr2 += me.htmlCls.setHtmlCls.getLinkColor();
+ 
+             ic.saveFileCls.saveFile(ic.inputid + "_alignerrormap.json", "text", [graphStr2]);
+         });
+
+        me.myEventCls.onIds("#" + me.alignerrormapid + "_scale", "change", function(e) { let ic = me.icn3d;
            e.preventDefault();
            //if(!me.cfg.notebook) dialog.dialog( "close" );
-           let scale = $("#" + me.contactmapid + "_scale").val();
-           $("#" + me.contactmapid).attr("width",(ic.contactmapWidth * parseFloat(scale)).toString() + "px");
-           me.htmlCls.clickMenuCls.setLogCmd("contactmap scale " + scale, true);
+           let scale = $("#" + me.alignerrormapid + "_scale").val();
+           $("#" + me.alignerrormapid).attr("width",(ic.alignerrormapWidth * parseFloat(scale)).toString() + "px");
+           me.htmlCls.clickMenuCls.setLogCmd("alignerrormap scale " + scale, true);
         });
 
         me.myEventCls.onIds("#" + me.svgid + "_label", "change", function(e) { me.icn3d;
@@ -49993,6 +50472,15 @@ class Events {
              me.htmlCls.clickMenuCls.setLogCmd('add label ' + text + ' | x ' + x.toPrecision(4)  + ' y ' + y.toPrecision(4) + ' z ' + z.toPrecision(4) + sizeStr + colorStr + backgroundStr + ' | type custom', true);
              ic.drawCls.draw();
         });
+
+        me.myEventCls.onIds("#" + me.pre + "applylabelcolor", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            if(!me.cfg.notebook) dialog.dialog( "close" );
+            ic.labelcolor = $("#" + me.pre + "labelcolorall" ).val();
+
+            me.htmlCls.clickMenuCls.setLogCmd('set label color ' + ic.labelcolor, true);
+            ic.drawCls.draw();
+        });
     //    },
     //    clickApplypick_stabilizer: function() {
         me.myEventCls.onIds("#" + me.pre + "applypick_stabilizer", "click", function(e) { let ic = me.icn3d;
@@ -51617,7 +52105,7 @@ class Html {
     this.cfg = this.icn3dui.cfg;
 
     this.opts = {};
-    this.opts['background']         = 'transparent';        //transparent, black, grey, white
+    this.opts['background']         = 'black';        //transparent, black, grey, white
 
     this.WIDTH = 400; // total width of view area
     this.HEIGHT = 400; // total height of view area
@@ -52301,7 +52789,115 @@ class ContactMap {
        }
     }
 
-    drawContactMap(lineGraphStr) { let ic = this.icn3d, me = ic.icn3dui;
+    afErrorMap(afid) { let  ic = this.icn3d, me = ic.icn3dui;
+        let thisClass = this;
+
+        me.htmlCls.dialogCls.openDlg('dl_alignerrormap', 'Show predicted aligned error map');
+
+        let  url, dataType;
+    
+        url = "https://alphafold.ebi.ac.uk/files/AF-" + afid + "-F1-predicted_aligned_error_v2.json";
+
+        dataType = "json";
+    
+        $.ajax({
+            url: url,
+            dataType: dataType,
+            cache: true,
+            tryCount : 0,
+            retryLimit : 1,
+            success: function(data) {
+                thisClass.processAfErrorMap(data);
+            },
+            error : function(xhr, textStatus, errorThrown ) {
+                this.tryCount++;
+                if(this.tryCount <= this.retryLimit) {
+                    //try again
+                    $.ajax(this);
+                    return;
+                }
+                var aaa = 1; //alert("There are some problems in loading the predicted aligned error file...");
+                return;
+            }
+        });      
+    }
+
+    processAfErrorMap(dataJson) { let ic = this.icn3d, me = ic.icn3dui;
+        // json format: [{"residue1": [1, ..., 1, ..., n, ..., n], "residue2": [1, 2, ..., n, ..., 1, 2, ..., n], 
+        // "distance": [n*n matrix],"max_predicted_aligned_error":31.75}]
+        let distMatrix = dataJson[0].distance;
+        let max = dataJson[0].max_predicted_aligned_error;
+        if(!distMatrix || !max) {
+            var aaa = 1; //alert("The predicted aligned error file didn't have the right format...");
+            return;
+        }
+
+        // generate lineGraphStr
+        // e.g.,  {"nodes": [{"id":"A1.A","r":"1_1_1TOP_A_1","s":"ab","x":1,"y":21,"c":"FF00FF"}, ...],
+        // "links": [{"source": "A1.A", "target": "S2.A", "v": 3, "c": "FF00FF"}, ...]}
+        let nodeStr = '"nodes": [', linkStr = '"links": [';
+        let bNode = false, bLink = false;
+        let postA = '', postB = '.';
+
+        // initialize some parameters if no structure wasloaded yet
+        if(!ic.chains) ic.init_base();
+
+        let chainidArray = Object.keys(ic.chains);
+        let chainid = (chainidArray.length == 1) ? chainidArray[0] : 'stru_A';
+
+        let dim = parseInt(Math.sqrt(distMatrix.length));
+
+        //for(let chainid in ic.chains) {
+        //for(let i = 0, il = ic.chainsSeq[chainid].length; i < il; ++i) {
+        for(let i = 0; i < dim; ++i) {
+            let resi = (ic.chainsSeq[chainid]) ? ic.chainsSeq[chainid][i].resi : i + 1;
+            let resn = (ic.chainsSeq[chainid]) ? ic.chainsSeq[chainid][i].name : '*';
+            let resid = chainid + '_' + resi;
+            let atom = (ic.residues[resid]) ? ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid]) 
+                : {color: me.parasCls.thr(0x888888)};
+            let chain = chainid.substr(chainid.indexOf('_') + 1);
+            let color = atom.color.getHexString();
+
+            if(bNode) nodeStr += ', ';
+            let idStr = resn + resi + '.' + chain;
+            nodeStr += '{"id":"' + idStr + postA + '","r":"1_1_' + resid + '","s":"a","c":"' + color + '"}\n';
+            nodeStr += ', {"id":"' + idStr + postB + '","r":"1_1_' + resid + '","s":"b","c":"' + color + '"}';
+            bNode = true;
+
+            //for(let j = 0, jl = ic.chainsSeq[chainid].length; j < jl; ++j) {
+            //for(let j = 0; j < dim; ++j) {
+            for(let j = i; j < dim; ++j) { // half map
+                let resi2 = (ic.chainsSeq[chainid]) ? ic.chainsSeq[chainid][j].resi : j + 1;
+                let resn2 = (ic.chainsSeq[chainid]) ? ic.chainsSeq[chainid][j].name : '*';
+                let idStr2 = resn2 + resi2 + '.' + chain;
+                let index = i * dim + j;
+                // max dark green color 004d00, 0x4d = 77, 77/255 = 0.302
+                // 0: 004d00, max: FFFFFF
+                let ratio = (distMatrix[index]) ? distMatrix[index] / max : 0;
+                let r = parseInt(ratio*255).toString(16);
+                let g = parseInt(((1.0 - 0.302)*ratio + 0.302) * 255).toString(16);
+                let rHex = (r.length == 1) ? '0' + r : r;
+                let gHex = (g.length == 1) ? '0' + g : g;
+                let bHex = rHex;
+                let color2 = rHex + gHex + bHex;
+
+                if(bLink) linkStr += ', ';
+                linkStr += '{"source": "' + idStr + postA + '", "target": "' + idStr2 + postB + '", "v": 11, "c": "' + color2 + '"}\n';
+                bLink = true;
+            }
+        }
+        //}
+
+        dataJson = {};
+
+        let lineGraphStr = '{' + nodeStr + '], ' + linkStr + ']}';
+        let bAfMap = true;
+        this.drawContactMap(lineGraphStr, bAfMap, max);    
+        
+        if(ic.deferredAfmap !== undefined) ic.deferredAfmap.resolve();
+    }
+
+    drawContactMap(lineGraphStr, bAfMap, max) { let ic = this.icn3d, me = ic.icn3dui;
         let html, graph = JSON.parse(lineGraphStr);
         let linkArray = graph.links;
 
@@ -52335,7 +52931,7 @@ class ContactMap {
 
         let graphStr = '{\n';
 
-        let struc1 = Object.keys(ic.structures)[0];
+        let struc1 = (ic.structures.length > 0) ? ic.structures[0] : 'stru';
         let len1 = nodeArray1.length,
             len2 = nodeArray2.length;
         let factor = 1;
@@ -52349,20 +52945,76 @@ class ContactMap {
         width =(len2 + 2) *(r + gap) + 2 * marginX + legendWidth;
 
         let id, graphWidth;
-        ic.contactmapWidth = 2 * width;
-        graphWidth = ic.contactmapWidth;
-        id = me.contactmapid;
+        if(bAfMap) {
+            ic.alignerrormapWidth = 2 * width;
+            graphWidth = ic.alignerrormapWidth;
+            id = me.alignerrormapid;
+        }
+        else {
+            ic.contactmapWidth = 2 * width;
+            graphWidth = ic.contactmapWidth;
+            id = me.contactmapid;
+        }
+
         html =(linkArray.length > 0) ? "" : "No interactions found for these two sets<br><br>";
-        html += "<svg id='" + id + "' viewBox='0,0," + width + "," + heightAll + "' width='" + graphWidth + "px'>";
+        html += "<svg xmlns='http://www.w3.org/2000/svg' id='" + id + "' viewBox='0,0," + width + "," + heightAll + "' width='" + graphWidth + "px'>";
         let bContactMap = true;
-        html += ic.lineGraphCls.drawScatterplot_base(nodeArray1, nodeArray2, linkArray, name2node, 0, bContactMap);
+
+        if(bAfMap) { // cleaned the code by using "use" in SVG, but didn't improve rendering
+            let  factor = 1;
+            let  r = 3 * factor;
+            let  rectSize = 2 * r;
+
+            ic.hex2id = {};
+            let threshold = 29.0 / max;
+            ic.hex2skip = {}; // do not display any error larger than 29 angstrom
+
+            html += "<defs>";
+
+            let linestrokewidth = 1;
+            let nRef = 1000;
+            for(let i = 0; i < nRef; ++i) {
+                let ratio = 1.0 * i / nRef;
+                let r = parseInt(ratio*255).toString(16);
+                let g = parseInt(((1.0 - 0.302)*ratio + 0.302) * 255).toString(16);
+                let rHex = (r.length == 1) ? '0' + r : r;
+                let gHex = (g.length == 1) ? '0' + g : g;
+                let bHex = rHex;
+                let color = rHex + gHex + bHex;
+                let strokecolor = "#" + color;
+
+                let idRect = me.pre + "afmap_" + i;
+
+                ic.hex2id[color] = idRect;
+                if(ratio > threshold) {
+                    ic.hex2skip[color] = idRect;
+                }
+                
+                //html += "<g id='" + id + "'>";
+                html += "<rect id='" + idRect + "' x='0' y='0' width='" + rectSize + "' height='" + rectSize + "' fill='" 
+                    + strokecolor + "' stroke-width='" + linestrokewidth + "' stroke='" + strokecolor + "' />";
+                //html += "</g>"
+            }
+            html += "</defs>";
+        }
+
+        html += ic.lineGraphCls.drawScatterplot_base(nodeArray1, nodeArray2, linkArray, name2node, 0, bContactMap, undefined, undefined, bAfMap);
         graphStr += ic.getGraphCls.updateGraphJson(struc1, 1, nodeArray1, nodeArray2, linkArray);
         html += "</svg>";
 
         graphStr += '}\n';
-        ic.contactmapStr = graphStr;
+        if(bAfMap) {
+            ic.alignerrormapStr = graphStr;
+            $("#" + ic.pre + "alignerrormapDiv").html(html);
+  
+            let scale = $("#" + me.alignerrormapid + "_scale").val();
+            $("#" + me.alignerrormapid).attr("width",(ic.alignerrormapWidth * parseFloat(scale)).toString() + "px");
+        }
+        else {
+            ic.contactmapStr = graphStr;
+            $("#" + ic.pre + "contactmapDiv").html(html);
+        }
 
-        $("#" + ic.pre + "contactmapDiv").html(html);
         return html;
     }
 }
@@ -54390,6 +55042,7 @@ class iCn3D {
     this.bInstanced = true;
 
     this.chainMissingResidueArray = {};
+    this._zoomFactor = 1.0;
 
     if(!this.icn3dui.bNode) {
         this.bExtFragDepth = this.renderer.extensions.get( "EXT_frag_depth" );
@@ -54518,7 +55171,7 @@ class iCn3D {
     //The default display options
     this.optsOri = {};
     this.optsOri['camera']             = 'perspective';        //perspective, orthographic
-    this.optsOri['background']         = 'transparent';        //transparent, black, grey, white
+    this.optsOri['background']         = 'black';              //transparent, black, grey, white
     this.optsOri['color']              = 'chain';              //spectrum, secondary structure, charge, hydrophobic, conserved, chain, residue, atom, b factor, red, green, blue, magenta, yellow, cyan, white, grey, custom
     this.optsOri['proteins']           = 'ribbon';             //ribbon, strand, cylinder and plate, schematic, c alpha trace, backbone, b factor tube, lines, stick, ball and stick, sphere, nothing
     this.optsOri['sidec']              = 'nothing';            //lines, stick, ball and stick, sphere, nothing
@@ -54767,6 +55420,8 @@ iCn3D.prototype.init_base = function (bKeepCmd) {
     this.chainsAn = {}; // structure_chain name -> array of annotations, such as residue number
     this.chainsAnTitle = {}; // structure_chain name -> array of annotation title
 
+    this.chainsMapping = {}; // structure_chain name -> residue id hash such as {'structure_chain_resi1': 'reference residue such as K10', ...}
+
     this.alnChainsSeq = {}; // structure_chain name -> array of residue object: {mmdbid, chain, resi, resn, aligned}
     this.alnChainsAnno = {}; // structure_chain name -> array of annotations, such as residue number
     this.alnChainsAnTtl = {}; // structure_chain name -> array of annotation title
@@ -54916,7 +55571,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.5.0';
+    this.REVISION = '3.8.0';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;