Merge branch 'dev-Pierre' into 'dev'

Front end (plotly option; tooltip; phenotypes boxes)

See merge request !26

jass/static/chromo_heatmap_manhattan.html

@@ -60,6 +60,9 @@
 	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
     <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
 
+	<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+	<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+
 
    <style>
 	.header {
@@ -93,6 +96,10 @@
 	</div>
 	
 	<center><p>Click on any point to zoom in and obtain the distribution of Zscore for single GWAS</p></center>
+	<select class="phenotypeOpts"  multiple="multiple" style="width: 100%"> 	
+		<optgroup label="Phenotypes"> 
+		</optgroup> 
+	</select>
 
 	<div id ="summaryStat" hidden="true"><button id="exportGlobal" >Export Region Results</button>
 			<button id="exportCsv">Export All SNP Results</button>
@@ -179,8 +186,11 @@
 			PhenotypesDict = JSON.parse(phe);
 			phenotypesCount =PhenotypesDict.length;
 			
-			console.log("phe =" + phe);
-			console.log(PhenotypesDict+" "+phenotypesCount);
+			//console.log("phe =" + phe);
+			//console.log(PhenotypesDict);//+" "+phenotypesCount);
+			
+			
+			
   			console.log("width "+$(window).width());
 			
 			plotSize =  $(window).width();
@@ -223,6 +233,28 @@
 			
 			heatColors.appendChild(fragmentHeat);
 			
+			// add phenotypes boxes view
+			let optsPheno =[];
+			PhenotypesDict.forEach(function(pheno) {
+				console.log(pheno);
+				let opt = document.createElement('option');
+				opt.append( document.createTextNode(pheno.id) );
+				opt.value = pheno; 
+				opt.disabled="disabled";
+				let sel = $('.phenotypeOpts');
+
+				sel.append(opt); 
+				optsPheno.push(pheno);
+			});
+			$('.phenotypeOpts').val(optsPheno);
+			var phenoSelect = $('.phenotypeOpts').select2();
+			$('.phenotypeOpts').on('select2:unselecting', function(event) {
+					event.preventDefault();
+			});
+			$('.phenotypeOpts').off('select2:select');
+			
+			
+			
 
 			makeplot();
 			
@@ -310,6 +342,25 @@
 			return rows.map(function(row) { return -Math.log10(row[key]); });
 		}
 
+// ---------------------------------------------------------------------------------------------------------------------------
+
+		function unpackPos(rows, key) {
+ 			return rows.map(function(row) { return row[key]/1000000; });
+ 		}
+		 function unpackText(rows) {
+ 			return rows.map(function(row) { 
+				
+				let rsid = row['snp_ids'];
+				let pos = row['MiddlePosition']/1000000;
+				let chr = row['CHR'];
+				let pval = row['JOSTmin'];
+				let text = 'rsid: '+rsid+'<br>'+'pos: '+chr+':'+pos.toFixed(2)+'<br>-log(Pvalue): '+pval+'<extra></extra>';
+				return text;
+				
+			});
+ 		}
+
+
 // ---------------------------------------------------------------------------------------------------------------------------
 
 		function processDataJOSTmin(rows) {
@@ -333,7 +384,13 @@
 						name: chr,
 						x: unpack(rowsFiltered, 'Region'),
 						y: unpackLog(rowsFiltered, 'JOSTmin'),
-						text: unpack(rowsFiltered, 'MiddlePosition'),
+						
+						//text: unpackPos(rowsFiltered, 'MiddlePosition'),
+						text: unpackText(rowsFiltered),
+						
+						
+						//hovertemplate: 'rsid:%{text2}<br>chr:%{x}'+chr+':%{text:.2f}<br>-log(Pvalue):%{y}<extra></extra>',
+						hovertemplate: '%{text}',
 						mode: 'markers',
 						showlegend : false,
 						type:'scatter',
@@ -452,18 +509,7 @@
 			};
 			
 			Plotly.setPlotConfig({
-				modeBarButtonsToRemove: [
-					'zoom2d',
-					'pan2d',
-					'select2d',
-					'lasso2d',
-					'zoomIn2d',
-					'zoomOut2d',
-					'autoScale2d',
-					'resetScale2d',
-					'hoverClosestCartesian',
-					'hoverCompareCartesian'
-				],
+				displayModeBar: false,
 				displaylogo: false
 			});