Play
JavaScript
CSS
HTML
ReadMe
Snapshots

forked:GenoConPromoterCAD
jquery-1.7.1.min.js
jquery-ui-1.8.18.min.js
http://code.highcharts.com/highcharts.js
http://code.highcharts.com/modules/exporting.js
MotifMaxExpress2
MotifMaxCircadian2
HighChart2
MotifMinExpress2

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

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

Application.genocon.prototype = {
	
	_baseSequence : null,
	_methodList : null,
	
	_default : {
		baseSequenceContainerId : "baseSequenceContainer",
		hiddenBaseSequenceClass : "hdnBaseSequence",
		fixedSequenceClass : "fixedSequence",
		baseErrorMessageClass : "baseErrorMessage",
		errorMessageEnterSequence : "Please enter a sequence of minimum length {0}",
		useButtonClass : "useButton",
		nextButtonClass : "nextButton",
		nextButtonContainerClass : "nextButtonContainer",
		collapseButton : "collapseButton",
		expandButton : "expandButton",
		removeButton : "removeButton",
		appContainerClass : "applicationContainer",
		appDataContainerClass : "applicationDataContainer",
		actionButtonContainer : "actionButtonContainer",
		actionResultContainer : "actionResultContainer",
		baseSequenceBoxClass : "baseSequenceBox",
		baseSequenceClass : "baseSequence",
		selectDataBaseList : "databaseList",
		selectMethodList : "optionList",
		hiddenBaseSequence : "hdnBaseSequence",
		databaseFilteringProperty : "#motif%20sequence",
		methodFilteringProperty : "#application%20URL",
		baseSequenceMinLength : 50
	},
	
	_tag : {
		databaseTag : "database",
		methodTag : "method"
	},
	
	_init : function() {
		this._methodList = [];
		this._initBaseInput();
		this._initDefaultContainer();
		this._initUseButtonListener();
	},
	
	_initBaseInput : function() {
		var val = $("#" + this._default.baseSequenceContainerId + " ." + this._default.hiddenBaseSequenceClass).val();
		if (val && val.length < this._default.baseSequenceMinLength) {
			$errMsgEl = $("#" + this._default.baseSequenceContainerId + " ." + this._default.baseErrorMessageClass);
			$errMsgEl.html(self._default.errorMessageEnterSequence.replace("{0}", self._default.baseSequenceMinLength));
			$errMsgEl.show();
			return;
		}
		$baseInput = $("#" + this._default.baseSequenceContainerId + " ." + this._default.baseSequenceClass);
		var index = val.length - this._default.baseSequenceMinLength;
		$baseInput.attr("size", index);
		var inputVal = val.substring(0, index);
		var fixedVal = val.substring(index);
		$baseInput.val(inputVal);
		$("#" + this._default.baseSequenceContainerId + " ." + this._default.fixedSequenceClass).html(fixedVal);
		$baseInput.keyup(function() {
			var size = ($baseInput.val().length != 0) ? $baseInput.val().length : 1;
			$baseInput.attr("size", size);
		});
	},
	
	_initDefaultContainer : function() {
		this._initDatabase();
		this._initMethod();
		this._initActionButton();
		this._initDatabaseListener();
		this._initMethodListener();
	},
	
	_initDatabase : function() {
		var self = this;
		var $select = $("." + self._default.appContainerClass + " ." + self._default.selectDataBaseList);
		$("option", $select).remove();
		$select.append("<option value='-1' selected='selected'>-- Select Database --</option>");
		var getFilesByTag = function(result) {
			$.each(result, function(workId, fileArray){
				$.each(fileArray, function(fileKey, fileName) {
					var dbKey = self._getDatabaseOptionKey(workId, fileName);
					$select.append("<option value='" + dbKey + "'>" + fileName + "</option>");
				});
			});
		}
		LinkData.getFilesByTag("", self._tag.databaseTag, getFilesByTag);
	},
	
	_initMethod : function() {
		var self = this;
		var $select = $("." + self._default.appContainerClass + " ." + self._default.selectMethodList);
		$("option", $select).remove();
		$select.append("<option value='-1' selected='selected'>-- Select Option --</option>");
		var getFilesByTag = function(result) {
			$.each(result, function(workId, fileArray){
				$.each(fileArray, function(fileKey, fileName) {
					var getSubjects = function(subjectList) {
						$.each(subjectList, function(subKey, subVal) {
							var label = self._getLabel(subVal);
							$select.append("<option value='" + label + "'>" + label + "</option>");
							self._methodList.push(label);
						});
					}
					LinkData.getSubjects(workId, fileName, getSubjects);
				});
			});
		}
		LinkData.getFilesByTag("", self._tag.methodTag, getFilesByTag);
	},
	
	_initActionButton : function() {
		var self = this;
		$("." + self._default.actionButtonContainer + " ." + self._default.collapseButton).click(function() {
			var parent = $(this).closest("." + self._default.appContainerClass);
			$(parent).find("." + self._default.appDataContainerClass).hide();
		});
		$("." + self._default.actionButtonContainer + " ." + self._default.expandButton).click(function() {
			var parent = $(this).closest("." + self._default.appContainerClass);
			$(parent).find("." + self._default.appDataContainerClass).show();
		});
		$("." + self._default.actionButtonContainer + " ." + self._default.removeButton).click(function() {
			$(this).closest("." + self._default.appContainerClass).remove();
		});
	},
	
	_initDatabaseListener : function() {
		var self = this;
		var $selectDb = $("." + self._default.appContainerClass + " ." + self._default.selectDataBaseList);
		$selectDb.change(function() {
			var parent = $(this).closest("." + self._default.appContainerClass);
			$(parent).find("." + self._default.selectMethodList + " option").removeAttr("selected");
			$(parent).find("." + self._default.nextButtonContainerClass).hide();
			$container = $(parent).find("." + self._default.actionResultContainer);
			$container.html("");
			var dbKey = $("option:selected", $(this)).val();
			self._changeMethodList(dbKey);
		});
	},
	
	_initMethodListener : function() {
		var self = this;
		var $selectDb = $("." + self._default.appContainerClass + " ." + self._default.selectDataBaseList);
		var $select = $("." + self._default.appContainerClass + " ." + self._default.selectMethodList);
		$select.change(function() {
			var parent = $(this).closest("." + self._default.appContainerClass);
			var method = $("option:selected", $(this)).text();
			var database = $("option:selected", $(parent).find("." + self._default.selectDataBaseList)).val();
			if (database == -1) {
				return;
			}
			$container = $(parent).find("." + self._default.actionResultContainer);
			$container.html("Loading...");
			$(parent).find("." + self._default.nextButtonContainerClass).hide();
			var date = new Date();
			var id = "container_id_" + date.getTime();
			$container.attr("id", id);
			var func = function() {
				self._callback(self);
			}
			var arr = database.split("|");
			var obj = {
				workId : arr[0],
				fileName : arr[1],
				appName : method,
				baseSequence : self._baseSequence,
				callback : func
			};
			eval(method)(id, obj);
		});
	},
	
	_changeMethodList : function(dbKey) {
		var self = this;
		var $select = $("." + self._default.appContainerClass + " ." + self._default.selectMethodList);
		$("option", $select).remove();
		$select.append("<option value='-1' selected='selected'>-- Select Option --</option>");
		if (dbKey == -1) {
			return;
		}
		var arr = dbKey.split("|");
		var workId = arr[0];
		var fileName = arr[1];
		$.each(self._methodList, function(key, method) {
			self._addValidMethod($select, workId, fileName, method);
		});
	},
	
	_addValidMethod : function($select, workId, fileName, method) {
		var getFilesByTag = function(fileList) {
			if (!fileList) {
				return;
			}
			$.each(fileList, function(fKey, fName) {
				if (fName === fileName) {
					$select.append("<option value='" + method + "'>" + method + "</option>");
					return false;
				}
			});
		}
		LinkData.getFilesByTag(workId, method, getFilesByTag);
	},
	
	_initUseButtonListener : function() {
		var self = this;
		$("#" + self._default.baseSequenceContainerId + " ." + self._default.useButtonClass).click(function() {
			$txtSeq = $("#" + self._default.baseSequenceContainerId + " ." + self._default.baseSequenceClass);
			$fixedSeq = $("#" + self._default.baseSequenceContainerId + " ." + self._default.fixedSequenceClass);
			self._baseSequence = $txtSeq.val() + $fixedSeq.html();
			$errMsgEl = $("#" + self._default.baseSequenceContainerId + " ." + self._default.baseErrorMessageClass);
			$errMsgEl.hide();
			if (!self._baseSequence || self._baseSequence.length < self._default.baseSequenceMinLength) {
				$errMsgEl.html(self._default.errorMessageEnterSequence.replace("{0}", self._default.baseSequenceMinLength));
				$errMsgEl.show();
				//_showError($baseContainer, opts.msgEmptySequence);
			} else {
				$txtSeq.attr('readonly', true).addClass("noborder");
				$(this).hide();
				$("." + self._default.appContainerClass).show();
			}
		});
	},
	
	_callback : function(self) {
		$("." + self._default.appContainerClass + " ." + self._default.nextButtonContainerClass).show();
		$("." + self._default.appContainerClass + " ." + self._default.nextButtonClass).unbind('click');
		$("." + self._default.appContainerClass + " ." + self._default.nextButtonClass).click(function() {
			$parent = $(this).closest("." + self._default.appContainerClass);
			var clone = $parent.clone(true);
			var text = $(clone).find(".replaceSequence").text();
			if (text && text.trim().length != 0) {
				self._baseSequence = text;
			}
			$(clone).find("." + self._default.actionResultContainer).html("");
			$(clone).find("." + self._default.nextButtonContainerClass).hide();
			$parent.parent().append(clone);
		});
	},
	
	_getDatabaseOptionKey : function(workId, fileName) {
		return workId + "|" + fileName;
	},
	
	_getLabel : function(value) {
		var propLabel = value;
		var arr = value.split("#");
		if (arr.length > 1) {
			propLabel = decodeURIComponent(arr[1]);
		}
		return propLabel;
	}
	
};

