Javascript heat-map

fullscreen

taendo

Rating

useful

Application

Play
JavaScript
CSS
HTML
ReadMe
Snapshots

if(typeof Example==="undefined"||!Example){var Example = {};}
if (typeof tkjs === 'undefined' || !tkjs) {var tkjs = {};}
if (typeof tkjs.heatmap === 'undefined' || !tkjs.heatmap) {tkjs.heatmap = {};}
if (typeof tkjs.heatmap.view === 'undefined' || !tkjs.heatmap.view) {tkjs.heatmap.view = {};}

// LinkData.getObjects(workId, fileId, sbjId, propId)
tkjs.heatmap.load_linkdata = function() {
	var prop, work, works, workId, filename, filenames, fileId, subjects, subject, subjectId, property, properties, propertyId, row, col, rows, cols, line, header, genelist, samplelist, cell, i, j, genes, values, hm, prop2, samples;
	works = LinkData.getWorks();
	console.log("HANDLING SUCKING LINKDATA");
	console.log("works=" + works);
	console.log(typeof(works));
	hm = null;
	for (prop in works) {
		if (works.hasOwnProperty(prop)) {
			console.log(works[prop]);
			workId = works[prop];
			console.log('workId = ' + workId);
			filenames = LinkData.getFiles(workId);
			console.log('filenames = ' + filenames);
			console.log(typeof(filenames));
			console.log(filenames[0]);
			filename = filenames[0];
			properties = LinkData.getProperties(workId, filename);
			subjects = LinkData.getSubjects(workId, filename);
//			console.log("properties : " + (typeof properties))
			//console.log(properties);
//			console.log("subjects : " + (typeof subjects));
//			console.log(subjects);
			cols = properties.length - 1;
			rows = subjects.length;
			genes = [];
			property = properties[0];
			for (i = 0; i < subjects.length; i++) {
				cell = LinkData.getObjects(workId, filename, subjects[i], property);
				genes.push(cell.toString().split(',')[0]);
			}
			samples = [];
			for (i = 2; i < properties.length; i++) {
				property = properties[i].toString().split('#');
				samples.push(property[property.length - 1]);
			}
			console.log(samples);
			//console.log(
//			console.log(tkjs.heatmap.HeatMap);
			hm = new tkjs.heatmap.HeatMap(genes);
			hm.set_color_scale(4.0);
			for (i = 0; i < samples.length; i++) {
				values = [];
				for (j = 0; j < subjects.length; j++) {
					cell = parseFloat(LinkData.getObjects(workId, filename, subjects[j], properties[i + 2]).toString());
					values.push(cell);
				}
				hm.set_array(samples[i], new Float32Array(values));
				console.log(samples[i] + " : " + values);
			}
//			for (i = 0; i < properties.
//			hm.set_array(
			for (i = 0; i < subjects.length; i++) {
				line = "";
				for (j = 0; j < properties.length; j++) {
					cell = LinkData.getObjects(workId, filename, subjects[i], properties[j]);
					if (j === 0) {
						line = cell;
					} else {
						line += ", " + parseFloat(cell).toFixed(2);
					}
				}
				console.log(line);
			if (i >= 10) { break;}
			}			
			break;
		}
	}
	console.log("BYE SUCKING LINKDATA");
	return hm;
};

Example.getWorks = function() {
	return LinkData.getWorks();
};
Example.getFiles = function(workId) {
	return LinkData.getFiles(workId);
};
Example.getSubjects = function(workId, fileName) {
	return LinkData.getSubjects(workId, fileName);
};
Example.getProperties = function(workId, fileName) {
	return LinkData.getProperties(workId, fileName);
};
Example.getObjects = function(workId, fileName, subject, property) {
	return LinkData.getObjects(workId, fileName, subject, property);
};

// slider and events
    var selem = $("#slider");
    selem.slider({orientation:"vertical",
		  range:true,min:0,max:100,values:[0,100],
		  slide:tkjs.heatmap.change_view});
    $("#graph").bind('mousedown', tkjs.heatmap.startdrag);
    $("#graph").bind('mousemove', tkjs.heatmap.drag);
    document.addEventListener('mouseup', tkjs.heatmap.enddrag);

