Source: onclickandeventhandler.js

/**
 * @function onLoadOfHTML
 * @description Gets invoked immediatley after loading html
 * @param {Float} precursorMass - Contains precursorMass value
 */
onLoadOfHTML = function(precursorMass)
{
    let massErrorthVal = 0.1 ;
    let ppmErrorthVal = 15 ;
    /**
     * set All the common fixed PTM's to Fixed Ptm dropdown menu
     */
    let commonFixedPtmsObj = new commonFixedPtms();
    commonFixedPtmsObj.setFixedPtmListToUI();
    /**
     * Set Error Threshhold value to default {massErrorthVal}
     */
    let UIHelperObj = new UIHelper();
    UIHelperObj.setMassErrorValue(massErrorthVal);
    /**
     * On Change Event handler. Changes the thresholds values from
     * from {massErrorthVal} to {ppmErrorthVal}
     */
    $('#error_dropdown').change(function(){
        let errorType = $("#error_dropdown").val();
        if(errorType == "masserror")
        {
            $("#errorval").val(massErrorthVal);
            $("#errorunit").html("Da  ");
        }
        else
        {
            $("#errorval").val(ppmErrorthVal);
            $("#errorunit").html("ppm  ");
        }
    });
    /**
     * On Click Event handler. Gets invoked on click of submit button
     * in HTML
     */
    $("#submit").click(function(){
        let errorVal ;
        let errorType = $("#error_dropdown").val();
        if(errorType == "masserror") {
            errorVal = parseFloat($("#errorval").val().trim());
            massErrorthVal = errorVal ;
        }
        else {
            errorVal = parseFloat($("#errorval").val().trim());
            ppmErrorthVal = errorVal ;
        }
        let executionObj = new SeqOfExecution();
        executionObj.sequenceOfExecution(errorType,errorVal,"");
        document.getElementById("totalseqmass_h6").style.display = "block";
        document.getElementById("massvariation_h6").style.display = "block";
    })
    /**
     * On Click action to hide and show the table of calculate theoretical
     * masses with matched and unmatched masses
     */
    $("#hide_table").click(function(){
        let text_val = $("#hide_table").html().trim();
        if( text_val == "Hide Table"){
            $("#hide_table").html("Show Table");
            $("#divtableContainer").hide();
        }
        if(text_val == "Show Table")
        {
            $("#hide_table").html("Hide Table");
            $("#divtableContainer").show();
        }
    })
}
/**
 * @function showAllPeaks
 * @description Function to display all peaks of data in table. This handles on click action
 * from html of show all peaks button.
 */
showAllPeaks = function()
{
	var elems = document.getElementsByClassName('matched_peak');
	for(var i = 0; elems.length > i; i++) {
		elems[i].style.display = '';
	}
	elems = document.getElementsByClassName('unmatched_peak');
	for(var i = 0; elems.length > i; i++) {
	elems[i].style.display = '';
	}
	$('div.dataTables_scrollBody').height(400);
}
/**
 * @function showMatchedPeaks
 * @description Function to display only matched peaks in table. This handles on click action 
 * from html of show matched peaks button.
 */
showMatchedPeaks = function()
{
	var elems = document.getElementsByClassName("matched_peak");
	for(var i = 0; elems.length > i; i++) {
		elems[i].style.display = "";
	}
	elems = document.getElementsByClassName("unmatched_peak");
	for(var i = 0; elems.length > i; i++) {
		elems[i].style.display = "none";
	}
	$('div.dataTables_scrollBody').height(400);
}
/**
 * @function showNonMatchedPeaks
 * @description Function to display only un matched peaks in table. This handles on click action
 * from html of show un matched peaks button.
 */
showNonMatchedPeaks = function() 
{
	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 = "";
	}
	$('div.dataTables_scrollBody').height(400);
}
/**
 * Function to show only matched on unmatched peaks on click of matched or unmatched peak buttons
 * @param {String} ids - Contains Ids of respective matched peaks or un matched peaks
 */
function showIonPeaks(ids) {
	console.log("ids : ", 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";
	    }
}