# Source: getmasstableofselectedions.js

    /**
     * Class contains {createTableForSelectedFragmentIons}
     */
    class GetMassTableOfSelectedIons{

        /**
         * Function to form table for all selected fragmented ions
         * @param {string} sequence - user entered sequence without mass shifts embedded
         * @param {Array} matchedUnMatchedPeaks - list of all the calculated masses
         */
        createTableForSelectedFragmentIons(sequence,matchedUnMatchedPeaks){
            console.log("matchedUnMatchedPeaks : ", matchedUnMatchedPeaks);
            /**
             * Remove if table already exist and rebuild the table
             */
            $("#selectedIonTableContainer").remove();
            $("#divselectediontablecontainer #selectedIonTableContainer_wrapper").remove();
            let div = document.getElementById("divselectediontablecontainer");
            let table = document.createElement("table");
            table.setAttribute("id","selectedIonTableContainer");
            table.setAttribute("class","table table-striped display");

            let thead = document.createElement("thead");

    	    let tbody = document.createElement("tbody");
            tbody.setAttribute("id","selectedIonTableContainertbody");

            let tr = document.createElement("tr");
            tr.setAttribute("role","row");

            let len = matchedUnMatchedPeaks.length;

            let seqln = sequence.length;
            /**
             * Create ID column Header
             */
            let th1 = document.createElement("th");
            let th0 = document.createElement("th");
            th0.setAttribute("class","th-sm");
            th0.innerHTML = "Id";
            /**
             * Create Acid Column Header
             */
            th1.setAttribute("class","th-sm");
            th1.innerHTML = "Amino acid";
            tr.appendChild(th0);
            tr.appendChild(th1);
            /**
             * Create other header of fragmented ion by taking from list
             */
            for(let i=0;i<len;i++)
            {
                let th = document.createElement("th");
                th.setAttribute("class","th-sm");
                th.innerHTML = matchedUnMatchedPeaks[i].ionFragment;
                tr.appendChild(th);
            }
            /**
             * Create columns from the input list of matched and unmatched peaks
             */
            for(let j=0;j<seqln;j++)
            {
                let tr1 = document.createElement("tr");
                tr1.setAttribute("role","row");

                let td = document.createElement("td");
                td.setAttribute("class","td_fragments");
                td.innerHTML = sequence[j];

                let td0 = document.createElement("td");
                td0.setAttribute("class","td_fragments");
                /**
                 * position starts from 1
                 */
                td0.innerHTML = j+1;
                tr1.appendChild(td0);
                tr1.appendChild(td);
                /**
                 * Add mass data to respected columns
                 */
                for(let k=0;k<len;k++)
                {
                    let td1 = document.createElement("td");
                    let index = j;
                    if(matchedUnMatchedPeaks[k].ionFragment[0] == "x" || matchedUnMatchedPeaks[k].ionFragment[0] == "y"
                        || matchedUnMatchedPeaks[k].ionFragment[0] == "z")
                    {
                        /**
                         * position when suffix mass list is writtent o table
                         */
                        index = seqln-j-1;
                    }
                    td1.setAttribute("class","td_fragments");
                    if(matchedUnMatchedPeaks[k].massList[index].matchedInd == "Y")
                    {
                        td1.setAttribute("class","td_fragments matched_fragments");

                    }
                    td1.setAttribute("charge",matchedUnMatchedPeaks[k].massList[index].charge);
                    td1.innerHTML = matchedUnMatchedPeaks[k].massList[index].mass.toFixed(4);
                    tr1.appendChild(td1);
                }
                tbody.appendChild(tr1);
            }
            thead.appendChild(tr);
            table.appendChild(thead);
            table.appendChild(tbody);
            div.appendChild(table);
            onClickofMatchedPeaks();
        }
    }
    /**
     * Function to zoom the graph to the mass point on click of matched mass
     */
    function onClickofMatchedPeaks(){
        $(".matched_fragments").click(function(){
            let charge = $(this).attr("charge");
            let mass = $(this).html();
            let mz = mass/charge;
            console.log(mz);
            let graphFeatures = new GraphFeatures();
            ms2_graph.redraw(mz,graphFeatures);
        })
    }