/*
    if (typeof(inserted_data) !== 'undefined' 
		&& inserted_data.genes.length > 1
		&& Math.abs(parseFloat(inserted_data.scale)) >= 1.0 
		&& inserted_data.columns.length > 1
		&& inserted_data.data.length > 5) {
		if (typeof(inserted_data.code) !== 'undefined' && inserted_data.length >= 10) {
			tkjs.heatmap.code_string = inserted_data.code;
		}
		var hm = tkjs.heatmap.HeatMap.load_data(inserted_data);
		tkjs.heatmap.set_heatmap(hm);
		selem.slider({values:hm.get_view_range()});
	} else {
//	console.log("dummy data");
		tkjs.heatmap.set_heatmap(tkjs.heatmap.HeatMap.create_dummy());
	}
*/
    // generate legend box
    $('#legend').draggable({'containment':'parent'}).css("z-index", 2000);

document.body.onmousewheel = tkjs.heatmap.scroll_view;
//    document.getElementById("container").add
};

tkjs.__Environment = function() {
	var i;
    this.browser = navigator.userAgent;
    this.platform = navigator.platform;
    if ( navigator.platform.indexOf("Win") >= 0) {
	this.os = "Windows";
    } else if ( navigator.platform.indexOf("Linux") >= 0 ) {
	this.os = "Linux";
    } else if ( navigator.platform.indexOf("BSD") >= 0 ) {
	this.os = "BSD";
    } else if ( navigator.platform.indexOf("MacIntel") >= 0 ) {
	this.os = "Intel Mac";
    } else if ( navigator.platform.indexOf("Mac") >= 0 ) {
	this.os = "Mac";
    }

try {
	$.ajax({type:"GET", url:"js/tklib.js", dataType:"javascript", async:false,
		success:function(data, dataType) {
		    //		debug("successful loading " + data.length);
		    if (data.length > 10) {
			tkjs.__Environment.__supports_get = true;
		    } else {
			tkjs.__Environment.__supports_get = false;
		    }
	    },
		error:function(){
		    tkjs.__Environment.__supports_get = false;
		}
	       });
	tkjs.__Environment.__supports_jquery = true;
    } catch (e) {
	tkjs.__Environment.__supports_jquery = false;
	tkjs.__Environment.__supports_get = false;
    }

try {
	var canvas = document.createElement("canvas");
	var ctx = null;
	var children = document.childNodes;
	var parent = null;
	for (i = 0; i < children.length; i++ ) {
	    if ( children[i].nodeType === 1 ) { // element
		parent = children[i];
		break;
	    }
	}
	if ( parent) {
	    parent.appendChild(canvas);
	    ctx = canvas.getContext("2d");
	    ctx.fillText("test", 0, 0);
	    this.__supports_canvas = true;
	    parent.removeChild(canvas);	
	} else {
	    this.__supports_canvas = false;
	}
    } catch (e1) {
	this.__supports_canvas = false;
    }

this.__supports_console = this.browser.indexOf("WebKit") >= 0;

this.supports_canvas = function() {
	return this.__supports_canvas;
    };

this.supports_jquery_get = function() {
	return tkjs.__Environment.__supports_get;
    };

this.supports_console = function() {
	return this.__supports_console;
    };

this.toString = function() {
	var contents = "";
	contents += "Browser : " + this.browser + "\n";
	contents += "Platform : " + this.platform + ", ";
	contents += "OS : " + this.os + ", ";
	contents += "Cnavas : " + (this.supports_canvas() ? "YES" : "NO");
	contents += ", Get : " + (this.supports_jquery_get() ? "YES" : "NO") + "\n";
	return contents;
    };
};
tkjs.__Environment.__supports_get = false;
tkjs.environment = new tkjs.__Environment();

if (!tax_id) {var tax_id = 10090;}

var counter = 0;

tkjs.heatmap.apikey = '89bf333c92ac9220c5f0f36527fbe786';

//// initialize heatmap using variable inserted_data.
function initialize() {
	console.log("initialized 150");
    // slider and events
    var selem = $("#slider");
    selem.slider({orientation:"vertical",
		  range:true,min:0,max:100,values:[0,100],
		  slide:tkjs.heatmap.change_view});
    $("#graph").bind('mousedown', tkjs.heatmap.startdrag);
    $("#graph").bind('mousemove', tkjs.heatmap.drag);
    document.addEventListener('mouseup', tkjs.heatmap.enddrag);

if (typeof(inserted_data) !== 'undefined' 
		&& inserted_data.genes.length > 1
		&& Math.abs(parseFloat(inserted_data.scale)) >= 1.0 
		&& inserted_data.columns.length > 1
		&& inserted_data.data.length > 5) {
		if (typeof(inserted_data.code) !== 'undefined' && inserted_data.length >= 10) {
			tkjs.heatmap.code_string = inserted_data.code;
		}
		var hm = tkjs.heatmap.HeatMap.load_data(inserted_data);
		tkjs.heatmap.set_heatmap(hm);
		selem.slider({values:hm.get_view_range()});
	} else {
//	console.log("dummy data");
		tkjs.heatmap.set_heatmap(tkjs.heatmap.HeatMap.create_dummy());
	}

// generate legend box
    $('#legend').draggable({'containment':'parent'}).css("z-index", 2000);

document.body.onmousewheel = tkjs.heatmap.scroll_view;
//    document.getElementById("container").add
}

