Difference between revisions of "MediaWiki:Lipoquality.js"

From Jcbl.jp
Jump to: navigation, search
 
(19 intermediate revisions by one user not shown)
Line 1: Line 1:
 +
// Last-Update: 2020/03/23
 
// html /////////////////////////////////////////////////////////////////////////////////////////////////////////
 
// html /////////////////////////////////////////////////////////////////////////////////////////////////////////
 
// <span id="search"></span><span id="show"></span>
 
// <span id="search"></span><span id="show"></span>
 +
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
//
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
Line 6: Line 9:
 
mw.loader.load( ['jquery.ui.sortable'] );
 
mw.loader.load( ['jquery.ui.sortable'] );
 
mw.loader.load('https://code.highcharts.com/stock/highstock.js', "text/javascript");
 
mw.loader.load('https://code.highcharts.com/stock/highstock.js', "text/javascript");
 +
importScript( 'MediaWiki:LipoqualityCommon.js' );
 +
importScript( 'MediaWiki:LipoqualityGet.js'    );
 +
importScript( 'MediaWiki:LipoqualitySearch.js' );
 +
importScript( 'MediaWiki:LipoqualityChart.js'  );
  
 
// initialize //////////////////////////////////////////////////////////////////////////////////////////////////
 
// initialize //////////////////////////////////////////////////////////////////////////////////////////////////
addOnloadHook(init);  
+
addOnloadHook(lipoqulityInit);  
  
// 初期化 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
var gChartType;
function init()
+
var gDataType;
 +
 
 +
// 初期化 //////////////////////////////////////////////////////////////////////////////////////////////////////
 +
function lipoqulityInit()
 
{
 
{
 
// highstock.jsに依存するため、別で読み込む
 
// highstock.jsに依存するため、別で読み込む
Line 17: Line 27:
 
heatmapJS.src = "https://code.highcharts.com/modules/heatmap.js";
 
heatmapJS.src = "https://code.highcharts.com/modules/heatmap.js";
 
document.getElementsByTagName("head")[0].appendChild(heatmapJS);
 
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");
 
var searchButton = document.createElement("input");
searchButton.value = "search";
+
searchButton.value   = "search";
searchButton.id   = "searchButton";
+
searchButton.id       = "searchButton";
searchButton.type = "button";
+
searchButton.type     = "button";
searchButton.onclick = function(){search()};
+
searchButton.disabled = true;
 +
searchButton.style.width = "100%";
 +
searchButton.onclick = function(){
 +
var sampleSource = document.getElementById("samplesource").value;
 +
var sampleType  = document.getElementById("sampletype").value;
 +
var lipidClass  = document.getElementById("lipidclass").value;
 +
gDataType        = document.getElementById("datatype").value;
 +
search(sampleSource, sampleType, lipidClass, gDataType);
 +
};
 
document.getElementById("search").appendChild(searchButton);
 
document.getElementById("search").appendChild(searchButton);
 +
// グラフ表示ボタン
 
var showButton = document.createElement("input");
 
var showButton = document.createElement("input");
showButton.value = "show";
+
showButton.value = "show graph";
 
showButton.id    = "showButton";
 
showButton.id    = "showButton";
 
showButton.type  = "button";
 
showButton.type  = "button";
showButton.onclick = function(){showChart()};
+
showButton.disabled = true;
 +
showButton.onclick = function(){barColor = DEFAULT_BAR_COLOR; document.getElementById('drawing').style.display = "block"; window.setTimeout( function(){showChart(getSelectedIDs(), gDataType); document.getElementById('drawing').style.display = "none"; }, 10 );};
 
document.getElementById("show").appendChild(showButton);
 
document.getElementById("show").appendChild(showButton);
 +
// チェックボタン
 +
var checkButton = document.createElement("input");
 +
checkButton.value = "all check/uncheck";
 +
checkButton.id    = "allswitch";
 +
checkButton.type  = "button";
 +
checkButton.onclick = function(){checkAllResult()};
 +
document.getElementById("check").appendChild(checkButton);
 +
// ダウンロードボタン
 +
var downloadFileName = "lipodata.txt";
 +
var downloadLink = document.createElement("a");
 +
downloadLink.href = "#";
 +
downloadLink.download = downloadFileName;
 +
downloadLink.id = "downloadLink";
 +
downloadLink.onclick = function(){
 +
    var blob = new Blob([ getDownloadData(getSelectedIDs()) ], { "type" : "text/plain" });
  
// insert "Reset zoom" button
+
    if (window.navigator.msSaveBlob) {
var resetZoomButton    = document.createElement("input");
+
        window.navigator.msSaveBlob(blob, downloadFileName);
resetZoomButton.setAttribute("type", "button");
+
        window.navigator.msSaveOrOpenBlob(blob, downloadFileName);
resetZoomButton.value   = "Reset zoom";
+
    } else {
resetZoomButton.id      = "resetZoomButton";
+
        document.getElementById("downloadLink").href = window.URL.createObjectURL(blob);
resetZoomButton.style   = "visibility: hidden";
+
    }
resetZoomButton.onclick = unzoomBarCharts;
+
};
document.getElementById("resetZoom").appendChild(resetZoomButton);
+
document.getElementById("check").appendChild(downloadLink);
 +
var downloadButton = document.createElement("input");
 +
downloadButton.value = "download checked";
 +
downloadButton.type  = "button";
 +
downloadButton.style = "margin-left: 1em";
 +
downloadButton.disabled = true;
 +
downloadButton.id    = "downloadButton";
 +
downloadLink.appendChild(downloadButton);
  
setCombobox('Classification');
 
setCombobox('Sample');
 
setCombobox('Type');
 
  
$(window).resize(function() {
+
document.getElementById("graphform").style.display = "none";
resizeHeatmap();
+
 
});
+
// コンポーネント初期化
 +
lipoqulityChartInit();
 +
 
 +
// コンボボックスの初期化
 +
// setCombobox('SampleSource');
 +
// setCombobox('SampleType');
 +
// setCombobox('LipidClass');
 +
retrieveSelectionList(setCombobox);
 +
 
 +
// 全データの取得
 +
retrieveAllDataFromText(hasRetrievedAllData);
 
}
 
}
// ウィンドウサイズが変更されたとき、ヒートマップの幅も修正する ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
// 全データの取得が完了した後の処理 /////////////////////////////////////
function resizeHeatmap()
+
// return なし
 +
