Publish your application｜Mash up the Linked Open Data

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);

};

 
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);}; window.onload = function() {    var hm;    hm = tkjs.heatmap.load_linkdata();        if (hm === null) {

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;
}

 
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>

 
<!DOCTYPE HTML><html lang="en">  <head>    <title>{{title}}</title>     <meta charset="utf-8"><!--    <link href="css/heatmap.css" rel="stylesheet" type="text/css">-->      <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" />    <!--  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>-->            <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>          <script src="js/tklib.js" type="text/javascript"></script>    <script src="js/tkheatmap.js" type="text/javascript"></script>    <script type="text/javascript">      var inserted_data = {      "genes":"{{genes}}",      "author":"{{author}}",      "columns":"{{columns}}",      "scale":"{{scale}}",      "data":"{{data}}",      "code":"{{code}}",      "species":"{{species}}"      };    </script>  </head>    <!--  <body onresize="resized()" onload="console.log('running');">-->    <div id="my_container">      <div id="contents">    <canvas id="graph">    </canvas>    <div id="sliderregion">      <div id="slider"></div>    </div>    <div id="genelist">    </div>    <div id="legend"></div>      </div>    </div>              <div id="result"></div>      <!--  </body> --></html>  

Select Input Data

LinkData Work	Table Data
Brain region specific expression	linkdata

Add LinkData work(LinkData)

Click the Browse button or drag and drop to choose files to upload

The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)

Edit Application

Please enter information for the application to be registered.

*Required field

Account Name

Application Name*: Remove; Add name for another language

Collaborators

Image: You can upload jpg, gif, png file formats

Website: x

Add website

Tag: heatmap xheat-map xexpression xmicroarray x

License

API version

Initial Cost: ￥

Annual Cost: ￥

Description: Remove; Add description for another language

Security Level: Public
Here anyone can access the page for this application.
Only those who know the link
Only those who know the URL of the page for this application can access this page.
Private
Only the contributor of this application can access the page for this application.

: finish Editing

Select Input Data

Edit Application

Please enter information for the application to be registered.

History