// receive resizing event
function resized() {
    var width = $("#contents").width();
    var height = $("#contents").height();
    repaint();
    $("#slider").css("height", (height - 16) + "px");
    
}

// receive repaint request
function repaint() {
    var container = document.getElementById("contents");
    var container_box = container.getBoundingClientRect();
    var cnv = document.getElementById("graph");
    var bounds = cnv.getBoundingClientRect();
    var ctx = cnv.getContext("2d");
    var width = bounds.width;
    var height = container_box.height;
    cnv.setAttribute("width", width + "px");
    cnv.setAttribute("height", container_box.height + "px");
    $("#graph").css("height", height);
    ctx.save();
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, width, height);    
    ctx.restore();

if (tkjs.heatmap.current_map) {
	tkjs.heatmap.current_map.paint(cnv, width, height, document.getElementById("genelist"));
    }
}

tkjs.heatmap.HeatMap = function(genes) {
//    this.__genes = genes;
    this.nrows = genes.length;
    this.ncols = 0;
    this.row_top = this.nrows;
    this.row_bottom = 0;
    this.array_titles = [];
    this.arrays = [];//new Array();
    this.__colored_values = [];//new Array();
    this.__colormodel = null;
    this.__scale = 4.0;
    this.__reversed = false;

this.__rows = genes;
    this.__genes = [];//new Array();
    this.__probes = {};//new Object();
	
	var i;
    
	for (i = 0; i < genes.length; i++) {
	    var items = genes[i].split('///');
	    this.__genes.push(items[0]);
	    if (items.length > 1) {
		this.__probes[items[0]] = items[1];
	    }
	}

this.get_probes = function(symbol) {
		var probe = this.__probes[symbol];
		var val = null;
		if (typeof(probe) !== 'undefined') {
			val = probe.split('//');
		}
		return val;
    };

this.set_row = function(row_min, row_max) {
	if (row_min < row_max) {
	    this.row_top = Math.min(this.nrows, row_max);
	    this.row_bottom = Math.max(0, row_min);
	}
    };

this.get_view_range = function() {
	return [this.row_bottom, this.row_top];
    };

this.paint = function(canvas, width, height, table) {
		if (this.nrows === 0 || this.ncols === 0 || this.row_bottom === this.row_top) {
			return;
		}
	var ctx = canvas.getContext("2d");
	ctx.save();
	var pixels_per_column = parseFloat(width) / this.ncols;
	var pixels_per_row = parseFloat(height) / (this.row_top - this.row_bottom);
	var cell_height = Math.floor(pixels_per_row + 1);
	var cell_width = pixels_per_column;//parseInt(pixels_per_column + 1);
	
	var x = 0;
	var row, col;
	    for (col = 0; col < this.arrays.length; col++) {
		var array = this.arrays[col];
		var colors = this.__colored_values[col];
		var y = height - pixels_per_row;
		var iy = height;//0;
		for (row = this.row_bottom; row < this.row_top; row++) {
		    var iy2 = Math.floor(y);
		    if (iy2 !== iy) {
			iy = iy2;
			ctx.fillStyle = colors[row];
			ctx.fillRect(x, iy, cell_width, cell_height);
		    }
		    y -= pixels_per_row;
		}
		x += cell_width;//pixels_per_column;
	    }	
	
//	ctx.fillStyle = 'white';
	ctx.restore();
		while (table.firstChild) {table.removeChild(table.firstChild);}
	if (pixels_per_row > 9.0 && typeof(table) !== 'undefined') {
	    var font_size = 'xx-small';
	    if (pixels_per_row > 30) {
		font_size = 'x-large';
	    } else if (pixels_per_row > 15) {
		font_size = 'large';
	    } else if (pixels_per_row > 10) {
		font_size = 'medium';
	    } else {
		font_size = 'small';
	    }
//	    var y = height - pixels_per_row * 1.5 - (this.row_top - this.row_bottom - 1.5) * pixels_per_row;
	    y = height -(this.row_top - this.row_bottom) * pixels_per_row;
	    table = $(table);
	    for (row = this.row_bottom; row < this.row_top; row++) {
		var elem = $(document.createElement("span"));
		elem.text(this.__genes[this.row_top - (row - this.row_bottom) - 1]);
		elem.attr("class", "label").css("top", Math.floor(y) + "px");
		table.append(elem);
		y += pixels_per_row;
	    }
	    $(".label").css("font-size", font_size).bind('click', tkjs.heatmap.click_label);
	}
    };

this.set_array = function(title, values) {
	this.array_titles.push(title);
	this.arrays.push(values);
	var colors = [];

// values [-1,1]
	for (i = 0; i < this.nrows; i++) {
//	    var value = i < values.length ? values[i] : 0.0;
	    colors.push(this.get_color(values[i]));//value));
	}
	this.__colored_values.push(colors);
	this.ncols ++;
    };

this.get_title = function(index) {
	return this.array_titles[index];
    };

this.set_color_scale = function(scale, reversed) {
	this.__scale = scale;
	this.__reversed = reversed;
    };

// value [-1,1] => green to red
    this.get_color = function(value) {
	if (this.__colormodel) {
	    return this.__colormodel(value);
	}
	var r, g, b;
		if (this.__reversed) {
			value = -value;
		}
//	console.log(value + " <- " + this.__scale);
	if (value < 0.0) {
	    r = 0; g = Math.min(255, Math.floor(value * -256)); b = 0;
	} else {
	    r = Math.min(255, Math.floor(value * 256)); g = 0; b = 0;
	}
	return 'rgb(' + r + ',' + g + ',' + b + ')';
    };
};

