npm - icn3d - Versions diffs - 3.7.0 → 3.8.2 - Mend

icn3d 3.7.0 → 3.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/icn3d.js +762 -219
package/package.json +3 -2

package/icn3d.js CHANGED Viewed

@@ -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 ) {
@@ -5854,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;
@@ -5871,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;
                 }
@@ -5890,9 +5899,9 @@ class Fog {
             ic.bSetFog = false;
         }
-        if(bZoomin && !bInstance) {
-            ic.transformCls.zoominSelection();
-        }
+        //if(bZoomin && !bInstance) {
+        //    ic.transformCls.zoominSelection();
+        //}
     }
 }
@@ -7649,7 +7658,6 @@ class Strand {
                 }
                 currentChain = atom.chain;
-                atom.resi;
                 ss = atom.ss;
                 ssend = atom.ssend;
                 prevAtomid = atom.serial;
@@ -12036,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);
@@ -13347,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';
@@ -15159,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;
@@ -15207,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;
@@ -15321,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 = { };
@@ -15468,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);
@@ -15494,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 + "' />";
@@ -15507,18 +15524,27 @@ class GetGraph {
         html += "</g>";
         return html;
     }
-    getNodeTopBottom(nameHash, name2node, bReverseNode, bCommon, nameHashCommon) { let  ic = this.icn3d, me = ic.icn3dui;
+    getNodeTopBottom(nameHash, name2node, bReverseNode, bCommonDiff, nameHashCommon) { let  ic = this.icn3d, me = ic.icn3dui;
         let  thisClass = this;
         let  nodeArray1 = [], nodeArray2 = [], name2nodeCommon = {};
+        let separatorCommon = "=>", separatorDiff = "==>", postCommon = "-", postDiff = "--";
         for(let name in nameHash) {
             let  node = name2node[name];
             if(!node) continue;
-            if(bCommon) {
+            if(bCommonDiff == 1 || bCommonDiff == 2) {
                 node = me.hashUtilsCls.cloneHash(node);
-                let mapping = (nameHashCommon[name]) ? nameHashCommon[name] : '-';
-                node.id += ">" + mapping;
+                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;
             }
@@ -15872,6 +15898,7 @@ class LineGraph {
             // 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) {
@@ -15885,6 +15912,11 @@ class LineGraph {
                 linkArraySplitCommon[i] = [];
                 nameHashSplitCommon[i] = {};
+                nodeArray1SplitDiff[i] = [];
+                nodeArray2SplitDiff[i] = [];
+                linkArraySplitDiff[i] = [];
+                nameHashSplitDiff[i] = {};
                 struc2index[structureArray[i]] = i;
             }
@@ -15931,6 +15963,8 @@ class LineGraph {
             }
             // 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];
@@ -15960,33 +15994,53 @@ class LineGraph {
                         let mappingid = mapping1 + '_' + mapping2 + '_' + link.c; // link.c determines the interaction type
-                        if(linkedNodeCnt[mappingid] == structureArray.length) {
-                            let linkCommon = me.hashUtilsCls.cloneHash(link);
-                            linkCommon.source += '>' + ic.chainsMapping[chainid1][resid1];
-                            linkCommon.target += '>' + ic.chainsMapping[chainid2][resid2];
+                        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 = [];
+            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;
-                let bCommon = true;
-                nodeArraysTmp = ic.getGraphCls.getNodeTopBottom(nameHashSplit[i], name2node, undefined, bCommon, nameHashSplitCommon[i]);
+                // 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;
@@ -16010,66 +16064,51 @@ class LineGraph {
                 //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 interaction as well
-                heightAll *= 2;
+                // show common and diff interaction as well
+                heightAll *= 3;
                 width = (maxWidth + 2) * (r + gap) + 2 * marginX + legendWidth;
             } else {
                 height = 110 + textHeight;
                 heightAll = height * strucArray.length;
-                // show common interaction as well
-                heightAll *= 2;
+                // 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 " + strucArray.length + " structure(s) <b>" + strucArray + "</b>. Common interactions are shown in the last " + strucArray.length + " graphs.<br><br>";
-            html += "<svg id='" + id + "' viewBox='0,0," + width + "," + heightAll + "' width='" + graphWidth + "px'>";
+                "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  heightFinal = 0;
-            for(let i = 0, il = structureArray.length; i < il; ++i) {
-                if(bScatterplot) {
-                    //heightFinal -= 15;
-                    html += this.drawScatterplot_base(nodeArray1Split[i], nodeArray2Split[i], linkArraySplit[i], name2node, heightFinal, undefined, "Interactions in structure " + strucArray[i], textHeight);
-                    //heightFinal = 15;
-                    height =(len1Split[i] + 1) *(r + gap) + 2 * marginY + textHeight;
-                } else {
-                    html += this.drawLineGraph_base(nodeArray1Split[i], nodeArray2Split[i], linkArraySplit[i], name2node, heightFinal, "Interactions in structure " + strucArray[i], textHeight);
-                }
-                heightFinal += height;
+            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);
-                if(i > 0) ic.lineGraphStr += ', \n';
-                ic.lineGraphStr += ic.getGraphCls.updateGraphJson(strucArray[i], i, nodeArray1Split[i], nodeArray2Split[i], linkArraySplit[i]);
-            }
+            heightFinal = result.heightFinal;
+            html += result.html;
-            // draw common interaction
-            for(let i = 0, il = structureArray.length; i < il; ++i) {
-                if(bScatterplot) {
-                    //heightFinal -= 15;
-                    html += this.drawScatterplot_base(nodeArray1SplitCommon[i], nodeArray2SplitCommon[i], linkArraySplitCommon[i], name2node, heightFinal, undefined, "Common interactions in structure " + strucArray[i], textHeight);
-                    //heightFinal = 15;
-                    height =(len1Split[i] + 1) *(r + gap) + 2 * marginY + textHeight;
-                } else {
-                    html += this.drawLineGraph_base(nodeArray1SplitCommon[i], nodeArray2SplitCommon[i], linkArraySplitCommon[i], name2node, heightFinal, "Common interactions in structure " + strucArray[i], textHeight);
-                }
-                heightFinal += height;
+            bCommonDiff = 1;
+            result = this.drawGraphPerType(bCommonDiff, structureArray, bScatterplot, nodeArray1SplitCommon, nodeArray2SplitCommon, linkArraySplitCommon, name2node, heightFinal, height, textHeight, len1Split, r, gap, marginY);
-                //if(i > 0) ic.lineGraphStr += ', \n';
-                ic.lineGraphStr += ', \n';
-                ic.lineGraphStr += ic.getGraphCls.updateGraphJson(strucArray[i], i + '_common', nodeArray1SplitCommon[i], nodeArray2SplitCommon[i], linkArraySplitCommon[i]);
-            }
+            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) {
@@ -16127,6 +16166,45 @@ class LineGraph {
         return html;
     }
+    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('');
@@ -16157,8 +16235,10 @@ class LineGraph {
         }
         // draw label
-        height += textHeight;
-        html += "<text x='" + margin1 + "' y='" + height + "' style='font-size:8px; font-weight:bold'>" + label + "</text>";
+        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;
@@ -16215,7 +16295,7 @@ class LineGraph {
         return html;
     }
-    drawScatterplot_base(nodeArray1, nodeArray2, linkArray, name2node, height, bContactMap, label, textHeight) { 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;
@@ -16228,10 +16308,11 @@ class LineGraph {
         let  heightTotal =(len1 + 1) *(r + gap) + legendWidth + 2 * marginY;
         // draw label
-        height += textHeight;
+        if(label) {
+            height += textHeight;
+            html += "<text x='" + marginX + "' y='" + (height + 15).toString() + "' style='font-size:8px; font-weight:bold'>" + label + "</text>";
+        }
-        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
@@ -16240,12 +16321,12 @@ class LineGraph {
             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) {
@@ -16255,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
@@ -16266,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;
@@ -16296,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;
     }
@@ -20902,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;
@@ -20930,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) {
@@ -23270,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&buidx=" + me.cfg.buidx + "&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&buidx=" + me.cfg.buidx + "&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&buidx=" + me.cfg.buidx + "&uid=" + ic.mmdbidArray[0];
-            let  url4 = me.htmlCls.baseUrl + "mmdb/mmdb_strview.cgi?v=2&program=icn3d&b=1&s=1&ft=1&buidx=" + me.cfg.buidx + "&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,
@@ -23733,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;
@@ -23749,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);
@@ -23809,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&buidx=" + me.cfg.buidx + "&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&buidx=" + me.cfg.buidx + "&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;
@@ -23911,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) {
@@ -24072,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;
@@ -24698,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&buidx=" + me.cfg.buidx + "&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 = [];
@@ -24724,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&buidx=" + me.cfg.buidx + "&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;
@@ -26601,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]);
           }
@@ -26795,13 +26917,13 @@ class LoadScript {
         }
         else if(command.indexOf('load mmdb') !== -1 || command.indexOf('load mmdb1') !== -1) {
           me.cfg.mmdbid = id;
-          me.cfg.buidx = 1;
+          me.cfg.bu = 1;
           ic.mmdbParserCls.downloadMmdb(id);
         }
         else if(command.indexOf('load mmdb0') !== -1) {
             me.cfg.mmdbid = id;
-            me.cfg.buidx = 0;
+            me.cfg.bu = 0;
             ic.mmdbParserCls.downloadMmdb(id);
         }
@@ -26934,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) {
@@ -28208,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;
@@ -30929,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));
@@ -33945,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;
@@ -33958,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;
@@ -38779,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];
@@ -39863,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') != '') {
@@ -42365,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 {
@@ -42662,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) {
@@ -42675,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;
@@ -42690,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;
@@ -42894,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 svgXml = this.getSvgXml(id, width, height, bContactmap);
-        let blob = new Blob([svg], {type: "image/svg+xml"});
+        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>";
@@ -42917,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();
@@ -42933,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"});
@@ -43645,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;
@@ -46018,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');
@@ -47125,14 +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;
-console.log("me.cfg.mmdbid: " + me.cfg.mmdbid + " bOnePdb: " + bOnePdb);
             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>";
@@ -47376,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
@@ -47391,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' );
@@ -47435,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);
@@ -47468,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
@@ -47491,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);
+                }
               }
           }
         });
