icn3d 3.6.0 → 3.8.1

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 ) {
@@ -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();
+        //}
     }
 }
 
@@ -7639,7 +7658,6 @@ class Strand {
                 }
 
                 currentChain = atom.chain;
-                atom.resi;
                 ss = atom.ss;
                 ssend = atom.ssend;
                 prevAtomid = atom.serial;
@@ -12026,7 +12044,6 @@ class HlObjects {
 
     //Show the highlight for the selected atoms: hAtoms.
     addHlObjects(color, bRender, atomsHash) { let ic = this.icn3d, me = ic.icn3dui;
-       if(color === undefined) color = ic.hColor;
        //if(atomsHash === undefined) atomsHash = ic.hAtoms;
        let atomsHashDisplay = (atomsHash) ? me.hashUtilsCls.intHash(atomsHash, ic.dAtoms) : me.hashUtilsCls.intHash(ic.hAtoms, ic.dAtoms);
 
@@ -13337,13 +13354,14 @@ class DefinedSets {
                 dAtoms = me.hashUtilsCls.unionHash(dAtoms, ic.alnChains[alignChain]);
             }
 
-            let residuesHash = {};
+            let  residuesHash = {}, chains = {};
             for(let i in dAtoms) {
                 let  atom = ic.atoms[i];
 
                 let  chainid = atom.structure + '_' + atom.chain;
                 let  resid = chainid + '_' + atom.resi;
                 residuesHash[resid] = 1;
+                chains[chainid] = 1;
             }
 
             let  commandname = 'protein_aligned';
@@ -15149,24 +15167,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;
@@ -15197,10 +15198,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;
@@ -15311,6 +15309,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 = { };
@@ -15458,7 +15485,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);
@@ -15484,7 +15511,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 + "' />";
@@ -15497,23 +15524,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) {
@@ -15522,7 +15566,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 = '';
@@ -15845,22 +15889,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];
@@ -15870,119 +15929,186 @@ 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;
                 id = me.scatterplotid;
             } else {
                 ic.linegraphWidth = 2 * width;
-                graphWidth = 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) {
@@ -16040,7 +16166,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;
@@ -16057,6 +16233,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 = '';
@@ -16112,7 +16295,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;
@@ -16123,19 +16306,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) {
@@ -16145,10 +16336,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
@@ -16156,7 +16347,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;
@@ -16186,21 +16377,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;
     }