tkjs.heatmap.create_instance = function(genes, arrays) {
    var rows = genes.split(',');
    var hm = new tkjs.heatmap.HeatMap(rows);
	var i, j;
    for (i = 0; i < arrays.length; i++) {
	var array_contents = arrays[i].split(',');
	var values = [];//new Array();
	var coded = array_contents[1];
	for (j = 0; j < rows.length; j++) {
	    var value = (h2d(array_contents[1].slice(j * 2, j * 2 + 2)) - 128) * 0.03;
	    values.push(value);
	}
	hm.set_array(array_contents[0], new Float32Array(values));
    }
    return hm;
};

tkjs.heatmap.convert_code_to_value = function(valuestring, pos, length, base) {
    var value = 0;
	var i;
    for (i = 0; i < length; i++) {
	value *= base;
	var index = tkjs.heatmap.code_string.indexOf(valuestring.charAt(pos));
	if (index > 0) {
	    value += index;
	}
	pos ++;
    }
    return value;
};

tkjs.heatmap.create_instance_2 = function(genes, microarrays, data, scale) {
    if (typeof(scale) === 'undefined') {
	scale = 4.0;
    } else {
	scale = parseFloat(scale);
    }
    if (Math.abs(scale) < 1.0) {
		scale = 1.0;
	}
    var rows = genes.split(',');
    var columns = microarrays.split(',');
    var hm = new tkjs.heatmap.HeatMap(rows);
    hm.set_color_scale(Math.abs(scale), scale < 0.0);
    var ptr = 0;
    var characters_per_value = 2;
    var base = tkjs.heatmap.code_string.length;
    var maximum = Math.pow(base, characters_per_value);
    var coeff = 2.0 / maximum;
	var i, j;
    for (i = 0; i < columns.length; i++) {
	var array_contents = microarrays[i].split(',');
	var values = [];
	for (j = 0; j < rows.length; j++) {
	    var value = (tkjs.heatmap.convert_code_to_value(data, ptr, characters_per_value, base) - maximum * 0.5) * coeff;
	    values.push(value);
	    ptr += 2;
	}
	hm.set_array(columns[i], new Float32Array(values));
    }
    return hm;
};

tkjs.heatmap.code_string = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-";

tkjs.heatmap.HeatMap.load_data = function(params) {
    var genes = params.genes;
    var titles = params.columns;
    var data = params.data;
    var hm = tkjs.heatmap.create_instance_2(params.genes, params.columns, data, params.scale);
    if (typeof(params.species) !== 'undefined') {
		tkjs.heatmap.species = params.species;
    }
    return hm;
};

tkjs.heatmap.HeatMap.create_dummy = function() {
    if (typeof(tkjs.heatmap.genes) === 'undefined') {
	var genes = [];
	var num = 100;
		var i, j;
	for (i = 0; i < num; i++) {
	    genes.push("Gene" + i);
	}
	var hm = new tkjs.heatmap.HeatMap(genes);
	for (i = 0; i < 4; i++) {
	    var array = [];
	    for (j = 0; j < num; j++) {
		array.push(Math.random() * 8.0 - 4.0);
	    }
	    hm.set_array("Array#" + (i + 1), array);
	}
	//return hm;
    } else {
	hm = tkjs.heatmap.create_instance(tkjs.heatmap.genes, tkjs.heatmap.columns);
    }
	return hm;
};