function hasRetrievedAllData()
 
{
 
{
var height = 400;
+
// GETメソッドによる検索を行う場合の処理 /////////////////////////////
var width = $(window).width() - $("#sortableList").width() - $("#mw-panel").width();
+
var query  = window.location.search.substring(1);
if(chart == undefined || chart.length == 0 || chart[0].options.chart.type != "heatmap")
+
var params = query.split('&');
return;
+
var sampleSource = "All";
 +
var sampleType  = "All";
 +
var lipidClass  = "";
 +
var chain        = "";
 +
var chart       = "";
 +
var species      = "";
 +
var sampleName  = "";
 +
// パラメータの取得
 +
// ss = SampleSource - デフォルトはAll
 +
// st = SampleType - デフォルトはAll
 +
// lc = LipidClass - デフォルトは空文字。この文字列が入っていないと、検索は行わない
 +
// chain = Lipid chain - chainグラフの表示には必須項目。16:0/16:0/16:0のようにスラッシュ区切り
 +
for(var i = 0; i < params.length; i++){
 +
var w = params[i].split('=');
 +
var name  = decodeURIComponent(w[0]);
 +
var value = decodeURIComponent(w[1]);
 +
if(name == "ss"){ // sample source
 +
sampleSource = value;
  
for(var i = 0; i < chart.length; i ++)
+
} else if(name == "st"){ // sample type
$("#container" + i).highcharts().setSize(width, height);
+
sampleType = value;
}
+
 
 +
} else if(name == "lc"){ // lipid class
 +
lipidClass = value;
 +
 
 +
} else if(name == "ct"){ // chart type
 +
chart = value;
 +
 
 +
} else if(name == "sp"){ // species
 +
species = value;
 +
 
 +
} else if(name == "sn"){ // sample name
 +
sampleName = value;
 +
 
 +
} else if(name == "dt"){
 +
gDataType = value;
 +
}
 +
}
 +
// speciesが指定された場合、対象データ以外を削除する ///////////
 +
if(species.length > 0){
 +
var spReg = new RegExp(translateForReg(species), "i");
 +
for(key in gAllData){
 +
if(!spReg.test(key)){ // speciesが合致するか
 +
delete gAllData[key];
 +
}
 +
}
 +
}
 +
////////////////////////////////////////////////////////////////
 +
var index = lipidClass.indexOf(" ");
 +
if(index > 0){
 +
chain = lipidClass.substring(index+1);
 +
lipidClass = lipidClass.substring(0, index);
 +
} else {
 +
index = lipidClass.indexOf("(");
 +
if(index >= 0){
 +
chain = lipidClass.substring(index+1, lipidClass.length-1);
 +
lipidClass = lipidClass.substring(0, index);
 +
}
 +
}
 +
chain = chain.replace(/^\(/g,"");
 +
chain = chain.replace(/[_]/g,"/");
 +
if(lipidClass.indexOf("Cer-") < 0){
 +
// chain = chain.replace(/\)$/g,"");
 +
chain = chain.replace(/[)(]/g,"/");
 +
}
 +
chain = chain.replace(/\/\//g,"/");
 +
if(chart == "c" && chain.length > 0){
 +
// lipidclass基準の棒グラフを表示
 +
selectCombobox([sampleSource, sampleType, lipidClass, gDataType]);
 +
var result = retrieveChainData(sampleName, sampleSource, sampleType, lipidClass, chain, gDataType); // speciesからsamplenameに変更
 +
if(result.x.length > 0){
 +
showChainChart(result);
 +
}
 +
 
 +
} else if(chart == "b" && lipidClass.length > 0){
 +
// bar(棒グラフ)を表示
 +
selectCombobox([sampleSource, sampleType, lipidClass, gDataType]);
 +
search(sampleSource, sampleType, lipidClass, gDataType);
 +
if(document.getElementsByClassName("results").length > 0){
 +
document.getElementById('allswitch').click();
 +
document.getElementById('bar').checked = true;
 +
showChart(getSelectedIDs(), gDataType);
 +
}
 +
}
  
 +
document.getElementById('loading').style.display = "none";
 +
// 検索ボタンは有効化しておく
 +
document.getElementById("searchButton").disabled = false;
 +
}
 +
function getSelectedIDs()
 +
{
 +
var targets = [];
 +
var boxes = document.getElementsByName('target');
 +
for(var i = 0; i < boxes.length; i ++){
 +
if(boxes[i].checked)
 +
targets.push(boxes[i].value);
 +
}
 +
if(targets.length == 0){
 +
alert("選択してください");
 +
return [];
 +
}
 +
return targets;
 +
}
 
// 検索ボックスの初期化 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
// 検索ボックスの初期化 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
// param name カテゴリ名
 +
// return なし
 
function setCombobox(name)
 
function setCombobox(name)
 
{
 
{
Line 78: Line 232:
 
var lines = text[0].textContent.split("\n");
 
var lines = text[0].textContent.split("\n");
 
var select = document.getElementById(name.toLowerCase());
 
var select = document.getElementById(name.toLowerCase());
if(name != 'Type')
+
if(name != 'LipidClass')
 
lines.unshift('All');
 
lines.unshift('All');
 
for(var i = 0; i < lines.length; i ++){
 
for(var i = 0; i < lines.length; i ++){
Line 92: Line 246:
 
}
 
}
  
// search
+
// AJAXを使って、コンボボックスの選択項目を取得する
 
xmlHttpRequest.open('GET', url, true);
 
xmlHttpRequest.open('GET', url, true);
 
xmlHttpRequest.responseType = 'text';
 
xmlHttpRequest.responseType = 'text';
 
xmlHttpRequest.send(null);
 
xmlHttpRequest.send(null);
 
}
 
}
// XSS対策用 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
var globalList = null;
function escape(text)
+
function setCombobox()
 
{
 
{
if(isFinite(text))
+
document.getElementById("samplesource").onchange  = function(){ setNames() };
return text;
+
document.getElementById("sampletype").onchange    = function(){ setLipidcategories() };
return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
document.getElementById("lipidcategory").onchange = function(){ setLipidclassess() };
 +
 
 +
var keys = Object.keys(gListData);
 +
appendOption("samplesource", "All");
 +
for(var i = 0; i < keys.length; i ++){
 +
appendOption("samplesource", keys[i]);
 +
}
 +
 
 +
setNames();
 
}
 
}
function attrEscape(text)
+
 
 +
function appendOption(id, value)
 
{
 
{
if(isFinite(text))
+
var parent = document.getElementById(id);
return text;
+
var op = document.createElement("option");
return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&rsquo;");
+
op.valuie = value;
 +
op.textContent = value;
 +
parent.appendChild(op);
 
}
 
}
function inchiEscape(text)
+
function removeAll(id)
 
{
 
{
if(isFinite(text))
+
parent = document.getElementById(id);
return text;
+
while(parent.lastChild){
return text.replace(/[^A-Z0-9-]/g, "");
+
parent.removeChild(parent.lastChild);
 +
}
 +
}
 +
function getRegExp(id)
 +
{
 +
var item = document.getElementById(id).value;
 +
var regexp;
 +
if(item == "All"){
 +
regexp = new RegExp('.*');
 +
} else {
 +
regexp = new RegExp("^" + item.replace("(","\\(").replace(")","\\)") + "$");
 +
}
 +
return regexp;
 +
}
 +
function setNames()
 +
{
 +
removeAll("sampletype");
 +
globalList = [];
 +
getSelectionList([getRegExp("samplesource"), null, null], gListData, 0, 0);
 +
globalList.sort();
 +
appendOption("sampletype", "All");
 +
for(var i = 0; i < globalList.length; i ++){
 +
appendOption("sampletype", globalList[i]);
 +
}
 +
 
 +
setLipidcategories();
 +
}
 +
function setLipidcategories()
 +
{
 +
removeAll("lipidcategory");
 +
globalList = [];
 +
getSelectionList([getRegExp("samplesource"), getRegExp("sampletype"), null], gListData, 1, 0);
 +
globalList.sort();
 +
appendOption("lipidcategory", "All");
 +
for(var i = 0; i < globalList.length; i ++){
 +
appendOption("lipidcategory", globalList[i]);
 +
}
 +
 
 +
setLipidclassess();
 +
}
 +
function setLipidclassess()
 +
{
 +
removeAll("lipidclass");
 +
globalList = [];
 +
getSelectionList([getRegExp("samplesource"), getRegExp("sampletype"), getRegExp("lipidcategory")], gListData, 2, 0);
 +
globalList.sort();
 +
for(var i = 0; i < globalList.length; i ++){
 +
appendOption("lipidclass", globalList[i]);
 +
}
 +
}
 +
function getSelectionList(patterns, obj, depth, level)
 +
{
 +
if(level == 2){
 +
// last
 +
var targets = Object.keys(obj);
 +
for(var i = 0; i < targets.length; i ++){
 +
if(patterns[level].test(targets[i])){
 +
for(var j = 0; j < obj[targets[i]].length; j ++){
 +
if(globalList.indexOf(obj[targets[i]][j]) == -1)
 +
globalList.push(obj[targets[i]][j]);
 +
}
 +
}
 +
}
 +
} else {
 +
// sub
 +
var keys = Object.keys(obj);
 +
for(var i = 0; i < keys.length; i ++){
 +
if(patterns[level].test(keys[i])){
 +
if(level == depth){
 +
var targets = Object.keys(obj[keys[i]][0]);
 +
for(var j = 0; j < targets.length; j ++){
 +
if(globalList.indexOf(targets[j]) == -1)
 +
globalList.push(targets[j]);
 +
}
 +
} else {
 +
getSelectionList(patterns, obj[keys[i]][0], depth, level+1);
 +
}
 +
}
 +
}
 +
}
 +
}
 +
 
 +
// 指定されたコンボボックスの値をセットする /////////////////////////////////////
 +
// param targets - 選択するSampleSource, SampleType, LipidClassの項目値
 +
// return なし
 +
function selectCombobox(targets)
 +
{
 +
var ids = ["samplesource", "sampletype", "lipidclass", "datatype"];
 +
 
 +
// 一つでもコンボボックスの初期化が終わっていなければ、処理を後回しにする
 +
var counter = 1;
 +
for(var i = 0; i < ids.length; i ++)
 +
counter *= document.getElementById(ids[i]).options.length;
 +
if(counter == 0){
 +
window.setTimeout( function() { selectCombobox(targets) }, 50 );
 +
return;
 +
}
 +
 
 +
// コンボボックスの値をセットする
 +
for(var i = 0; i < ids.length; i ++){
 +
var cb = document.getElementById(ids[i]);
 +
for(var j = 0; j < cb.options.length; j ++){
 +
if(cb.options[j].value == targets[i]){
 +
cb.selectedIndex = j;
 +
break;
 +
}
 +
}
 +
}
 
}
 
}
 
// 検索 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
// 検索 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function search()
+
// param sampleSource - 検索対象のSampleSource
 +
// param sampleType  - 検索対象のSampleType
 +
// param lipidClass  - 検索対象のLipidClass
 +
// return なし
 +
function search(sampleSource, sampleType, lipidClass, dataType)
 
{
 
{
document.getElementById("searchButton").disabled = true;
+
// 検索ボタン等を無効化しておく
document.getElementById('hit').innerHTML = '';
+
document.getElementById("searchButton").disabled     = true;
 +
document.getElementById("downloadButton").disabled    = true;
 +
document.getElementById("showButton")  .disabled      = true;
 +
document.getElementById('hit')         .innerHTML     = "";
 +
document.getElementById("graphform")  .style.display = "none";
  
var classification = document.getElementById("classification").value;
+
// 「検索中」を表示
var sample  = document.getElementById("sample").value;
+
document.getElementById('searching').style.display = "block";
var type    = document.getElementById("type").value;
+
  
var url = 'https://script.google.com/macros/s/AKfycbwnSskrJWOPYksPyPqL5zHhGQxqeRpHhxt6ZzfaH-OCoMbG_w51/exec?classification=' + classification + '&sample=' + sample + '&type=' + type + '&q=search&callback=hasSearched';
+
// 検索を行う
 +
var result = lipoqualitySearch(sampleSource, sampleType, lipidClass, dataType);
 +
// 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'
 
// var url = '/lipo/json.txt'
  
// jsonpを使って検索
+
// 過去の検索結果を削除する
 
var root = document.getElementById('result');
 
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 = '';
 
root.textContent = '';
 
for(var i = root.childNodes.length-1; i >= 0; i --)
 
for(var i = root.childNodes.length-1; i >= 0; i --)
 
root.removeChild(root.childNodes[i]);
 
root.removeChild(root.childNodes[i]);
  
var result = jsonp;
+
// 「検索中」を非表示
 +
document.getElementById('searching').style.display = "none";
 +
var root = document.getElementById('result');
 +
 
 +
// var result = jsonp;
 
//var result = JSON.parse(escape(jsonp));
 
//var result = JSON.parse(escape(jsonp));
 
document.getElementById('hit').innerHTML = 'result. ' + escape(result.length) + ' hit(s).';
 
document.getElementById('hit').innerHTML = 'result. ' + escape(result.length) + ' hit(s).';
// 最長文字数を調べる
+
// チェックボックスを並べるため、最長文字数を調べる
 
var lenmax = 0;
 
var lenmax = 0;
 
for(var i = 0; i < result.length; i ++){
 
for(var i = 0; i < result.length; i ++){
Line 154: Line 429:
 
lenmax = result[i].title.length;
 
lenmax = result[i].title.length;
 
}
 
}
lenmax /= 2;
+
lenmax += 6; // "(meta)"分
 +
lenmax /= 1.5;
 +
// チェックボックスの作成
 
for(var i = 0; i < result.length; i ++){
 
for(var i = 0; i < result.length; i ++){
 
var span = document.createElement('span');
 
var span = document.createElement('span');
span.style = "display: inline-block; width: " + lenmax + "em";
+
span.style.display = "inline-block";
 +
span.style.width   = lenmax + "em";
  
 
var check = document.createElement('input');
 
var check = document.createElement('input');
Line 164: Line 442:
 
check.value = attrEscape(result[i].title);
 
check.value = attrEscape(result[i].title);
 
check.name  = 'target';
 
check.name  = 'target';
 +
check.className = "results";
 +
check.onchange = function(e){
 +
checkSelection();
 +
};
 
span.appendChild(check);
 
span.appendChild(check);
 
var title = document.createElement('label');
 
var title = document.createElement('label');
 
title.setAttribute('for', attrEscape(result[i].title));
 
title.setAttribute('for', attrEscape(result[i].title));
title.innerHTML = escape(result[i].title);
+
title.innerHTML = escape(result[i].title) + ' <a href="' + result[i]["Method link"] + '" target="_blank">(meta)</a>';
 
span.appendChild(title);
 
span.appendChild(title);
  
 
root.appendChild(span);
 
root.appendChild(span);
 
}
 
}
 +
// 検索ボタンを有効化
 
document.getElementById("searchButton").disabled = false;
 
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("resetZoomButton").style = "visibility: hidden";
 
  
document.getElementById("showButton").disabled = true;
+
document.getElementById("graphform").style.display = "block";
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 chartType;
+
if(document.getElementById('bar').checked)
+
chartType = 'bar';
+
else
+
chartType = 'heatmap';
+
 
+
retrieveChartData(targets, chartType);
+
 
}
 
}
// データ取得  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
// チェックボックスの状態に応じて、グラフ表示ボタンを有効/無効化する /////////////////
function retrieveChartData(targets, chartType)
+
// return なし
 +
function checkSelection()
 
{
 
{
var url = 'https://script.google.com/macros/s/AKfycbwnSskrJWOPYksPyPqL5zHhGQxqeRpHhxt6ZzfaH-OCoMbG_w51/exec?id=' + targets + '&type=' + chartType + '&q=data&callback=hasRetrieved';
+
var c = document.getElementsByClassName("results");
//var url = '/lipo/data.php?id=' +  targets + '&type=' + chartType + '&q=data';
+
var disabled = true;
 
+
for(var i = 0; i < c.length; i ++){
// jsonpを使った取得
+
if(c[i].checked){
var ignore0 = document.getElementById("ignore0");
+
disabled = false;
for(var i = ignore0.childNodes.length-1; i >= 0; i --)
+
break;
ignore0.removeChild(ignore0.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]);
+
root.textContent = 'Retrieving...';
+
var jsonp = document.createElement('script');
+
jsonp.src = url;
+
document.head.appendChild(jsonp);
+
}
+
 
+
// コールバック関数(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 ignore0 = document.getElementById("ignore0");
+
var cbox0ignore = document.createElement("input");
+
cbox0ignore.id = "ignore0box";
+
cbox0ignore.setAttribute("type","checkbox");
+
ignore0.appendChild(cbox0ignore);
+
var ignoreLabel = document.createElement("label");
+
ignoreLabel.innerHTML = "ignore 0-intensity column(s)";
+
ignoreLabel.setAttribute("for", "ignore0box");
+
ignore0.appendChild(ignoreLabel);
+
 
+
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/","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 ignore0 = !document.getElementById("ignore0box").checked;
+
var xLabels = [];
+
for(var j = 0; j < chart[0].data.length; j ++){
+
var not0 = false;
+
for(var i = 0; i < chart.length; i ++){
+
if(ignore0 || chart[i].data[j] != 0){
+
not0 = true;
+
break;
+
}
+
 
}
 
}
target[j] = not0;
 
 
}
 
}
 
+
document.getElementById("showButton").disabled    = disabled;
for(var j = 0; j < chart.length; j ++){
+
document.getElementById("downloadButton").disabled = disabled;
var i = 0;
+
var data = [];
+
for(var k = 0,l = 0; k < chart[j].data.length; k ++){
+
if(target[k]){
+
data[i++] = chart[j].data[k];
+
}
+
}
+
chart[j].series[0].setData(data, true);
+
}
+
 
+
unzoomBarCharts();
+
 
}
 
}
// 表示 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
// すべてのチェックボックスをチェックする/アンチェックする //////////////////////
function showBarChart(result)
+
// return なし
 +
