HighChart｜Mash up the Linked Open Data

HighChart = function(containerId, options) {
	new Application.highChart(containerId, options);
};

if (Application === "undefined" || !Application) {
	var Application = {};
}

Application.highChart = function() {
	this._init.apply(this, arguments);
};

Application.highChart.prototype = {
	
	_containerId : null,
	_options : null,
	_workId : null,
	_fileName : null,
	_highChartContainerId : null,
	_appProperty : null,
	
	_default : {
		filterNamespace : "http://linkdata.org/",
		propertyFilterNamespace : "http://linkdata.org/property",
		propertyFilterExpression : "Expression",
		subjectUriPhrase : "http://atted.jp/data/locus/",
		subjectPPDBUriPhrase : "http://ppdb.agr.gifu-u.ac.jp/ppdb/cgi-bin/display.cgi?organism=At&gene=",
		selectSubjectClass : "selectSubject",
		drawArea : "drawArea"
	},
	
	_init : function(containerId, options) {
		this._containerId = containerId;
		this._options = $.extend({}, this._default, options);
		this._workId = this._options.workId;
		this._fileName = this._options.fileName;
		var date = new Date();
		this._highChartContainerId = "high_chart_" + date.getTime();
		this._initAppProperty(this._options);
		this._initView();
		this._initSelect();
	},
	
	_initAppProperty : function(opts) {
		var obj = {
			workId : opts.workId,
			fileName : opts.fileName
		};
		this._appProperty = new Application.motifProperty(obj);
	},
	
	_initView : function() {
		var self = this;
		var sb = [];
		sb[sb.length] = "<div class='row'>";
		sb[sb.length] = "<div class='label left'>Select Subject</div>";
		sb[sb.length] = "<div class='left'>";
		sb[sb.length] = "<select class='" + self._default.selectSubjectClass + "'>";
		sb[sb.length] = "<option value='" + -1 + "'>-- Select Subject --</option>";
		$.each(LinkData.getSubjects(self._workId, self._fileName), function(subKey, subValue) {
			var label = self._getLabel(subValue);
			sb[sb.length] = "<option value='" + subValue + "'>" + label + "</option>";
		});
		sb[sb.length] = "</select>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "</div>";
		sb[sb.length] = "<div id='" + self._highChartContainerId + "'></div>";
		$("#" + this._containerId).append(sb.join(""));
	},
	
	_initSelect : function() {
		var self = this;
		$select = $("#" + self._containerId + " ." + self._default.selectSubjectClass);
		$select.change(function() {
			var subject = $("option:selected", this).val();
			var dataArray = self._getDataArray(self._workId, self._fileName, subject);
			var xCategory = self._getXCategory(self._workId, self._fileName, subject);
			self._drawChart(self._highChartContainerId, dataArray, xCategory);
		});
	},
	
	_getDataArray : function(workId, fileName, subject) {
		var self = this;
		var tripleList = LinkData.getTriplesBySubject(workId, fileName, subject);
		var dataArray = [];
		var dataObject = {};
		var array = [];
		var duplicateProperty = [];
		$.each (tripleList, function(tKey, tValue) {
			var property = tValue.property;
			if (property.indexOf(self._options.filterNamespace) == -1) {
				return;
			}
			if ($.inArray(property, duplicateProperty) > -1) {
				return;
			}
			if (property.indexOf(self._options.propertyFilterNamespace) == -1 || property.indexOf(self._options.propertyFilterExpression) > -1) {
				array.push(parseFloat(tValue.object));
				duplicateProperty.push(property);
			}
		});
		dataObject.name = self._getLabel(subject);
		dataObject.data = array;
		dataArray.push(dataObject);
		return dataArray;
	},
	
	_getXCategory : function(workId, fileName, subject) {
		var self = this;
		var tripleList = LinkData.getTriplesBySubject(workId, fileName, subject);
		var array = [];
		var duplicateProperty = [];
		$.each (tripleList, function(tKey, tValue) {
			var property = tValue.property;
			if (property.indexOf(self._options.filterNamespace) == -1) {
				return;
			}
			if ($.inArray(property, duplicateProperty) > -1) {
				return;
			}
			if (property.indexOf(self._options.propertyFilterNamespace) == -1 || property.indexOf(self._options.propertyFilterExpression) > -1) {
				var label = self._getPropertyLabel(property);
				label = (label && label.trim().length != 0) ? label : self._getLabelAfterHash(property);
				array.push(label);
				duplicateProperty.push(property);
			}
		});
		return array;
	},
	
	_drawChart : function(containerId, dataArray, xCategory) {
		var self = this;
		var chart = new Highcharts.Chart({
			chart: {
				renderTo: containerId,
				type: 'line',
				marginRight: 130,
				marginBottom: 125
			},
			title: {
				text: self._fileName
			},
			xAxis: {
				categories: xCategory,
				labels : {
					rotation: 315
				}
			},
			tooltip: {
				formatter: function() {
					return '<b>'+ this.series.name + '</b><br/>' + this.x + ' [' + this.y + ']';
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 100,
				borderWidth: 0
			},
			series: dataArray
 		});
	},
	
	_getLabel : function(value) {
		var self = this;
		if (value.indexOf(self._default.subjectUriPhrase) > -1) {
			var propLabel = value;
			var arr = value.split(self._default.subjectUriPhrase);
			if (arr.length > 1) {
				propLabel = decodeURIComponent(arr[1]);
			}
			return propLabel;
		} else if (value.indexOf(self._default.subjectPPDBUriPhrase) > -1) {
			var propLabel = value;
			var arr = value.split(self._default.subjectPPDBUriPhrase);
			if (arr.length > 1) {
				propLabel = decodeURIComponent(arr[1]);
			}
			return propLabel;
		} else if (value.indexOf("#") > -1) {
			return self._getLabelAfterHash(value);
		}
		return value;
	},
	
	_getPropertyLabel : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
			propLabel = this._appProperty.getPropertyNameByLabel(propLabel);
		}
		return propLabel;
	},
	
	_getLabelAfterHash : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	}
	
};

