https://cravat.us/CRAVAT/js/allele_frequency.js

1function Allele_Frequency() {
2
3//	freq_box is the box ranging from 0-1 that will hold the bar showing the allele frequency
4//	freq_bar is the small vertical bar positioned on the freq_box to show the allele frequency
5	
6	var jobInfo = infomgr.getJobInfo();
7	
8	var cutoff = 0.01;
9	
10	var allele_frequencies_map_config = new Object();
11	
12	function construct_allele_frequencies_map_config(div, allele_freq, tabName){
13		
14//		Make the span that will be used later for hovering!!!
15		var id_for_hover_span = String(div.id) + "_span_hover";
16		var span_fill_1 = "Range: 0-1";
17		var span_fill_2 = "Allele Frequency: "+allele_freq;
18		var span_for_hover = constructSpanForHoveringOverFreq(id_for_hover_span, span_fill_1, span_fill_2);
19		div.appendChild(span_for_hover);
20		
21		
22//		So the canvas is taking up the entire div
23		var full_canvas_width = $(div).width();
24		var canvas_height = 40;
25		
26	//	set height of div to the height of the canvas
27		$(div).height(canvas_height);
28		
29//		Set the position to relative!
30//		$(div).css("position", "relative");
31		
32		var freq_box_height = 12;
33		
34		var freq_bar_overHang_top_bottom = 3;		//This variable is there because the frequency bar will overhang the fequency box on the top and bottom
35		var freq_bar_width = 1;
36		var freq_bar_height = freq_box_height + (2*freq_bar_overHang_top_bottom);
37
38		var round_edge_box = 4;
39		var round_edge_bar = 1;
40		
41		var blank_to_left_and_right = 20;
42		var blank_top = freq_bar_overHang_top_bottom;
43
44		var box_fill = null;
45		var box_stroke = null;
46		var bar_fill = null;
47		var bar_stroke = null;
48		
49		if (jobInfo['inputcoordinate'] == 'transcript') {
50			box_fill = grayedColor;
51			box_stroke = grayedColor;
52			bar_fill = grayedColor;
53			bar_stroke = grayedColor;
54		} else {
55			if (allele_freq < 0.01){
56				box_fill = "0-white:10-#708090";		//#708090 is slate grey
57				box_stroke = "black";
58				bar_fill = "black";
59				bar_stroke = "black";				
60			} else{
61				box_fill = "0-white:10-red";
62				box_stroke = "black";
63				bar_fill = "black";
64				bar_stroke = "black";			
65			}
66		}
67		
68		var freq_box_width = full_canvas_width - (2*blank_to_left_and_right);
69		
70		allele_frequencies_map_config["tabName"] = tabName;
71		allele_frequencies_map_config["paper"] = Raphael(div, full_canvas_width, canvas_height);
72		allele_frequencies_map_config["div"] = div;
73		allele_frequencies_map_config["span"] = span_for_hover;
74		allele_frequencies_map_config["full_freq_box"] = freq_box_width;
75		allele_frequencies_map_config["blank_left"] = blank_to_left_and_right;
76		allele_frequencies_map_config["blank_top"] = blank_top;
77		allele_frequencies_map_config["size_color"] = {
78				"box": {
79					"top": freq_bar_overHang_top_bottom,
80					"height": freq_box_height,
81					"width": freq_box_width,
82					"fill": box_fill,
83					"stroke": box_stroke,
84					"round_edge": round_edge_box
85				},
86				"bar":{
87					"top": 0,
88					"height": freq_bar_height,
89					"width": freq_bar_width,
90					"fill": bar_fill,
91					"stroke": bar_stroke,
92					"round_edge": round_edge_bar
93				}
94		};
95	}
96	
97	function drawAlleleFrequencyPiece(type, freq_screen_pos, allele_freq){
98		
99		var blank_on_left = allele_frequencies_map_config["blank_left"];
100		var blank_top = allele_frequencies_map_config["blank_top"];
101		
102		var configs = allele_frequencies_map_config["size_color"][type];
103		
104		var top = configs["top"] + blank_top;
105		var width = configs["width"];
106		var height = configs["height"];
107		var fill = configs["fill"];
108		var stroke = configs["stroke"];
109		var round_edge = configs["round_edge"];
110		
111		var left = blank_on_left + freq_screen_pos;
112		if (type == "bar"){
113			left = left - (width/2);
114		} 
115		
116		var freq_piece = allele_frequencies_map_config["paper"].rect(left, top, width, height, round_edge);
117	
118		addAttributeToRaphael(freq_piece, fill, stroke);
119		
120		if (type == "bar"){
121			var text = allele_frequencies_map_config["paper"].text(left, 17, allele_freq);
122			if (allele_freq >= cutoff) {
123				text.attr({fill: 'red'});
124			}			
125		} else{
126			mouseOverMouseOutForAlleleFreqBox(freq_piece, allele_frequencies_map_config["span"]);
127		}
128		
129	}
130	
131	function addAttributeToRaphael(element, fill, stroke){
132		element.attr("fill", fill);
133		element.attr("stroke", stroke);	
134	}
135
136	//============================================================================================================================================================================	
137	function constructSpanForHoveringOverFreq(id, span_fill_1, span_fill_2){
138		
139		var span = document.createElement("span");
140		span.id = id;
141		span.style.width = 150;
142		span.style.height = 30;
143		span.style.position = "absolute";
144		span.style.border = "1px solid #708090";
145		span.style.borderRadius = "5px";
146		span.style.paddingTop = "1px";
147		span.style.paddingBottom = "1px";
148		span.style.paddingRight = "2px";
149		span.style.paddingLeft = "2px";
150		span.style.backgroundColor = "white";
151		span.style.zIndex = "99";
152		span.style.fontFamily = "roboto";
153		span.style.fontSize = "12px";
154		span.style.display = "none";
155		
156		var text_1 = document.createTextNode(span_fill_1);
157		span.appendChild(text_1);
158		
159		var br = document.createElement("br");
160		span.appendChild(br);
161		

162		var text_2 = document.createTextNode(span_fill_2);
163		span.appendChild(text_2);
164		
165
166		return span;
167		
168	}
169	
170	
171	//============================================================================================================================================================================	
172	function mouseOverMouseOutForAlleleFreqBox(raphaelElement, dom_element){
173
174		raphaelElement.mousemove(function(event){
175			var mouse_pos_x = event.pageX;
176			var mouse_pos_y = event.pageY;
177			
178			var span_width = dom_element.style.width;
179			span_width = span_width.substring(0 ,span_width.length - 2);
180			span_width = parseInt(span_width, 10);
181			
182			
183			var span_height = dom_element.style.height;
184			span_height = span_height.substring(0 ,span_height.length - 2);
185			span_height = parseInt(span_height, 10);
186						
187			dom_element.style.left = mouse_pos_x - span_width - 6;
188			dom_element.style.top = mouse_pos_y - span_height - 6;
189			
190			dom_element.style.display = "block";
191		});
192		
193		raphaelElement.mouseout(function(){;
194			dom_element.style.display = "none";
195		});		
196		
197	}
198	
199	
200	
201	//============================================================================================================================================================================	
202	function organizeConstructionAlleleFrequenciesMap(div, allele_freq, show_annotation, tabName){
203		
204		construct_allele_frequencies_map_config(div, allele_freq.toFixed(6), tabName);
205		
206		var allele_freq_screen_pos = frequencyScreenConversion(allele_freq.toFixed(5));
207		drawAlleleFrequencyPiece("box", 0, 0);
208		drawAlleleFrequencyPiece("bar", allele_freq_screen_pos, allele_freq.toFixed(5));
209		
210		
211	}
212	
213	
214	function frequencyScreenConversion(freq_value){
215		
216		var freq_screen_pos = null;
217		
218		var full_freq_bar_length = allele_frequencies_map_config["full_freq_box"];
219		freq_screen_pos = full_freq_bar_length * freq_value;
220		
221		return freq_screen_pos;
222	}
223	
224	
225//	This is how this class is originally called from job_details.js
226	Allele_Frequency.prototype.getAlleleFrequencies = function (div, allele_freq, show_annotation, tabName){
227//TODO
228//		If the allele_freq ever in null then you are setting it as 0.
229//		Think about this
230		if (allele_freq == null || allele_freq == '') {
231			allele_freq = 0;
232		}
233		organizeConstructionAlleleFrequenciesMap(div, allele_freq, show_annotation, tabName);
234		
235	};
236}