function checkAllResult()
 
{
 
{
function computeTickInterval(xMin, xMax)
+
var c = document.getElementsByClassName("results");
{
+
var zoomRange = xMax - xMin;
+
  
if(zoomRange <= 2)
+
// チェックするか、アンチェックするかを調べる
currentTickInterval = 0.5;
+
var checked = 0;
if(zoomRange < 20)
+
for(var i = 0; i < c.length; i ++){
currentTickInterval = 1;
+
if(c[i].checked)
else if(zoomRange < 100)
+
checked ++;
currentTickInterval = 5;
+
 
}
 
}
 +
var state = true;
 +
if(checked == c.length)
 +
state = false;
  
// create ignore 0-intensity button
+
// チェック状態を変更する
document.getElementById("ignore0box").onchange = function(){
+
for(var i = 0; i < c.length; i ++)
setBarchartData();
+
c[i].checked = state;
};
+
  
// create sortable list
+
checkSelection();
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 = [];
+
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])];
+
gBarData[i][j] = inchiEscape(result[0].map[i].data[j][2]); // 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'
+
}
+
},
+
title: {
+
text: '分子種'
+
},
+
events : {
+
afterSetExtremes: function(){
+
if(!this.chart.options.chart.isZoomed){
+
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;
+
}
+
}
+
document.getElementById("resetZoomButton").style = "visibility: visible";
+
}
+
},
+
}
+
},
+
scrollbar: {
+
enabled: true
+
},
+
yAxis: {
+
min: 0,
+
max: 100,
+
title: {
+
text: 'Relative Intensity(%)'
+
}
+
},
+
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);
+
  }
