Source: multiscan.js

/** 
 * @description 
 * This class contains functions to load data of all the spectrums ms1, ms2 with multiple scans.
 * This calss generates navigation elements to navigate between different spectrums
 */
class MultiScan{
    constructor(){
    }
    /**
     * @function
     * @description - This function waits till all the data of multiple spectrums are 
     * loaded and then generates navigation tabs to switch between spectrums 
     * @param {Array} specidList - Contains all the spec ids
     * @param {Array} scanIdList - Contains all the scan ids
     * @param {String} ms1_ms2_json - Contains the folder name
     */
    promiseLoadDataJS(specidList,scanIdList,ms1_ms2_json){
        let len = specidList.length;
        let scanListWithData = [];
        let count = 0;
        // get the list of lists with scan Id and value
        specidList.forEach(function(element,i){
            let temp_filename = "../../topfd/"+ms1_ms2_json+"/spectrum"+element+".js";
            let temp_script= document.createElement('script');
            temp_script.src = temp_filename;
            document.head.appendChild(temp_script);
            temp_script.onload = function(){
                let temp_scanid ;
                let temp_value ;
                if(ms1_ms2_json == "ms1_json")
                {
                    temp_scanid = ms1_data.scan;
                    temp_value = ms1_data;
                }else{
                    temp_scanid = ms2_data.scan;
                    temp_value = ms2_data;
                }
                let temp_ms2DataObj = {"scanId":temp_scanid,"specId":element,"value":temp_value};
                scanListWithData.push(temp_ms2DataObj);
                count++;
                // This comparison help to call the generate graph function after loading the data completely
                // As data loading is an asynchronous process, we need to wait till all the data is loaded to execute the below functions
                if(count == len)
                {
                    let MultiScanObj = new MultiScan();
                    let current_data ;
                    let specId;
                    if(ms1_ms2_json == "ms1_json")
                    {
                        // Setting data to MS1 global variable
                        ms1_ScansWithData = scanListWithData;
                        MultiScanObj.createMs1NavEements(scanIdList,"popupspectrum");
                        let prec_mz = prsm_data.prsm.ms.ms_header.precursor_mz;
                        document.getElementById("popup_dataLoading").remove(); 
                        generateCorrespondingGraph(ms1_ScansWithData[0].value,"popupspectrum",prec_mz,specId);
                    }
                    else{
                        [current_data,specId] = getCurrentData(scanListWithData,scanIdList[0]);
                        // Setting data to MS2 global variable
                        ms2_ScansWithData = scanListWithData;
                        MultiScanObj.createMs2NavEements(scanIdList,"ms2_graph_nav");
                        document.getElementById("dataLoading").remove();
                        createMultipleSvgs("ms2svg_div","ms2svg_","ms2_svg_graph_class",ms2_ScansWithData);
                    }
                    // Set on click actions once tabs to naviage between spectrums are created
                    graphOnClickActions();
                }
            }
        });
    }
    /**
     * Function to get unique list of scan Ids
     * @param {Array} MultiScanList - Contains list of scan ids
     */
    getUniqueScanIdList(MultiScanList){
        let uniqueList = [];
        let uniqueIdSet = new Set();
        MultiScanList.forEach(function(element){
            uniqueIdSet.add(element);
        });
        //spread operator converts array to list
        uniqueList = [...uniqueIdSet];
        return uniqueList ;
    }
    /**
     * Function to Create Navigation buttons to navigate between spectrums
     * @param {Array} scanidList - Contains scan Id List
     * @param {String} id - Contains Id of the avg on which spectrum to be drawn
     */
    createMs2NavEements(scanidList,id){
        let _ul = document.getElementById(id);
        scanidList.forEach(function(element,i){
            let li = document.createElement("li");
            li.setAttribute("class","nav-item");
            let li_id = id+"_"+element;
            li.setAttribute("id",li_id);
            let a = document.createElement("a");
            a.setAttribute("class","nav-link ms2_scanIds");
            if(i == 0)
            {
                a.setAttribute("class","nav-link ms2_scanIds active");
            }
            a.setAttribute("href","#!");
            a.setAttribute("value",element);
            a.innerHTML = "Scan "+ element;
            li.appendChild(a);
            _ul.appendChild(li);
         })
    }
    // /**
    //  * 
    //  * @param {*} scanidList 
    //  * @param {*} id 
    //  */
    // createMs2PopUpNavEements(scanidList,id){
    //     let _ul = document.getElementById(id);
    //     scanidList.forEach(function(element,i){
    //         let li = document.createElement("li");
    //         li.setAttribute("class","nav-item");
    //         let li_id = id+"_"+element;
    //         li.setAttribute("id",li_id);
    //         let a = document.createElement("a");
    //         a.setAttribute("class","nav-link ms2_popup_scanIds");
    //         let a_id = "ms2_popup_scanIds_"+element;
    //         a.setAttribute("id",a_id);
    //         if(i == 0)
    //         {
    //             a.setAttribute("class","nav-link ms2_popup_scanIds active");
    //         }
    //         a.setAttribute("href","#!");
    //         a.setAttribute("value",element);
    //         a.innerHTML = "Scan "+ element;
    //         li.appendChild(a);
    //         _ul.appendChild(li);
    //      })
    // }
    /**
     * Function to Create Navigation buttons for Ms1 Spectrum with spec Id information
     * @param {Array} element - Contains Scan Id List
     * @param {String} id - Contains SVG id of the MS1 spectrum to be drawn
     */
    createMs1NavEements(element,id){
        let _ul = document.getElementById("ms1_graph_nav");
        let li = document.createElement("li");
        li.setAttribute("class","nav-item");
        let a = document.createElement("a");
        a.setAttribute("class","nav-link ms1_scanIds active");
        a.setAttribute("href","#!");
        a.setAttribute("value",element);
        a.innerHTML = "Scan "+ element;
        li.appendChild(a);
        _ul.appendChild(li);
    }
    /**
     * Function to Create Navigation buttons for MonoMass Spectrum for multiple spec Id information
     * @param {Array} scanidList - List with Scan Ids
     * @param {String} id - Contians SVG tag id on which the monomass spectrum graph needs to be drawn
     */
    createMonoMassNavEements(scanidList,id){
        let _ul = document.getElementById(id);
        scanidList.forEach(function(element,i){
            let li = document.createElement("li");
            li.setAttribute("class","nav-item");
            let li_id = id+"_"+element;
            li.setAttribute("id",li_id);
            let a = document.createElement("a");
            a.setAttribute("class","nav-link monoMass_scanIds");
            if(i == 0)
            {
                a.setAttribute("class","nav-link monoMass_scanIds active");
            }
            a.setAttribute("href","#!");
            a.setAttribute("value",element);
            a.innerHTML = "Scan "+ element;
            li.appendChild(a);
            _ul.appendChild(li);
         })
    }
} 
/**
 * Function return data of particular Scan number
 * @param {Array} dataList - Contains data of all the scans
 * @param {int} scanId - Contains scan id of the spectrum
 */
function getCurrentData(dataList,scanId){
    let current_data;
    let len = dataList.length;
    let specId;
    for(let i=0;i<len;i++)
    {
        if(dataList[i].scanId == parseInt(scanId))
        {
            current_data = dataList[i].value;
            specId = dataList[i].specId;
            break;
        }
    }
    return [current_data,specId];
}
/**
 * Function highlights the active spectrum on clcik of the scan number
 * @param {String} id - Contains id of the SVG tag  
 * @param {int} currentValue - Contains scan number
 */
function activateCurrentnavbar(id,currentValue){
    let childs = $("#"+id).children();
    let len = childs.length;
    for(let i=0;i<len;i++)
    {
        let grandchildValue = $(childs[i]).children().attr('value');
        if(grandchildValue == currentValue)
        {
            $("#"+id+" .active").removeClass("active");
            $(childs[i]).children().addClass("active");
            break;
        }
    }
}