tkjs.heatmap.HeatMap.operate_key = function(elem, event) {
    console.log(elem);
    console.log(event);
};

tkjs.heatmap.change_view = function(event, ui) {
    if (tkjs.heatmap.current_map) {
	var values = $("#slider").slider("values"); 
	tkjs.heatmap.current_map.set_row(values[0], values[1]);
	repaint();	
    }
};

tkjs.heatmap.scroll_view = function(event) {
    if (typeof(event) !== 'undefined' && typeof(event.wheelDelta) !== 'undefined') {
	var values = tkjs.heatmap.current_map.get_view_range();

var delta = event.wheelDelta < 0 ? -1 : 1;

if (delta + values[0] < 0) {
	    delta = - values[0];
	}
	if (delta + values[1] > tkjs.heatmap.current_map.nrows) {
	    delta = tkjs.heatmap.current_map.nrows - values[1];
	}
	values[0] += delta;
	values[1] += delta;

tkjs.heatmap.current_map.set_row(values[0], values[1]);
	$('#slider').slider({'values':values});
	repaint();
    }
//    console.log(event);
};

tkjs.heatmap.click_label = function(event, ui) {
    var elem = event.target;
    var gene_symbol = elem.textContent;

var probes = null;
    if (tkjs.heatmap.current_map) {
	probes = tkjs.heatmap.current_map.get_probes(gene_symbol);
    }

// initialize dialog
    var dialog = tkjs.heatmap.view.get_gene_dialog('genedialog', 'entrezinfo', 'geneatlas', gene_symbol);

// set GeneAtlas
    
	probes = null;
	if (tkjs.heatmap.current_map) {
	    probes = tkjs.heatmap.current_map.get_probes(gene_symbol);
	}
	if (probes !== null && probes.length > 0) {
	    var available = false;
	    var species_code = 4;
	    if (tkjs.heatmap.species.equals('Homo sapiens')) {
		species_code = 1;
	    } else if (tkjs.heatmap.species.equals('Mus musculus')) {
		species_code = 4;
	    } else {
		console.log('unknown species ' + tkjs.heatmap.species);
		return;
	    }

tkjs.heatmap.view.insert_geneatlas_entry('geneatlas', 'tissueprofile', species_code, probes);
	}

// invoke EntrezAJAX
    
	var species = tkjs.heatmap.species;//'Mus musculus';
	var sdiv = document.createElement("script");
	sdiv.setAttribute("type", "text/javascript");
	sdiv.src = 'http://entrezajax.appspot.com/esearch?apikey=' + tkjs.heatmap.apikey + '&db=gene&callback=tkjs.heatmap.receive_entrezids&term=' + escape(gene_symbol) + '+' + escape('"' + species + '"[Organism]');
	sdiv.charset="UTF-8";
	tkjs.heatmap.accessing_url = sdiv.src;
	document.lastChild.appendChild(sdiv);
        
};

tkjs.heatmap.receive_entrezids = function(obj) {
	var ids;
	var i;
    if (!obj.result) {
		ids = obj.result.IdList;
		if (ids.length > 0) {
			var entrez_id = ids[0];
			tkjs.heatmap.view.insert_entrez_link('entrezinfo', entrez_id);
			var sdiv = document.createElement("script");
			sdiv.setAttribute("type", "text/javascript");
			sdiv.src = 'http://entrezajax.appspot.com/esummary?apikey=' + tkjs.heatmap.apikey + '&db=gene&callback=tkjs.heatmap.receive_details&id=' + entrez_id;
			console.log(sdiv.src);
			tkjs.heatmap.accessing_url = sdiv.src;
			document.lastChild.appendChild(sdiv);
		}
	}
};

tkjs.heatmap.receive_details = function(obj) {
    if (obj.result) {
	var data = obj.result[0];
	//console.log(data);
	var name = data.Name;
	var symbol = data.NomenclatureSymbol;
	var nomenclature = data.NomenclatureName;
	var designation = data.OtherDesignations;
	var description = data.Description;
	var location = data.Chromosome + ' ' + data.ChrStart + ' (' + data.MapLocation + ')';
	var genomic = data.GenomicInfo;
	var table = document.getElementById("entrezinfo");
	if (genomic) {
	    genomic = genomic[0];
	    location = 'Chr' + genomic.ChrLoc + ' ' + genomic.ChrStart + '-' + genomic.ChrStop + ' ('  + data.MapLocation + ')';
	}
	console.log(name + ' // ' + symbol + ' // ' + designation + ' // ' + location);
	tkjs.heatmap.view.insert_entrez('entrezinfo', 
					{
					    Name: name,
					    Symbol: symbol,
					    Nomenclature: nomenclature,
					    Designation: designation,
					    Description: description,
					    Location:location
					});
    } else {
	console.log("error in loading gene summary");
    }
};