+
}
+
}]
+
});
+
chart[i].data = data;
+
 
+
// 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) + '.amount'
+
},
+
tooltip: {
+
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+
},
+
plotOptions: {
+
pie: {
+
allowPointSelect: true,
+
cursor: 'pointer',
+
dataLabels: {
+
enabled: true,
+
format: '<b>{point.name}</b>: {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) {
+
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');
+
}
+
}
+
}]
+
});
+
}
+
}
+
// ヒートマップ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
var chart;
+
var gHeatmapData;
+
function getInchiOnHeatmap(seq, x, y) // 未使用
+
{
+
window.open("http://jcbl.jp/","new");
+
console.log(seq + "/" + y + "/" + x + " => " + gHeatmapData[seq][y][x]);
+
}
+
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 ignore0 = !document.getElementById("ignore0box").checked;
+
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(ignore0 || gHeatmapData[index].map[j].data[k][0] != 0){
+
not0 = true;
+
break;
+
}
+
}
+
target[k] = not0;
+
if(not0)
+
xLabels[i++] = gHeatmapData[index].x[k];
+
}
+
 
+
var data = [];
+
var yLabels = [];
+
chart[index].inchi = [];
+
i = 0;
+
for(var j = 0; j < seq.length && j < length; j ++){
+
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])];
+
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);
+
}
+
yLabels.reverse();
+
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])];
+
inchi[j][k] = inchiEscape(result[i].map[j].data[k][2]);
+
index ++;
+
}
+
yLabels[j] = (j+1) + "." + attrEscape(result[i].map[j].title);
+
}
+
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("ignore0box").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);
+
 
