MediaWiki:Lipoquality.js: Difference between revisions

Revision as of 04:56, 15 March 2016

// html /////////////////////////////////////////////////////////////////////////////////////////////////////////
// <span id="search"></span><span id="show"></span>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// external script //////////////////////////////////////////////////////////////////////////////////////////////
mw.loader.load('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', "text/javascript");
mw.loader.load('https://code.highcharts.com/stock/highstock.js', "text/javascript");

// initialize //////////////////////////////////////////////////////////////////////////////////////////////////
addOnloadHook(init); 

function init()
{
	// highstock.jsに依存するため、別で読み込む
	var heatmapJS = document.createElement("script");
	heatmapJS.src = "https://code.highcharts.com/modules/heatmap.js";
	document.getElementsByTagName("head")[0].appendChild(heatmapJS);

	var searchButton = document.createElement("input");
	searchButton.value = "search";
	searchButton.id    = "searchButton";
	searchButton.type  = "button";
	searchButton.onclick = function(){search()};
	document.getElementById("search").appendChild(searchButton);
	var showButton = document.createElement("input");
	showButton.value = "show";
	showButton.id    = "showButton";
	showButton.type  = "button";
	showButton.onclick = function(){showChart()};
	document.getElementById("show").appendChild(showButton);

	setCombobox('Classification');
	setCombobox('Sample');
	setCombobox('Type');
}
function setCombobox(name)
{
	var url = '/mediawiki/api.php?action=query&prop=revisions&redirects=1&titles=Lipoquality:' + name + '&rvprop=content&format=xml'

	var xmlHttpRequest = new XMLHttpRequest();
	xmlHttpRequest.onreadystatechange = function()
	{
		var READYSTATE_COMPLETED = 4;
		if(this.readyState == READYSTATE_COMPLETED){
			var HTTP_STATUS_OK = 200;
			if(this.status == HTTP_STATUS_OK) {
				// success
				var parser = new DOMParser();
				var dom = parser.parseFromString(this.response.trim(), "text/xml");
				var text = dom.getElementsByTagName("rev");
				var lines = text[0].textContent.split("\n");
				var select = document.getElementById(name.toLowerCase());
				if(name != 'Type')
					lines.unshift('All');
				for(var i = 0; i < lines.length; i ++){
					var opt = document.createElement('option');
					opt.value = opt.textContent = lines[i].replace(/^\*/, '').replace(/^ */, '').replace(/ *$/, '').replace(/"/g, "&quot;").replace(/'/g, "&rsquo");;
					select.appendChild(opt);
				}
			} else {
				// error
				console.log('search failed. ' + this.status + ':' + this.statusText + "/" + this.readyState);
			}
		}
	}

	// search
	xmlHttpRequest.open('GET', url, true);
	xmlHttpRequest.responseType = 'text';
	xmlHttpRequest.send(null);
}
function escape(text)
{
	if(isFinite(text))
		return text;
	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
function attrEscape(text)
{
	if(isFinite(text))
		return text;
	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&rsquo;");
}
function inchiEscape(text)
{
	if(isFinite(text))
		return text;
	return text.replace(/[^A-Z0-9-]/g, "");
}
function search()
{
	document.getElementById("searchButton").disabled = true;
	document.getElementById('hit').innerHTML = '';

	var classification = document.getElementById("classification").value;
	var sample   = document.getElementById("sample").value;
	var type     = document.getElementById("type").value;

	var url = 'https://script.google.com/macros/s/AKfycbx3YyRXv0nkMVsJqasLJBp0n1j744dkI8AOXDibLJVx0_D4MKo/exec?classification=' + classification + '&sample=' + sample + '&type=' + type + '&q=search&callback=hasSearched';
//	var url = '/lipo/json.txt'

	// jsonpを使って検索
	var root = document.getElementById('result');
	root.textContent = 'Searching...';
	var jsonp = document.createElement('script');
	jsonp.src = url;
	document.head.appendChild(jsonp);
}

function hasSearched(jsonp)
{
	var root = document.getElementById('result');
	// remove old elements
	root.textContent = '';
	for(var i = root.childNodes.length-1; i >= 0; i --)
		root.removeChild(root.childNodes[i]);

	var result = jsonp;
	//var result = JSON.parse(escape(jsonp));
	document.getElementById('hit').innerHTML = 'result. ' + escape(result.length) + ' hit(s).';
	for(var i = 0; i < result.length; i ++){
		var check = document.createElement('input');
		check.type = 'checkbox';
		check.id	= attrEscape(result[i]);
		check.value = attrEscape(result[i]);
		check.name  = 'target';
		root.appendChild(check);
		var title = document.createElement('label');
		title.setAttribute('for', attrEscape(result[i]));
		title.innerHTML = escape(result[i]);
		root.appendChild(title);
		root.appendChild(document.createElement('br'));
	}
	document.getElementById("searchButton").disabled = false;
}

function showChart()
{
	var targets = '';
	var boxes = document.getElementsByName('target');
	for(var i = 0; i < boxes.length; i ++){
		if(boxes[i].checked)
			targets += ',' + boxes[i].value;
	}
	if(targets.length == 0){
		alert("選択してください");
		return;
	}
	targets = targets.substring(1);

	document.getElementById("showButton").disabled = true;
	var chartType;
	if(document.getElementById('bar').checked)
		chartType = 'bar';
	else
		chartType = 'heatmap';
	var url = 'https://script.google.com/macros/s/AKfycbx3YyRXv0nkMVsJqasLJBp0n1j744dkI8AOXDibLJVx0_D4MKo/exec?id=' + targets + '&type=' + chartType + '&q=data&callback=hasRetrieved';
	//var url = '/lipo/data.php?id=' +  targets + '&type=' + chartType + '&q=data';

	// jsonpを使った取得
	var root = document.getElementById('container');
	root.textContent = 'Retrieving...';
	var jsonp = document.createElement('script');
	jsonp.src = url;
	document.head.appendChild(jsonp);
}

function hasRetrieved(jsonp)
{
	var root = document.getElementById('container');
	// remove old elements
	root.textContent = '';
	for(var i = root.childNodes.length-1; i >= 0; i --)
		root.removeChild(root.childNodes[i]);

	var chartType;
	if(document.getElementById('bar').checked)
		chartType = 'bar';
	else
		chartType = 'heatmap';

	var result = jsonp;
	//var result = JSON.parse(escape(jsonp));
	if(chartType == 'bar')
		showBarChart(result);
	else
		showHeatmap(result);
	document.getElementById("showButton").disabled = false;
}

var gBarData;
function getInchiOnBar(seq, x)
{
	window.open("http://jcbl.jp/","new");
	console.log(seq + "/" + x + " => " + gBarData[seq][x]);
}
function showBarChart(result)
{
	gBarData = [];
	var root = document.getElementById('container');
	for(var i = 0; i < result.length; i ++){
		gBarData[i] = [];
		// データの整理
		var data = [];
		for(var j = 0; j < result[i].data.length; j ++){
			data[j] = [attrEscape(result[i].data[j][2]), attrEscape(result[i].data[j][3])];
			gBarData[i][j] = inchiEscape(result[i].data[j][5]); // InChIキー
		}

		// barchartの追加
		var parent = document.createElement('div');
		parent.id = 'container' + i;
		root.appendChild(parent);
		var chart = new Highcharts.Chart({
			chart: {
				type: 'column',
				renderTo: parent,
				height: 250,
			},
			title: {
				text: (i+1) + '.' + attrEscape(result[i].title)
			},
			xAxis: {
				type: 'category',
				labels: {
					rotation: -90,
					style: {
						fontSize: '11px',
						fontFamily: 'Verdana, sans-serif'
					}
				},
				title: {
					text: '分子種'
				},
			},
			scrollbar: {
				enabled: true
			},
			yAxis: {
				min: 0,
				max: 100,
				title: {
					text: 'Height'
				}
			},
			legend: {
				enabled: false
			},
			tooltip: {
				pointFormat: '<b>{point.y:.1f}</b>'
			},
			series: [{
				name: 'Population',
				data: data,
				events: {
				  click: function(event) {
					//alert(event.point.name);
					var index = event.target.farthestViewportElement.parentNode.parentElement.id.replace("container","");
					getInchiOnBar(index, event.point.x);
				  }
				} 
			}]
		});
	}
}
var gHeatmapData;
function getInchiOnHeatmap(seq, x, y)
{
	window.open("http://jcbl.jp/","new");
	console.log(seq + "/" + y + "/" + x + " => " + gHeatmapData[seq][y][x]);
}
function showHeatmap(result)
{
	gHeatmapData = [];
	var root = document.getElementById('container');
	for(var i = 0; i < result.length; i ++){
		// タイトル
		var title = attrEscape(result[i].title);

		// 親要素
		var parent = document.createElement('div');
		parent.id = 'container' + i;
		root.appendChild(parent);

		var index = 0;
		var data = [];
		var yLabels = [];
		gHeatmapData[i] = [];
		for(var j = 0; j < result[i].map.length; j ++){
			gHeatmapData[i][j] = [];
			for(var k = 0; k < result[i].map[j].data.length; k ++){
				data[index] = [k, j, attrEscape(result[i].map[j].data[k][0])];
				gHeatmapData[i][j][k] = inchiEscape(result[i].map[j].data[k][2]);
				index ++;
			}
			yLabels[j] = attrEscape(result[i].map[j].title);
		}
		for(var j = 0; j < result[i].x.length; j ++)
			result[i].x[j] = attrEscape(result[i].x[j]);
		var xMax = result[i].x.length-1;
		if(xMax > 10)
			xMax = 10;
		// ヒートマップ
		var chart = new Highcharts.Chart({
	
			chart: {
				type: 'heatmap',
				marginBottom: 0,
				plotBorderWidth: 1,
				renderTo: parent,
			},
	
			scrollbar: {
				enabled: true
			},
	
			title: {
				text: title
			},
	
			xAxis: {
				categories: result[i].x,
				opposite: true,
				labels: {
					rotation: -90,
					style: {
						fontSize: '11px',
						fontFamily: 'Verdana, sans-serif'
					}
				},
				max: xMax
			},
	
			yAxis: {
				categories: yLabels,
				title: null
			},
	
			colorAxis: {
				min: 0,
				max: 100,
				minColor: '#FFFFFF',
				maxColor: Highcharts.getOptions().colors[8]
			},
	
			legend: {
				align: 'right',
				layout: 'vertical',
				margin: 0,
				verticalAlign: 'top',
				y: 100,
				symbolHeight: 145
			},
	
			tooltip: {
				formatter: function () {
					return this.series.yAxis.categories[this.point.y] + '<br />' +
							this.series.xAxis.categories[this.point.x] + '<br />' +
						 	(Math.round(this.point.value*10)/10);
				}
			},
	
			series: [{
				name: 'HEK',
				borderWidth: 1,
				data: data,
				dataLabels: {
					enabled: false,
					color: '#000000'
				},
				point: {
					events: {
						/*mouseOver: function() {
							var index = event.target.farthestViewportElement.parentNode.parentElement.id.replace("container", "");
							var target = getTarget(this.series.chart.xAxis[0].labelGroup.element.childNodes, result[index].x[this.x]);
							if(target != null){
								target.css('fill', 'red');
								target.css('fontWeight', 'bold');
							}

						   $(this.series.chart.yAxis[0].labelGroup.element.childNodes[this.y]).css('fill', 'red');
						   $(this.series.chart.yAxis[0].labelGroup.element.childNodes[this.y]).css('fontWeight', 'bold');
						},
						mouseOut: function() {
							var index = event.target.farthestViewportElement.parentNode.parentElement.id.replace("container", "");
							var target = getTarget(this.series.chart.xAxis[0].labelGroup.element.childNodes, result[index].x[this.x]);
							if(target != null){
								target.css('fill', '#666666');
								target.css('fontWeight', '');
							}

							$(this.series.chart.yAxis[0].labelGroup.element.childNodes[this.y]).css('fill', '#666666');
							$(this.series.chart.yAxis[0].labelGroup.element.childNodes[this.y]).css('fontWeight', '');
						},*/
						click: function(event){
							var index = event.target.farthestViewportElement.parentNode.parentElement.id.replace("container","");
							getInchiOnHeatmap(index, event.point.x, event.point.y);
						}
					}
				}
			}]
	
		});
		//chart.setSize(600,300,false);
	}
}
function getTarget(children, target)
{
	for(var i = 0; i < children.length; i ++){
		if(target == children[i].childNodes[0].textContent){
			return $(children[i]);
		}
	//	console.log(children[i].childNodes[0].textContent);
	}
	return null;
}