//tkjs.heatmap.open_tissue = function(probe_name, species_code) {
//    tkjs.heatmap.view.set_expression_graph('tissueexpr', species_code, probe_name);
//};

function callback_json(object) {
    cache_item(object);

console.log(object);
    var results = object.searchResult;
    if (results) {
		var scinets_id = null;
		var i,j;
		var item;
		for (i = 0; i < results.length; i++) {
			item = results[i];
			if (item.label.equals(tkjs.heatmap.searching_item)) {
				console.log("detected item : " + item.label + " // " + item.ID);
				scinets_id = item.ID;
				break;
			}
		}
		if (scinets_id) {
			semantic_json(scinets_id);
		}
		return;
    }

function cache_item(data) {
    tkjs.heatmap.accessing_url = null;
    return;
}

tkjs.heatmap.set_heatmap = function(heatmap) {
    tkjs.heatmap.current_map = heatmap;
    $("#slider").slider({values:[0,heatmap.nrows], min:0, max:heatmap.nrows});
    if (heatmap.nrows < 10) {
	$("#slider").hide();
    }

tkjs.heatmap.view.draw_legend('legend', heatmap.array_titles, heatmap.__scale);

resized();
};

tkjs.heatmap.startdrag = function(event) {
    if (tkjs.heatmap.current_map) {
	var height = $("#graph").height();
	var rows = tkjs.heatmap.current_map.get_view_range();
	var pixels_per_row = parseFloat(height) / (rows[0] - rows[1]);
	
	tkjs.heatmap.dragging_position = [event.pageX, event.pageY, rows[0], rows[1], pixels_per_row];
    }
};

tkjs.heatmap.enddrag = function() {
	if (tkjs.heatmap.dragging_position) {tkjs.heatmap.dragging_position = null;}
};

tkjs.heatmap.drag = function(event) {
    var x = event.offsetX;
    var pixels_per_column = parseFloat($("#graph").width()) / tkjs.heatmap.current_map.ncols;
    var column = Math.floor(x / pixels_per_column);
    
//    console.log("x=" + x + ", ppc=" + pixels_per_column.toFixed(2) + ", column=" + column);
    $(".es").css("background", "");
    $("#c_" + column).css("background", "#fcc");

if (tkjs.heatmap.dragging_position) {
	var offset = event.offsetY - tkjs.heatmap.dragging_position[1];
	var ppr = tkjs.heatmap.dragging_position[4];
	var bottom = tkjs.heatmap.dragging_position[2];
	var top = tkjs.heatmap.dragging_position[3];
	var row_offset = - Math.floor(offset / ppr + 0.5);
	var row;
	var row_bottom;
	var row_top;
	if (bottom + row_offset < 0) {
	    row_bottom = 0;
	    row_top = top - bottom + row_bottom;
	} else if (top + row_offset >= tkjs.heatmap.current_map.nrows) {
	    row_top = tkjs.heatmap.current_map.nrows;
	    row_bottom = row_top - (top - bottom);
	} else {
	    row_bottom = bottom + row_offset;
	    row_top = top + row_offset;
	}
//	console.log("dragging " + offset + " / " + row_offset);
	tkjs.heatmap.current_map.set_row(row_bottom, row_top);
	$("#slider").slider({values:[row_bottom, row_top]});
	repaint();
    }

};

tkjs.heatmap.current_map = null;
tkjs.heatmap.dragging_position = null;
tkjs.heatmap.searching_item = null;
tkjs.heatmap.accessing_url = null;
tkjs.heatmap.cached_objects = {};//new Object();
tkjs.heatmap.species = 'Mus musculus';

tkjs.heatmap.view.__generate_table_row = function(items, tagname) {
    if (!tagname) {tagname = 'td';}
    var row = document.createElement('tr');
	var i;
    for (i = 0; i < items.length; i++) {
	var cell = document.createElement(tagname);
	cell.appendChild(document.createTextNode(items[i]));
	row.appendChild(cell);
    }
    return row;
};

tkjs.heatmap.view.draw_legend = function(legend_id, samples, scale) {
	var i, j, row;
	var legend = document.getElementById(legend_id);
	if (legend) {
		while (legend.firstChild) {legend.removeChild(legend.firstChild);}
		var table = document.createElement('table');
		for (i = -1; i < samples.length; i++) {
			row = document.createElement('tr');
			if (i < 0) {
				row = tkjs.heatmap.view.__generate_table_row(['Column', 'Title'], 'th');
				table.appendChild(row);
			} else {
				row = tkjs.heatmap.view.__generate_table_row([i + 1, samples[i]]);
				row.setAttribute("id", "c_" + i);
				row.setAttribute("class", "es");
				table.appendChild(row);
			}
		}
		$(table).css('margin', 'auto');
		legend.appendChild(table);
		legend.appendChild(document.createElement("br"));
	// draw color samples
	var colorbar = document.createElement("canvas");
	$(colorbar).css("width", 160).css("height", 30).css("margin", "auto").attr("width", "160").attr("height", "30");
	var ctx = colorbar.getContext("2d");
	ctx.save();
	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, 160, 30);
	for (j = 0; j < 256; j+= 4) {
	    if (scale < 0) {
		ctx.fillStyle = "rgb(" + j + ",0,0)";
		ctx.fillRect(80 - j / 4, 1, 1, 10);
		ctx.fillStyle = "rgb(0," + j + ",0)";
		ctx.fillRect(j / 4 + 81, 1, 1, 10);
	    } else {
		ctx.fillStyle = "rgb(0," + j + ",0)";
		ctx.fillRect(80 - j / 4, 1, 1, 10);
		ctx.fillStyle = "rgb(" + j + ",0,0)";
		ctx.fillRect(j / 4 + 81, 1, 1, 10);
	    }
	}
	ctx.strokeStyle = "black";
	ctx.rect(16, 0, 129, 10);
	ctx.stroke();
	ctx.fillStyle = "black";
	ctx.fillText((- Math.abs(scale)).toString(), 10, 20);
	ctx.fillText('0', 75, 20);
	ctx.fillText((Math.abs(scale)).toString(), 140, 20);
	
	ctx.restore();
	var colorbar_container = document.createElement("div");
	colorbar_container.setAttribute("style", "margin:auto auto auto auto;width:160px;height:30px;");
	colorbar_container.appendChild(colorbar);
	legend.appendChild(colorbar_container);
    }
    
};