Application.motifProperty = function() {
	this._init.apply(this, arguments);
};

Application.motifProperty.prototype = {

_options : null,
	_propMap : null,
	_nameMap : null,
	
	_default : {
		nameMappingNamespace : "http://atted.jp/help/slide_GeneExp_v3.shtml#",
		nameMappingProperty : "http://purl.org/dc/elements/1.1/title",
		propertyMappingExpression : "Expression",
		propertyMappingWorkUri : "http://linkdata.org/work"
	},
	
	_init : function(options) {
		this._options = $.extend({}, this._default, options);
		this._propMap = [];
		this._nameMap = [];
		this._initPropMap(this._options);
		this._initNameMap();
	},
	
	_initPropMap : function(opts) {
		var self = this, workId = opts.workId, fileName = opts.fileName;
		$.each(LinkData.getProperties(workId, fileName), function(key, value) {
			var label = self._getLabel(value);
			if (!self._propMap[label]) {
				self._propMap[label] = value;
			}
		});
	},
	
	_initNameMap : function() {
		var self = this, nameKey;
		$.each(LinkData.getWorks(), function(workKey, workId) {
			$.each(LinkData.getFiles(workId), function(fileKey, fileName) {
				$.each(LinkData.getSubjects(workId, fileName), function(subKey, subValue) {
					nameKey = self._getNameKey(subValue);
					if (nameKey) {
						var nameArray = LinkData.getObjects(workId, fileName, subValue, self._options.nameMappingProperty);
						if (nameArray && nameArray.length > 0) {
							self._nameMap[nameKey] = nameArray[0];
						}
					}
				});
			});
		});
	},
	
	_getNameKey : function(value) {
		var key;
		if (value && value.indexOf(this._options.nameMappingNamespace) >= 0) {
			key = value.split("#")[1];
		}
		return key;
	},
	
	_getLabel : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	},
	
	getOptionArray : function() {
		var self = this, list = new Object();
		var workId = self._options.workId, fileName = self._options.fileName;
		$.each(LinkData.getProperties(workId, fileName), function(key, value) {
			if (value.indexOf(self._options.propertyMappingWorkUri) > -1 || value.indexOf(self._options.propertyMappingExpression) > -1) {
				var propLabel = self._getLabel(value);
				var name = self._nameMap[propLabel];
				list[propLabel] = (name) ? name : propLabel;
			}
		});
		return list;
	},
	
	getPropertyByLabel : function(label) {
		return this._propMap[label];
	},
	
	getPropertyNameByLabel : function(label) {
		return this._nameMap[label];
	}

};

$(document).ready(function(){
	var containerId = "container";
	var options = {
		workId : "rdf1s295i",
		fileName : "AtGenExpress_ATTED_Flowering"
	}
	new Application.highChart(containerId, options);
});

LinkData Work	Table Data
GenoCon2 Challenge A - Developmental conditions Contributor:GenoCon Update:Sep 11, 2012 5708 Downloads, 16 Applications	Flowering Fruit_Seeds Leaf Root Seedling Stem Whole_Plant
GenoCon2 Challenge A - Developmental Coexpression (AtGenExpress + ATTED-II promoter motif) Contributor:GenoCon Update:Jan 17, 2013 4431 Downloads, 12 Applications Developmental Microarray Expression Data (AtGenExpress) of plant developmental tissues, combined with CEG coexpression analysis regulatory (7mer) motif calculations (ATTED-II). We took the median of triplicate measurements from AtGenExpress, then sorted the developmental series into plant tissues, with one category for seedlings (8 days old or less) and another for whole plants (older than 8 days). <br><br> <strong>References</strong> (for ATTED-II):<br> <a href="http://www.ncbi.nlm.nih.gov/pubmed/17130150">http://www.ncbi.nlm.nih.gov/pubmed/17130150</a><br> <strong>References</strong> (for AtGenExpress)<br> <a href="http://www.ncbi.nlm.nih.gov/pubmed/15806101">http://www.ncbi.nlm.nih.gov/pubmed/15806101</a>	AtGenExpress_ATTED_Flowering AtGenExpress_ATTED_Fruit_Seeds AtGenExpress_ATTED_Leaf AtGenExpress_ATTED_Root AtGenExpress_ATTED_Seedling AtGenExpress_ATTED_Stem AtGenExpress_ATTED_Whole_Plant Heptamer_elements