@@ -47586,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;
@@ -47622,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;
@@ -47654,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
@@ -47677,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);
+                        }
                       }
                   }
                 });
@@ -47799,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;
@@ -47837,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 {
@@ -47970,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 + "'>";
@@ -48067,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'>";
@@ -48090,9 +48304,16 @@ class SetDialog {
         html += me.htmlCls.buttonStr + "reload_mmcif'>Load</button>";
         html += "</div>";
-        html += me.htmlCls.divStr + "dl_mmdbid' class='" + dialogClass + "'>";
+        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/>";
+        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 + "'>";
@@ -48428,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'>";
@@ -49162,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();
@@ -49195,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;
@@ -49245,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;
@@ -49321,24 +49588,24 @@ 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" );
+           //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() + '&buidx=1', '_blank');
+           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" );
+            //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() + '&buidx=0', '_blank');
+            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" );
+               //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() + '&buidx=0', '_blank');
+               window.open(hostUrl + '?mmdbid=' + $("#" + me.pre + "mmdbid").val() + '&bu=0', '_blank');
               }
         });
@@ -49724,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;
@@ -49976,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();
@@ -49997,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();
@@ -50025,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();
@@ -50053,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();
@@ -50077,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();
@@ -50096,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;
@@ -52517,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;
@@ -52551,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;
@@ -52565,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;
     }
 }
@@ -54606,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" );
@@ -54957,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;
@@ -55095,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;
@@ -55134,7 +55677,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
-    this.REVISION = '3.7.0';
+    this.REVISION = '3.8.1';
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;