$(document).ready(function() {
	new Application.genocon();
});

body {
    font-family: sans-serif;
    font-size: 14px;
}

a {
    color: #3B5998;
    font-weight: bold;
    text-decoration: none;
}

#gcAppContainer {
	width: 900px;
}

.hidden {
	display:none;
}

.left {
    float: left;
}

.label {
	color: #E87B10;
    font: 1.1em "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
    height: 24px;
    min-width: 125px;
}

input.baseSequence {
	/*width: 100%;*/
}

.highlight-sequence {
	font-weight: bold;
}

.resultArea {
    font-family: "Courier New","Lucida Console";
    margin: 10px 0;
    min-width: 410px;
    overflow: auto;
    width: 100%;
	background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
	/*word-wrap: break-word;*/
}

.resultArea .userSequence {
	white-space: nowrap;
}

.replaceSequence {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: 10px 0 0;
	font-family: "Courier New","Lucida Console";
	overflow: auto;
	/*word-wrap: break-word;*/
}

.replace {
    color: #E80010;
}

.baseErrorMessage,
.errorMessage {
	color: #FF0000;
	text-align: center;
}

.applicationContainer {
    background-color: #F6F6F6;
    border: 1px solid #CCCCCC;
    margin: 5px 0 0;
    padding: 5px;
}

