Source: protein.js

/**
 * Build Title,Description,URL and get best prsm for each proteoform 
 * @param {String} folderpath - Provides path to the data folder
 */
function protein(folderpath){
	// Generate title for the webpage from the data
	document.title = "Proteoforms for protein " + prsm_data.protein.sequence_name + " "+ prsm_data.protein.sequence_description;
	// Generate description of the protein from the data
	document.getElementById('sequence_description').innerHTML = prsm_data.protein.compatible_proteoform_number+" proteoforms for protein "
																+ prsm_data.protein.sequence_name + " "+ prsm_data.protein.sequence_description; 
	// Check if protein has multiple proteoforms															
	if(Array.isArray(prsm_data.protein.compatible_proteoform))
	{
		prsm_data.protein.compatible_proteoform.forEach(function(compatible_proteoform,index){
			proteoformToHtml(compatible_proteoform,index,folderpath);
		})
	}
	else
	{
		proteoformToHtml(prsm_data.protein.compatible_proteoform,0,folderpath);
	}
}
/**
 * This function builds a header for a proteoform, gets information of best prsm.
 * Forms SVG visualization of the best prsm.
 * @param {object} compatible_proteoform - Contains information of a single proteoform 
 * @param {Int} index - Index of proteoform
 * @param {String} folderpath - Provides path to data files
 */
function proteoformToHtml(compatible_proteoform,index,folderpath)
{
	// Get the div element with class name proteoformcontainer
	// All the details of a each proteoform is under the proteoformcontainer div
	var div_container = document.getElementsByClassName("proteoformcontainer")[0];
	var div = document.createElement('div');
	let id = "p"+ compatible_proteoform.proteoform_id;
	div.setAttribute("id",id);
	var h2 = document.createElement('h3');
	let p = document.createElement("p");
	let e_value;
	let BestPrSM ;
	if(compatible_proteoform.prsm.length > 0)
	{
		// Forms header for a proteoform
		h2.innerHTML = "Proteoform #" + compatible_proteoform.proteoform_id + " Feature intensity: "
						+ compatible_proteoform.prsm[0].ms.ms_header.feature_inte;
		let precursor_mass;
		let prsm_id ;
		// Gets Best prsm with low e value
		[e_value,precursor_mass,prsm_id] = getBestPrsm(compatible_proteoform.prsm);
		p = Build_BestPrSM(e_value,precursor_mass,prsm_id,compatible_proteoform.proteoform_id, compatible_proteoform.prsm.length,folderpath);
		for(let i = 0; i< compatible_proteoform.prsm.length ; i++)
		{
			if(prsm_id == compatible_proteoform.prsm[i].prsm_id)
			{
				BestPrSM = compatible_proteoform.prsm[i] ;
				break;
			}
		}
	}
	else
	{
		// Forms header for a proteoform
		h2.innerHTML = "Proteoform #" + compatible_proteoform.proteoform_id + " Feature intensity: "
										+ compatible_proteoform.prsm.ms.ms_header.feature_inte;
		p.setAttribute("style","font-size:16px;");
		let text1 = document.createElement("text");
		text1.innerHTML = "There is only ";
		p.appendChild(text1);
		let a_prsm = document.createElement("a");
		a_prsm.href = "prsm.html?folder="+folderpath+"&prsm_id="+compatible_proteoform.prsm.prsm_id;
		a_prsm.innerHTML = " 1 PrSM ";
		p.appendChild(a_prsm);
		let text2 = document.createElement("text");
		text2.innerHTML = "with an E-value "+compatible_proteoform.prsm.e_value +" and a precursor mass "+
							compatible_proteoform.prsm.ms.ms_header.precursor_mono_mass +".";
		p.appendChild(text2);
		e_value = compatible_proteoform.prsm.e_value ;
		BestPrSM = compatible_proteoform.prsm ;
	}
	div_container.appendChild(div);
	div_container.appendChild(h2);
	div_container.appendChild(p);
	
	let Svg_id = "svgContainer" + index;
	let svgContainer = document.createElement("div");
	svgContainer.setAttribute("id",Svg_id);
	svgContainer.setAttribute("class","svgContainer");
	div_container.appendChild(svgContainer);
	id = "l_svg"+ index;
	l_svgContainer = d3.select("#"+Svg_id).append("svg")
									.attr("id",id);
	let para  = new parameters();
	// Function to draw SVG visualization 
	[para,id] = buildSvg(para,BestPrSM,id);

	// Get the amount of skipped acid and write the amount 
	// of skipped acid at the start and end of the sequence 
	skippedAcidNotification(para,BestPrSM,id) ;
	if(para.show_num)
	{
		// Get the numerical count at the start enad end of
		// each row of sequence
		getNumValues(para,BestPrSM,id);
	}
	// Determine the start and end position of the sequence
	drawAnnoOfStartEndPosition(para,BestPrSM,id) ;
	//	Get the position of the fixed ptms and color them to red
	addColorToFixedPtms(BestPrSM,id);
	//	Color the background of occurence of mass shift
	massShiftBackgroundColor(para,BestPrSM,id);
}
/**
 * Get "precursor mass","prsm Id" and least "e value" for each proteoform
 * @param {object} prsm - COntains information of the prsms of a proteoform
 */
function getBestPrsm(prsm)
{
	let e_value = " " ;
	let precursor_mass = " " ;
	let prsm_id = "";
	let temp = parseFloat(prsm[0].e_value);
	e_value = prsm[0].e_value;
	precursor_mass = prsm[0].ms.ms_header.precursor_mono_mass;
	prsm_id = prsm[0].prsm_id;
	for(let i = 1 ; i < (prsm.length) ; i++)
	{
		if(temp >= parseFloat(prsm[i].e_value))
		{
			temp = parseFloat(prsm[i].e_value)
			e_value = prsm[i].e_value;
			precursor_mass = prsm[i].ms.ms_header.precursor_mono_mass;
			prsm_id = prsm[i].prsm_id;
		}
	}
	return [e_value,precursor_mass,prsm_id];
}

/**
 * Create HTML URL link to navigate to best prsm and to navigae to proteoform page
 * @param {Float} e_value - Contains e value of the best prsm
 * @param {Float} precursor_mass - Contains precursor mass of the best prsm
 * @param {Int} prsm_id - Contains the best prsm id
 * @param {Int} proteoform_id - Contains the proteoform Id
 * @param {Int} PrSM_Count - Contians numbe rof prsms for a proteoform
 * @param {String} folderpath - Contains path to the data folder
 */
function Build_BestPrSM(e_value,precursor_mass,prsm_id,proteoform_id, PrSM_Count,folderpath )
{
	let p = document.createElement("p");
	p.setAttribute("style","font-size:16px;");
	let text1 = document.createElement("text");
	text1.innerHTML = "The ";
	p.appendChild(text1);
	let a_prsm = document.createElement("a");
	a_prsm.href = "prsm.html?folder="+folderpath+"&prsm_id="+prsm_id;
	a_prsm.innerHTML = " best PrSM ";
	p.appendChild(a_prsm);
	let text2 = document.createElement("text");
	text2.innerHTML = "has an E-value "+e_value+" and a precursor mass "+precursor_mass+". There are ";
	p.appendChild(text2);
	let a_proteoform = document.createElement("a");
	a_proteoform.href = "proteoform.html?folder="+folderpath+"&proteoform_id=" + proteoform_id;
	a_proteoform.innerHTML = PrSM_Count + " PrSMs ";
	p.appendChild(a_proteoform);
	let text3 = document.createElement("text");
	text3.innerHTML = "in total.";
	p.appendChild(text3);
	return p ;
}