MediaWiki:Lipoquality.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
// Last-Update: 2020/02/06
// 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,"");
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, """).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();
}