.actionButtonContainer {
    text-align: right;
}

.actionBtn {
    border: 1px solid #DDDDDD;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 2px;
    text-align: center;
    width: 25px;
}

.row {
    padding: 5px 0;
}
.row:after {
    clear: left;
    content: "";
    display: block;
}
.row input[type="text"] {
    width: 200px;
}

.noborder {
    border: medium none;
}

#baseSequenceContainer .baseSequenceBox {
	width: 100%;
	overflow: auto;
	white-space: nowrap;
}
#baseSequenceContainer .baseSequenceBox span,
#baseSequenceContainer .baseSequenceBox .baseSequence {
	font-family: Courier;
}

#baseSequenceContainer .baseSequenceBox .fixedSequence {
	position: relative;
	left: -6px;
	color: #AAAAAA;
	font-weight: bold;
}

.applicationContainer .nextButtonContainer {
	margin-top: 10px;
}

.databaseInfo .motif {
	width: 70%;
}

/**
 * button css
 */

a.useButton {
	width: 80px;
}

.actionBtn {
	border: 1px solid #DDDDDD;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 2px;
    text-align: center;
    width: 25px;
}

.actionBtn:hover {
	border: 1px solid #000000;
}

.btn {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

*zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  border: 1px solid #cccccc;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  *margin-left: .3em;
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  background-color: #e6e6e6;
}

.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -ms-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}

.btn-blue,
.btn-blue:hover,
.btn-yellow,
.btn-yellow:hover,
.btn-red,
.btn-red:hover,
.btn-green,
.btn-green:hover,
.btn-lightblue,
.btn-lightblue:hover,
.btn-black,
.btn-black:hover {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
}