tkjs.heatmap.view.insert_entrez = function(table_id, params) {
    var table = document.getElementById(table_id);
	var p;
    for (p in params) {
		if (params.hasOwnProperty(p)) {
		var row = document.createElement('tr');
		var cell = document.createElement('td');
		cell.appendChild(document.createTextNode(p));
		var datum = document.createElement('td');
		datum.appendChild(document.createTextNode(params[p]));
		row.appendChild(cell);
		row.appendChild(datum);
		table.appendChild(row);
		}
	}
};

tkjs.heatmap.view.insert_entrez_link = function(table_id, entrez_id) {
    var table = document.getElementById(table_id);

var row = document.createElement('tr');
    var cell = document.createElement('td');
    cell.appendChild(document.createTextNode('Entrez link'));
    var datum = document.createElement('td');
    var link = document.createElement('a');
    link.appendChild(document.createTextNode('ID:' + entrez_id));
    link.setAttribute('href', 'http://www.ncbi.nlm.nih.gov/gene?term=' + entrez_id);
    link.setAttribute('target', 'pubmedpage');
    row.appendChild(cell);
    datum.appendChild(link);
    row.appendChild(datum);
    table.appendChild(row);
};

tkjs.heatmap.view.get_gene_dialog = function(dialog_id, entrez_id, expr_id, gene_symbol) {
    var dialog = $('#' + dialog_id);
    var parameters = {open:true, title:gene_symbol};
    if (dialog === null || dialog.length === 0) {
	var delem = document.createElement("div");
	delem.setAttribute("id", dialog_id);
	document.lastChild.appendChild(delem);
	
	dialog = $(delem);//"#genedialog");
//	dialog.css("right", "0px").css("top", "250px");

var table_info = document.createElement('table');
	table_info.setAttribute('id', entrez_id);//'entrezinfo');

//	tkjs.heatmap.view.insert_entrez(entrez_id, {'Entrez link':'http://www.ncbi.nlm.nih.gov/gene?' + entrez_id});
	delem.appendChild(table_info);

var table_expr = document.createElement('geneatlas');
	table_expr.setAttribute('id', expr_id);//'geneatlas');
	delem.appendChild(table_expr);
	parameters.position = [500, 300];
    } else {
	$('#' + entrez_id).html('');
	$('#' + expr_id).html('');
    }
    // open dialog
    dialog.dialog(parameters);
    
    return dialog;
};

