Javascript heat-map｜Mash up the Linked Open Data

about this App

Javascript heat-map

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>

Preview
Input Data
ReadMe
Snapshots

Applications using the same data

Contributor:
Update:
Rating

LinkData Work	Table Data
Brain region specific expression Contributor:taendo Update:Sep 6, 2012 173 Downloads, 3 Applications	linkdata

Add LinkData work(LinkData)

Link http://app.linkdata.org/run/app1s52i?tab=readme

jquery-1.7.1.min.js

Work

Add Clear

insert work id or work name.