@@ -16500,8 +16701,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');
@@ -20791,6 +20993,7 @@ class LoadAtomData {
         let  serial = serialBase;
 
         let  serial2structure = {}; // for "align" only
+        let  mmdbid2pdbid = {}; // for "align" only
 
         if(alignType === undefined || alignType === 'target') {
             ic.pmid = data.pubmedId;
@@ -20810,6 +21013,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];
 
@@ -20818,10 +21022,11 @@ class LoadAtomData {
               }
 
               let  pdbidTmp = structure.pdbId;
-              structure.mmdbId;
+              let  mmdbidTmp = structure.mmdbId;
 
               for(let j = structure.serialInterval[0], jl = structure.serialInterval[1]; j <= jl; ++j) {
                   serial2structure[j] = pdbidTmp.toString();
+                  mmdbid2pdbid[mmdbidTmp] = pdbidTmp;
               }
 
               for(let j = 0, jl = structure.molecules.length; j < jl; ++j) {
@@ -20847,10 +21052,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;
@@ -22350,7 +22558,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 {
@@ -23155,11 +23363,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,
@@ -23618,7 +23826,7 @@ class MmdbParser {
         }
 
         let  molid2rescount = data.moleculeInfor;
-        let molid2chain = {};
+        let  molid2color = {}, chain2molid = {}, molid2chain = {};
         let  chainNameHash = {};
         for(let i in molid2rescount) {
           if(Object.keys(molid2rescount[i]).length === 0) continue;
@@ -23634,6 +23842,9 @@ class MmdbParser {
 
           let  chainNameFinal =(chainNameHash[chainName] === 1) ? chainName : chainName + chainNameHash[chainName].toString();
           let  chain = id + '_' + chainNameFinal;
+
+          molid2color[i] = color;
+          chain2molid[chain] = i;
           molid2chain[i] = chain;
 
           ic.chainsColor[chain] =(type !== undefined) ? me.parasCls.thr(me.htmlCls.GREY8) : me.parasCls.thr(color);
@@ -23694,14 +23905,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;
 
@@ -23796,13 +24007,13 @@ class MmdbParser {
     }
 
     downloadMmdbPart2(type) { let  ic = this.icn3d, me = ic.icn3dui;
-        if(ic.bAssemblyUseAsu) { // set up symmetric matrices
+        if(ic.bAssemblyUseAsu) { 
             $("#" + ic.pre + "assemblyWrapper").show();
-            ic.bAssembly = true;
+            //ic.bAssembly = true;
         }
         else {
             $("#" + ic.pre + "assemblyWrapper").hide();
-            ic.bAssembly = false;
+            //ic.bAssembly = false;
         }
 
         if(ic.emd !== undefined) {
@@ -23957,7 +24168,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;
@@ -24583,7 +24794,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 = [];
@@ -24609,7 +24820,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;
 
@@ -26486,6 +26697,32 @@ class LoadScript {
 
             return;
           }
+          else if(ic.commands[i].trim().indexOf('set half pae 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 if(ic.commands[i].trim().indexOf('set full pae map') == 0) {
+            let  strArray = ic.commands[i].split("|||");
+            let  command = strArray[0].trim();
+
+            $.when(thisClass.applyCommandAfmap(command, true)).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]);
           }
@@ -26678,11 +26915,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);
@@ -26812,6 +27056,23 @@ class LoadScript {
       return ic.deferredRealign.promise();
     }
 
+    applyCommandAfmapBase(command, bFull) { let ic = this.icn3d; ic.icn3dui;
+        let afid = command.substr(command.lastIndexOf(' ') + 1);
+     
+        ic.contactMapCls.afErrorMap(afid, bFull);
+    }
+
+    applyCommandAfmap(command, bFull) { let ic = this.icn3d; ic.icn3dui;
+      let  thisClass = this;
+
+      // chain functions together
+      ic.deferredAfmap = new $.Deferred(function() {
+         thisClass.applyCommandAfmapBase(command, bFull);
+      }); // 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) {
@@ -28086,14 +28347,14 @@ class AddTrack {
 
                           let strand, itemRgb;
 
-                          if(fieldArray.length > 4) fieldArray[4];
+                          if(fieldArray.length > 4) ;
                           if(fieldArray.length > 5) strand = fieldArray[5]; // ., +, or -
-                          if(fieldArray.length > 6) fieldArray[6];
-                          if(fieldArray.length > 7) fieldArray[7];
+                          if(fieldArray.length > 6) ;
+                          if(fieldArray.length > 7) ;
                           if(fieldArray.length > 8) itemRgb = fieldArray[8];
-                          if(fieldArray.length > 9) fieldArray[9];
-                          if(fieldArray.length > 10) fieldArray[10];
-                          if(fieldArray.length > 11) fieldArray[11];
+                          if(fieldArray.length > 9) ;
+                          if(fieldArray.length > 10) ;
+                          if(fieldArray.length > 11) ;
 
                        let title = trackName;
 
@@ -29585,7 +29846,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");
@@ -30420,6 +30681,9 @@ class ApplyCommand {
           $("#" + 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(' | ');
 
@@ -30804,6 +31068,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));
@@ -32251,6 +32523,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
@@ -32282,6 +32556,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
@@ -32466,6 +32744,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;
@@ -32559,6 +32839,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;
@@ -32608,6 +32892,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];
@@ -32634,6 +32920,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;
@@ -33801,7 +34092,7 @@ class MmcifParser {
         }
     }
 
-    loadMmcifSymmetry(assembly) { let ic = this.icn3d; ic.icn3dui;
+    loadMmcifSymmetry(assembly) { let  ic = this.icn3d, me = ic.icn3dui;
         // load assembly info
         //var assembly = data.assembly;
         //var pmatrix = data.pmatrix;
@@ -33814,6 +34105,11 @@ class MmcifParser {
         }
 
         ic.asuCnt = ic.biomtMatrices.length;
+
+        // show bioassembly 
+        if(me.cfg.bu == 1 && Object.keys(ic.atoms).length * ic.asuCnt > ic.maxatomcnt) {
+            ic.bAssembly = true;
+        }
     }
 
     loadMmcifOpmDataPart2(data, pdbid) { let  ic = this.icn3d, me = ic.icn3dui;
@@ -38422,9 +38718,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;
@@ -38632,7 +38931,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];
@@ -39656,6 +39955,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;
 
@@ -39681,7 +39982,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
             }
@@ -39713,7 +40015,6 @@ class ApplyDisplay {
 
     //Apply style and label options to a certain set of atoms.
     applyDisplayOptions(options, atoms, bHighlight) { let ic = this.icn3d, me = ic.icn3dui;
-        if(options === undefined) options = ic.opts;
 
         // get parameters from cookies
         if(!me.bNode && me.htmlCls.setHtmlCls.getCookie('lineRadius') != '') {
@@ -42215,7 +42516,12 @@ class Draw {
         ic.setColorCls.applyPrevColor();
 
         if(ic.biomtMatrices !== undefined && ic.biomtMatrices.length > 1) {
-            if(ic.bAssembly && Object.keys(ic.structures).length == 1) {
+            // show bioassembly in two cases
+            // 1. asymmetric unit: me.cfg.bu == 0
+            // 2. biological unit with less than ic.maxatomcnt atom: 
+            // me.cfg.bu == 1 && Object.keys(ic.atoms).length * ic.biomtMatrices.length < ic.maxatomcnt
+            if(ic.bAssembly && Object.keys(ic.structures).length == 1 && (me.cfg.bu == 0 
+              || (me.cfg.bu == 1 && Object.keys(ic.atoms).length * ic.biomtMatrices.length > ic.maxatomcnt)) ) {
                 ic.instancingCls.drawSymmetryMates();
             }
             else {
@@ -42512,10 +42818,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) {
@@ -42525,12 +42831,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;
 
@@ -42540,8 +42848,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;
@@ -42744,20 +43055,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>";
@@ -42767,9 +43087,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();
@@ -42783,7 +43108,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"});
 
@@ -43495,6 +43820,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 PAE File');
+         });
     //    },
     //    clkMn1_urlfile: function() {
         me.myEventCls.onIds("#" + me.pre + "mn1_urlfile", "click", function(e) { me.icn3d;
@@ -44905,6 +45234,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;
@@ -44913,7 +45246,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";
@@ -45838,6 +46172,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);
@@ -45862,6 +46197,8 @@ 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 PAE 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');
@@ -46912,6 +47249,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>";
@@ -46967,12 +47306,19 @@ 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');
+              if(me.cfg.bu == 0) {
+                html += me.htmlCls.setHtmlCls.getRadio('mn6_assembly', 'mn6_assemblyYes', 'Biological Assembly');
+                html += me.htmlCls.setHtmlCls.getRadio('mn6_assembly', 'mn6_assemblyNo', 'Asymmetric Unit', true);
+              }
+              else {
+                html += me.htmlCls.setHtmlCls.getRadio('mn6_assembly', 'mn6_assemblyYes', 'Biological Assembly', true);
+                html += me.htmlCls.setHtmlCls.getRadio('mn6_assembly', 'mn6_assemblyNo', 'Asymmetric Unit');
+              }
 
               html += "</ul>";
               html += "</li>";
@@ -47216,6 +47562,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
@@ -47231,6 +47578,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' );
@@ -47275,13 +47623,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);
@@ -47308,7 +47657,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
 
@@ -47331,6 +47680,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);
+                }
               }
           }
         });
@@ -47426,7 +47779,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;
 
@@ -47462,13 +47815,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;
@@ -47494,7 +47848,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
 
@@ -47517,6 +47871,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);
+                        }
                       }
                   }
                 });