.btn-blue {
  background-color: #0074cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
  background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
  background-image: -o-linear-gradient(top, #0088cc, #0055cc);
  background-image: linear-gradient(top, #0088cc, #0055cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
  border-color: #0055cc #0055cc #003580;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.btn-blue:hover,
.btn-blue:active,
.btn-blue.active,
.btn-blue.disabled,
.btn-blue[disabled] {
  background-color: #0055cc;
}

.btn-green {
  background-color: #5bb75b;
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: -ms-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(top, #62c462, #51a351);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0);
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-green:hover,
.btn-green:active,
.btn-green.active,
.btn-green.disabled,
.btn-green[disabled] {
  background-color: #51a351;
}
.btn-green:active,
.btn-green.active {
  background-color: #408140 ¥9;
}
.btn-lightblue {
  background-color: #49afcd;
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: linear-gradient(top, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-lightblue:hover,
.btn-lightblue:active,
.btn-lightblue.active,
.btn-lightblue.disabled,
.btn-lightblue[disabled] {
  background-color: #2f96b4;
}

/* Dialog css */

.motifViewDialog .explanation {
	color: #AAAAAA;
	font-size: 12px;
}

.motifViewDialog .moreInfo {
	color: #3B5998;
	cursor: pointer;
}

.motifViewDialog .position {
	width: 70px;
}

.motifViewDialog .dialogErrorMessage {
	font-size: 12px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 1px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 1px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 1px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 1px;
}

.loadingImageContainer .loadingMessage {
	color: #FF0000;
}

<div id="baseSequenceContainer">
	<div class="label">Base Sequence</div>
	<div class="baseSequenceBox">
		<input type="hidden" class="hdnBaseSequence" value="CGATAAAGGAAAGGCCATCGTTGAAGATGCCTCTGCCGACAGTGGTCCCAAAGATGGACCCCCACCCACGAGGAGCATCGTGGAAAAAGAAGACGTTCCAACCACGTCTTCAAAGCAAGTGGATTGATGTGATAACATGGTGGAGCACGACACACTTGTCTACTCCAAAAATATCAAAGATACAGTCTCAGAAGACCAAAGGGCAATTGAGACTTTTCAACAAAGGGTAATATCCGGAAACCTCCTCGGATTCCATTGCCCAGCTATCTGTCACTTTATTGTGAAGATAGTGGAAAAGGAAGGTGGCTCCTACAAATGCCATCATTGCGATAAAGGAAAGGCCATCGTTGAAGATGCCTCTGCCGACAGTGGTCCCAAAGATGGACCCCCACCCACGAGGAGCATCGTGGAAAAAGAAGACGTTCCAACCACGTCTTCAAAGCAAGTGGATTGATGTGATATCTCCACTGACGTAAGGGATGACGCACAATCCCACTATCGATCCCAAGACCCTTCCTCTATATAAGGAAGTTCATTTCATTTGGAGAGG"/>
		<span>
			<input type="text" class="baseSequence" value=""/></span>
		<span class="fixedSequence"></span>
	</div>
	<div style="margin-top:5px;"><a class="useButton btn btn-green">Use</a></div>
	<div class="baseErrorMessage hidden"></div>
</div>
<div class="applicationContainer hidden">
	<div class="actionButtonContainer">
		<span class="appSummery"></span>
		<span class="collapseButton actionBtn" title="collapse">_</span>
		<span class="expandButton actionBtn" title="expand">+</span>
		<span class="removeButton actionBtn" title="remove">x</span>
		<br clear="all"/>
	</div>
	<div class="applicationDataContainer">
		<div class="row">
			<div class="label left">Select Database</div>
			<div class="left"><select class="databaseList"></select></div>
		</div>
		<div class="row">
			<div class="label left">Sequence App</div>
			<div class="left"><select class="optionList"></select></div>
		</div>
		<div class="actionResultContainer"></div>
		<div class="nextButtonContainer hidden"><a class="btn nextButton">Next</a></div>
	</div>
</div>
</div>

Below is a description of the GenoCon CAD Application. For the GenoCon2 Promoter Design Challenge, you should replace this with a report of your promoter design.

Title: Plant Promoter Design for Tissue/Time Specific Expression of Firefly Luciferase in Arabidopsis Plant Body

Name: RIKEN GenoCon

Affiliation: RIKEN The Institute of Physical and Chemical Research

Date: 2012-10-17

Abstract

GenoConPromoterCAD is a DNA computer aided design (CAD) program which uses plant gene sequence and expression data to create synthetic promoters for tissue and time specific expression. The experimental test of such synthetic promoters will be to measure firefly Luciferase in Arabidopsis plant body. The program provides a graphical user interface (GUI), so anyone can design promoters using options in a series of select menus and push buttons. The program is written in JavaScript, on an open platform that allows for easy user customization.

The program provides several plugin functions for promoter designs MotifMaxExpress function, MotifMinExpress function, and MotifMaxCircadian function, as well as HighChart function for graph visualization of expression data. MotifMaxExpress function picks up the sequence motifs from the gene with maximum expression in a specific developmental condition. MotifMinExpress function picks up the motifs with minimum expression in a specific developmental condition. MotifMaxCircadian function picks up the motifs with maximum circadian amplitude. HighChart function provides graph visualization of expression data under experimental conditions (AtGenExpress) and time evolution of expression under circadian conditions (DIURNAL). Programmer participants can fork and add to these functions for the GenoCon2 Special Programming Challenge A.