tkjs.heatmap.view.insert_geneatlas_entry = function(expr_id, display_id, species_code, probes) {
    var container = document.getElementById(expr_id);
    var par = document.createElement("p");
	var i;
    for (i = 0; i < probes.length; i++) {
		if (probes[i].lastIndexOf("_at") === probes[i].length - 3) { // probe name check
	    var link = document.createElement("a");
	    link.setAttribute("href", "#");
	    link.appendChild(document.createTextNode("GeneAtlas:" + probes[i]));
	    link.setAttribute("onclick", "tkjs.heatmap.view.open_tissue('" + display_id + "', '" + probes[i] + "'," + species_code + ")");
	    par.appendChild(link);
	    par.appendChild(document.createElement("br"));
	}
    }
    container.appendChild(par);
};

tkjs.heatmap.view.open_tissue = function(dialog_id, probe_name, species_code) {
    if (typeof(species_code) === 'undefined') {species_code = 4;}
    console.log( probe_name + " // " + species_code);
    var dialog = document.getElementById(dialog_id);
    var parameters = {'open':true, 'title':probe_name};

if (!dialog) {// || dialog.length == 0) {
	dialog = document.createElement("div");
	dialog.setAttribute('id', dialog_id);
	document.getElementById("my_container").appendChild(dialog);
	parameters.position = [550, 400];
    }
    while (dialog.firstChild) {dialog.removeChild(dialog.firstChild);}

var img = document.createElement('img');
    img.src = 'http://plugins.biogps.org/dataset/' + species_code + '/chart/' + probe_name + '/';
    $(img).css("width", "250px").css("height", "520px").css("margin", "auto");
    dialog.appendChild(img);
    $(dialog).dialog(parameters);

};

body {
    margin:0px;
    padding:0px;
}

#my_container {
/*    margin-left:auto;*/
/*    margin-right:auto;*/
    margin-left:30px;
/*
    width:800px;
    margin:top:0px;
*/
/*    border:1px solid green;*/
}

#contents {
    position:absolute;
    width:800px;
    top:0px;
    height:100%;
/*    border:1px solid yellow;*/
}

#graph {
    position:absolute;
    top:0px;
    left:50px;
    bottom:0px;
    width:250px;
}

#sliderregion {
    position:absolute;
    top:0px;
    left:300px;
    bottom:0px;
    width:50px;
}

#slider {
    position:absolute;
    top:8px;
    left:4px;
    width:10px;
    bottom:8px;
}

#genelist {
    position:absolute;
    left:350px;
    top:0px;
    bottom:0px;
    width:450px;
/*    background:#eee;*/
    overflow:hidden;
/*    border:1px solid blue;*/
}

.label {
    position:absolute;
    font-family:Monaco, monospace;
    font-size:8pt;
    width:200px;
    color:#222;
}

.label:hover {
    color:red;
    background:#cfd;
}

#genedialog {
    width:400px;
    height:400px;
    font-family:Monaco, monospace;
    font-size:medium;
}

#genedialog a {
    color:blue;
}

#genedialog a:hover {
    color:white;
    background:darkslateblue;
}

.geneinformation {
    margin:0px;
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
}

#legend {
    position:absolute;
    top:10px;
    right:10px;
    width:300px;
    font-family:Helvetica, serif;
    font-size:medium;
    border:1px solid #40c0ff;
    background:#fff;
    color:#004;
    padding:10px;
}

#legend table {
    width:90%;
    border:1px solid gray;
    background:#eee;
    border-collapse:collapse;
}

#legend td {
    margin:auto;
    text-align:center;
    white-space:normal;
    border:1px solid gray;
}

#legend th {
    margin:auto;
    background:#482;
    color:white;
    font-weight:bold;
    border:1px solid gray;
}

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>{{title}}</title>

Initial content

Fork this app as your new one download

Web Search

Contributor Send Message	taendo
Run count	209
Website
License
Fork count	0
Created date	Sep 6, 2012
Last update date	Sep 6, 2012

Input Data
Related Ideas

LinkData work list used as input data in this application.
You can change input data and execute application if you change the checkbox.

Brain region specific expression Contributor: taendo Update: Sep 6, 2012
131 Downloads
,

3 Applications

linkdata
Add New Data

News Feed

linkdata.org に関するツイート

Publish your application as JavaScript

that mashes up the Linked Open Data

Application Information

Javascript heat-map

Application

News Feed