@@ -47639,7 +47997,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;
@@ -47677,6 +48035,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 {
@@ -47810,8 +48173,12 @@ 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 Half PAE Map</button>"
+            + me.htmlCls.buttonStr + "reload_afmapfull' style='margin-left:30px'>Load Full PAE Map (slow)</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_opmid' class='" + dialogClass + "'>";
@@ -47882,7 +48249,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>";
 
@@ -47907,6 +48274,13 @@ 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 PAE File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "afmapfile' size=8> <br><br>";
+        html += me.htmlCls.buttonStr + "reload_afmapfile'>Load Half PAE Map</button>" 
+          + me.htmlCls.buttonStr + "reload_afmapfilefull' style='margin-left:30px'>Load Full PAE Map (slow)</button>";
+        html += "</div>";
+
         html += me.htmlCls.divStr + "dl_urlfile' class='" + dialogClass + "'>";
         html += "File type: ";
         html += "<select id='" + me.pre + "filetype'>";
@@ -47930,9 +48304,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 + "'>";
@@ -48268,6 +48649,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'>";
 
@@ -48323,23 +48731,28 @@ class SetDialog {
         html += me.htmlCls.divStr + "dl_addlabel' class='" + dialogClass + "'>";
         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 += "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/>";
         if(me.utilsCls.isMobile()) {
-            html += me.htmlCls.spanNowrapStr + "3. Touch TWO atoms</span><br/>";
+            html += me.htmlCls.spanNowrapStr + "4. Touch TWO atoms</span><br/>";
         }
         else {
-            html += me.htmlCls.spanNowrapStr + "3. 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 + "4. " + 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 += "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 + "3. " + me.htmlCls.buttonStr + "applyselection_labels'>Display</button></span>";
+        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 + "'>";
@@ -48997,6 +49410,25 @@ 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 half pae map " + afid, true);
+            
+            ic.contactMapCls.afErrorMap(afid);
+        });
+        me.myEventCls.onIds("#" + me.pre + "reload_afmapfull", "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 full pae map " + afid, true);
+            
+            ic.contactMapCls.afErrorMap(afid, true);
+        });
+
         me.myEventCls.onIds("#" + me.pre + "afid", "keyup", function(e) { me.icn3d;
            if (e.keyCode === 13) {
                e.preventDefault();
@@ -49030,23 +49462,23 @@ class Events {
     //    },
     //    clickReload_align_refined: function() {
         me.myEventCls.onIds("#" + me.pre + "reload_align_refined", "click", function(e) { me.icn3d;
-           e.preventDefault();
-           if(!me.cfg.notebook) dialog.dialog( "close" );
-           let alignment = $("#" + me.pre + "alignid1").val() + "," + $("#" + me.pre + "alignid2").val();
-           me.htmlCls.clickMenuCls.setLogCmd("load alignment " + alignment + ' | parameters &atype=1', false);
-           //window.open(me.htmlCls.baseUrl + 'icn3d/full.html?align=' + alignment + '&showalignseq=1&atype=1', '_blank');
-           window.open(hostUrl + '?align=' + alignment + '&showalignseq=1&atype=1', '_blank');
-        });
+            e.preventDefault();
+            if(!me.cfg.notebook) dialog.dialog( "close" );
+            let alignment = $("#" + me.pre + "alignid1").val() + "," + $("#" + me.pre + "alignid2").val();
+            me.htmlCls.clickMenuCls.setLogCmd("load alignment " + alignment + ' | parameters &atype=1&bu=1', false);
+            //window.open(me.htmlCls.baseUrl + 'icn3d/full.html?align=' + alignment + '&showalignseq=1&atype=1', '_blank');
+            window.open(hostUrl + '?align=' + alignment + '&showalignseq=1&atype=1&bu=1', '_blank');
+         });
     //    },
     //    clickReload_align_ori: function() {
         me.myEventCls.onIds("#" + me.pre + "reload_align_ori", "click", function(e) { me.icn3d;
-           e.preventDefault();
-           if(!me.cfg.notebook) dialog.dialog( "close" );
-           let alignment = $("#" + me.pre + "alignid1").val() + "," + $("#" + me.pre + "alignid2").val();
-           me.htmlCls.clickMenuCls.setLogCmd("load alignment " + alignment + ' | parameters &atype=0', false);
-           //window.open( me.htmlCls.baseUrl + 'icn3d/full.html?align=' + alignment + '&showalignseq=1&atype=0', '_blank');
-           window.open(hostUrl + '?align=' + alignment + '&showalignseq=1&atype=0', '_blank');
-        });
+            e.preventDefault();
+            if(!me.cfg.notebook) dialog.dialog( "close" );
+            let alignment = $("#" + me.pre + "alignid1").val() + "," + $("#" + me.pre + "alignid2").val();
+            me.htmlCls.clickMenuCls.setLogCmd("load alignment " + alignment + ' | parameters &atype=0&bu=1', false);
+            //window.open( me.htmlCls.baseUrl + 'icn3d/full.html?align=' + alignment + '&showalignseq=1&atype=0', '_blank');
+            window.open(hostUrl + '?align=' + alignment + '&showalignseq=1&atype=0&bu=1', '_blank');
+         });
     //    },
     //    clickReload_chainalign: function() {
         me.myEventCls.onIds("#" + me.pre + "reload_chainalign", "click", function(e) { me.icn3d;
@@ -49080,8 +49512,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;
@@ -49156,21 +49588,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');
+              }
         });
 
     //    },
