Lipoquality:Database

2017-11-14T04:56:28Z

Sunflower:

{{#includejs:LipoqualityA.js}}

{{#formtag:form|method="post" action="/wiki/Lipoquality:Search"|
<table>
<tr>
<td>Sample source {{#formtag:select|name="samplesource" id="samplesource"}}</td>
<td>Sample type {{#formtag:select|name="sampletype" id="sampletype"}}</td>
<td>Lipid class {{#formtag:select|name="lipidclass" id="lipidclass"}}</td>
</tr>
<tr>
<td colspan="3" style="vertical-align: bottom"><div id="search"></div></td>
</tr>
</table>
}}

<hr />

<div id="loading">[[File:loading.gif|class="loading"]] Loading all data. Please wait.</div>
<div id="retrieving" style="display: none">[[File:loading.gif|class="loading"]] Retrieving...</div>
<div id="resetZoom"></div>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="3" style="text-align: right"><div id="optionHeader"></div></td></tr>
<tr>
<td style="vertical-align: top"><div id="cutoff"></div><div id="sortableList" style="display: none; overflow-y: scroll; border: 1px solid #000000; padding: 3px; height: 250px"></div><div id="rate"></div></td>
<td><div id="container"></div></td>
<td><div id="pieContainer"></div></td>
</tr>
</table>

<hr />

<div id="graphform">
 
{{#formtag:form|method="post" action="/wiki/Lipoquality:Search"|
{{#formtag:input|type="radio" name="chart" id="bar" value="bar" checked="yes"}}{{#formtag:label|for="bar"|barchart(individual)}}
{{#formtag:input|type="radio" name="chart" id="bar_bundle" value="bar_bundle"}}{{#formtag:label|for="bar_bundle"|barchart(bundle)}}
{{#formtag:input|type="radio" name="chart" id="heatmap" value="heatmap"}}{{#formtag:label|for="heatmap"|heatmap}} 
}}
<div id="check"></div>
</div>

<div id="searching" style="display: none">[[File:loading.gif|class="loading"]] Searching...</div>
<div id="result"></div>

MediaWiki:Lipoquality.js

2017-11-14T04:56:05Z

Sunflower:

MediaWiki:LipoqualitySearch.js

2017-11-14T04:55:43Z

Sunflower: Created page with "// 対象項目からデータを検索する //////////////////////////////////////////////////////// // param sampleSource - sample source // param sampleType - sample type ..."

// 対象項目からデータを検索する ////////////////////////////////////////////////////////
// param sampleSource - sample source
// param sampleType - sample type
// param lipidClass - lipid class
// return 検索結果
function lipoqualitySearch(sampleSource, sampleType, lipidClass)
{
// sample sourceとsample typeはAllがあるため、正規表現を用いてマッチングを行う
var ssReg = new RegExp(translateForReg(sampleSource));
var stReg = new RegExp(translateForReg(sampleType));

// 検索
var result = [];
var i = 0;
for(key in gAllData){
if(!ssReg.test(key)) // sample sourceが合致するか
continue;

for(var j = 0; j < gAllData[key].length; j ++){
//console.log("length:" + j + "," + gAllData[key].length);
// 対象sample source, sample typeかチェック
//console.log("st:" + key + ":" + gAllData[key][j]["Sample name"] + ":" + stReg.test(gAllData[key][j]["Sample name"]));
if(!stReg.test(gAllData[key][j]["Sample name"])) // sample typeが合致するか
continue;

//console.log("search:" + key + ":" + gAllData[key][j]["Sample name"] + ":" + gAllData[key][j]["data"].length);
var found = false;
for(var k = 0; k < gAllData[key][j]["data"].length; k ++){
// 対象lipid classかチェック
//console.log("hit:" + key + ":" + gAllData[key][j]["data"][k]["Lipid class"] + "==" + lipidClass);
if(gAllData[key][j]["data"][k]["Lipid class"] == lipidClass){
found = true;
break;
}
}
// 対象だったので結果に格納する
if(found){
result[i] = [];
result[i]["title"] = key + "/" + gAllData[key][j]["Sample name"] + "/" + lipidClass;
result[i]["Method link"] = gAllData[key][j]["Method link"];
i ++;
}
}
}

return result;
}
// 指定されたID群をもとに、グラフ全般用のデータを取得する ///////////////////////////////
// param ids - 対象データのID。「SampleSource/SampleType/LipidClass」で構成される。
// param chartType -　未使用
// return 対象データ
function retrieveChartData(ids, chartType)
{
// '#7fbfff'がbarchartのデフォルト色と似ているので排除する
var pieColors = ['#ff7f7f','#7f7fff','#7fff7f','#ff7fbf','#bfff7f','#ff7fff','#7fffff','#000000','#bf7fff','#7fffbf','#ffbf7f','#808080'];

var result = {};
var data = {};
var colorKeys = {};
var colorIndex = 0;
// id毎にデータを取得
result.x = []; // Xラベル
result.map = []; // チャートデータ
for(var index = 0; index < ids.length; index ++){
var w = ids[index].split("/");
var samplesource = w[0];
var sampletype = w[1];
var lipidclass = w[2];

result.map[index] = {}; // 通常チャート用
result.map[index].pie = []; // パイチャート用
var pieKeys = {};
var pieIndex = 0;
for(key in gAllData){ // sample source
if(samplesource != key)
continue;

for(var j = 0; j < gAllData[key].length; j ++){ // sample name
if(sampletype != gAllData[key][j]["Sample name"])
continue;

// 同一のLipidSuperClassのみ対象とする
// 通常チャートは同一LipidClassのみだが、パイチャートにおいて意味を持つ
var targetLipidSuperClass = undefined;
for(var k = 0; k < gAllData[key][j]["data"].length; k ++){
if(gAllData[key][j]["data"][k]["Lipid class"] == lipidclass){
targetLipidSuperClass = gAllData[key][j]["data"][k]["Lipid super class"];
break;
}
}

// 各lipid classのチェック
for(var k = 0; k < gAllData[key][j]["data"].length; k ++){
if(gAllData[key][j]["data"][k]["Lipid super class"] != targetLipidSuperClass) // superクラスが違うものは対象外
continue;

var lc = gAllData[key][j]["data"][k]["Lipid class"];
// lipid classごとに色を変える
if(colorKeys[lc] == undefined){
colorKeys[lc] = colorIndex++;
}
// パイチャート用データ
if(pieKeys[lc] == undefined){
pieKeys[lc] = pieIndex++;
result.map[index].pie[pieKeys[lc]] = {};
result.map[index].pie[pieKeys[lc]].name = lc; // type
result.map[index].pie[pieKeys[lc]].color = pieColors[colorKeys[lc]%pieColors.length];
result.map[index].pie[pieKeys[lc]].y = 0;
}
result.map[index].pie[pieKeys[lc]].y += parseFloat(gAllData[key][j]["data"][k]["Intensity"]); // intensity

if(lc == lipidclass){ // lipid classが対象のものなら、通常チャート用にデータを格納する
result.map[index].title = samplesource + "/" + sampletype + "/" + lipidclass;
result.map[index].meta = {};
for(meta in gAllData[key][j]){// 全メタ情報
if(meta != "data")
result.map[index].meta[meta] = gAllData[key][j][meta];
}

var lipidType = getLipidType(gAllData[key][j]["data"][k]); // chain文字列を取得する
// すべてのデータでX軸を統一するため、いったんdata配列にデータを格納する
if(data[lipidType] == undefined){ // まだ出てきていないchainならばX軸ラベルに追加する
data[lipidType] = [];
result.x.push(lipidType);
}
data[lipidType][index] = gAllData[key][j]["data"][k];

//Logger.log(filename + "/" + tabname + "/" + type);
}
}
}
}
}

// chainの小さい順に並べ替える
result.x.sort(function(a1, a2){
// chainの数による比較
var lipidClass1 = a1.split("/");
var lipidClass2 = a2.split("/");
if(lipidClass1.length < lipidClass2.length) return -1;
if(lipidClass1.length > lipidClass2.length) return 1;
// chainの長さと二重結合数による比較
for(var i = 0; i < lipidClass1.length; i ++){
var lc1 = parseInt(lipidClass1[i].replace(/:/, ""));
var lc2 = parseInt(lipidClass2[i].replace(/:/, ""));
if(lc1 < lc2) return -1;
if(lc1 > lc2) return 1;
}
return 0;
});

// データを整形
var maxOfAll = 0;
for(var index = 0; index < ids.length; index ++){
result.map[index].data = [];
var max = 0;
for(var j = 0; j < result.x.length; j ++){
result.map[index].data[j] = [];

if(data[result.x[j]][index] == undefined){ // このデータには、対象chainの情報がないため、ダミーを格納しておく
data[result.x[j]][index] = {
"Intensity":"0",
"Formula" :"",
"InChIKey" :"",
"SMILES" :"",
"RT[min]" :"",
"m/z" :"",
"Adduct" :"",
"TI" :"",
"MI" :"",
"MSMS" :""
};
}

// Intensityの処理
var inte = parseFloat(data[result.x[j]][index]["Intensity"]);
if(inte > max)
max = inte;
result.map[index].data[j].push(inte);

// メタ情報の格納
result.map[index].data[j].meta = {};
result.map[index].data[j].meta["Formula"] = data[result.x[j]][index]["Formula"];
result.map[index].data[j].meta["InChIKey"] = data[result.x[j]][index]["InChIKey"];
result.map[index].data[j].meta["SMILES"] = data[result.x[j]][index]["SMILES"];
result.map[index].data[j].meta["RT[min]"] = data[result.x[j]][index]["RT[min]"];
result.map[index].data[j].meta["m/z"] = data[result.x[j]][index]["m/z"];
result.map[index].data[j].meta["Adduct"] = data[result.x[j]][index]["Adduct"];
result.map[index].data[j].meta["TI"] = data[result.x[j]][index]["TI"];
result.map[index].data[j].meta["MI"] = data[result.x[j]][index]["MI"];
result.map[index].data[j].meta["MSMS"] = data[result.x[j]][index]["MSMS"];
}
for(var j = 0; j < result.x.length; j ++) // 意味ある？
result.map[index].data[j][0] = result.map[index].data[j][0];

// 全体での最大Intensityを見つけ出す
result.map[index].max = max;
if(maxOfAll < max)
maxOfAll = max;
}

result.maxOfAll = maxOfAll;

result.title = lipidclass;
// アルキル、ジアシル用に配列にしておく
// -> 完全に別々になったので、無意味に
var array = [];
array.push(result);

return array;
}
// 文字列を正規表現文字列に変換する ////////////////////////////////////////
// param str 対象文字列
// return 正規表現用文字列
function translateForReg(str)
{
// ()はエスケープする
str = str.replace("(","\$","g");
str = str.replace(")","\$","g");

// Allはすべてが対象
if(str == "All")
str = ".*";
else
str = "^" + str + "$";

return str;
}
// chainグラフ用データの取得 ///////////////////////////////////////////////
// param samplesource - Sample Source
// param sampletype - Sample Type
// param lipidclass - Lipid class
// param chain - Lipid chain
// return 対象データ
function retrieveChainData(samplesource, sampletype, lipidclass, chain)
{
// sample sourceとsample typeはAllがあるため、正規表現を用いてマッチングを行う
var ssReg = new RegExp(translateForReg(samplesource));
var stReg = new RegExp(translateForReg(sampletype));

var result = {};
var maxOfAll = 0;
var index = 0;
var legends = {};
result.title = lipidclass + chain
result.x = [];
result.intensity = [];
for(key in gAllData){
if(!ssReg.test(key)) // sample sourceが合致するか
continue;

for(var j = 0; j < gAllData[key].length; j ++){
if(!stReg.test(gAllData[key][j]["Sample name"])) // sample typeが合致するか
continue;

// 特定のlipid class, lipid chainのみを対象とする
for(var k = 0; k < gAllData[key][j]["data"].length; k ++){
if(gAllData[key][j]["data"][k]["Lipid class"] != lipidclass)
continue;

// セル（Type）の走査
for(var k = 0; k < gAllData[key][j]["data"].length; k ++){
if(!gAllData[key][j]["data"][k]["Lipid super class"]) // 空データ
continue;

var lipidType = getLipidType(gAllData[key][j]["data"][k]);
var legend = key + "/" + gAllData[key][j]["Sample name"];
if(!legends[legend] && lipidType == chain){ // legend名が複数回被る可能性があるので、すでに格納済みのlegendは処理しない
// 対象
result.x[index] = legend;
result.intensity[index] = parseFloat(gAllData[key][j]["data"][k]["Intensity"]); // intensity
if(maxOfAll < result.intensity[index]) // 全体での最大Intensityを調べる
maxOfAll = result.intensity[index];
index ++;
legends[legend] = true;
}
}
}
}
}

result.maxOfAll = maxOfAll;

return result;
}
// lipid chainを構築して返す。chain情報はSN1～SN4まで分かれており、さらにSN1が空の場合はTotal chainを使用する ///
// param array - 列データ
// return lipid chain文字列。16:0, 16:0/16:0など
function getLipidType(array)
{
// SN1からSN4までのchainを連結させる
var lipidType = array["SN1 chain"];
for(var l = 2; l <= 4; l ++){
if(array["SN" + l + " chain"].length > 0)
lipidType += "/" + array["SN" + l + " chain"];
else
break;
}
// SN1が空だった場合はTotalChainを使用する
if(lipidType.length == 0)
lipidType = array["Total chain"];
return lipidType;
}

2017-01-06T01:31:23Z

Sunflower:

// html /////////////////////////////////////////////////////////////////////////////////////////////////////////
// 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 2017/01/06 ・新フォーマットに対応
// 2016/10/26 ・ヒートマップを拡大した状態でsetDataするとおかしな挙動になるため
// 　必ずzoomOutするよう修正
// ・画像出力できるよう修正
// ・画像出力時、X軸がおかしくなるバグを修正
// 2016/10/18 ・highchartsの仕様が変わったようで、setDataやズームをするとX軸がおかしくなるので、
// 　setCategoriesを使用して対処
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// external script //////////////////////////////////////////////////////////////////////////////////////////////
mw.loader.load( ['jquery.ui.sortable'] );
mw.loader.load('https://code.highcharts.com/stock/highstock.js', "text/javascript");

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

// 初期化 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
const DEFAULT_BAR_COLOR = "#7cb5ec";
var barColor = DEFAULT_BAR_COLOR;
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 exportingJS = document.createElement("script");
exportingJS.src = "https://code.highcharts.com/modules/exporting.js";
document.getElementsByTagName("head")[0].appendChild(exportingJS);

var searchButton = document.createElement("input");
searchButton.value = "search";
searchButton.id = "searchButton";
searchButton.type = "button";
searchButton.style.width = "100%";
searchButton.onclick = function(){search()};
document.getElementById("search").appendChild(searchButton);
var showButton = document.createElement("input");
showButton.value = "show graph";
showButton.id = "showButton";
showButton.type = "button";
showButton.disabled = "yes";
showButton.onclick = function(){barColor = DEFAULT_BAR_COLOR; showChart()};
document.getElementById("show").appendChild(showButton);
var checkButton = document.createElement("input");
checkButton.value = "all check/uncheck";
checkButton.type = "button";
checkButton.onclick = function(){checkAllResult()};
document.getElementById("check").appendChild(checkButton);
document.getElementById("graphform").style.display = "none";

// insert "Reset zoom" button
var resetZoomButton = document.createElement("input");
resetZoomButton.setAttribute("type", "button");
resetZoomButton.value = "Reset zoom";
resetZoomButton.id = "resetZoomButton";
resetZoomButton.style.visibility = "hidden";
resetZoomButton.onclick = unzoomBarCharts;
document.getElementById("resetZoom").appendChild(resetZoomButton);

setCombobox('SampleSource');
setCombobox('SampleType');
setCombobox('LipidClass');

$(window).resize(function() {
resizeChart();
});
}
// ウィンドウサイズが変更されたとき、チャートの幅も修正する ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function resizeChart()
{
if(chart == undefined || chart.length == 0)
return;

if(chart[0].options.chart.type != "heatmap"){
// barchart & piechart
var height = 300;
var pieWidth = 400;
var width = $(window).width() - $("#sortableList").width() - $("#mw-panel").width() - pieWidth;
if(width < 300)
width = 300;
for(var i = 0; i < chart.length; i ++)
$("#container" + i).highcharts().setSize(width, height);
for(var i = 0; i < piechart.length; i ++)
$("#pieContainer" + i).highcharts().setSize(pieWidth, height);
} else {
var height = 400;
var width = $(window).width() - $("#sortableList").width() - $("#mw-panel").width();
// heatmap
for(var i = 0; i < chart.length; i ++)
$("#container" + i).highcharts().setSize(width, height);
}
}

// 検索ボックスの初期化 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
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 != 'LipidClass')
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, """).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);
}
// XSS対策用 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function escape(text)
{
if(isFinite(text))
return text;
return text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
}
function attrEscape(text)
{
if(isFinite(text))
return text;
return text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "’");
}
function inchiEscape(text)
{
if(isFinite(text))
return text;
return text.replace(/^InChIKey=/, "").replace(/[^A-Z0-9-]/g, "");
}
// 検索 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function search()
{
document.getElementById("searchButton").disabled = true;
document.getElementById('hit').innerHTML = '';
document.getElementById("showButton").disabled = "yes";
document.getElementById("graphform").style.display = "none";

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

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

document.getElementById('searching').style.display = "block";

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

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

function hasSearched(jsonp)
{
document.getElementById('searching').style.display = "none";
var root = document.getElementById('result');

var result = jsonp;
//var result = JSON.parse(escape(jsonp));
document.getElementById('hit').innerHTML = 'result. ' + escape(result.length) + ' hit(s).';
// 最長文字数を調べる
var lenmax = 0;
for(var i = 0; i < result.length; i ++){
if(result[i].title.length > lenmax)
lenmax = result[i].title.length;
}
lenmax += 6; // "(meta)"分
lenmax /= 1.5;
for(var i = 0; i < result.length; i ++){
var span = document.createElement('span');
span.style.display = "inline-block";
span.style.width = lenmax + "em";

var check = document.createElement('input');
check.type = 'checkbox';
check.id = attrEscape(result[i].title);
check.value = attrEscape(result[i].title);
check.name = 'target';
check.className = "results";
check.onchange = function(e){
checkSelection();
};
span.appendChild(check);
var title = document.createElement('label');
title.setAttribute('for', attrEscape(result[i].title));
title.innerHTML = escape(result[i].title) + ' <a href="' + result[i].meta["Method link"] + '" target="_blank">(meta)</a>';
span.appendChild(title);

root.appendChild(span);
}
document.getElementById("searchButton").disabled = false;

document.getElementById("graphform").style.display = "block";
}
function checkSelection()
{
var c = document.getElementsByClassName("results");
var disabled = true;
for(var i = 0; i < c.length; i ++){
if(c[i].checked){
disabled = false;
break;
}
}
document.getElementById("showButton").disabled = disabled;
}
function checkAllResult()
{
var c = document.getElementsByClassName("results");
var checked = 0;
for(var i = 0; i < c.length; i ++){
if(c[i].checked)
checked ++;
}
var state = true;
if(checked == c.length)
state = false;
for(var i = 0; i < c.length; i ++)
c[i].checked = state;

checkSelection();
}
// チャート表示 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
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("resetZoomButton").style.visibility = "hidden";

document.getElementById("showButton").disabled = true;
document.getElementById("bar") .disabled = true;
document.getElementById("heatmap") .disabled = true;
document.getElementById("sortableList").style.display = "none";

var sortableList = document.getElementById("sortableList");
for(var i = sortableList.childNodes.length-1; i >= 0; i --)
sortableList.removeChild(sortableList.childNodes[i]);
var rateDiv = document.getElementById("rate");
for(var i = rateDiv.childNodes.length-1; i >= 0; i --)
rateDiv.removeChild(rateDiv.childNodes[i]);

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

retrieveChartData(targets, chartType);
}
// データ取得 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function retrieveChartData(targets, chartType)
{
var url = 'https://script.google.com/macros/s/AKfycbxW5WpkJH0PUmmLrMtrluvkaKmz0OTTfeBucudy5-LxalQ7vus/exec?id=' + targets + '&type=' + chartType + '&q=data&callback=hasRetrieved';
//var url = '/lipo/data.php?id=' + targets + '&type=' + chartType + '&q=data';

// jsonpを使った取得
var cutoff = document.getElementById("cutoff");
for(var i = cutoff.childNodes.length-1; i >= 0; i --)
cutoff.removeChild(cutoff.childNodes[i]);
var pieRoot = document.getElementById('pieContainer');
for(var i = pieRoot.childNodes.length-1; i >= 0; i --)
pieRoot.removeChild(pieRoot.childNodes[i]);
var root = document.getElementById('container');
for(var i = root.childNodes.length-1; i >= 0; i --)
root.removeChild(root.childNodes[i]);
document.getElementById('retrieving').style.display = "block";
var jsonp = document.createElement('script');
jsonp.src = url;
document.head.appendChild(jsonp);
}

// コールバック関数(jsonp) ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function hasRetrieved(jsonp)
{
document.getElementById('retrieving').style.display = "none";

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 cutoff = document.getElementById("cutoff");
var cutoffText = document.createElement("input");
cutoffText.id = "cutoffValue";
cutoffText.type = "number";
cutoffText.value = 0;
cutoffText.min = 0;
cutoffText.max = 80;
cutoffText.style.width = "4em";
cutoffText.style.textAlign = "right";
cutoff.appendChild(cutoffText);
var cutoffButton = document.createElement("input");
cutoffButton.value = "< cutoff";
cutoffButton.type = "button";
cutoff.appendChild(cutoffButton);

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

// バーチャート ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
var gBarData;
function getInchiOnBar(seq, x)
{
window.open("http://jcbl.jp/wiki/LBG" + gBarData[seq][x], "new");
console.log(seq + "/" + x + " => " + gBarData[seq][x]);
}
var chart;
var piechart;
var defaultTickInterval = currentTickInterval = 5;
// バーチャートのズーム解除 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function unzoomBarCharts() {
for(var i = 0; i < chart.length; i ++){
//chart[i].xAxis[0].options.tickInterval = defaultTickInterval;
chart[i].xAxis[0].isDirty = true;
chart[i].xAxis[0].setExtremes(null, null, animation=true);
}
document.getElementById("resetZoomButton").style.visibility = "hidden";
}
// データの切り替え（表示/非表示、0-intensity) ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function setBarchartData()
{ // inchiキー未処理 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var target = [];
var cutoff = parseInt(document.getElementById("cutoffValue").value);
for(var j = 0; j < chart[0].data.length; j ++){
var not0 = false;
for(var i = 0; i < chart.length; i ++){
if(chart[i].data[j][1] >= cutoff){
not0 = true;
break;
}
}
target[j] = not0;
}

for(var j = 0; j < chart.length; j ++){
var i = 0;
var data = [];
var xLabels = [];
for(var k = 0,l = 0; k < chart[j].data.length; k ++){
if(target[k]){
// data[i] = [chart[j].xLabels[k], chart[j].data[k][1]];
data[i] = [chart[j].xLabels[k], chart[j].srcdata[k]];
xLabels[i++] = chart[j].xLabels[k];
}
}
chart[j].yAxis[0].setExtremes(0, chart[j].max);
chart[j].yAxis[0].axisTitle.attr({text: "Intensity"});
chart[j].xAxis[0].categories = xLabels;
chart[j].series[0].setData(data, true);
}

unzoomBarCharts();
}
// 表示 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function showBarChart(result)
{
function computeTickInterval(xMin, xMax)
{
var zoomRange = xMax - xMin;

if(zoomRange <= 2)
currentTickInterval = 0.5;
if(zoomRange < 20)
currentTickInterval = 1;
else if(zoomRange < 100)
currentTickInterval = 5;
}

// create ignore 0-intensity button
document.getElementById("cutoffValue").onchange = function(){
setBarchartData();
};

// create sortable list
var sortableList = document.getElementById("sortableList");
for(var i = 0; i < result[0].map.length; i ++){
var line = document.createElement("div");
var cbox = document.createElement("input");
cbox.setAttribute("type", "checkbox");
cbox.setAttribute("checked", "yes");
cbox.setAttribute("seq", i);
cbox.id = "item" + i;
cbox.onchange = function(e){
// 表示/非表示の切り替え
var seq = this.getAttribute("seq");
var option;
if(this.checked){
option = "block";
} else {
option = "none";
}
document.getElementById("container" + seq).style.display = option;
document.getElementById("pieContainer" + seq).style.display = option;
};
line.appendChild(cbox);
var label = document.createElement("label");
label.setAttribute("for", "item" + i);
label.innerHTML = (i+1) + "." + escape(result[0].map[i].title);
line.appendChild(label);
sortableList.appendChild(line);
}
$('#sortableList').sortable({
cursor: 'move',
update: function(event, ui){
var sortableList = document.getElementById("sortableList");
for(var i = 0; i < sortableList.childNodes.length; i ++){
var seq = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
document.getElementById("container" + seq).setAttribute("order", i);
document.getElementById("pieContainer" + seq).setAttribute("order", i);
}
$("#container").html(
$("#container > div").sort(function(o1,o2)
{
var n1 = parseInt($(o1).attr("order"), 10);
var n2 = parseInt($(o2).attr("order"), 10);
if(n1 < n2) return -1;
if(n1 > n2) return 1;
return 0;
})
);
$("#pieContainer").html(
$("#pieContainer > div").sort(function(o1,o2)
{
var n1 = parseInt($(o1).attr("order"), 10);
var n2 = parseInt($(o2).attr("order"), 10);
if(n1 < n2) return -1;
if(n1 > n2) return 1;
return 0;
})
);
}
});

// create barchart(s)
gBarData = [];
chart = [];
piechart = [];
var root = document.getElementById('container');
var pieRoot = document.getElementById('pieContainer');
for(var i = 0; i < result[0].map.length; i ++){
gBarData[i] = [];
// データの整理
var data = [];
var srcdata = [];
var xLabels = [];
for(var j = 0; j < result[0].map[i].data.length; j ++){
// data[j] = [attrEscape(result[0].x[j]), attrEscape(result[0].map[i].data[j][0] * 100 / result[0].map[i].max)];
data[j] = [attrEscape(result[0].x[j]), attrEscape(result[0].map[i].data[j][0] * 100 / result[0].map[i].max)];
srcdata[j] = attrEscape(result[0].map[i].data[j][0]);
xLabels[j] = attrEscape(result[0].x[j]);
// gBarData[i][j] = inchiEscape(result[0].map[i].data[j][2]); // InChIキー
var type = result[0].map[i].title.replace(/.*\//,"");
gBarData[i][j] = type + attrEscape(result[0].x[j]).replace("/","-"); // InChIキー
}

// barchartの追加
var parent = document.createElement('div');
parent.id = 'container' + i;
parent.setAttribute("order", i);
root.appendChild(parent);
chart[i] = new Highcharts.Chart({
chart: {
type: 'column',
zoomType: 'x',
renderTo: parent,
height: 250,
resetZoomButton: {
theme: {
display: 'none'
}
}
},
title: {
text: (i+1) + '.' + attrEscape(result[0].map[i].title)
},
xAxis: {
min: 0,
type: 'category',
labels: {
rotation: -90,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
},
step: 1
},
events : {
afterSetExtremes: function(){
if(!this.chart.options.chart.isZoomed){
if(this.chart.options.chart.isZoomed !== undefined)
document.getElementById("resetZoomButton").style.visibility = "visible";

var xMin = this.chart.xAxis[0].min;
var xMax = this.chart.xAxis[0].max;

var zmRange = computeTickInterval(xMin, xMax);
for(var i = 0; i < chart.length; i ++){
chart[i].xAxis[0].options.tickInterval = zmRange;
chart[i].xAxis[0].isDirty = true;
if(chart[i] !== this){
chart[i].options.chart.isZoomed = true;
chart[i].xAxis[0].setExtremes(xMin, xMax, true);
chart[i].options.chart.isZoomed = false;
}
}
}
},
}
},
scrollbar: {
enabled: true
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Relative Intensity(%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.y:.1f} %'
},
series: [{
name: 'Population',
data: data,
color: barColor,
events: {
click: function(event) {
//alert(event.point.name);
var index = event.target.farthestViewportElement.parentNode.parentElement.id.replace("container","");
getInchiOnBar(index, event.point.x);
}
}
}]
});
chart[i].xAxis[0].categories = xLabels;
chart[i].data = data;
chart[i].srcdata = srcdata;
chart[i].max = result[0].map[i].max;
chart[i].xLabels = xLabels;

// piechartの追加
var pieParent = document.createElement('div');
pieParent.id = 'pieContainer' + i;
pieParent.setAttribute("order", i);
pieRoot.appendChild(pieParent);
piechart[i] = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
renderTo: pieParent,
height: 250
},
title: {
text: (i+1) + '.ratio'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Rate',
colorByPoint: true,
data: result[0].map[i].pie,
events: {
click: function(event) {
barColor = event.point.color;

var nextType = event.point.name;
var targets = '';
var sortableList = document.getElementById("sortableList");
for(var i = 0; i < sortableList.childNodes.length; i ++){
var w = sortableList.childNodes[i].childNodes[1].innerHTML.replace(/^[0-9]+./,"").split("/");
targets += "," + w[0] + "/" + w[1] + "/" + nextType;
}
targets = targets.substring(1);
document.getElementById("showButton").disabled = true;
document.getElementById("bar") .disabled = true;
document.getElementById("heatmap") .disabled = true;
document.getElementById("sortableList").style.display = "none";

var sortableList = document.getElementById("sortableList");
for(var i = sortableList.childNodes.length-1; i >= 0; i --)
sortableList.removeChild(sortableList.childNodes[i]);

retrieveChartData(targets, 'bar');
}
}
}]
});
}
resizeChart();
}
// ヒートマップ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
var chart;
var gHeatmapData;
function getInchiOnHeatmap(seq, x, y) // 未使用
{
window.open("http://jcbl.jp/wiki/LBG" + gHeatmapData[seq].map[0].title.replace(/.*\//, "") + gHeatmapData[seq].x[x].replace("/","-"), "new");
// console.log(seq + "/" + y + "/" + x + " => " + gHeatmapData[seq][y][x]);
console.log(seq + "/" + y + "/" + x + " => " + gHeatmapData[seq].x[x].replace("/","-"));

}
function jumpToJcbl(inchi)
{
window.open("http://jcbl.jp/","new");
console.log(inchi);
}
// データの切り替え（表示/非表示、0-intensity) ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function setHeatmapData(index, seq)
{
var i = 0;
var length = gHeatmapData[index].map.length;

var target = [];
var cutoff = parseInt(document.getElementById("cutoffValue").value);
var xLabels = [];
for(var k = 0; k < gHeatmapData[index].map[0].data.length; k ++){
var not0 = false;
for(var j = 0; j < length; j ++){
if(gHeatmapData[index].map[j].data[k][0] >= cutoff){
not0 = true;
break;
}
}
target[k] = not0;
if(not0)
xLabels[i++] = gHeatmapData[index].x[k];
}

var data = [];
var yLabels = [];
chart[index].inchi = [];
i = 0;
// 表示されている中での最大値を取得する
var maxOfDisplayedAll = 0;
for(var j = 0; j < seq.length && j < length; j ++){
if(maxOfDisplayedAll < gHeatmapData[index].map[seq[j]].max)
maxOfDisplayedAll = gHeatmapData[index].map[seq[j]].max;
}
var max = 0;
for(var j = 0; j < seq.length && j < length; j ++){
if(document.getElementById("eachInRate").checked)
max = gHeatmapData[index].map[seq[j]].max;
else
max = maxOfDisplayedAll;
// max = gHeatmapData[index].maxOfAll; // 常に全ての最大値を基準にする場合はこちらを使う
chart[index].inchi[j] = [];
for(var k = 0,l = 0; k < gHeatmapData[index].map[seq[j]].data.length; k ++){
if(target[k]){
data[i] = [l++, seq.length-j-1, attrEscape(gHeatmapData[index].map[seq[j]].data[k][0] * 100 / max)];
chart[index].inchi[j][k] = inchiEscape(gHeatmapData[index].map[seq[j]].data[k][2]);
i ++;
}
}
yLabels[j] = (parseInt(seq[j])+1) + "." + attrEscape(gHeatmapData[index].map[seq[j]].title.replace(/\/[^\/]+$/, ""));
}
yLabels.reverse();
chart[index].zoomOut();
chart[index].series[0].setData(data, true);
chart[index].yAxis[0].setCategories(yLabels);
chart[index].xAxis[0].setCategories(xLabels);
}
// 表示 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function showHeatmap(result)
{
gHeatmapData = [];
var root = document.getElementById('container');

var sortableList = document.getElementById("sortableList");
chart = [];
gHeatmapData = result;
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 = [];
var length = result[i].map.length
var inchi = [];
for(var j = 0; j < length; j ++){
inchi[j] = [];
for(var k = 0; k < result[i].map[j].data.length; k ++){
data[index] = [k, length-j-1, attrEscape(result[i].map[j].data[k][0] * 100 / result[i].map[j].max)];
// data[index] = [k, length-j-1, attrEscape(result[i].map[j].data[k][0] * 100 / result[i].maxOfAll)];
inchi[j][k] = inchiEscape(result[i].map[j].data[k][2]);
index ++;
}
yLabels[j] = (j+1) + "." + attrEscape(result[i].map[j].title.replace(/\/[^\/]+$/, ""));
}
yLabels.reverse();
for(var j = 0; j < result[i].x.length; j ++)
result[i].x[j] = attrEscape(result[i].x[j]);

// create ignore 0-intensity button
document.getElementById("cutoffValue").onchange = function(){
// 表示/非表示の切り替え // 下と同じなので、後でまとめる
for(var index = 0; index < chart.length; index ++){
var sortableList = document.getElementById("sortableList" + index);
var sequence = [];
for(var i = 0, j = 0; i < sortableList.childNodes.length; i ++){
if(sortableList.childNodes[i].childNodes[0].checked)
sequence[j++] = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
}
setHeatmapData(index, sequence);
}
};

// create sortable list
var listDiv = document.createElement("div");
listDiv.id = "sortableList" + i;
for(var j = 0; j < result[i].map.length; j ++){
var line = document.createElement("div");
var cbox = document.createElement("input");
cbox.setAttribute("type", "checkbox");
cbox.setAttribute("checked", "yes");
cbox.setAttribute("seq", j);
cbox.id = "item" + j;
cbox.onchange = function(e){
// 表示/非表示の切り替え
var index = this.parentElement.parentElement.id.replace("sortableList", "");
var sortableList = document.getElementById("sortableList" + index);
var sequence = [];
for(var i = 0, j = 0; i < sortableList.childNodes.length; i ++){
if(sortableList.childNodes[i].childNodes[0].checked)
sequence[j++] = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
}
setHeatmapData(index, sequence);
};
line.appendChild(cbox);
var label = document.createElement("label");
label.setAttribute("for", "item" + j);
label.innerHTML = (j+1) + "." + escape(result[i].map[j].title);
line.appendChild(label);
listDiv.appendChild(line);
}
sortableList.appendChild(listDiv);
$('#sortableList' + i).sortable({
cursor: 'move',
update: function(event, ui){
var index = ui.item[0].parentElement.id.replace("sortableList", "");
var sortableList = document.getElementById("sortableList" + index);
var sequence = [];
for(var i = 0, j = 0; i < sortableList.childNodes.length; i ++){
if(sortableList.childNodes[i].childNodes[0].checked)
sequence[j++] = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
}
setHeatmapData(index, sequence);
}
});
$('#sortableList').sortable(false);

// それぞれのレート/全体でのレート
var rateCbox = document.createElement("input");
rateCbox.setAttribute("type", "checkbox");
rateCbox.setAttribute("checked", "yes");
rateCbox.id = "eachInRate";
rateCbox.onchange = function(e){
// rateの切り替え
var index = 0; // つであると仮定するので、複数ある場合は修正が必要なことに注意
var sortableList = document.getElementById("sortableList" + index);
var sequence = [];
for(var i = 0, j = 0; i < sortableList.childNodes.length; i ++){
if(sortableList.childNodes[i].childNodes[0].checked)
sequence[j++] = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
}
setHeatmapData(index, sequence);
};
var label = document.createElement("label");
label.setAttribute("for", "eachInRate");
label.innerHTML = "Each in rate";
document.getElementById("rate").appendChild(rateCbox);
document.getElementById("rate").appendChild(label);

// ヒートマップ
chart[i] = new Highcharts.Chart({

chart: {
type: 'heatmap',
zoomType: 'xy',
animation: 1,
marginBottom: 0,
plotBorderWidth: 1,
renderTo: parent,
animation: true,
},

scrollbar: {
enabled: true
},

title: {
text: title,
align: 'left'
},

xAxis: {
categories: result[i].x,
opposite: true,
labels: {
rotation: -90,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
},
step: 1
},
},

yAxis: {
categories: yLabels,
title: null,
labels: {
step: 1
}
},

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] + ' ' +
this.series.xAxis.categories[this.point.x] + ' ' +
(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(0, event.point.x, event.point.y);
// jumpToJcbl(event.point.series.chart.inchi[event.point.y][event.point.x]);
}
}
}
}]

});
chart[i].inchi = inchi;
//chart.setSize(600,300,false);
}
resizeChart();
}

// ※未使用※ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
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;
}

MediaWiki:Lipoquality.js

2017-01-06T01:30:08Z

Sunflower:

// html /////////////////////////////////////////////////////////////////////////////////////////////////////////
// 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 2017/01/06 ・新フォーマットに対応
// 2016/10/26 ・ヒートマップを拡大した状態でsetDataするとおかしな挙動になるため
// 　必ずzoomOutするよう修正
// ・画像出力できるよう修正
// ・画像出力時、X軸がおかしくなるバグを修正
// 2016/10/18 ・highchartsの仕様が変わったようで、setDataやズームをするとX軸がおかしくなるので、
// 　setCategoriesを使用して対処
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// external script //////////////////////////////////////////////////////////////////////////////////////////////
mw.loader.load( ['jquery.ui.sortable'] );
mw.loader.load('https://code.highcharts.com/stock/highstock.js', "text/javascript");

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

// 初期化 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
const DEFAULT_BAR_COLOR = "#7cb5ec";
var barColor = DEFAULT_BAR_COLOR;
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 exportingJS = document.createElement("script");
exportingJS.src = "https://code.highcharts.com/modules/exporting.js";
document.getElementsByTagName("head")[0].appendChild(exportingJS);

var searchButton = document.createElement("input");
searchButton.value = "search";
searchButton.id = "searchButton";
searchButton.type = "button";
searchButton.style.width = "100%";
searchButton.onclick = function(){search()};
document.getElementById("search").appendChild(searchButton);
var showButton = document.createElement("input");
showButton.value = "show graph";
showButton.id = "showButton";
showButton.type = "button";
showButton.disabled = "yes";
showButton.onclick = function(){barColor = DEFAULT_BAR_COLOR; showChart()};
document.getElementById("show").appendChild(showButton);
var checkButton = document.createElement("input");
checkButton.value = "all check/uncheck";
checkButton.type = "button";
checkButton.onclick = function(){checkAllResult()};
document.getElementById("check").appendChild(checkButton);
document.getElementById("graphform").style.display = "none";

// insert "Reset zoom" button
var resetZoomButton = document.createElement("input");
resetZoomButton.setAttribute("type", "button");
resetZoomButton.value = "Reset zoom";
resetZoomButton.id = "resetZoomButton";
resetZoomButton.style.visibility = "hidden";
resetZoomButton.onclick = unzoomBarCharts;
document.getElementById("resetZoom").appendChild(resetZoomButton);

setCombobox('SampleSource');
setCombobox('SampleType');
setCombobox('LipidClass');

$(window).resize(function() {
resizeChart();
});
}
// ウィンドウサイズが変更されたとき、チャートの幅も修正する ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function resizeChart()
{
if(chart == undefined || chart.length == 0)
return;

if(chart[0].options.chart.type != "heatmap"){
// barchart & piechart
var height = 300;
var pieWidth = 400;
var width = $(window).width() - $("#sortableList").width() - $("#mw-panel").width() - pieWidth;
if(width < 300)
width = 300;
for(var i = 0; i < chart.length; i ++)
$("#container" + i).highcharts().setSize(width, height);
for(var i = 0; i < piechart.length; i ++)
$("#pieContainer" + i).highcharts().setSize(pieWidth, height);
} else {
var height = 400;
var width = $(window).width() - $("#sortableList").width() - $("#mw-panel").width();
// heatmap
for(var i = 0; i < chart.length; i ++)
$("#container" + i).highcharts().setSize(width, height);
}
}

// 検索ボックスの初期化 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
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 != 'LipidClass')
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, """).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);
}
// XSS対策用 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function escape(text)
{
if(isFinite(text))
return text;
return text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
}
function attrEscape(text)
{
if(isFinite(text))
return text;
return text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "’");
}
function inchiEscape(text)
{
if(isFinite(text))
return text;
return text.replace(/^InChIKey=/, "").replace(/[^A-Z0-9-]/g, "");
}
// 検索 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function search()
{
document.getElementById("searchButton").disabled = true;
document.getElementById('hit').innerHTML = '';
document.getElementById("showButton").disabled = "yes";
document.getElementById("graphform").style.display = "none";

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

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

document.getElementById('searching').style.display = "block";

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

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

function hasSearched(jsonp)
{
document.getElementById('searching').style.display = "none";
var root = document.getElementById('result');

var result = jsonp;
//var result = JSON.parse(escape(jsonp));
document.getElementById('hit').innerHTML = 'result. ' + escape(result.length) + ' hit(s).';
// 最長文字数を調べる
var lenmax = 0;
for(var i = 0; i < result.length; i ++){
if(result[i].title.length > lenmax)
lenmax = result[i].title.length;
}
lenmax += 6; // "(meta)"分
lenmax /= 1.5;
for(var i = 0; i < result.length; i ++){
var span = document.createElement('span');
span.style.display = "inline-block";
span.style.width = lenmax + "em";

var check = document.createElement('input');
check.type = 'checkbox';
check.id = attrEscape(result[i].title);
check.value = attrEscape(result[i].title);
check.name = 'target';
check.className = "results";
check.onchange = function(e){
checkSelection();
};
span.appendChild(check);
var title = document.createElement('label');
title.setAttribute('for', attrEscape(result[i].title));
title.innerHTML = escape(result[i].title) + ' <a href="' + result[i].meta["Method link"] + '" target="_blank">(meta)</a>';
span.appendChild(title);

root.appendChild(span);
}
document.getElementById("searchButton").disabled = false;

document.getElementById("graphform").style.display = "block";
}
function checkSelection()
{
var c = document.getElementsByClassName("results");
var disabled = true;
for(var i = 0; i < c.length; i ++){
if(c[i].checked){
disabled = false;
break;
}
}
document.getElementById("showButton").disabled = disabled;
}
function checkAllResult()
{
var c = document.getElementsByClassName("results");
var checked = 0;
for(var i = 0; i < c.length; i ++){
if(c[i].checked)
checked ++;
}
var state = true;
if(checked == c.length)
state = false;
for(var i = 0; i < c.length; i ++)
c[i].checked = state;

checkSelection();
}
// チャート表示 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
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("resetZoomButton").style.visibility = "hidden";

document.getElementById("showButton").disabled = true;
document.getElementById("bar") .disabled = true;
document.getElementById("heatmap") .disabled = true;
document.getElementById("sortableList").style.display = "none";

var sortableList = document.getElementById("sortableList");
for(var i = sortableList.childNodes.length-1; i >= 0; i --)
sortableList.removeChild(sortableList.childNodes[i]);
var rateDiv = document.getElementById("rate");
for(var i = rateDiv.childNodes.length-1; i >= 0; i --)
rateDiv.removeChild(rateDiv.childNodes[i]);

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

retrieveChartData(targets, chartType);
}
// データ取得 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function retrieveChartData(targets, chartType)
{
var url = 'https://script.google.com/macros/s/AKfycbxW5WpkJH0PUmmLrMtrluvkaKmz0OTTfeBucudy5-LxalQ7vus/exec?id=' + targets + '&type=' + chartType + '&q=data&callback=hasRetrieved';
//var url = '/lipo/data.php?id=' + targets + '&type=' + chartType + '&q=data';

// jsonpを使った取得
var cutoff = document.getElementById("cutoff");
for(var i = cutoff.childNodes.length-1; i >= 0; i --)
cutoff.removeChild(cutoff.childNodes[i]);
var pieRoot = document.getElementById('pieContainer');
for(var i = pieRoot.childNodes.length-1; i >= 0; i --)
pieRoot.removeChild(pieRoot.childNodes[i]);
var root = document.getElementById('container');
for(var i = root.childNodes.length-1; i >= 0; i --)
root.removeChild(root.childNodes[i]);
document.getElementById('retrieving').style.display = "block";
var jsonp = document.createElement('script');
jsonp.src = url;
document.head.appendChild(jsonp);
}

// コールバック関数(jsonp) ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function hasRetrieved(jsonp)
{
document.getElementById('retrieving').style.display = "none";

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 cutoff = document.getElementById("cutoff");
var cutoffText = document.createElement("input");
cutoffText.id = "cutoffValue";
cutoffText.type = "number";
cutoffText.value = 0;
cutoffText.min = 0;
cutoffText.max = 80;
cutoffText.style.width = "4em";
cutoffText.style.textAlign = "right";
cutoff.appendChild(cutoffText);
var cutoffButton = document.createElement("input");
cutoffButton.value = "< cutoff";
cutoffButton.type = "button";
cutoff.appendChild(cutoffButton);

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

// バーチャート ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
var gBarData;
function getInchiOnBar(seq, x)
{
window.open("http://jcbl.jp/wiki/LBG" + gBarData[seq][x], "new");
console.log(seq + "/" + x + " => " + gBarData[seq][x]);
}
var chart;
var piechart;
var defaultTickInterval = currentTickInterval = 5;
// バーチャートのズーム解除 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function unzoomBarCharts() {
for(var i = 0; i < chart.length; i ++){
//chart[i].xAxis[0].options.tickInterval = defaultTickInterval;
chart[i].xAxis[0].isDirty = true;
chart[i].xAxis[0].setExtremes(null, null, animation=true);
}
document.getElementById("resetZoomButton").style.visibility = "hidden";
}
// データの切り替え（表示/非表示、0-intensity) ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function setBarchartData()
{ // inchiキー未処理 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var target = [];
var cutoff = parseInt(document.getElementById("cutoffValue").value);
for(var j = 0; j < chart[0].data.length; j ++){
var not0 = false;
for(var i = 0; i < chart.length; i ++){
if(chart[i].data[j][1] >= cutoff){
not0 = true;
break;
}
}
target[j] = not0;
}

for(var j = 0; j < chart.length; j ++){
var i = 0;
var data = [];
var xLabels = [];
for(var k = 0,l = 0; k < chart[j].data.length; k ++){
if(target[k]){
// data[i] = [chart[j].xLabels[k], chart[j].data[k][1]];
data[i] = [chart[j].xLabels[k], chart[j].srcdata[k][1]];
xLabels[i++] = chart[j].xLabels[k];
}
}
alert(chart[j].max + " " + chart[j].srcdata[0][1]);
chart[j].yAxis[0].setExtremes(0, chart[j].max);
chart[j].yAxis[0].axisTitle.attr({text: "Intensity"});
chart[j].xAxis[0].categories = xLabels;
chart[j].series[0].setData(data, true);
}

unzoomBarCharts();
}
// 表示 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function showBarChart(result)
{
function computeTickInterval(xMin, xMax)
{
var zoomRange = xMax - xMin;

if(zoomRange <= 2)
currentTickInterval = 0.5;
if(zoomRange < 20)
currentTickInterval = 1;
else if(zoomRange < 100)
currentTickInterval = 5;
}

// create ignore 0-intensity button
document.getElementById("cutoffValue").onchange = function(){
setBarchartData();
};

// create sortable list
var sortableList = document.getElementById("sortableList");
for(var i = 0; i < result[0].map.length; i ++){
var line = document.createElement("div");
var cbox = document.createElement("input");
cbox.setAttribute("type", "checkbox");
cbox.setAttribute("checked", "yes");
cbox.setAttribute("seq", i);
cbox.id = "item" + i;
cbox.onchange = function(e){
// 表示/非表示の切り替え
var seq = this.getAttribute("seq");
var option;
if(this.checked){
option = "block";
} else {
option = "none";
}
document.getElementById("container" + seq).style.display = option;
document.getElementById("pieContainer" + seq).style.display = option;
};
line.appendChild(cbox);
var label = document.createElement("label");
label.setAttribute("for", "item" + i);
label.innerHTML = (i+1) + "." + escape(result[0].map[i].title);
line.appendChild(label);
sortableList.appendChild(line);
}
$('#sortableList').sortable({
cursor: 'move',
update: function(event, ui){
var sortableList = document.getElementById("sortableList");
for(var i = 0; i < sortableList.childNodes.length; i ++){
var seq = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
document.getElementById("container" + seq).setAttribute("order", i);
document.getElementById("pieContainer" + seq).setAttribute("order", i);
}
$("#container").html(
$("#container > div").sort(function(o1,o2)
{
var n1 = parseInt($(o1).attr("order"), 10);
var n2 = parseInt($(o2).attr("order"), 10);
if(n1 < n2) return -1;
if(n1 > n2) return 1;
return 0;
})
);
$("#pieContainer").html(
$("#pieContainer > div").sort(function(o1,o2)
{
var n1 = parseInt($(o1).attr("order"), 10);
var n2 = parseInt($(o2).attr("order"), 10);
if(n1 < n2) return -1;
if(n1 > n2) return 1;
return 0;
})
);
}
});

// create barchart(s)
gBarData = [];
chart = [];
piechart = [];
var root = document.getElementById('container');
var pieRoot = document.getElementById('pieContainer');
for(var i = 0; i < result[0].map.length; i ++){
gBarData[i] = [];
// データの整理
var data = [];
var srcdata = [];
var xLabels = [];
for(var j = 0; j < result[0].map[i].data.length; j ++){
// data[j] = [attrEscape(result[0].x[j]), attrEscape(result[0].map[i].data[j][0] * 100 / result[0].map[i].max)];
data[j] = [attrEscape(result[0].x[j]), attrEscape(result[0].map[i].data[j][0] * 100 / result[0].map[i].max)];
srcdata[j] = attrEscape(result[0].map[i].data[j][0]);
xLabels[j] = attrEscape(result[0].x[j]);
// gBarData[i][j] = inchiEscape(result[0].map[i].data[j][2]); // InChIキー
var type = result[0].map[i].title.replace(/.*\//,"");
gBarData[i][j] = type + attrEscape(result[0].x[j]).replace("/","-"); // InChIキー
}

// barchartの追加
var parent = document.createElement('div');
parent.id = 'container' + i;
parent.setAttribute("order", i);
root.appendChild(parent);
chart[i] = new Highcharts.Chart({
chart: {
type: 'column',
zoomType: 'x',
renderTo: parent,
height: 250,
resetZoomButton: {
theme: {
display: 'none'
}
}
},
title: {
text: (i+1) + '.' + attrEscape(result[0].map[i].title)
},
xAxis: {
min: 0,
type: 'category',
labels: {
rotation: -90,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
},
step: 1
},
events : {
afterSetExtremes: function(){
if(!this.chart.options.chart.isZoomed){
if(this.chart.options.chart.isZoomed !== undefined)
document.getElementById("resetZoomButton").style.visibility = "visible";

var xMin = this.chart.xAxis[0].min;
var xMax = this.chart.xAxis[0].max;

var zmRange = computeTickInterval(xMin, xMax);
for(var i = 0; i < chart.length; i ++){
chart[i].xAxis[0].options.tickInterval = zmRange;
chart[i].xAxis[0].isDirty = true;
if(chart[i] !== this){
chart[i].options.chart.isZoomed = true;
chart[i].xAxis[0].setExtremes(xMin, xMax, true);
chart[i].options.chart.isZoomed = false;
}
}
}
},
}
},
scrollbar: {
enabled: true
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Relative Intensity(%)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.y:.1f} %'
},
series: [{
name: 'Population',
data: data,
color: barColor,
events: {
click: function(event) {
//alert(event.point.name);
var index = event.target.farthestViewportElement.parentNode.parentElement.id.replace("container","");
getInchiOnBar(index, event.point.x);
}
}
}]
});
chart[i].xAxis[0].categories = xLabels;
chart[i].data = data;
chart[i].srcdata = srcdata;
chart[i].max = result[0].map[i].max;
chart[i].xLabels = xLabels;

// piechartの追加
var pieParent = document.createElement('div');
pieParent.id = 'pieContainer' + i;
pieParent.setAttribute("order", i);
pieRoot.appendChild(pieParent);
piechart[i] = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
renderTo: pieParent,
height: 250
},
title: {
text: (i+1) + '.ratio'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Rate',
colorByPoint: true,
data: result[0].map[i].pie,
events: {
click: function(event) {
barColor = event.point.color;

var nextType = event.point.name;
var targets = '';
var sortableList = document.getElementById("sortableList");
for(var i = 0; i < sortableList.childNodes.length; i ++){
var w = sortableList.childNodes[i].childNodes[1].innerHTML.replace(/^[0-9]+./,"").split("/");
targets += "," + w[0] + "/" + w[1] + "/" + nextType;
}
targets = targets.substring(1);
document.getElementById("showButton").disabled = true;
document.getElementById("bar") .disabled = true;
document.getElementById("heatmap") .disabled = true;
document.getElementById("sortableList").style.display = "none";

var sortableList = document.getElementById("sortableList");
for(var i = sortableList.childNodes.length-1; i >= 0; i --)
sortableList.removeChild(sortableList.childNodes[i]);

retrieveChartData(targets, 'bar');
}
}
}]
});
}
resizeChart();
}
// ヒートマップ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
var chart;
var gHeatmapData;
function getInchiOnHeatmap(seq, x, y) // 未使用
{
window.open("http://jcbl.jp/wiki/LBG" + gHeatmapData[seq].map[0].title.replace(/.*\//, "") + gHeatmapData[seq].x[x].replace("/","-"), "new");
// console.log(seq + "/" + y + "/" + x + " => " + gHeatmapData[seq][y][x]);
console.log(seq + "/" + y + "/" + x + " => " + gHeatmapData[seq].x[x].replace("/","-"));

}
function jumpToJcbl(inchi)
{
window.open("http://jcbl.jp/","new");
console.log(inchi);
}
// データの切り替え（表示/非表示、0-intensity) ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function setHeatmapData(index, seq)
{
var i = 0;
var length = gHeatmapData[index].map.length;

var target = [];
var cutoff = parseInt(document.getElementById("cutoffValue").value);
var xLabels = [];
for(var k = 0; k < gHeatmapData[index].map[0].data.length; k ++){
var not0 = false;
for(var j = 0; j < length; j ++){
if(gHeatmapData[index].map[j].data[k][0] >= cutoff){
not0 = true;
break;
}
}
target[k] = not0;
if(not0)
xLabels[i++] = gHeatmapData[index].x[k];
}

var data = [];
var yLabels = [];
chart[index].inchi = [];
i = 0;
// 表示されている中での最大値を取得する
var maxOfDisplayedAll = 0;
for(var j = 0; j < seq.length && j < length; j ++){
if(maxOfDisplayedAll < gHeatmapData[index].map[seq[j]].max)
maxOfDisplayedAll = gHeatmapData[index].map[seq[j]].max;
}
var max = 0;
for(var j = 0; j < seq.length && j < length; j ++){
if(document.getElementById("eachInRate").checked)
max = gHeatmapData[index].map[seq[j]].max;
else
max = maxOfDisplayedAll;
// max = gHeatmapData[index].maxOfAll; // 常に全ての最大値を基準にする場合はこちらを使う
chart[index].inchi[j] = [];
for(var k = 0,l = 0; k < gHeatmapData[index].map[seq[j]].data.length; k ++){
if(target[k]){
data[i] = [l++, seq.length-j-1, attrEscape(gHeatmapData[index].map[seq[j]].data[k][0] * 100 / max)];
chart[index].inchi[j][k] = inchiEscape(gHeatmapData[index].map[seq[j]].data[k][2]);
i ++;
}
}
yLabels[j] = (parseInt(seq[j])+1) + "." + attrEscape(gHeatmapData[index].map[seq[j]].title.replace(/\/[^\/]+$/, ""));
}
yLabels.reverse();
chart[index].zoomOut();
chart[index].series[0].setData(data, true);
chart[index].yAxis[0].setCategories(yLabels);
chart[index].xAxis[0].setCategories(xLabels);
}
// 表示 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function showHeatmap(result)
{
gHeatmapData = [];
var root = document.getElementById('container');

var sortableList = document.getElementById("sortableList");
chart = [];
gHeatmapData = result;
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 = [];
var length = result[i].map.length
var inchi = [];
for(var j = 0; j < length; j ++){
inchi[j] = [];
for(var k = 0; k < result[i].map[j].data.length; k ++){
data[index] = [k, length-j-1, attrEscape(result[i].map[j].data[k][0] * 100 / result[i].map[j].max)];
// data[index] = [k, length-j-1, attrEscape(result[i].map[j].data[k][0] * 100 / result[i].maxOfAll)];
inchi[j][k] = inchiEscape(result[i].map[j].data[k][2]);
index ++;
}
yLabels[j] = (j+1) + "." + attrEscape(result[i].map[j].title.replace(/\/[^\/]+$/, ""));
}
yLabels.reverse();
for(var j = 0; j < result[i].x.length; j ++)
result[i].x[j] = attrEscape(result[i].x[j]);

// create ignore 0-intensity button
document.getElementById("cutoffValue").onchange = function(){
// 表示/非表示の切り替え // 下と同じなので、後でまとめる
for(var index = 0; index < chart.length; index ++){
var sortableList = document.getElementById("sortableList" + index);
var sequence = [];
for(var i = 0, j = 0; i < sortableList.childNodes.length; i ++){
if(sortableList.childNodes[i].childNodes[0].checked)
sequence[j++] = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
}
setHeatmapData(index, sequence);
}
};

// create sortable list
var listDiv = document.createElement("div");
listDiv.id = "sortableList" + i;
for(var j = 0; j < result[i].map.length; j ++){
var line = document.createElement("div");
var cbox = document.createElement("input");
cbox.setAttribute("type", "checkbox");
cbox.setAttribute("checked", "yes");
cbox.setAttribute("seq", j);
cbox.id = "item" + j;
cbox.onchange = function(e){
// 表示/非表示の切り替え
var index = this.parentElement.parentElement.id.replace("sortableList", "");
var sortableList = document.getElementById("sortableList" + index);
var sequence = [];
for(var i = 0, j = 0; i < sortableList.childNodes.length; i ++){
if(sortableList.childNodes[i].childNodes[0].checked)
sequence[j++] = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
}
setHeatmapData(index, sequence);
};
line.appendChild(cbox);
var label = document.createElement("label");
label.setAttribute("for", "item" + j);
label.innerHTML = (j+1) + "." + escape(result[i].map[j].title);
line.appendChild(label);
listDiv.appendChild(line);
}
sortableList.appendChild(listDiv);
$('#sortableList' + i).sortable({
cursor: 'move',
update: function(event, ui){
var index = ui.item[0].parentElement.id.replace("sortableList", "");
var sortableList = document.getElementById("sortableList" + index);
var sequence = [];
for(var i = 0, j = 0; i < sortableList.childNodes.length; i ++){
if(sortableList.childNodes[i].childNodes[0].checked)
sequence[j++] = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
}
setHeatmapData(index, sequence);
}
});
$('#sortableList').sortable(false);

// それぞれのレート/全体でのレート
var rateCbox = document.createElement("input");
rateCbox.setAttribute("type", "checkbox");
rateCbox.setAttribute("checked", "yes");
rateCbox.id = "eachInRate";
rateCbox.onchange = function(e){
// rateの切り替え
var index = 0; // つであると仮定するので、複数ある場合は修正が必要なことに注意
var sortableList = document.getElementById("sortableList" + index);
var sequence = [];
for(var i = 0, j = 0; i < sortableList.childNodes.length; i ++){
if(sortableList.childNodes[i].childNodes[0].checked)
sequence[j++] = sortableList.childNodes[i].childNodes[0].getAttribute("seq");
}
setHeatmapData(index, sequence);
};
var label = document.createElement("label");
label.setAttribute("for", "eachInRate");
label.innerHTML = "Each in rate";
document.getElementById("rate").appendChild(rateCbox);
document.getElementById("rate").appendChild(label);

// ヒートマップ
chart[i] = new Highcharts.Chart({

chart: {
type: 'heatmap',
zoomType: 'xy',
animation: 1,
marginBottom: 0,
plotBorderWidth: 1,
renderTo: parent,
animation: true,
},

scrollbar: {
enabled: true
},

title: {
text: title,
align: 'left'
},

xAxis: {
categories: result[i].x,
opposite: true,
labels: {
rotation: -90,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
},
step: 1
},
},

yAxis: {
categories: yLabels,
title: null,
labels: {
step: 1
}
},

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] + ' ' +
this.series.xAxis.categories[this.point.x] + ' ' +
(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(0, event.point.x, event.point.y);
// jumpToJcbl(event.point.series.chart.inchi[event.point.y][event.point.x]);
}
}
}
}]

});
chart[i].inchi = inchi;
//chart.setSize(600,300,false);
}
resizeChart();
}

// ※未使用※ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
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;
}