+
// ヒートマップ
+
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'
+
}
+
},
+
},
+
+
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);
+
jumpToJcbl(event.point.series.chart.inchi[event.point.y][event.point.x]);
+
}
+
}
+
}
+
}]
+
+
});
+
chart[i].inchi = inchi;
+
//chart.setSize(600,300,false);
+
}
+
resizeHeatmap();
+
}
+
 
+
// ※未使用※ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
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;
+
 
}
 
}

Latest revision as of 11:57, 23 March 2020

// Last-Update: 2020/03/23
// html /////////////////////////////////////////////////////////////////////////////////////////////////////////
// <span id="search"></span><span id="show"></span>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

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

// initialize //////////////////////////////////////////////////////////////////////////////////////////////////
addOnloadHook(lipoqulityInit); 

var gChartType;
var gDataType;

// 初期化 //////////////////////////////////////////////////////////////////////////////////////////////////////
function lipoqulityInit()
{
	// 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.disabled = true;
	searchButton.style.width = "100%";
	searchButton.onclick = function(){
		var sampleSource = document.getElementById("samplesource").value;
		var sampleType   = document.getElementById("sampletype").value;
		var lipidClass   = document.getElementById("lipidclass").value;
		gDataType        = document.getElementById("datatype").value;
		search(sampleSource, sampleType, lipidClass, gDataType);
	};
	document.getElementById("search").appendChild(searchButton);
		// グラフ表示ボタン
	var showButton = document.createElement("input");
	showButton.value = "show graph";
	showButton.id    = "showButton";
	showButton.type  = "button";
	showButton.disabled = true;
	showButton.onclick = function(){barColor = DEFAULT_BAR_COLOR; document.getElementById('drawing').style.display = "block"; window.setTimeout( function(){showChart(getSelectedIDs(), gDataType); document.getElementById('drawing').style.display = "none"; }, 10 );};
	document.getElementById("show").appendChild(showButton);
		// チェックボタン
	var checkButton = document.createElement("input");
	checkButton.value = "all check/uncheck";
	checkButton.id    = "allswitch";
	checkButton.type  = "button";
	checkButton.onclick = function(){checkAllResult()};
	document.getElementById("check").appendChild(checkButton);
		// ダウンロードボタン
	var downloadFileName = "lipodata.txt";
	var downloadLink = document.createElement("a");
	downloadLink.href = "#";
	downloadLink.download = downloadFileName;
	downloadLink.id = "downloadLink";
	downloadLink.onclick = function(){
	    var blob = new Blob([ getDownloadData(getSelectedIDs()) ], { "type" : "text/plain" });

	    if (window.navigator.msSaveBlob) { 
	        window.navigator.msSaveBlob(blob, downloadFileName); 
	        window.navigator.msSaveOrOpenBlob(blob, downloadFileName); 
	    } else {
	        document.getElementById("downloadLink").href = window.URL.createObjectURL(blob);
	    }
	};
	document.getElementById("check").appendChild(downloadLink);
	var downloadButton = document.createElement("input");
	downloadButton.value = "download checked";
	downloadButton.type  = "button";
	downloadButton.style = "margin-left: 1em";
	downloadButton.disabled = true;
	downloadButton.id    = "downloadButton";
	downloadLink.appendChild(downloadButton);


	document.getElementById("graphform").style.display = "none";

	// コンポーネント初期化
	lipoqulityChartInit();

	// コンボボックスの初期化
//	setCombobox('SampleSource');
//	setCombobox('SampleType');
//	setCombobox('LipidClass');
	retrieveSelectionList(setCombobox);

	// 全データの取得
	retrieveAllDataFromText(hasRetrievedAllData);
}
// 全データの取得が完了した後の処理 /////////////////////////////////////
// return なし
function hasRetrievedAllData()
{
	// GETメソッドによる検索を行う場合の処理 /////////////////////////////
	var query  = window.location.search.substring(1);
	var params = query.split('&');
	var sampleSource = "All";
	var sampleType   = "All";
	var lipidClass   = "";
	var chain        = "";
	var chart        = "";
	var species      = "";
	var sampleName   = "";
	// パラメータの取得
	// ss = SampleSource - デフォルトはAll
	// st = SampleType - デフォルトはAll
	// lc = LipidClass - デフォルトは空文字。この文字列が入っていないと、検索は行わない
	// chain = Lipid chain - chainグラフの表示には必須項目。16:0/16:0/16:0のようにスラッシュ区切り
	for(var i = 0; i < params.length; i++){
		var w = params[i].split('=');
		var name  = decodeURIComponent(w[0]);
		var value = decodeURIComponent(w[1]);
		if(name == "ss"){ // sample source
			sampleSource = value;

		} else if(name == "st"){ // sample type
			sampleType = value;

		} else if(name == "lc"){ // lipid class
			lipidClass = value;

		} else if(name == "ct"){ // chart type
			chart = value;

		} else if(name == "sp"){ // species
			species = value;

		} else if(name == "sn"){ // sample name
			sampleName = value;

		} else if(name == "dt"){
			gDataType = value;
		}
	}
// speciesが指定された場合、対象データ以外を削除する ///////////
	if(species.length > 0){
		var spReg = new RegExp(translateForReg(species), "i");
		for(key in gAllData){
			if(!spReg.test(key)){ // speciesが合致するか
				delete gAllData[key];
			}
		}
	}
////////////////////////////////////////////////////////////////
	var index = lipidClass.indexOf(" ");
	if(index > 0){
		chain = lipidClass.substring(index+1);
		lipidClass = lipidClass.substring(0, index);
	} else {
		index = lipidClass.indexOf("(");
		if(index >= 0){
			chain = lipidClass.substring(index+1, lipidClass.length-1);
			lipidClass = lipidClass.substring(0, index);
		}
	}
	chain = chain.replace(/^\(/g,"");
	chain = chain.replace(/[_]/g,"/");
	if(lipidClass.indexOf("Cer-") < 0){
//		chain = chain.replace(/\)$/g,"");
		chain = chain.replace(/[)(]/g,"/");
	}
	chain = chain.replace(/\/\//g,"/");
	if(chart == "c" && chain.length > 0){
		// lipidclass基準の棒グラフを表示
		selectCombobox([sampleSource, sampleType, lipidClass, gDataType]);
		var result = retrieveChainData(sampleName, sampleSource, sampleType, lipidClass, chain, gDataType); // speciesからsamplenameに変更
		if(result.x.length > 0){
			showChainChart(result);
		}

	} else if(chart == "b" && lipidClass.length > 0){
		// bar(棒グラフ)を表示
		selectCombobox([sampleSource, sampleType, lipidClass, gDataType]);
		search(sampleSource, sampleType, lipidClass, gDataType);
		if(document.getElementsByClassName("results").length > 0){
			document.getElementById('allswitch').click();
			document.getElementById('bar').checked = true;
			showChart(getSelectedIDs(), gDataType);
		}
	}

	document.getElementById('loading').style.display = "none";
	// 検索ボタンは有効化しておく
	document.getElementById("searchButton").disabled = false;
}
function getSelectedIDs()
{
	var targets = [];
	var boxes = document.getElementsByName('target');
	for(var i = 0; i < boxes.length; i ++){
		if(boxes[i].checked)
			targets.push(boxes[i].value);
	}
	if(targets.length == 0){
		alert("選択してください");
		return [];
	}
	return targets;
}
// 検索ボックスの初期化 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
// param name カテゴリ名
// return なし
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, "&quot;").replace(/'/g, "&rsquo");;
					select.appendChild(opt);
				}
			} else {
				// error
				console.log('search failed. ' + this.status + ':' + this.statusText + "/" + this.readyState);
			}
		}
	}

	// AJAXを使って、コンボボックスの選択項目を取得する
	xmlHttpRequest.open('GET', url, true);
	xmlHttpRequest.responseType = 'text';
	xmlHttpRequest.send(null);
}
var globalList = null;
function setCombobox()
{
	document.getElementById("samplesource").onchange  = function(){ setNames() };
	document.getElementById("sampletype").onchange    = function(){ setLipidcategories() };
	document.getElementById("lipidcategory").onchange = function(){ setLipidclassess() };

	var keys = Object.keys(gListData);
	appendOption("samplesource", "All");
	for(var i = 0; i < keys.length; i ++){
		appendOption("samplesource", keys[i]);
	}

	setNames();
}

