JSDoc: Source: helper.js

# Source: helper.js

    /**
     * Class to help the get and put data into html file.
     * This also helps to create HTML tags like creating table
     */
    class UIHelper{
        /**
         * Function to set default error value to HTML in Da units
         * @param {Float} massErrorthVal - Contains Mass Error Value in Da units
         */
        setMassErrorValue(massErrorthVal){
            $("#errorval").val(massErrorthVal);
            $("#errorunit").html("Da&nbsp;&nbsp;");
        }
        /**
         * Function to Set Default error value to HTML in ppm units
         * @param {Float} ppmErrorthVal - Contains Mass Error in ppm units
         */
        setPPMErrorValue(ppmErrorthVal){
            $("#errorval").val(ppmErrorthVal);
            $("#errorunit").html("ppm&nbsp;&nbsp;");
        }
        /**
         * Set Total mass on to the html
         * @param {*} totalMass
         */
        setTotalSeqMass(totalMass){
            totalMass = totalMass.toFixed(4);
            $("#totalmass").html(totalMass);
        }
        /**
         * Set Mass difference on to the html
         * @param {Float} precursorMass - Contains Precursor mass
         * @param {Float} proteinMass - Contains calculated protein Mass
         */
        setMassDifference(precursorMass, proteinMass){
            let diff = proteinMass - precursorMass ;
            document.getElementById("massvariation").innerHTML = diff.toFixed(4);
            return (proteinMass - precursorMass);
        }
        /**
         * Set Default Mass errors into html of both Da and ppm units
         * @param {Float} massErrorthVal - Contains Mass error in Da units
         * @param {Float} ppmErrorthVal - Contains ppm error in ppm units
         */
        writeMassErrorThreshholdValueToUI(massErrorthVal,ppmErrorthVal){
            if(massErrorthVal != "") $("#errorval").val(massErrorthVal);
            else $("#errorval").val(ppmErrorthVal);
        }
        /**
         * getlist of Mass,Intensity and charge from UI
         */
        getMassListFromUI()
        {
            let spectrumDataList = [];
            // Read data line by line from the mass and intensity box
            var lines = $('#data').val().split('\n');
            for(var i = 0; i < lines.length;i++){
                let massAndInte = lines[i].trim() ;
                if(massAndInte.length !=  0 )
                {
                    let spectrumData = {};
                    // Get Mass,intensity and charge either by space seperated or tab seperated
                    let massInte = massAndInte.split(/[\s]+/);
                    if(massInte[0] != undefined && massInte[1] != undefined
                            && !isNaN(massInte[0]) && !isNaN(massInte[1]))
                    {
                        spectrumData.mass = parseFloat(massInte[0]);
                        spectrumData.intensity = parseFloat(massInte[1]);
                        spectrumData.charge = parseFloat(massInte[2]);
                    }
                    if(!jQuery.isEmptyObject(spectrumData))
                    {
                        if((spectrumData.mass !== undefined) &&
                            (spectrumData.intensity !== undefined))
                        {
                            spectrumDataList.push(spectrumData) ;
                        }
                    }
                }
            }
            completeCalData.monomasslist = spectrumDataList;
            return spectrumDataList ;
        }
        /**
         * Function to get data of peaks and intensity from UI
         */
        getPeakListFromUI()
        {
            let spectrumDataList = [];
            // Read data line by line from peak and intensity box
            var lines = $('#peakdata').val().split('\n');
            for(var i = 0; i < lines.length;i++){
                let peakAndInte = lines[i].trim();
                if(peakAndInte.length !=  0 )
                {
                    let spectrumData = {};
                    let peakInte = peakAndInte.split(/[\s]+/);
                    if(peakInte[0] != undefined && peakInte[1] != undefined
                            && !isNaN(peakInte[0]) && !isNaN(peakInte[1]))
                    {
                        spectrumData.mz = parseFloat(peakInte[0])///spectrumData.charge ;
                        spectrumData.intensity = parseFloat(peakInte[1]);
                    }
                    if(!jQuery.isEmptyObject(spectrumData))
                    {
                        if((spectrumData.mz !== undefined) &&
                            (spectrumData.intensity !== undefined))
                        {
                            spectrumDataList.push(spectrumData) ;
                        }
                    }
                }
            }
            completeCalData.peakdatalist = spectrumDataList;
    	    return spectrumDataList ;
        }
        /**
         * Function to create table
         */
        createMonoMassTable(){
            // Remove if table already exist and rebuild the table
            $("#tableContainer").remove();
            // Remove if tableContainer_wrapper already exist and rebuild the table, wrapper is an inbuild class of bootstrap table
            $("#divtableContainer #tableContainer_wrapper").remove();
            let div = document.getElementById("divtableContainer");
            let table = document.createElement("table");
            table.setAttribute("id","tableContainer");
            table.setAttribute("class","table table-striped display");
            let thead = document.createElement("thead");
            let tbody = document.createElement("tbody");
            tbody.setAttribute("id","tableContainertbody");
            let tr = document.createElement("tr");
            tr.setAttribute("role","row");
            let ColCount = 10;
            // Create table header
            for(let i = 0;i < ColCount;i++)
            {
                let th = document.createElement("th");
                th.setAttribute("class","th-sm");
                if(i == 0) th.innerHTML = "Id";
                if(i == 1) th.innerHTML = "Mono mass";
                if(i == 2) th.innerHTML = "Charge";
                if(i == 3) th.innerHTML = "Mono m/z";
                if(i == 4) th.innerHTML = "Intensity";
                if(i == 5) th.innerHTML = "Theoretical mass";
                if(i == 6) th.innerHTML = "Ion";
                if(i == 7) th.innerHTML = "Pos";
                if(i == 8) th.innerHTML = "Mass error";
                if(i == 9) th.innerHTML = "PPM error";
                tr.appendChild(th);
            }
            thead.appendChild(tr);
            table.appendChild(thead);
            table.appendChild(tbody);
            div.appendChild(table);
        }
        /**
         * Add Data to the table created
         * @param {Array} matchedPeaks - Contains List of Matched and unmatched peaks
         */
        addMassDataToTable(matchedPeaks)
        {
            let dataContainer_tbody = $("#tableContainer tbody");
            const totalColCount = $("#tableContainer thead tr th").length;
            let len = matchedPeaks.length;
            for(let i=0; i<len ; i++)
            {
                let rowSize = $("#tableContainer tbody tr").length;
                let tr = document.createElement("tr");
                tr.setAttribute("id",i+"_row");
                tr.setAttribute("name",matchedPeaks[i].position);
                let id = 0;
                for(let j = 0; j < totalColCount ; j++)
                {
                    let td = document.createElement("td");
                    if(j == 0)
                    {
                        id = matchedPeaks[i].peakId;
                        td.innerHTML = matchedPeaks[i].peakId;
                        td.style.fontWeight = "bold";
                    }else if(j == 1) td.innerHTML = matchedPeaks[i].mass ;
                    else if(j == 2) td.innerHTML = matchedPeaks[i].charge;
                    else if(j == 3) {
                      let mz = matchedPeaks[i].mass / matchedPeaks[i].charge + 1.007276466879;
                      let a = document.createElement('a');
                      a.href="#!"
                      a.className = "peakRows"
                      a.innerHTML = mz.toFixed(4);
                      td.appendChild(a);
                    }
                    else if(j == 4) td.innerHTML = matchedPeaks[i].intensity ;
                    else if(j == 5){
                        td.className = "th_mass";
                        td.innerHTML = matchedPeaks[i].thMass;
                    }
                    else if(j == 6) td.innerHTML = matchedPeaks[i].ion;
                    else if(j == 7) td.innerHTML = matchedPeaks[i].position;
                    else if(j == 8) td.innerHTML = matchedPeaks[i].massError;
                    else if(j == 9) td.innerHTML = matchedPeaks[i].PPMerror;
                    tr.appendChild(td);
                }
                tr.setAttribute("role","row");
                let classname = "" ;
                // Creating classes with matched_peak even and odd, this will help to show only matched peaks on click of matched peaks
                if(matchedPeaks[i].matchedInd == "Y")
                {
                    if(id%2 == 0) classname = "matched_peak even";
                    else classname = "matched_peak odd";
                }
                else
                {
                    if(id%2 == 0) classname = "unmatched_peak even";
                    else classname = "unmatched_peak odd";
                }
                tr.setAttribute("class",classname);
                dataContainer_tbody.append(tr);
            }

          $(".peakRows").click(function() {
            /*	get Mono M/z value till 3 decimal values	*/
            let peak_value = parseFloat(this.innerHTML).toFixed(3) ;
            let graphFeatures = new GraphFeatures();
            ms2_graph.redraw(peak_value,graphFeatures);
            console.log("completeCalData : ", completeCalData);
            let parent_id  = $(this).parent().parent().prop('id');
            console.log("parent_id : ",parent_id);
            let th_mass_val = $("#"+parent_id+" .th_mass").text();
            console.log("th_mass_val : ",th_mass_val);
            let monoMassList = completeCalData.monomasslist;
            generateMonoMassGraph(monoMassList,th_mass_val);
          });
        }
        /**
         * Function to display matched count and un-matched count
         */
        showPeakCounts()
        {
            var matched_elems = document.getElementsByClassName("matched_peak");
            var unmatche_elems = document.getElementsByClassName("unmatched_peak");
            let totalCount = matched_elems.length + unmatche_elems.length;
            let matchedCount = matched_elems.length ;
            let unMatchedCount = unmatche_elems.length ;
            $("#all_peak_count").html(function(){return "All Peaks ("+totalCount+")";})
            $("#matched_peak_count").html(function(){return "Matched Peaks ("+ matchedCount +")";})
            $("#unmatched_peak_count").html(function(){return "Non Matched Peaks ("+unMatchedCount +")";})
        }
        /**
         * Function to show only matched or unmatched peaks
         */
        showIonPeaks(ids)
        {
            var elems = document.getElementsByClassName('matched_peak');
            for(var i = 0; elems.length > i; i++) {
                elems[i].style.display = 'none';
            }
            elems = document.getElementsByClassName('unmatched_peak');
            for(var i = 0; elems.length > i; i++) {
                elems[i].style.display = 'none';
            }

            elems = document.getElementsByName(ids);
                for(var j = 0; elems.length > j; j++) {
                elems[j].style.display  =  "";
                elems[j].style.background  =  "#BEECFF";
                }
        }
    }