icn3d 3.46.1 → 3.47.0

package/icn3d.module.js

@@ -56271,6 +56271,8 @@ class RmsdSuprCls {
             supr = undefined;
         }
 
+        if(me.bNode) console.log("RMSD: " + supr);
+
         return {'rot': rot, 'trans1': xc1, 'trans2': xc2, 'rmsd': supr};
 
     }; // end rmsd_supr
@@ -57066,11 +57068,12 @@ class ClickMenu {
         }
     }
 
-    setSetsMenus(id, bOneset) { let me = this.icn3dui, ic = me.icn3d;
+    setSetsMenus(id, bOneset, bThreeset) { let me = this.icn3dui, ic = me.icn3d;
         this.SetChainsAdvancedMenu();
 
         let id1 = id;
         let id2 = id + '2';
+        let id3 = id + '3';
 
         let definedAtomsHtml = ic.definedSetsCls.setAtomMenu(['protein']);
         if($("#" + me.pre + id1).length) {
@@ -57079,9 +57082,13 @@ class ClickMenu {
         if(!bOneset && $("#" + me.pre + id2).length) {
             $("#" + me.pre + id2).html("  <option value='selected' selected>selected</option>" + definedAtomsHtml);
         }
+        if(bThreeset && $("#" + me.pre + id3).length) {
+            $("#" + me.pre + id3).html("  <option value='selected' selected>selected</option>" + definedAtomsHtml);
+        }
 
         $("#" + me.pre + id1).resizable();
         if(!bOneset) $("#" + me.pre + id2).resizable();
+        if(bThreeset) $("#" + me.pre + id3).resizable();
     }
 
     applyShownMenus(bNoSave) { let me = this.icn3dui; me.icn3d;
@@ -57298,27 +57305,31 @@ class ClickMenu {
 
         me.myEventCls.onIds("#" + me.pre + "mn1_pdbfile", "click", function(e) { me.icn3d; //e.preventDefault();
            //me = me.setIcn3dui($(this).attr('id'));
-           me.htmlCls.dialogCls.openDlg('dl_pdbfile', 'Please input PDB File');
+           me.htmlCls.dialogCls.openDlg('dl_pdbfile', 'Please input PDB file');
         });
         me.myEventCls.onIds(["#" + me.pre + "mn1_pdbfile_app", "#" + me.pre + "tool_pdbfile"], "click", function(e) { me.icn3d; //e.preventDefault();
            //me = me.setIcn3dui($(this).attr('id'));
-           me.htmlCls.dialogCls.openDlg('dl_pdbfile_app', 'Please append PDB Files');
+           me.htmlCls.dialogCls.openDlg('dl_pdbfile_app', 'Please append PDB files');
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_mol2file", "click", function(e) { me.icn3d; //e.preventDefault();
-           me.htmlCls.dialogCls.openDlg('dl_mol2file', 'Please input Mol2 File');
+           me.htmlCls.dialogCls.openDlg('dl_mol2file', 'Please input Mol2 file');
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_sdffile", "click", function(e) { me.icn3d; //e.preventDefault();
-           me.htmlCls.dialogCls.openDlg('dl_sdffile', 'Please input SDF File');
+           me.htmlCls.dialogCls.openDlg('dl_sdffile', 'Please input SDF file');
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_xyzfile", "click", function(e) { me.icn3d; //e.preventDefault();
-           me.htmlCls.dialogCls.openDlg('dl_xyzfile', 'Please input XYZ File');
+           me.htmlCls.dialogCls.openDlg('dl_xyzfile', 'Please input XYZ file');
+        });
+
+        me.myEventCls.onIds("#" + me.pre + "mn1_dcdfile", "click", function(e) { me.icn3d; //e.preventDefault();
+           me.htmlCls.dialogCls.openDlg('dl_dcdfile', 'Please input MD trajectory file');
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_afmapfile", "click", function(e) { me.icn3d; //e.preventDefault();
-            me.htmlCls.dialogCls.openDlg('dl_afmapfile', 'Please input AlphaFold PAE File');
+            me.htmlCls.dialogCls.openDlg('dl_afmapfile', 'Please input AlphaFold PAE file');
          });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_urlfile", "click", function(e) { me.icn3d; //e.preventDefault();
@@ -57326,11 +57337,11 @@ class ClickMenu {
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_clustalwfile", "click", function(e) { me.icn3d; //e.preventDefault();
-            me.htmlCls.dialogCls.openDlg('dl_clustalwfile', 'Please input CLUSTALW MSA File');
+            me.htmlCls.dialogCls.openDlg('dl_clustalwfile', 'Please input CLUSTALW MSA file');
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_fastafile", "click", function(e) { me.icn3d; //e.preventDefault();
-            me.htmlCls.dialogCls.openDlg('dl_fastafile', 'Please input FASTA MSA File');
+            me.htmlCls.dialogCls.openDlg('dl_fastafile', 'Please input FASTA MSA file');
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_fixedversion", "click", function(e) { me.icn3d; //e.preventDefault();
@@ -59204,6 +59215,13 @@ class ClickMenu {
            ic.bLinebtwsets = true;
         });
 
+        me.myEventCls.onIds("#" + me.pre + "mn5_plane3sets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+            me.htmlCls.dialogCls.openDlg('dl_plane3sets', 'Draw a plane among three sets');
+
+            thisClass.setSetsMenus('plane3sets', undefined, true);
+
+           ic.bPlane3sets = true;
+        });
 
         me.myEventCls.onIds(["#" + me.pre + "mn2_selectedcenter", "#" + me.pre + "zoomin_selection", "#" + me.pre + "tool_selectedcenter"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
            //thisClass.setLogCmd('zoom selection', true);
@@ -60292,6 +60310,7 @@ class SetMenu {
         html += this.getLink('mn1_mol2file', 'Mol2 File', undefined, 2);
         html += this.getLink('mn1_sdffile', 'SDF File', undefined, 2);
         html += this.getLink('mn1_xyzfile', 'XYZ File', undefined, 2);
+        html += this.getLink('mn1_dcdfile', 'MD Trajectory File', undefined, 2);
 
         html += this.getMenuSep();
 
@@ -60925,6 +60944,7 @@ class SetMenu {
 
         html += this.getLink('mn5_cartoonshape', 'Cartoon for a Set', undefined, 1);
         html += this.getLink('mn5_linebtwsets', 'Line btw. Two Sets', undefined, 1);
+        html += this.getLink('mn5_plane3sets', 'Plane among 3 Sets', undefined, 1);
 
         if(me.cfg.cid === undefined && me.cfg.align === undefined && me.cfg.chainalign === undefined && me.cfg.mmdbaf === undefined) {
             html += this.getMenuSep();
@@ -61795,6 +61815,7 @@ class Dialog {
         let bGraph = $('#' + me.pre + 'dl_graph').hasClass('ui-dialog-content'); // initialized
         let bLineGraph = $('#' + me.pre + 'dl_linegraph').hasClass('ui-dialog-content'); // initialized
         let bScatterplot = $('#' + me.pre + 'dl_scatterplot').hasClass('ui-dialog-content'); // initialized
+        let bRmsdplot = $('#' + me.pre + 'dl_rmsdplot').hasClass('ui-dialog-content'); // initialized
         let bLigplot = $('#' + me.pre + 'dl_ligplot').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
@@ -61812,6 +61833,7 @@ class Dialog {
         id2flag.dl_graph = 'bGraph2';
         id2flag.dl_linegraph = 'bLineGraph2';
         id2flag.dl_scatterplot = 'bScatterplot2';
+        id2flag.dl_rmsdplot = 'bRmsdplot2';
         id2flag.dl_ligplot = 'bLigplot2';	
         id2flag.dl_contactmap = 'bContactmap2';
         id2flag.dl_alignerrormap = 'bAlignerrormap2';
@@ -61825,6 +61847,7 @@ class Dialog {
         if(bGraph) status.bGraph2 = $('#' + me.pre + 'dl_graph').dialog( 'isOpen' );
         if(bLineGraph) status.bLineGraph2 = $('#' + me.pre + 'dl_linegraph').dialog( 'isOpen' );
         if(bScatterplot) status.bScatterplot2 = $('#' + me.pre + 'dl_scatterplot').dialog( 'isOpen' );
+        if(bRmsdplot) status.bRmsdplot2 = $('#' + me.pre + 'dl_rmsdplot').dialog( 'isOpen' );
         if(bLigplot) status.bLigplot2 = $('#' + me.pre + 'dl_ligplot').dialog( 'isOpen' );
         if(bContactmap) status.bContactmap2 = $('#' + me.pre + 'dl_contactmap').dialog( 'isOpen' );
         if(bAlignerrormap) status.bAlignerror2 = $('#' + me.pre + 'dl_alignerrormap').dialog( 'isOpen' );
@@ -62014,7 +62037,7 @@ class Dialog {
 
         let status = this.getDialogStatus().status;
 
-        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_ligplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || 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_rmsdplot' || id === me.pre + 'dl_ligplot' || 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;
 
@@ -62240,7 +62263,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_ligplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || 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_rmsdplot' || id === me.pre + 'dl_ligplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
             $( "#" + id ).show();
             $( "#" + id + "_nb").show();
             $( "#" + id + "_title").html(title);
@@ -62671,6 +62694,23 @@ class SetDialog {
         html += me.htmlCls.buttonStr + "reload_xyzfile'>Load</button>";
         html += "</div>";
 
+        html += me.htmlCls.divStr + "dl_dcdfile' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_dcdfile', 'Please input an MD trajectory file');
+        html += "Step 1. <b>PDB File</b>: " + me.htmlCls.inputFileStr + "id='" + me.pre + "dcdpdbfile' size=8> ";
+        html += me.htmlCls.buttonStr + "reload_dcdpdbfile'>Load PDB File</button><br><br>";
+
+        html += "Step 2. <b>DCD File</b>: " + me.htmlCls.inputFileStr + "id='" + me.pre + "dcdfile' size=8> ";
+        html += me.htmlCls.buttonStr + "reload_dcdfile'>Load DCD File</button><br>";
+
+        html += "or <b>XTC File</b>: " + me.htmlCls.inputFileStr + "id='" + me.pre + "xtcfile' size=8> ";
+        html += me.htmlCls.buttonStr + "reload_xtcfile' style='margin-left:28px'>Load XTC File</button><br><br>";
+
+        html += "<hr><br>";
+        html += "<b>Analysis</b>: " + me.htmlCls.buttonStr + "rmsd_plot'>RMSD Plot</button><br><br>";
+        html += "<b>Video from Frames</b>: " + me.htmlCls.buttonStr + "video_frame'>Make Video</button> with " + me.htmlCls.inputTextStr + "id='" + me.pre + "videofps' value='2' size=2> FPS (Frame per Sec)<br><br>";
+
+        html += "</div>";
+
         html += me.htmlCls.divStr + "dl_clustalwfile' class='" + dialogClass + "' style='max-width:500px'>";
         html += this.addNotebookTitle('dl_clustalwfile', 'Please input a CLUSTALW MSA file');
         html += "Note the sequence names are either UniProt ID (e.g., A4D1S0 or A4D1S0_A), RefSeq ID (e.g., NP_001743), or PDB chain ID (e.g., 1HHO_A).<br><br>";
@@ -63201,6 +63241,15 @@ class SetDialog {
 
         html += "</div>";
 
+        html += me.htmlCls.divStr + "dl_rmsdplot' style='background-color:white' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_rmsdplot', 'RMSD Plot');
+
+        me.rmsdplotid = me.pre + 'rmsdplot';
+        html += me.htmlCls.divNowrapStr + buttonStrTmp + me.rmsdplotid + '_json">JSON</button>' + me.htmlCls.space2 + " The image below can be saved via right click.<br></div>";
+
+        html += '<canvas id="' + me.rmsdplotid + '"></canvas>';
+
+        html += "</div>";
 
         html += me.htmlCls.divStr + "dl_ligplot' style='background-color:white' class='" + dialogClass + "'>";
 
@@ -63458,6 +63507,42 @@ class SetDialog {
         html += "</div>";
 
 
+        html += me.htmlCls.divStr + "dl_plane3sets' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_plane3sets', 'Add a plane among three sets');
+        html += me.htmlCls.spanNowrapStr + "1. Select three sets</span><br/>";
+        html += "<table border=0 width=400 cellspacing=10><tr><td>";
+
+        html += me.htmlCls.divNowrapStr + "First set:</div>";
+        html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "plane3sets' multiple size='5' style='min-width:130px;'>";
+        html += "</select></div>";
+
+        html += "</td><td>";
+
+        html += me.htmlCls.divNowrapStr + "Second set:</div>";
+        html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "plane3sets2' multiple size='5' style='min-width:130px;'>";
+        html += "</select></div>";
+
+        html += "</td><td>";
+
+        html += me.htmlCls.divNowrapStr + "Third set:</div>";
+        html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "plane3sets3' multiple size='5' style='min-width:130px;'>";
+        html += "</select></div>";
+
+        html += "</td></tr></table>";
+
+        html += "2. Thickness (&#197;): " + me.htmlCls.inputTextStr + "id='" + me.pre + "plane3sets_thickness' value='2' size=4><br/><br/>";
+        
+        html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "plane3sets_customcolor' value='" + defaultColor + "' size=4><br/><br/>";
+
+        html += me.htmlCls.divNowrapStr + "4. Opacity: <select id='" + me.pre + "plane3sets_opacity'>";
+        html += me.htmlCls.setHtmlCls.getOptionHtml(['1.0', '0.9', '0.8', '0.7', '0.6', '0.5', '0.4', '0.3', '0.2', '0.1'], 7);
+        html += "</select></div><br>";
+
+        html += me.htmlCls.spanNowrapStr + "5. " + me.htmlCls.buttonStr + "applyplane3sets'>Display</button></span>";
+        html += me.htmlCls.space3 + me.htmlCls.spanNowrapStr + me.htmlCls.buttonStr + "clearplane3sets'>Clear</button></span>";
+        html += "</div>";
+
+
         html += me.htmlCls.divStr + "dl_cartoonshape' class='" + dialogClass + "'>";
         html += this.addNotebookTitle('dl_cartoonshape', 'Cartoon Shape');
         html += me.htmlCls.spanNowrapStr + "1. Select a set:</span><br/>";
@@ -64174,10 +64259,10 @@ class Events {
         }
     }
 
-    async loadPdbFile(bAppend, fileId, bmmCIF) { let me = this.icn3dui, ic = me.icn3d, thisClass = this;
+    async loadPdbFile(bAppend, fileId, bmmCIF, bOpenDialog) { let me = this.icn3dui, ic = me.icn3d, thisClass = this;
        //me = ic.setIcn3dui(this.id);
        ic.bInitial = true;
-       thisClass.iniFileLoad();
+       if(!bOpenDialog) thisClass.iniFileLoad();
        let files = $("#" + me.pre + fileId)[0].files;
        if(!files[0]) {
          var aaa = 1; //alert("Please select a file before clicking 'Load'");
@@ -64495,7 +64580,7 @@ class Events {
 
         me.myEventCls.onIds(["#" + me.pre + "alternate", "#" + me.pre + "mn2_alternate", "#" + me.pre + "alternate2"], "click", async function(e) { let ic = me.icn3d;
            ic.bAlternate = true;
-           await ic.alternateCls.alternateStructures();
+           ic.alternateCls.alternateStructures();
            ic.bAlternate = false;
 
            thisClass.setLogCmd("alternate structures", false);
@@ -65417,14 +65502,53 @@ class Events {
 
             // Start recording
             ic.videoRecorder.start();
-            thisClass.setLogCmd('Video revording started', false);
+            thisClass.setLogCmd('Video recording started', false);
         });
  
         me.myEventCls.onIds("#" + me.pre + "video_end", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
 
             ic.videoRecorder.stop();
-            thisClass.setLogCmd('Video revording ended', false);
+            thisClass.setLogCmd('Video recording ended', false);
+        });
+        
+        me.myEventCls.onIds("#" + me.pre + "video_frame", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+
+            let fps = $("#" + me.pre + "videofps").val();
+            let interval = 1000 / fps; // ms
+            let duratinon = (ic.frames + 3) * interval; // make the video a little longer than the number of frames    
+
+            const canvas = document.getElementById(ic.pre + "canvas");
+            // ic.videoFrameRecorder = new MediaRecorder(canvas.captureStream(fps));
+            ic.videoFrameRecorder = new MediaRecorder(canvas.captureStream());
+            const recordedChunks = [];
+
+            // Collect data chunks
+            ic.videoFrameRecorder.ondataavailable = event => {
+                recordedChunks.push(event.data);
+            };
+
+            ic.videoFrameRecorder.onstop = event => {
+                // Code to save the recordedChunks as a video file
+                const blob = new Blob(recordedChunks, {type: ic.videoFrameRecorder.mimeType});
+                let fileName = ic.inputid + '_video_frame';
+                saveAs(blob, fileName);
+            };
+
+            // Start recording
+            ic.videoFrameRecorder.start();
+            thisClass.setLogCmd('Video recording started', false);
+
+            const intervalId = setInterval(function() {
+                ic.alternateCls.alternateStructures();
+            }, interval);
+
+            setTimeout(() => {
+                clearInterval(intervalId);
+                ic.videoFrameRecorder.stop();
+                thisClass.setLogCmd('Video recording ended', false);
+            }, duratinon);
         });
 
         me.myEventCls.onIds("#" + me.pre + "reload_state", "click", function(e) { let ic = me.icn3d;
@@ -66046,6 +66170,22 @@ class Events {
            await thisClass.loadPdbFile(ic.bAppend, 'pdbfile_app');
         });
 
+        me.myEventCls.onIds("#" + me.pre + "reload_dcdpdbfile", "click", async function(e) { me.icn3d;
+           e.preventDefault();
+
+           let bAppend = false;
+        //    ic.bRender = false;
+           await thisClass.loadPdbFile(bAppend, 'dcdpdbfile', undefined, true);
+        });
+
+        me.myEventCls.onIds("#" + me.pre + "reload_xtcpdbfile", "click", async function(e) { me.icn3d;
+           e.preventDefault();
+
+           let bAppend = false;
+        //    ic.bRender = false;
+           await thisClass.loadPdbFile(bAppend, 'xtcpdbfile', undefined, true);
+        });
+
         me.myEventCls.onIds("#" + me.pre + "reload_mol2file", "click", function(e) { let ic = me.icn3d;
            e.preventDefault();
            ic.bInitial = true;
@@ -66127,6 +66267,62 @@ class Events {
            }
         });
 
+        me.myEventCls.onIds("#" + me.pre + "reload_dcdfile", "click", async function(e) { let ic = me.icn3d;
+           e.preventDefault();
+           ic.bInitial = true;
+
+           //thisClass.iniFileLoad();
+           let file = $("#" + me.pre + "dcdfile")[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 = async function(e) {
+               let arrayBuffer = e.target.result;
+               thisClass.setLogCmd('load dcd file ' + $("#" + me.pre + "dcdfile").val(), false);
+               ic.molTitle = "";
+               ic.inputid = undefined;
+
+            //    ic.init();
+               ic.bInputfile = true;
+               ic.InputfileData = (ic.InputfileData) ? ic.InputfileData + '\nENDMDL\n' + arrayBuffer : arrayBuffer;
+               ic.InputfileType = 'dcd';
+               await ic.dcdParserCls.loadDcdData(arrayBuffer);
+             };
+             reader.readAsArrayBuffer(file);
+           }
+        });
+
+        me.myEventCls.onIds("#" + me.pre + "reload_xtcfile", "click", async function(e) { let ic = me.icn3d;
+           e.preventDefault();
+           ic.bInitial = true;
+
+           //thisClass.iniFileLoad();
+           let file = $("#" + me.pre + "xtcfile")[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 = async function(e) {
+               let arrayBuffer = e.target.result;
+               thisClass.setLogCmd('load xtc file ' + $("#" + me.pre + "xtcfile").val(), false);
+               ic.molTitle = "";
+               ic.inputid = undefined;
+
+            //    ic.init();
+               ic.bInputfile = true;
+               ic.InputfileData = (ic.InputfileData) ? ic.InputfileData + '\nENDMDL\n' + arrayBuffer : arrayBuffer;
+               ic.InputfileType = 'xtc';
+               await ic.xtcParserCls.loadXtcData(arrayBuffer);
+             };
+             reader.readAsArrayBuffer(file);
+           }
+        });
+
         me.myEventCls.onIds("#" + me.pre + "reload_clustalwfile", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
             ic.bInitial = true;
@@ -66379,6 +66575,11 @@ class Events {
            
            await ic.showInterCls.showInteractions('graph');
         });
+        me.myEventCls.onIds("#" + me.pre + "rmsd_plot", "click", async function(e) { let ic = me.icn3d;
+           e.preventDefault();
+           
+           await ic.dcdParserCls.showRmsdPlot();
+        });
         me.myEventCls.onIds("#" + me.pre + "hbondLineGraph", "click", async function(e) { let ic = me.icn3d;
            e.preventDefault();
            
@@ -66524,6 +66725,12 @@ class Events {
            thisClass.setLogCmd("scatterplot scale " + scale, true);
         });
 
+        me.myEventCls.onIds("#" + me.rmsdplotid + "_json", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+
+            ic.saveFileCls.saveFile(ic.inputid + "_rmsdplot.json", "text", [JSON.stringify(ic.mdDataSet)]);
+        });
+
         me.myEventCls.onIds("#" + me.ligplotid + "_svg", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
             
@@ -66920,6 +67127,39 @@ class Events {
             ic.drawCls.draw();
         });
 
+        me.myEventCls.onIds("#" + me.pre + "applyplane3sets", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            
+            ic.bLinebtwsets = false;
+ 
+            let nameArray = $("#" + me.pre + "plane3sets").val();
+            let nameArray2 = $("#" + me.pre + "plane3sets2").val();
+            let nameArray3 = $("#" + me.pre + "plane3sets3").val();
+ 
+            let atomSet1 = ic.definedSetsCls.getAtomsFromNameArray(nameArray);
+            let atomSet2 = ic.definedSetsCls.getAtomsFromNameArray(nameArray2);
+            let atomSet3 = ic.definedSetsCls.getAtomsFromNameArray(nameArray3);
+
+            let posArray1 = ic.contactCls.getExtent(atomSet1);
+            let posArray2 = ic.contactCls.getExtent(atomSet2);
+            let posArray3 = ic.contactCls.getExtent(atomSet3);
+
+            let pos1 = new Vector3$1(posArray1[2][0], posArray1[2][1], posArray1[2][2]);
+            let pos2 = new Vector3$1(posArray2[2][0], posArray2[2][1], posArray2[2][2]);
+            let pos3 = new Vector3$1(posArray3[2][0], posArray3[2][1], posArray3[2][2]);
+
+            let thickness = $("#" + me.pre + "plane3sets_thickness").val(); 
+            let color = $("#" + me.pre + "plane3sets_customcolor").val(); 
+            let opacity = $("#" + me.pre + "plane3sets_opacity").val();
+
+            let command = 'add plane | x1 ' + pos1.x.toPrecision(4)  + ' y1 ' + pos1.y.toPrecision(4) + ' z1 ' + pos1.z.toPrecision(4) + ' | x2 ' + pos2.x.toPrecision(4)  + ' y2 ' + pos2.y.toPrecision(4) + ' z2 ' + pos2.z.toPrecision(4) + ' | x3 ' + pos3.x.toPrecision(4)  + ' y3 ' + pos3.y.toPrecision(4) + ' z3 ' + pos3.z.toPrecision(4) + ' | color ' + color + ' | thickness ' + thickness + ' | opacity ' + opacity;
+
+            thisClass.setLogCmd(command, true);
+
+            ic.analysisCls.addPlane(pos1.x, pos1.y, pos1.z, pos2.x, pos2.y, pos2.z, pos3.x, pos3.y, pos3.z, color, thickness, opacity);
+            ic.drawCls.draw();
+        });
+
         me.myEventCls.onIds("#" + me.pre + "applycartoonshape", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
             
@@ -66967,6 +67207,16 @@ class Events {
             ic.drawCls.draw();
         });
 
+        me.myEventCls.onIds("#" + me.pre + "clearplane3sets", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            
+
+            ic.planes = [];
+            thisClass.setLogCmd('clear plane among sets', true);
+
+            ic.drawCls.draw();
+        });
+
         me.myEventCls.onIds("#" + me.pre + "clearcartoonshape", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
             
@@ -68463,6 +68713,12 @@ class SetHtml {
                         else if(type === 'xyz') {
                             await ic.xyzParserCls.loadXyzData(data);
                         }
+                        else if(type === 'dcd') {
+                            await ic.dcdParserCls.loadDcdData(data);
+                        }
+                        else if(type === 'xtc') {
+                            await ic.xtcParserCls.loadXtcData(data);
+                        }
                         else if(type === 'mmcif') {
                             await ic.mmcifParserCls.loadMmcifData(data);
                         }
@@ -78142,6 +78398,37 @@ class Cylinder {
         }
     }
 
+    //Create planes for a list of "planes", each of which has the properties 'position1', 'position2', 'position2', 'color', 'thickness', 'opacity',
+    createPlanes(planes) {  let ic = this.icn3d, me = ic.icn3dui;
+        if(me.bNode) return;
+
+        for(let i = 0, il = planes.length; i < il; ++i) {
+            let plane = planes[i];
+
+            let p1 = plane.position1;
+            let p2 = plane.position2;
+            let p3 = plane.position3;
+
+            let thickness = (plane.thickness) ? plane.thickness : 2;
+            let opacity = (plane.opacity) ? plane.opacity : 0.3;
+            let colorStr = '#' + plane.color.replace(/\#/g, '');
+            let color = me.parasCls.thr(colorStr);
+
+            let planeGeo = new Plane();
+            planeGeo.setFromCoplanarPoints(p1, p2, p3);
+            let planeNormal = planeGeo.normal;
+
+            const projectedPoint = new Vector3$1();
+            // Project the center onto the plane
+            planeGeo.projectPoint(ic.center, projectedPoint);
+
+            let c0 = projectedPoint.clone().sub(planeNormal.clone().multiplyScalar(thickness * 0.5));
+            let c1 = projectedPoint.clone().add(planeNormal.clone().multiplyScalar(thickness * 0.5));
+            let radius = ic.maxD / 2; 
+            ic.cylinderCls.createCylinder(c0, c1, radius, color, undefined, color, undefined, undefined, opacity);
+         }
+    }
+
     createCylinder_base(p0, p1, radius, color, bHighlight, color2, bPicking) { let ic = this.icn3d, me = ic.icn3dui;
         if(me.bNode) return;
 
@@ -78553,7 +78840,7 @@ class Line$1 {
        }
 
        // do not add the artificial lines to raycasting objects
-    };
+    }
 
 }
 
@@ -79031,7 +79318,7 @@ class FirstAtomObj {
         let firstIndex;
 
         for(let i in atomsHash) {
-            if(ic.atoms[i].name == 'CA') {
+            if(ic.atoms[i] && ic.atoms[i].name == 'CA') {
                 firstIndex = i;
                 break;
             }
@@ -79039,7 +79326,7 @@ class FirstAtomObj {
 
         if(!firstIndex) {
             for(let i in atomsHash) {
-                if(ic.atoms[i].name == "O3'" || ic.atoms[i].name == "O3*") {
+                if(ic.atoms[i] && (ic.atoms[i].name == "O3'" || ic.atoms[i].name == "O3*")) {
                     firstIndex = i;
                     break;
                 }
@@ -79118,7 +79405,7 @@ class FirstAtomObj {
     getAtomFromResi(resid, atomName) { let ic = this.icn3d; ic.icn3dui;
         if(ic.residues.hasOwnProperty(resid)) {
             for(let i in ic.residues[resid]) {
-                if(ic.atoms[i].name === atomName && !ic.atoms[i].het) {
+                if(ic.atoms[i] && ic.atoms[i].name === atomName && !ic.atoms[i].het) {
                     return ic.atoms[i];
                 }
             }
@@ -84968,6 +85255,8 @@ class ApplyOther {
             }
 
             ic.lineCls.createLines(ic.lines);
+            if(!ic.planes) ic.planes = [];
+            ic.cylinderCls.createPlanes(ic.planes);
     //    }
 
         // distance sets
@@ -87201,7 +87490,7 @@ class Alternate {
 
     // change the display atom when alternating
     //Show structures one by one.
-    async alternateStructures() { let ic = this.icn3d, me = ic.icn3dui;
+    alternateStructures() { let ic = this.icn3d, me = ic.icn3dui;
         ic.bAlternate = true;
 
         //ic.transformCls.zoominSelection();
@@ -87346,7 +87635,7 @@ class Alternate {
 
     async alternateWrapper() { let ic = this.icn3d; ic.icn3dui;
        ic.bAlternate = true;
-       await this.alternateStructures();
+       this.alternateStructures();
        ic.bAlternate = false;
     }
 
@@ -98035,6 +98324,8 @@ class ShowAnno {
             ic.seqAnnWidth = dialogWidth - 120 - 30*2 - 50; // title: 120px, start and end resi: 30px, extra space on the left and right: 50px
             
             for(let i = 0, il = chainArray.length; i < il; ++i) {
+                if(!ic.chainsSeq[chainArray[i]]) continue; // skip empty chain
+
                 Math.round(chainArray[i].indexOf('_'));
                 //if(pos > 4) continue; // NMR structures with structure id such as 2K042,2K043, ...
                 // let atom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.chains[chainArray[i]]);
@@ -100757,7 +101048,7 @@ class LineGraph {
         }
 
         for(let i = 0, il = structureArray.length; i < il; ++i) {  
-            let labelFinal = label;
+            let labelFinal = (i+1).toString() + '. ' + label;
             if(bMutation) {
                 if(i == 0) {
                     labelFinal += "Wild Type ";
@@ -108465,6 +108756,12 @@ class PdbParser {
         else if(type === 'xyz') {
             await ic.xyzParserCls.loadXyzData(data);
         }
+        else if(type === 'dcd') {
+            await ic.dcdParserCls.loadDcdData(data);
+        }
+        else if(type === 'xtc') {
+            await ic.xtcParserCls.loadXtcData(data);
+        }
         else if(type === 'mmcif') {
             await ic.mmcifParserCls.loadMmcifData(data);
         }
@@ -109019,6 +109316,992 @@ class XyzParser {
     }
 }
 
+/**
+ * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
+ */
+
+class DcdParser {
+    constructor(icn3d) {
+        this.icn3d = icn3d;
+        icn3d.DELTA = 1;
+        icn3d.TIMEOFFSET = 0;
+    }
+
+    async loadDcdData(data) { let ic = this.icn3d, me = ic.icn3dui;
+        let bResult = this.loadDcdAtomData(data);
+
+        if(me.cfg.align === undefined && Object.keys(ic.structures).length == 1) {
+            $("#" + ic.pre + "alternateWrapper").hide();
+        }
+
+        if(!bResult) {
+          var aaa = 1; //alert('The DCD file has the wrong format...');
+        }
+        else {
+          ic.setStyleCls.setAtomStyleByOptions(ic.opts);
+          ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
+
+          // hide water, ions
+          ic.dAtoms = me.hashUtilsCls.cloneHash(ic.proteins);
+          ic.dAtoms = me.hashUtilsCls.unionHash(ic.dAtoms, ic.nucleotides);
+          ic.dAtoms = me.hashUtilsCls.unionHash(ic.dAtoms, ic.chemicals);
+          ic.hAtoms = me.hashUtilsCls.cloneHash(ic.dAtoms);
+          ic.transformCls.zoominSelection();
+                    
+        //   ic.bRender = true;
+          await ic.ParserUtilsCls.renderStructure();
+
+          if(me.cfg.rotate !== undefined) ic.resizeCanvasCls.rotStruc(me.cfg.rotate, true);
+
+          //if(me.deferred !== undefined) me.deferred.resolve(); /// if(ic.deferred2 !== undefined) ic.deferred2.resolve();
+        }
+    }
+
+    // modified from https://github.com/molstar/molstar/blob/master/src/mol-io/reader/dcd/parser.ts
+    loadDcdAtomData(data) { let ic = this.icn3d, me = ic.icn3dui;
+        // http://www.ks.uiuc.edu/Research/vmd/plugins/molfile/dcdplugin.html
+
+        // The DCD format is structured as follows
+        //   (FORTRAN UNFORMATTED, with Fortran data type descriptions):
+        // HDR     NSET    ISTRT   NSAVC   5-ZEROS NATOM-NFREAT    DELTA   9-ZEROS
+        // `CORD'  #files  step 1  step    zeroes  (zero)          timestep  (zeroes)
+        //                         interval
+        // C*4     INT     INT     INT     5INT    INT             DOUBLE  9INT
+        // ==========================================================================
+        // NTITLE          TITLE
+        // INT (=2)        C*MAXTITL
+        //                 (=32)
+        // ==========================================================================
+        // NATOM
+        // #atoms
+        // INT
+        // ==========================================================================
+        // X(I), I=1,NATOM         (DOUBLE)
+        // Y(I), I=1,NATOM
+        // Z(I), I=1,NATOM
+        // ==========================================================================
+
+        let bin =(data.buffer && data.buffer instanceof ArrayBuffer) ? data.buffer : data;
+        const dv = new DataView(bin);
+
+        // const header: Mutable<DcdHeader> = Object.create(null);
+        // const frames: DcdFrame[] = [];
+        const header = {};
+
+        let nextPos = 0;
+
+        // header block
+
+        const intView = new Int32Array(bin, 0, 23);
+        const ef = intView[0] !== dv.getInt32(0); // endianess flag
+        // swap byte order when big endian (84 indicates little endian)
+        if (intView[0] !== 84) {
+            const n = data.byteLength;
+            for (let i = 0; i < n; i += 4) {
+                dv.setFloat32(i, dv.getFloat32(i), true);
+            }
+        }
+        if (intView[0] !== 84) {
+            console.error('dcd bad format, header block start');
+            return false;
+        }
+
+        // format indicator, should read 'CORD'
+        const formatString = String.fromCharCode(
+            dv.getUint8(4), dv.getUint8(5),
+            dv.getUint8(6), dv.getUint8(7)
+        );
+        if (formatString !== 'CORD') {
+            console.error('dcd bad format, format string');
+            return false;
+        }
+        let isCharmm = false;
+        let extraBlock = false;
+        let fourDims = false;
+        // version field in charmm, unused in X-PLOR
+        if (intView[22] !== 0) {
+            isCharmm = true;
+            if (intView[12] !== 0) extraBlock = true;
+            if (intView[13] === 1) fourDims = true;
+        }
+        header.NSET = intView[2];
+        header.ISTART = intView[3];
+        header.NSAVC = intView[4];
+        header.NAMNF = intView[10];
+
+        ic.frames = header.NSET;
+
+        if (isCharmm) {
+            header.DELTA = dv.getFloat32(44, ef);
+        } else {
+            header.DELTA = dv.getFloat64(44, ef);
+        }
+        this.DELTA = header.DELTA;
+
+        if (intView[22] !== 84) {
+            console.error('dcd bad format, header block end');
+            return false;
+        }
+        nextPos = nextPos + 21 * 4 + 8;
+
+        // title block
+
+        const titleEnd = dv.getInt32(nextPos, ef);
+        const titleStart = nextPos + 1;
+        if ((titleEnd - 4) % 80 !== 0) {
+            console.error('dcd bad format, title block start');
+            return false;
+        }
+        
+        let byteView = new Uint8Array(bin);     
+        header.TITLE = String.fromCharCode.apply(null, byteView.subarray(titleStart, titleEnd));
+        if (dv.getInt32(titleStart + titleEnd + 4 - 1, ef) !== titleEnd) {
+            console.error('dcd bad format, title block end');
+            return false;
+        }
+
+        nextPos = nextPos + titleEnd + 8;
+
+        // natom block
+
+        if (dv.getInt32(nextPos, ef) !== 4) {
+            console.error('dcd bad format, natom block start');
+            return false;
+        }
+        header.NATOM = dv.getInt32(nextPos + 4, ef);
+        if (dv.getInt32(nextPos + 8, ef) !== 4) {
+            console.error('dcd bad format, natom block end');
+            return false;
+        }
+        nextPos = nextPos + 4 + 8;
+
+        // fixed atoms block
+
+        if (header.NAMNF > 0) {
+            // TODO read coordinates and indices of fixed atoms
+            console.error('dcd format with fixed atoms unsupported, aborting');
+            return false;
+        }
+
+        // frames
+        const natom = header.NATOM;
+        const natom4 = natom * 4;
+
+        if(natom != Object.keys(ic.atoms).length) {
+            var aaa = 1; //alert('The number of atoms in the DCD file does not match the number of atoms in the PDB file: ' + natom + ' != ' + Object.keys(ic.atoms).length);
+            return false;
+        }
+
+        let structuresOri = me.hashUtilsCls.cloneHash(ic.structures);
+        let residuesOri = me.hashUtilsCls.cloneHash(ic.residues);
+        let chainsOri = me.hashUtilsCls.cloneHash(ic.chains);
+
+        let proteinsOri = me.hashUtilsCls.cloneHash(ic.proteins);
+        let nucleotidesOri = me.hashUtilsCls.cloneHash(ic.nucleotides);
+        let waterOri = me.hashUtilsCls.cloneHash(ic.water);
+        let ionsOri = me.hashUtilsCls.cloneHash(ic.ions);
+        let chemicalsOri = me.hashUtilsCls.cloneHash(ic.chemicals);    
+
+        let serial = natom + 1; // a preloaded PDB structure would have atom serial from 1 to natom
+        for (let i = 0, n = header.NSET; i < n; ++i) {
+            const frame = {};
+            frame.elementCount = natom;
+
+            if (extraBlock) {
+                nextPos += 4; // block start
+                frame.cell = [
+                    dv.getFloat64(nextPos, ef),
+                    dv.getFloat64(nextPos + 1, ef),
+                    dv.getFloat64(nextPos + 2 * 8, ef),
+                    dv.getFloat64(nextPos + 3 * 8, ef),
+                    dv.getFloat64(nextPos + 4 * 8, ef),
+                    dv.getFloat64(nextPos + 5 * 8, ef)
+                ];
+                nextPos += 48;
+                nextPos += 4; // block end
+            }
+
+            // xyz coordinates
+            for (let j = 0; j < 3; ++j) {
+                if (dv.getInt32(nextPos, ef) !== natom4) {
+                    console.error(`dcd bad format, coord block start: ${i}, ${j}`);
+                    return false;
+                }
+                nextPos += 4; // block start
+                const c = new Float32Array(bin, nextPos, natom);
+                if (j === 0) frame.x = c;
+                else if (j === 1) frame.y = c;
+                else frame.z = c;
+
+                nextPos += natom4;
+                if (dv.getInt32(nextPos, ef) !== natom4) {
+                    console.error(`dcd bad format, coord block end: ${i}, ${j}`);
+                    return false;
+                }
+                nextPos += 4; // block end
+            }
+
+            if (fourDims) {
+                const bytes = dv.getInt32(nextPos, ef);
+                nextPos += 4 + bytes + 4; // block start + skip + block end
+            }
+
+            // skip the first structure since it was read from PDB already
+            if(i == 0) continue;
+
+            let molNum = i + 1; // to avoid the same molNum as the PDB structure
+            for(let j = 0; j < natom; ++j) {
+                let coord = new Vector3$1(frame.x[j], frame.y[j], frame.z[j]);
+
+                let atom = me.hashUtilsCls.cloneHash(ic.atoms[j + 1]);
+
+                atom.serial = serial;
+                atom.structure = atom.structure + molNum;
+                atom.coord = coord;
+                atom.bonds = [].concat(ic.atoms[j + 1].bonds);
+
+                // update bonds
+                for(let k = 0, kl = atom.bonds.length; k < kl; ++k) {
+                    atom.bonds[k] = parseInt(atom.bonds[k]) + natom * i;
+                }
+
+                ic.atoms[serial] = atom;
+
+                // assign extra info
+                ic.dAtoms[serial] = 1;
+                ic.hAtoms[serial] = 1;
+
+                let chainid = atom.structure + '_' + atom.chain;
+                let residid = chainid + '_' + atom.resi;
+                ic.secondaries[residid] = atom.ss;
+                ic.residueId2Name[residid] = me.utilsCls.residueName2Abbr(atom.resn);
+
+                ++serial;
+            }
+
+            // update ic.structures, ic.residues and ic.chains
+            for(let structure in structuresOri) {
+                let structure2 = structure + molNum;
+                ic.structures[structure2] = [];
+
+                for(let k = 0, kl = structuresOri[structure].length; k < kl; ++k) {
+                    let idArray = structuresOri[structure][k].split('_');
+                    ic.structures[structure2].push(structure2 + '_' + idArray[1]);
+                }
+            }
+
+            for(let j in residuesOri) {
+                let idArray = j.split('_');
+                let structure2 = idArray[0] + molNum;
+                let residid2 = structure2 + '_' + idArray[1] + '_' + idArray[2];
+                ic.residues[residid2] = {};
+
+                for(let k in residuesOri[j]) {
+                    ic.residues[residid2][parseInt(k) + natom * i] = 1;
+                }
+            }
+
+            for(let j in chainsOri) {
+                let idArray = j.split('_');
+                let structure2 = idArray[0] + molNum;
+                let chainid2 = structure2 + '_' + idArray[1];
+                
+                // ic.chainsSeq[chainid2] = [].concat(ic.chainsSeq[j]);
+
+                ic.chains[chainid2] = {};
+                for(let k in chainsOri[j]) {
+                    ic.chains[chainid2][parseInt(k)+ natom * i] = 1;
+                }
+            }
+
+            // update ic.proteins, etc
+            for(let j in proteinsOri) {
+                ic.proteins[parseInt(j) + natom * i] = 1;
+            }
+            for(let j in nucleotidesOri) {
+                ic.nucleotides[parseInt(j) + natom * i] = 1;
+            }
+            for(let j in waterOri) {
+                ic.water[parseInt(j) + natom * i] = 1;
+            }
+            for(let j in ionsOri) {
+                ic.ions[parseInt(j) + natom * i] = 1;
+            }
+            for(let j in chemicalsOri) {
+                ic.chemicals[parseInt(j) + natom * i] = 1;
+            }
+
+            // set ic.ncbi2resid and ic.resid2ncbi
+            for(let chainid in chainsOri) {
+                let idArray = chainid.split('_');
+                let structure2 = idArray[0] + molNum;
+                let chainid2 = structure2 + '_' + idArray[1];
+
+                for(let j = 0, jl = ic.chainsSeq[chainid].length; j < jl; ++j) {
+                    // NCBI residue number starts from 1 and increases continuously
+                    let residNCBI = chainid2 + '_' + (j+1).toString();
+                    let resid = chainid2 + '_' + ic.chainsSeq[chainid][j].resi;
+                    ic.ncbi2resid[residNCBI] = resid;
+                    ic.resid2ncbi[resid] = residNCBI;
+                }
+            }
+        } 
+
+        ic.molTitle = header.TITLE;
+        ic.inputid = 'stru';
+
+        // ic.ParserUtilsCls.setMaxD();
+
+        ic.saveFileCls.showTitle();
+
+        return true;
+    }
+
+    async showRmsdPlot() { let ic = this.icn3d, me = ic.icn3dui;
+        if(ic.bChartjs === undefined) {
+            let url = "https://cdn.jsdelivr.net/npm/chart.js";
+            await me.getAjaxPromise(url, 'script');
+
+            ic.bChartjs = true;
+        }
+
+        $("#" + me.rmsdplotid).empty();
+        me.htmlCls.dialogCls.openDlg('dl_rmsdplot', 'RMSD Plot');
+
+        let dataSet = [];
+        let structureArray = Object.keys(ic.structures);
+        let coord1 = [], coord2 = [];
+        for(let i = 0, il = structureArray.length; i < il; ++i) {
+            let chainArray = ic.structures[structureArray[i]];
+
+            let coord = [];
+            let nAtoms = 0;
+            for(let j = 0, jl = chainArray.length; j < jl; ++j) {
+                let chainid = chainArray[j];
+                for(let k in ic.chains[chainid]) {
+                    let atom = ic.atoms[k];
+                    coord.push(atom.coord);
+                    ++nAtoms;
+                }
+            }
+
+            if(i == 0) {
+                coord1 = [].concat(coord);
+            }
+            else {
+                coord2 = coord;
+            }
+
+            if(i > 0) {
+                let result = me.rmsdSuprCls.getRmsdSuprCls(coord1, coord2, nAtoms);
+                let rmsd = (result.rmsd * 0.1).toPrecision(4); // convert from Å to nm
+
+                let time = ic.TIMEOFFSET + (i * ic.DELTA).toPrecision(4);
+                dataSet.push({x: time, y: rmsd});
+            }
+        }
+
+        ic.mdDataSet = dataSet; 
+        if(me.bNode) console.log(dataSet);
+
+        let stepSize = (structureArray.length - 1) * ic.DELTA / 10; // 10 ticks
+
+        // https://www.chartjs.org/docs/latest/samples/line/line.html
+        // const ctx = $("#" + me.rmsdplotid)[0].getContext('2d');
+        const ctx = $("#" + me.rmsdplotid)[0];
+
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                datasets: [{
+                    label: 'RMSD',
+                    data: dataSet
+                }]
+            },
+            options: {
+                responsive: true,
+                scales: {
+                    x: { // X-axis configuration
+                        title: {
+                            display: true, // Show the X-axis label
+                            text: 'Time (ps)'  // Text for the X-axis label
+                        },
+                        type: 'linear', // Required for numerical x-axis
+                        position: 'bottom',
+                        ticks: {
+                            stepSize: stepSize
+                        }
+                    },
+                    y: { // Y-axis configuration (defaults to numeric scale)
+                        title: {
+                            display: true, // Show the Y-axis label
+                            text: 'RMSD (nm)'  // Text for the Y-axis label
+                        }
+                    }
+                }
+            }
+        });
+    }
+}
+
+/**
+ * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
+ */
+
+class XtcParser {
+    constructor(icn3d) {
+        this.icn3d = icn3d;
+
+        icn3d.DELTA = 1;
+        icn3d.TIMEOFFSET = 0;
+
+        this.MagicInts = new Uint32Array([
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 10, 12, 16, 20, 25, 32, 40, 50, 64,
+            80, 101, 128, 161, 203, 256, 322, 406, 512, 645, 812, 1024, 1290,
+            1625, 2048, 2580, 3250, 4096, 5060, 6501, 8192, 10321, 13003,
+            16384, 20642, 26007, 32768, 41285, 52015, 65536, 82570, 104031,
+            131072, 165140, 208063, 262144, 330280, 416127, 524287, 660561,
+            832255, 1048576, 1321122, 1664510, 2097152, 2642245, 3329021,
+            4194304, 5284491, 6658042, 8388607, 10568983, 13316085, 16777216
+        ]);
+        this.FirstIdx = 9;
+
+        this._tmpBytes = new Uint8Array(32);
+        let _buffer = new ArrayBuffer(8 * 3);
+        this.buf = new Int32Array(_buffer);
+        this.uint32view = new Uint32Array(_buffer);
+        this.intBytes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+    }
+
+    async loadXtcData(data) { let ic = this.icn3d, me = ic.icn3dui;
+        let bResult = this.loadXtcAtomData(data);
+
+        if(me.cfg.align === undefined && Object.keys(ic.structures).length == 1) {
+            $("#" + ic.pre + "alternateWrapper").hide();
+        }
+
+        if(!bResult) {
+          var aaa = 1; //alert('The XTC file has the wrong format...');
+        }
+        else {
+          ic.setStyleCls.setAtomStyleByOptions(ic.opts);
+          ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
+
+          // hide water, ions
+          ic.dAtoms = me.hashUtilsCls.cloneHash(ic.proteins);
+          ic.dAtoms = me.hashUtilsCls.unionHash(ic.dAtoms, ic.nucleotides);
+          ic.dAtoms = me.hashUtilsCls.unionHash(ic.dAtoms, ic.chemicals);
+          ic.hAtoms = me.hashUtilsCls.cloneHash(ic.dAtoms);
+          ic.transformCls.zoominSelection();
+
+        //   ic.bRender = true;
+          await ic.ParserUtilsCls.renderStructure();
+
+          if(me.cfg.rotate !== undefined) ic.resizeCanvasCls.rotStruc(me.cfg.rotate, true);
+
+          //if(me.deferred !== undefined) me.deferred.resolve(); /// if(ic.deferred2 !== undefined) ic.deferred2.resolve();
+        }
+    }
+
+
+    // modified from https://github.com/molstar/molstar/blob/master/src/mol-io/reader/xtc/parser.ts
+    loadXtcAtomData(data) { let ic = this.icn3d, me = ic.icn3dui;
+        // https://github.com/gromacs/gromacs/blob/master/src/gromacs/fileio/xtcio.cpp
+        // https://github.com/gromacs/gromacs/blob/master/src/gromacs/fileio/libxdrf.cpp
+
+        let bin =(data.buffer && data.buffer instanceof ArrayBuffer) ? data.buffer : data;
+
+        // const dv = new DataView(bin, data.byteOffset);
+        const dv = new DataView(bin);
+
+        data = new Uint8Array(bin);
+
+        // const f = {
+        //     frames: [],
+        //     boxes: [],
+        //     times: [],
+        //     timeOffset: 0,
+        //     deltaTime: 0
+        // };
+
+        const coordinates = []; //f.frames;
+        const times = []; //f.times;
+
+        const minMaxInt = [0, 0, 0, 0, 0, 0];
+        const sizeint = [0, 0, 0];
+        const bitsizeint = [0, 0, 0];
+        const sizesmall = [0, 0, 0];
+        const thiscoord = [0.1, 0.1, 0.1];
+        const prevcoord = [0.1, 0.1, 0.1];
+
+        let offset = 0, natom;
+
+        while (true) {
+            let frameCoords;
+
+            // const magicnum = dv.getInt32(offset)
+            natom = dv.getInt32(offset + 4);
+            // const step = dv.getInt32(offset + 8)
+            offset += 12;
+
+            if(natom != Object.keys(ic.atoms).length) {
+                var aaa = 1; //alert('The number of atoms in the XTC file does not match the number of atoms in the PDB file: ' + natom + ' != ' + Object.keys(ic.atoms).length);
+                return false;
+            }
+
+            times.push(dv.getFloat32(offset));
+            offset += 4;
+
+            const box = new Float32Array(9);
+            for (let i = 0; i < 9; ++i) {
+                box[i] = dv.getFloat32(offset) * 10;
+                offset += 4;
+            }
+
+            if (natom <= 9) { // no compression
+                frameCoords = { count: natom, x: new Float32Array(natom), y: new Float32Array(natom), z: new Float32Array(natom) };
+                offset += 4;
+                for (let i = 0; i < natom; ++i) {
+                    frameCoords.x[i] = dv.getFloat32(offset);
+                    frameCoords.y[i] = dv.getFloat32(offset + 4);
+                    frameCoords.z[i] = dv.getFloat32(offset + 8);
+                    offset += 12;
+                }
+            } else {
+                this.buf[0] = this.buf[1] = this.buf[2] = 0;
+                sizeint[0] = sizeint[1] = sizeint[2] = 0;
+                sizesmall[0] = sizesmall[1] = sizesmall[2] = 0;
+                bitsizeint[0] = bitsizeint[1] = bitsizeint[2] = 0;
+                thiscoord[0] = thiscoord[1] = thiscoord[2] = 0;
+                prevcoord[0] = prevcoord[1] = prevcoord[2] = 0;
+
+                frameCoords = { count: natom, x: new Float32Array(natom), y: new Float32Array(natom), z: new Float32Array(natom) };
+                let lfp = 0;
+
+                const lsize = dv.getInt32(offset);
+                offset += 4;
+                const precision = dv.getFloat32(offset);
+                offset += 4;
+
+                minMaxInt[0] = dv.getInt32(offset);
+                minMaxInt[1] = dv.getInt32(offset + 4);
+                minMaxInt[2] = dv.getInt32(offset + 8);
+                minMaxInt[3] = dv.getInt32(offset + 12);
+                minMaxInt[4] = dv.getInt32(offset + 16);
+                minMaxInt[5] = dv.getInt32(offset + 20);
+                sizeint[0] = minMaxInt[3] - minMaxInt[0] + 1;
+                sizeint[1] = minMaxInt[4] - minMaxInt[1] + 1;
+                sizeint[2] = minMaxInt[5] - minMaxInt[2] + 1;
+                offset += 24;
+
+                let bitsize;
+                if ((sizeint[0] | sizeint[1] | sizeint[2]) > 0xffffff) {
+                    bitsizeint[0] = this.sizeOfInt(sizeint[0]);
+                    bitsizeint[1] = this.sizeOfInt(sizeint[1]);
+                    bitsizeint[2] = this.sizeOfInt(sizeint[2]);
+                    bitsize = 0; // flag the use of large sizes
+                } else {
+                    bitsize = this.sizeOfInts(3, sizeint);
+                }
+
+                let smallidx = dv.getInt32(offset);
+                offset += 4;
+
+                let tmpIdx = smallidx - 1;
+                tmpIdx = (this.FirstIdx > tmpIdx) ? this.FirstIdx : tmpIdx;
+                let smaller = (this.MagicInts[tmpIdx] / 2) | 0;
+                let smallnum = (this.MagicInts[smallidx] / 2) | 0;
+
+                sizesmall[0] = sizesmall[1] = sizesmall[2] = this.MagicInts[smallidx];
+
+                const adz = Math.ceil(dv.getInt32(offset) / 4) * 4;
+                offset += 4;
+
+                const invPrecision = 1.0 / precision;
+                let run = 0;
+                let i = 0;
+
+                // const this.buf8 = new Uint8Array(data.this.buffer, data.byteOffset + offset, 32 * 4); // 229...
+
+                thiscoord[0] = thiscoord[1] = thiscoord[2] = 0;
+
+                while (i < lsize) {
+                    if (bitsize === 0) {
+                        thiscoord[0] = this.decodeBits(data, offset, bitsizeint[0]);
+                        thiscoord[1] = this.decodeBits(data, offset, bitsizeint[1]);
+                        thiscoord[2] = this.decodeBits(data, offset, bitsizeint[2]);
+                    } else {
+                        this.decodeInts(data, offset, bitsize, sizeint, thiscoord);
+                    }
+
+                    i++;
+
+                    thiscoord[0] += minMaxInt[0];
+                    thiscoord[1] += minMaxInt[1];
+                    thiscoord[2] += minMaxInt[2];
+
+                    prevcoord[0] = thiscoord[0];
+                    prevcoord[1] = thiscoord[1];
+                    prevcoord[2] = thiscoord[2];
+
+                    const flag = this.decodeBits(data, offset, 1);
+                    let isSmaller = 0;
+
+                    if (flag === 1) {
+                        run = this.decodeBits(data, offset, 5);
+                        isSmaller = run % 3;
+                        run -= isSmaller;
+                        isSmaller--;
+                    }
+
+                    // if ((lfp-ptrstart)+run > size3){
+                    //   fprintf(stderr, "(xdrfile error) Buffer overrun during decompression.\n");
+                    //   return 0;
+                    // }
+
+                    if (run > 0) {
+                        thiscoord[0] = thiscoord[1] = thiscoord[2] = 0;
+
+                        for (let k = 0; k < run; k += 3) {
+                            this.decodeInts(data, offset, smallidx, sizesmall, thiscoord);
+                            i++;
+
+                            thiscoord[0] += prevcoord[0] - smallnum;
+                            thiscoord[1] += prevcoord[1] - smallnum;
+                            thiscoord[2] += prevcoord[2] - smallnum;
+
+                            if (k === 0) {
+                                // interchange first with second atom for
+                                // better compression of water molecules
+                                let tmpSwap = thiscoord[0];
+                                thiscoord[0] = prevcoord[0];
+                                prevcoord[0] = tmpSwap;
+
+                                tmpSwap = thiscoord[1];
+                                thiscoord[1] = prevcoord[1];
+                                prevcoord[1] = tmpSwap;
+
+                                tmpSwap = thiscoord[2];
+                                thiscoord[2] = prevcoord[2];
+                                prevcoord[2] = tmpSwap;
+
+                                frameCoords.x[lfp] = prevcoord[0] * invPrecision;
+                                frameCoords.y[lfp] = prevcoord[1] * invPrecision;
+                                frameCoords.z[lfp] = prevcoord[2] * invPrecision;
+                                lfp++;
+                            } else {
+                                prevcoord[0] = thiscoord[0];
+                                prevcoord[1] = thiscoord[1];
+                                prevcoord[2] = thiscoord[2];
+                            }
+                            frameCoords.x[lfp] = thiscoord[0] * invPrecision;
+                            frameCoords.y[lfp] = thiscoord[1] * invPrecision;
+                            frameCoords.z[lfp] = thiscoord[2] * invPrecision;
+                            lfp++;
+                        }
+                    } else {
+                        frameCoords.x[lfp] = thiscoord[0] * invPrecision;
+                        frameCoords.y[lfp] = thiscoord[1] * invPrecision;
+                        frameCoords.z[lfp] = thiscoord[2] * invPrecision;
+                        lfp++;
+                    }
+
+                    smallidx += isSmaller;
+
+                    if (isSmaller < 0) {
+                        smallnum = smaller;
+                        if (smallidx > this.FirstIdx) {
+                            smaller = (this.MagicInts[smallidx - 1] / 2) | 0;
+                        } else {
+                            smaller = 0;
+                        }
+                    } else if (isSmaller > 0) {
+                        smaller = smallnum;
+                        smallnum = (this.MagicInts[smallidx] / 2) | 0;
+                    }
+                    sizesmall[0] = sizesmall[1] = sizesmall[2] = this.MagicInts[smallidx];
+
+                    if (sizesmall[0] === 0 || sizesmall[1] === 0 || sizesmall[2] === 0) {
+                        undefinedError();
+                    }
+                }
+                offset += adz;
+            }
+
+            let factor = 10;
+            for (let c = 0; c < natom; c++) {
+                frameCoords.x[c] *= factor;
+                frameCoords.y[c] *= factor;
+                frameCoords.z[c] *= factor;
+            }
+
+            coordinates.push(frameCoords);
+
+            // if (ctx.shouldUpdate) {
+            //     await ctx.update({ current: offset, max: data.length });
+            // }
+
+            // if (offset >= data.length) break;
+            if (offset >= dv.byteLength) break;
+        }
+
+        ic.frames = coordinates.length;
+
+        if (times.length >= 1) {
+            ic.TIMEOFFSET = times[0];
+        }
+        if (times.length >= 2) {
+            ic.DELTA = times[1] - times[0];
+        }
+
+        // frames
+        let structuresOri = me.hashUtilsCls.cloneHash(ic.structures);
+        let residuesOri = me.hashUtilsCls.cloneHash(ic.residues);
+        let chainsOri = me.hashUtilsCls.cloneHash(ic.chains);
+
+        let proteinsOri = me.hashUtilsCls.cloneHash(ic.proteins);
+        let nucleotidesOri = me.hashUtilsCls.cloneHash(ic.nucleotides);
+        let waterOri = me.hashUtilsCls.cloneHash(ic.water);
+        let ionsOri = me.hashUtilsCls.cloneHash(ic.ions);
+        let chemicalsOri = me.hashUtilsCls.cloneHash(ic.chemicals);   
+
+        // let serial = natom + 1; // a preloaded PDB structure would have atom serial from 1 to natom
+        let serial = 1;
+
+        for (let i = 0, n = coordinates.length; i < n; ++i) {
+            // skip the first structure since it was read from PDB already
+            // if(i == 0) continue;
+
+            // rewrite the coordinates of the first structure
+            let frame = coordinates[i];
+
+            // let molNum = i + 1; // to avoid the same molNum as the PDB structure
+            let molNum = (i == 0) ? '' : i;
+            for(let j = 0; j < natom; ++j) {
+                let coord = new Vector3$1(frame.x[j], frame.y[j], frame.z[j]);
+                let atom = me.hashUtilsCls.cloneHash(ic.atoms[j + 1]);
+
+                atom.serial = serial;
+                atom.structure = atom.structure + molNum;
+                atom.coord = coord;
+                atom.bonds = [].concat(ic.atoms[j + 1].bonds);
+
+                // update bonds
+                for(let k = 0, kl = atom.bonds.length; k < kl; ++k) {
+                    atom.bonds[k] = parseInt(atom.bonds[k]) + natom * i;
+                }
+
+                ic.atoms[serial] = atom;
+
+                // assign extra info
+                ic.dAtoms[serial] = 1;
+                ic.hAtoms[serial] = 1;
+
+                let chainid = atom.structure + '_' + atom.chain;
+                let residid = chainid + '_' + atom.resi;
+                ic.secondaries[residid] = atom.ss;
+                ic.residueId2Name[residid] = me.utilsCls.residueName2Abbr(atom.resn);
+
+                ++serial;
+            }
+
+            // update ic.structures, ic.residues and ic.chains
+            for(let structure in structuresOri) {
+                let structure2 = structure + molNum;
+                ic.structures[structure2] = [];
+
+                for(let k = 0, kl = structuresOri[structure].length; k < kl; ++k) {
+                    let idArray = structuresOri[structure][k].split('_');
+                    ic.structures[structure2].push(structure2 + '_' + idArray[1]);
+                }
+            }
+
+            for(let j in residuesOri) {
+                let idArray = j.split('_');
+                let structure2 = idArray[0] + molNum;
+                let residid2 = structure2 + '_' + idArray[1] + '_' + idArray[2];
+                ic.residues[residid2] = {};
+
+                for(let k in residuesOri[j]) {
+                    ic.residues[residid2][parseInt(k) + natom * i] = 1;
+                }
+            }
+
+            for(let j in chainsOri) {
+                let idArray = j.split('_');
+                let structure2 = idArray[0] + molNum;
+                let chainid2 = structure2 + '_' + idArray[1];
+                
+                // ic.chainsSeq[chainid2] = [].concat(ic.chainsSeq[j]);
+
+                ic.chains[chainid2] = {};
+                for(let k in chainsOri[j]) {
+                    ic.chains[chainid2][parseInt(k)+ natom * i] = 1;
+                }
+            }
+
+            // update ic.proteins, etc
+            for(let j in proteinsOri) {
+                ic.proteins[parseInt(j) + natom * i] = 1;
+            }
+            for(let j in nucleotidesOri) {
+                ic.nucleotides[parseInt(j) + natom * i] = 1;
+            }
+            for(let j in waterOri) {
+                ic.water[parseInt(j) + natom * i] = 1;
+            }
+            for(let j in ionsOri) {
+                ic.ions[parseInt(j) + natom * i] = 1;
+            }
+            for(let j in chemicalsOri) {
+                ic.chemicals[parseInt(j) + natom * i] = 1;
+            }
+
+            // set ic.ncbi2resid and ic.resid2ncbi
+            for(let chainid in chainsOri) {
+                let idArray = chainid.split('_');
+                let structure2 = idArray[0] + molNum;
+                let chainid2 = structure2 + '_' + idArray[1];
+
+                for(let j = 0, jl = ic.chainsSeq[chainid].length; j < jl; ++j) {
+                    // NCBI residue number starts from 1 and increases continuously
+                    let residNCBI = chainid2 + '_' + (j+1).toString();
+                    let resid = chainid2 + '_' + ic.chainsSeq[chainid][j].resi;
+                    ic.ncbi2resid[residNCBI] = resid;
+                    ic.resid2ncbi[resid] = residNCBI;
+                }
+            }
+        } 
+
+        // ic.molTitle = header.TITLE;
+        ic.inputid = 'stru';
+
+        // ic.ParserUtilsCls.setMaxD();
+
+        ic.saveFileCls.showTitle();
+
+        return true;
+    }
+
+    sizeOfInt(size) { let ic = this.icn3d; ic.icn3dui;
+        let num = 1;
+        let numOfBits = 0;
+        while (size >= num && numOfBits < 32) {
+            numOfBits++;
+            num <<= 1;
+        }
+        return numOfBits;
+    }
+
+    sizeOfInts(numOfInts, sizes) { let ic = this.icn3d; ic.icn3dui;
+        let numOfBytes = 1;
+        let numOfBits = 0;
+        this._tmpBytes[0] = 1;
+        for (let i = 0; i < numOfInts; i++) {
+            let bytecnt;
+            let tmp = 0;
+            for (bytecnt = 0; bytecnt < numOfBytes; bytecnt++) {
+                tmp += this._tmpBytes[bytecnt] * sizes[i];
+                this._tmpBytes[bytecnt] = tmp & 0xff;
+                tmp >>= 8;
+            }
+            while (tmp !== 0) {
+                this._tmpBytes[bytecnt++] = tmp & 0xff;
+                tmp >>= 8;
+            }
+            numOfBytes = bytecnt;
+        }
+        let num = 1;
+        numOfBytes--;
+        while (this._tmpBytes[numOfBytes] >= num) {
+            numOfBits++;
+            num *= 2;
+        }
+        return numOfBits + numOfBytes * 8;
+    }
+    
+    decodeBits(cbuf, offset, numOfBits1) { let ic = this.icn3d; ic.icn3dui;
+        let numOfBits = numOfBits1;
+        const mask = (1 << numOfBits) - 1;
+        let lastBB0 = this.uint32view[1];
+        let lastBB1 = this.uint32view[2];
+        let cnt = this.buf[0];
+        let num = 0;
+
+        while (numOfBits >= 8) {
+            lastBB1 = (lastBB1 << 8) | cbuf[offset + cnt++];
+            num |= (lastBB1 >> lastBB0) << (numOfBits - 8);
+            numOfBits -= 8;
+        }
+
+        if (numOfBits > 0) {
+            if (lastBB0 < numOfBits) {
+                lastBB0 += 8;
+                lastBB1 = (lastBB1 << 8) | cbuf[offset + cnt++];
+            }
+            lastBB0 -= numOfBits;
+            num |= (lastBB1 >> lastBB0) & ((1 << numOfBits) - 1);
+        }
+
+        num &= mask;
+        this.buf[0] = cnt;
+        this.buf[1] = lastBB0;
+        this.buf[2] = lastBB1;
+
+        return num;
+    }
+
+    decodeByte(cbuf, offset) { let ic = this.icn3d; ic.icn3dui;
+        // special version of decodeBits with numOfBits = 8
+
+        // const mask = 0xff; // (1 << 8) - 1;
+        // let lastBB0 = uint32view[1];
+        let lastBB1 = this.uint32view[2];
+        const cnt = this.buf[0];
+
+        lastBB1 = (lastBB1 << 8) | cbuf[offset + cnt];
+
+        this.buf[0] = cnt + 1;
+        // this.buf[1] = lastBB0;
+        this.buf[2] = lastBB1;
+
+        return (lastBB1 >> this.uint32view[1]) & 0xff;
+    }
+
+    decodeInts(cbuf, offset, numOfBits1, sizes, nums) { let ic = this.icn3d; ic.icn3dui;   
+        let numOfBits = numOfBits1;
+        let numOfBytes = 0;
+
+        this.intBytes[0] = 0;
+        this.intBytes[1] = 0;
+        this.intBytes[2] = 0;
+        this.intBytes[3] = 0;
+
+        while (numOfBits > 8) {
+            // this is inversed??? why??? because of the endiannness???
+            this.intBytes[numOfBytes++] = this.decodeByte(cbuf, offset);
+            numOfBits -= 8;
+        }
+
+        if (numOfBits > 0) {
+            this.intBytes[numOfBytes++] = this.decodeBits(cbuf, offset, numOfBits);
+        }
+
+        for (let i = 2; i > 0; i--) {
+            let num = 0;
+            const s = sizes[i];
+            for (let j = numOfBytes - 1; j >= 0; j--) {
+                num = (num << 8) | this.intBytes[j];
+                const t = (num / s) | 0;
+                this.intBytes[j] = t;
+                num = num - t * s;
+            }
+            nums[i] = num;
+        }
+        nums[0] = this.intBytes[0] | (this.intBytes[1] << 8) | (this.intBytes[2] << 16) | (this.intBytes[3] << 24);
+    }    
+}
+
 /**
  * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
  */
@@ -114913,7 +116196,15 @@ class LoadPDB {
                 prevCarbonArray.push(atom);
             }
 
-            if(!atom.het) {
+            if(atom.resn === 'HOH' || atom.resn === 'WAT' || atom.resn === 'SOL') {
+                ic.water[atom.serial] = 1;
+                atom.color = me.parasCls.atomColors[atom.elem];
+            }
+            else if($.inArray(atom.resn.trim(), me.parasCls.ionsArray) !== -1 || atom.elem.trim() === atom.resn.trim()) {
+                ic.ions[atom.serial] = 1;
+                atom.color = me.parasCls.atomColors[atom.elem];
+            }
+            else if(!atom.het) {
               if($.inArray(atom.resn, me.parasCls.nucleotidesArray) !== -1) {
                 ic.nucleotides[atom.serial] = 1;
                 //if (atom.name === 'P') {
@@ -114938,19 +116229,7 @@ class LoadPDB {
               }
             }
             else if(atom.het) {
-              if(atom.resn === 'HOH' || atom.resn === 'WAT' || atom.resn === 'SOL') {
-                ic.water[atom.serial] = 1;
-              }
-              //else if(bOpm && atom.resn === 'DUM') {
-              //  ic.mem[atom.serial] = 1;
-              //}
-              else if($.inArray(atom.resn, me.parasCls.ionsArray) !== -1 || atom.elem.trim() === atom.resn.trim()) {
-                ic.ions[atom.serial] = 1;
-              }
-              else {
-                ic.chemicals[atom.serial] = 1;
-              }
-
+              ic.chemicals[atom.serial] = 1;
               atom.color = me.parasCls.atomColors[atom.elem];
             }
 
@@ -117748,6 +119027,18 @@ class ApplyCommand {
         ic.analysisCls.addLine(parseFloat(p1Array[1]), parseFloat(p1Array[3]), parseFloat(p1Array[5]), parseFloat(p2Array[1]), parseFloat(p2Array[3]), parseFloat(p2Array[5]), color, dashed, type, parseFloat(radius), parseFloat(opacity));
         ic.drawCls.draw();
       }
+      else if(command.indexOf('add plane') == 0) {
+        let paraArray = command.split(' | ');
+        let p1Array = paraArray[1].split(' ');
+        let p2Array = paraArray[2].split(' ');
+        let p3Array = paraArray[3].split(' ');
+        let color = paraArray[4].substr(paraArray[4].lastIndexOf(' ') + 1);
+        let thickness = (paraArray.length > 5) ? paraArray[5].substr(paraArray[5].lastIndexOf(' ') + 1) : 2;
+        let opacity = (paraArray.length > 6) ? paraArray[6].substr(paraArray[6].lastIndexOf(' ') + 1) : 0.3;
+
+        ic.analysisCls.addPlane(parseFloat(p1Array[1]), parseFloat(p1Array[3]), parseFloat(p1Array[5]), parseFloat(p2Array[1]), parseFloat(p2Array[3]), parseFloat(p2Array[5]), parseFloat(p3Array[1]), parseFloat(p3Array[3]), parseFloat(p3Array[5]), color, parseFloat(thickness), parseFloat(opacity));
+        ic.drawCls.draw();
+      }
       else if(command.indexOf('add sphere') == 0) {
         this.addShape(commandOri, 'sphere');
         ic.shapeCmdHash[commandOri] = 1;
@@ -117766,6 +119057,10 @@ class ApplyCommand {
         ic.lines['cylinder'] = []; // reset
         //ic.drawCls.draw();
       }
+      else if(command.indexOf('clear plane among sets') == 0) {
+        ic.planes = []; // reset
+        //ic.drawCls.draw();
+      }
       else if(commandOri.indexOf('add label') == 0) {
         let paraArray = commandOri.split(' | ');
         let text = paraArray[0].substr(('add label').length + 1);
@@ -126519,6 +127814,21 @@ class Analysis {
         //ic.drawCls.draw();
     }
 
+    //Add a plane among the positions (x1, y1, z1), (x2, y2, z2) and (x3, y3, z3) with the input "color".
+    addPlane(x1, y1, z1, x2, y2, z2, x3, y3, z3, color, thickness, opacity) {var ic = this.icn3d; ic.icn3dui;
+        let plane = {}; // Each plane contains 'position1', 'position2', 'position3', 'color', and 'thickness'
+        plane.position1 = new Vector3$1(x1, y1, z1);
+        plane.position2 = new Vector3$1(x2, y2, z2);
+        plane.position3 = new Vector3$1(x3, y3, z3);
+        plane.color = color;
+        plane.thickness = thickness;
+        plane.opacity = opacity;
+        if(ic.planes === undefined) ic.planes = [];
+        ic.planes.push(plane);
+
+        ic.hlObjectsCls.removeHlObjects();
+    }
+
     addLineFromPicking(type) {var ic = this.icn3d, me = ic.icn3dui;
         let color = $("#" + ic.pre + type + "color" ).val();
         (ic.pAtom.coord.x + ic.pAtom2.coord.x) / 2;
@@ -130305,12 +131615,13 @@ class SaveFile {
                 let structureArray = Object.keys(me.utilsCls.getStructures(ic.dAtoms));
 
                 if(structureArray.length > 1) {
-                    title = 'Multiple structures: ';
-                    for(let i = 0, il = structureArray.length; i < il; ++i) {
+                    title = structureArray.length + ' structures: ';
+                    for(let i = 0, il = structureArray.length; i < il && i < 5; ++i) {
                         let url = (isNaN(structureArray[i]) && structureArray[i].length > 5) ? 'https://alphafold.ebi.ac.uk/entry/' + structureArray[i] : 'https://www.ncbi.nlm.nih.gov/structure/?term=' + structureArray[i];
                         title += '<a href="' + url + '" style="color:' + titlelinkColor + '" target="_blank">' + structureArray[i] + '</a>';
                         if(i < il - 1) title += ', ';
                     }
+                    if(structureArray.length > 5) title += '...';
                     $("#" + ic.pre + "title").html(title);
                 }
                 else if(structureArray.length == 1) {
@@ -132101,12 +133412,11 @@ class Control {
               ic.transformCls.setRotation(axis, angle);
             }
 
-            else if(e.keyCode === 65 ) { // A, alternate
+            else if(e.keyCode === 65 ) { // A, alternate forward
                if(Object.keys(ic.structures).length > 1) {
                  await ic.alternateCls.alternateWrapper();
                }
             }
-
           }
         });
 
@@ -133556,6 +134866,8 @@ class iCn3D {
     this.pdbParserCls = new PdbParser(this);
     this.sdfParserCls = new SdfParser(this);
     this.xyzParserCls = new XyzParser(this);
+    this.dcdParserCls = new DcdParser(this);
+    this.xtcParserCls = new XtcParser(this);
     this.msaParserCls = new MsaParser(this);
     this.realignParserCls = new RealignParser(this);
     this.densityCifParserCls = new DensityCifParser(this);
@@ -133813,7 +135125,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.46.0';
+    this.REVISION = '3.47.0';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}", and added window = {navigator: {}, "__THREE__":"177"}
     this.bNode = (Object.keys(window).length < 3) ? true : false;
@@ -134574,4 +135886,4 @@ class printMsg {
   }
 }
 
-export { ARButton, AddTrack, AlignParser, AlignSW, AlignSeq, Alternate, Analysis, AnnoCddSite, AnnoContact, AnnoCrossLink, AnnoDomain, AnnoSnpClinVar, AnnoSsbond, AnnoTransMem, Annotation, ApplyCenter, ApplyClbonds, ApplyCommand, ApplyDisplay, ApplyMap, ApplyOther, ApplySsbonds, ApplySymd, Axes, Box, Brick, Camera, CartoonNucl, ChainalignParser, ClickMenu, Contact, Control, ConvertTypeCls, Curve, CurveStripArrow, Cylinder, DefinedSets, Delphi, DensityCifParser, Diagram2d, Dialog, Domain3d, Draw, DrawGraph, Dsn6Parser, Dssp, ElectronMap, Events, Export3D, FirstAtomObj, Fog, GetGraph, Glycan, HBond, HashUtilsCls, HlObjects, HlSeq, HlUpdate, Html, Impostor, Instancing, Label, Line$1 as Line, LineGraph, LoadAtomData, LoadCIF, LoadPDB, LoadScript, MarchingCube, MmcifParser, MmdbParser, Mol2Parser, MsaParser, MyEventCls, OpmParser, ParasCls, ParserUtils, PdbParser, PiHalogen, Picking, ProteinSurface, Ray, RealignParser, Refnum, ReprSub, Resid2spec, ResidueLabels, ResizeCanvas, RmsdSuprCls, Saltbridge, SaveFile, Scap, Scene, SdfParser, SelectByCommand, Selection, SetColor, SetDialog, SetHtml, SetMenu, SetOption, SetSeqAlign, SetStyle, ShareLink, ShowAnno, ShowInter, ShowSeq, Sphere$1 as Sphere, Stick, Strand, Strip, SubdivideCls, Surface, Symd, ThreeDPrint, Transform, Tube, UtilsCls, VRButton, Vastplus, ViewInterPairs, XyzParser, iCn3D, iCn3DUI, printMsg };
+export { ARButton, AddTrack, AlignParser, AlignSW, AlignSeq, Alternate, Analysis, AnnoCddSite, AnnoContact, AnnoCrossLink, AnnoDomain, AnnoSnpClinVar, AnnoSsbond, AnnoTransMem, Annotation, ApplyCenter, ApplyClbonds, ApplyCommand, ApplyDisplay, ApplyMap, ApplyOther, ApplySsbonds, ApplySymd, Axes, Box, Brick, Camera, CartoonNucl, ChainalignParser, ClickMenu, Contact, Control, ConvertTypeCls, Curve, CurveStripArrow, Cylinder, DcdParser, DefinedSets, Delphi, DensityCifParser, Diagram2d, Dialog, Domain3d, Draw, DrawGraph, Dsn6Parser, Dssp, ElectronMap, Events, Export3D, FirstAtomObj, Fog, GetGraph, Glycan, HBond, HashUtilsCls, HlObjects, HlSeq, HlUpdate, Html, Impostor, Instancing, Label, Line$1 as Line, LineGraph, LoadAtomData, LoadCIF, LoadPDB, LoadScript, MarchingCube, MmcifParser, MmdbParser, Mol2Parser, MsaParser, MyEventCls, OpmParser, ParasCls, ParserUtils, PdbParser, PiHalogen, Picking, ProteinSurface, Ray, RealignParser, Refnum, ReprSub, Resid2spec, ResidueLabels, ResizeCanvas, RmsdSuprCls, Saltbridge, SaveFile, Scap, Scene, SdfParser, SelectByCommand, Selection, SetColor, SetDialog, SetHtml, SetMenu, SetOption, SetSeqAlign, SetStyle, ShareLink, ShowAnno, ShowInter, ShowSeq, Sphere$1 as Sphere, Stick, Strand, Strip, SubdivideCls, Surface, Symd, ThreeDPrint, Transform, Tube, UtilsCls, VRButton, Vastplus, ViewInterPairs, XtcParser, XyzParser, iCn3D, iCn3DUI, printMsg };