function appendOption(id, value)
{
	var parent = document.getElementById(id);
	var op = document.createElement("option");
	op.valuie = value;
	op.textContent = value;
	parent.appendChild(op);
}
function removeAll(id)
{
	parent = document.getElementById(id);
	while(parent.lastChild){
		parent.removeChild(parent.lastChild);
	}
}
function getRegExp(id)
{
	var item = document.getElementById(id).value;
	var regexp;
	if(item == "All"){
		regexp = new RegExp('.*');
	} else {
		regexp = new RegExp("^" + item.replace("(","\\(").replace(")","\\)") + "$");
	}
	return regexp;
}
function setNames()
{
	removeAll("sampletype");
	globalList = [];
	getSelectionList([getRegExp("samplesource"), null, null], gListData, 0, 0);
	globalList.sort();
	appendOption("sampletype", "All");
	for(var i = 0; i < globalList.length; i ++){
		appendOption("sampletype", globalList[i]);
	}

	setLipidcategories();
}
function setLipidcategories()
{
	removeAll("lipidcategory");
	globalList = [];
	getSelectionList([getRegExp("samplesource"), getRegExp("sampletype"), null], gListData, 1, 0);
	globalList.sort();
	appendOption("lipidcategory", "All");
	for(var i = 0; i < globalList.length; i ++){
		appendOption("lipidcategory", globalList[i]);
	}

	setLipidclassess();
}
function setLipidclassess()
{
	removeAll("lipidclass");
	globalList = [];
	getSelectionList([getRegExp("samplesource"), getRegExp("sampletype"), getRegExp("lipidcategory")], gListData, 2, 0);
	globalList.sort();
	for(var i = 0; i < globalList.length; i ++){
		appendOption("lipidclass", globalList[i]);
	}
}
function getSelectionList(patterns, obj, depth, level)
{
	if(level == 2){
		// last
		var targets = Object.keys(obj);
		for(var i = 0; i < targets.length; i ++){
			if(patterns[level].test(targets[i])){
				for(var j = 0; j < obj[targets[i]].length; j ++){
					if(globalList.indexOf(obj[targets[i]][j]) == -1)
						globalList.push(obj[targets[i]][j]);
				}
			}
		}
	} else {
		// sub
		var keys = Object.keys(obj);
		for(var i = 0; i < keys.length; i ++){
			if(patterns[level].test(keys[i])){
				if(level == depth){
					var targets = Object.keys(obj[keys[i]][0]);
					for(var j = 0; j < targets.length; j ++){
						if(globalList.indexOf(targets[j]) == -1)
							globalList.push(targets[j]);
					}
				} else {
					getSelectionList(patterns, obj[keys[i]][0], depth, level+1);
				}
			}
		}
	}
}