@@ -49555,6 +49991,64 @@ 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 PAE file ' + $("#" + me.pre + "afmapfile").val(), false);
+                
+                me.htmlCls.dialogCls.openDlg('dl_alignerrormap', 'Show Predicted Aligned Error (PAE) map');
+                ic.contactMapCls.processAfErrorMap(JSON.parse(dataStr));
+              };
+              reader.readAsText(file);
+            }
+         });
+
+         me.myEventCls.onIds("#" + me.pre + "reload_afmapfilefull", "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 PAE file ' + $("#" + me.pre + "afmapfile").val(), false);
+                
+                me.htmlCls.dialogCls.openDlg('dl_alignerrormap', 'Show Predicted Aligned Error (PAE) map');
+                ic.contactMapCls.processAfErrorMap(JSON.parse(dataStr), true);
+              };
+              reader.readAsText(file);
+            }
+         });
     //    },
     //    clickReload_urlfile: function() {
         me.myEventCls.onIds("#" + me.pre + "reload_urlfile", "click", function(e) { let ic = me.icn3d;
@@ -49807,9 +50301,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();
@@ -49828,9 +50320,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();
@@ -49856,9 +50346,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();
@@ -49884,9 +50372,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();
@@ -49908,14 +50394,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();
@@ -49927,11 +50411,47 @@ 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 + "_full", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            //if(!me.cfg.notebook) dialog.dialog( "close" );
+            ic.contactMapCls.afErrorMap(afid, 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;
@@ -50031,6 +50551,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;
@@ -52339,7 +52868,142 @@ class ContactMap {
        }
     }
 
-    drawContactMap(lineGraphStr) { let ic = this.icn3d, me = ic.icn3dui;
+    afErrorMap(afid, bFull) { let  ic = this.icn3d, me = ic.icn3dui;
+        let thisClass = this;
+
+        me.htmlCls.dialogCls.openDlg('dl_alignerrormap', 'Show Predicted Aligned Error (PAE) 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, bFull);
+            },
+            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 PAE file...");
+                return;
+            }
+        });      
+    }
+
+    processAfErrorMap(dataJson, bFull) { 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 PAE 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
+        let bStruData;
+        if(!ic.chains || Object.keys(ic.chains).length == 0) {
+            bStruData = false;
+            ic.init_base();
+        }
+        else {
+            bStruData = true;
+        }
+
+        //let chainidArray = Object.keys(ic.chains);
+        //let chainid = (chainidArray.length == 1) ? chainidArray[0] : 'stru_A';
+
+        let dim = parseInt(Math.sqrt(distMatrix.length));
+
+        // map index with residue number when the structure has multiple chains
+        let index = 0;
+        let index2resObj = {};
+        for(let chainid in ic.chains) {
+            for(let j = 0, jl = ic.chainsSeq[chainid].length; j < jl; ++j) {
+                index2resObj[index] = ic.chainsSeq[chainid][j];
+                index2resObj[index].chainid = chainid;
+                ++index;
+            }
+        }
+
+        //for(let chainid in ic.chains) {
+        //for(let i = 0, il = ic.chainsSeq[chainid].length; i < il; ++i) {
+        index = 0;
+        for(let i = 0; i < dim; ++i) {
+            let resi = (bStruData) ? index2resObj[i].resi : i + 1;
+            let resn = (bStruData) ? index2resObj[i].name : '*';
+            let chainid = (bStruData) ? index2resObj[i].chainid : 'stru_A';
+
+            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;
+
+            let start = (bFull) ? 0 : i; // full map, or half map
+
+            //for(let j = 0, jl = ic.chainsSeq[chainid].length; j < jl; ++j) {
+            //for(let j = 0; j < dim; ++j) {
+            for(let j = start; j < dim; ++j) { 
+                index = i * dim + j;
+                let resi2 = (bStruData) ? index2resObj[j].resi : j + 1;
+                let resn2 = (bStruData) ? index2resObj[j].name : '*';
+                let chainid2 = (bStruData) ? index2resObj[j].chainid : 'stru_A';
+                let chain2 = chainid2.substr(chainid2.indexOf('_') + 1);
+
+                let idStr2 = resn2 + resi2 + '.' + chain2;
+                
+                // 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;
 
@@ -52373,7 +53037,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;
@@ -52387,20 +53051,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;
     }
 }
@@ -54428,6 +55148,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" );
@@ -54779,7 +55500,7 @@ iCn3D.prototype.init = function (bKeepCmd) {
     //this.inputid = {"idtype": undefined, "id":undefined}; // support pdbid, mmdbid
 
     this.biomtMatrices = [];
-    this.bAssembly = true;
+    this.bAssembly = false; //true;
 
     this.bDrawn = false;
     this.bSecondaryStructure = false;
@@ -54805,6 +55526,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
@@ -54915,7 +55638,7 @@ iCn3D.prototype.reinitAfterLoad = function () { let ic = this, me = ic.icn3dui;
     ic.lines = {};    // hash of name -> a list of solid or dashed lines. Each line contains 'position1', 'position2', 'color', and a boolean of 'dashed'
                         // line name could be custom, hbond, ssbond, distance
 
-    ic.bAssembly = true;
+    ic.bAssembly = false; //true;
 };
 
 iCn3D.prototype.resetConfig = function () { let ic = this, me = ic.icn3dui;
@@ -54954,7 +55677,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.6.0';
+    this.REVISION = '3.8.1';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;