// 指定されたコンボボックスの値をセットする /////////////////////////////////////
// param targets - 選択するSampleSource, SampleType, LipidClassの項目値
// return なし
function selectCombobox(targets)
{
	var ids = ["samplesource", "sampletype", "lipidclass", "datatype"];

	// 一つでもコンボボックスの初期化が終わっていなければ、処理を後回しにする
	var counter = 1;
	for(var i = 0; i < ids.length; i ++)
		counter *= document.getElementById(ids[i]).options.length;
	if(counter == 0){
		window.setTimeout( function() { selectCombobox(targets) }, 50 );
		return;
	}

	// コンボボックスの値をセットする
	for(var i = 0; i < ids.length; i ++){
		var cb = document.getElementById(ids[i]);
		for(var j = 0; j < cb.options.length; j ++){
			if(cb.options[j].value == targets[i]){
				cb.selectedIndex = j;
				break;
			}
		}
	}
}
// 検索 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
// param sampleSource - 検索対象のSampleSource
// param sampleType   - 検索対象のSampleType
// param lipidClass   - 検索対象のLipidClass
// return なし
function search(sampleSource, sampleType, lipidClass, dataType)
{
	// 検索ボタン等を無効化しておく
	document.getElementById("searchButton").disabled      = true;
	document.getElementById("downloadButton").disabled    = true;
	document.getElementById("showButton")  .disabled      = true;
	document.getElementById('hit')         .innerHTML     = "";
	document.getElementById("graphform")   .style.display = "none";

	// 「検索中」を表示
	document.getElementById('searching').style.display = "block";

	// 検索を行う
	var result = lipoqualitySearch(sampleSource, sampleType, lipidClass, dataType);
//	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'

	// 過去の検索結果を削除する
	var root = document.getElementById('result');
	root.textContent = '';
	for(var i = root.childNodes.length-1; i >= 0; i --)
		root.removeChild(root.childNodes[i]);

	// 「検索中」を非表示
	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]["Method link"] + '" target="_blank">(meta)</a>';
		span.appendChild(title);

		root.appendChild(span);
	}
	// 検索ボタンを有効化
	document.getElementById("searchButton").disabled = false;

	document.getElementById("graphform").style.display = "block";
}
// チェックボックスの状態に応じて、グラフ表示ボタンを有効/無効化する /////////////////
// return なし
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;
	document.getElementById("downloadButton").disabled = disabled;
}
// すべてのチェックボックスをチェックする/アンチェックする //////////////////////
// return なし
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();
}
Personal tools