Publish your application｜Mash up the Linked Open Data

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

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

Application.genocon.prototype = {
	
	_baseSequence : 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
	},
	
	_init : function() {
		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>");
		$.each(LinkData.getFiles(), function(workId, fileNameList) {
			$.each(fileNameList, function(key, fileName) {
				var dbKey = self._getDatabaseOptionKey(workId, fileName);
				$.each(LinkData.getProperties(workId, fileName), function(pKey, pValue) {
					if (pValue.indexOf(self._default.databaseFilteringProperty) > 0) {
						$select.append("<option value='" + dbKey + "'>" + fileName + "</option>");
					}
				});
			});
		});
	},
	
	_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>");
		$.each(LinkData.getFiles(), function(workId, fileNameList) {
			$.each(fileNameList, function(key, fileName) {
				$.each(LinkData.getProperties(workId, fileName), function(pKey, pValue) {
					if (pValue.indexOf(self._default.methodFilteringProperty) > 0) {
						$.each(LinkData.getTriplesByProperty(workId, fileName, pValue), function(tKey, tValue) {
							var label = self._getLabel(tValue.subject);
							$select.append("<option value='" + tValue.object + "'>" + label + "</option>");
						});
					}
				});
			});
		});
	},
	
	_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("");
		});
	},
	
	_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);
			$container = $(parent).find("." + self._default.actionResultContainer);
			$container.html("");
			$(parent).find("." + self._default.nextButtonContainerClass).hide();
			var date = new Date();
			var id = "container_id_" + date.getTime();
			$container.attr("id", id);
			var method = $("option:selected", $(this)).text();
			var database = $("option:selected", $(parent).find("." + self._default.selectDataBaseList)).val();
			var func = function() {
				self._callback(self);
			}
			if (database != -1) {
				var arr = database.split("|");
				var obj = {
					workId : arr[0],
					fileName : arr[1],
					appName : method,
					baseSequence : self._baseSequence,
					callback : func
				};
				eval(method)(id, obj);
			}
		});
	},
	
	_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();
});

 
if (typeof Application == "undefined" || !Application) {    var Application = {};} Application.genocon = function() {    this._init.apply(this, arguments);}; Application.genocon.prototype = {        _baseSequence : 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    },        _init : function() {        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>");        $.each(LinkData.getFiles(), function(workId, fileNameList) {            $.each(fileNameList, function(key, fileName) {                var dbKey = self._getDatabaseOptionKey(workId, fileName);                $.each(LinkData.getProperties(workId, fileName), function(pKey, pValue) {                    if (pValue.indexOf(self._default.databaseFilteringProperty) > 0) {                        $select.append("<option value='" + dbKey + "'>" + fileName + "</option>");                    }                });            });        });    },        _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>");        $.each(LinkData.getFiles(), function(workId, fileNameList) {            $.each(fileNameList, function(key, fileName) {                $.each(LinkData.getProperties(workId, fileName), function(pKey, pValue) {                    if (pValue.indexOf(self._default.methodFilteringProperty) > 0) {                        $.each(LinkData.getTriplesByProperty(workId, fileName, pValue), function(tKey, tValue) {

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;
}

/**
 * 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;
}

 
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;} /** * 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;}  

<div id="baseSequenceContainer">
	<div class="label">Base Sequence</div>
	<div class="baseSequenceBox">
		<input type="hidden" class="hdnBaseSequence" value="GTCAACATGGTGGAGCACGACACTCTCGTCTACTCCAAGAATATCAAAGATACAGTCTCAGAAGACCAGAGGGCTATTGAGACTTTTCAACAAAGTTAATGCGAGGGAAACCTCCTCGGATTCCATTGCCCAGCTATCTGTCACTTCATCGAAAGGACAAGTGAAAGAGAAGATGGCTTCTACAAATGCCATCATTGCGATAAAGGAAAGGCTATCGTTCAAGATGCCTCTACCGACAGTGGTCCCAAAGATGGACCCCCACCCACGAGGAACATCTAGGGGAAAAAAGACGTTCCAACCACGTCTTCAAAGCAAGTGATTGGATTAAGGTTCTTCCACACGGTAAGGGATGGCACTAACACCTACCATCCTTCGCAAGACCCTTCCTCTATATAAGGAAGTTCATTTCATTTGGAGAGGACCTCGAC"/>
		<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>

 
<div id="gcAppContainer"> <div id="baseSequenceContainer">    <div class="label">Base Sequence</div>    <div class="baseSequenceBox">        <input type="hidden" class="hdnBaseSequence" value="GTCAACATGGTGGAGCACGACACTCTCGTCTACTCCAAGAATATCAAAGATACAGTCTCAGAAGACCAGAGGGCTATTGAGACTTTTCAACAAAGTTAATGCGAGGGAAACCTCCTCGGATTCCATTGCCCAGCTATCTGTCACTTCATCGAAAGGACAAGTGAAAGAGAAGATGGCTTCTACAAATGCCATCATTGCGATAAAGGAAAGGCTATCGTTCAAGATGCCTCTACCGACAGTGGTCCCAAAGATGGACCCCCACCCACGAGGAACATCTAGGGGAAAAAAGACGTTCCAACCACGTCTTCAAAGCAAGTGATTGGATTAAGGTTCTTCCACACGGTAAGGGATGGCACTAACACCTACCATCCTTCGCAAGACCCTTCCTCTATATAAGGAAGTTCATTTCATTTGGAGAGGACCTCGAC"/>        <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> 

Select Input Data

LinkData Work	Table Data
GenoCon2 Challenge A - Developmental conditions	Flowering Fruit_Seeds Leaf Root Seedling Stem Whole_Plant
GenoCon2 Challenge A - Developmental Coexpression (AtGenExpress + ATTED-II promoter motif)	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
GenoCon2 Challenge A - Circadian Coexpression (DIURNAL + ATTED-II promoter motif)	DiurnalHours_ATTED_COL_LDHH DiurnalHours_ATTED_COL_SD DiurnalHours_ATTED_DD_DDHC DiurnalHours_ATTED_LDHC DiurnalHours_ATTED_LDHH_SM DiurnalHours_ATTED_LDHH_ST DiurnalHours_ATTED_LER_SD DiurnalHours_ATTED_LIGHT5_HIF138_13 DiurnalHours_ATTED_LIGHT5_HIF138_8 DiurnalHours_ATTED_LIGHT5_znknOX DiurnalHours_ATTED_LL12_LDHH DiurnalHours_ATTED_LL23_LDHH DiurnalHours_ATTED_LLHC DiurnalHours_ATTED_LL_LDHC DiurnalHours_ATTED_LL_LLHC DiurnalHours_ATTED_lhyox_SD DiurnalHours_ATTED_longday DiurnalHours_ATTED_lux_2_LDHH DiurnalHours_ATTED_phyB9_SD DiurnalHours_ATTED_shortday
GenoCon2 Challenge A - Diurnal conditions	Circadian_condition Diurnal_condition
Appications	Applications_for_Synthetic_Promoter_Design
GenoCon2 Challenge A - Circadian Genomic (DIURNAL + PPDB promoter motif)	DiurnalHours_PPDB_COL_LDHH DiurnalHours_PPDB_COL_SD DiurnalHours_PPDB_DD_DDHC DiurnalHours_PPDB_LDHC DiurnalHours_PPDB_LDHH_SM DiurnalHours_PPDB_LDHH_ST DiurnalHours_PPDB_LER_SD DiurnalHours_PPDB_LIGHT5_HIF138_13 DiurnalHours_PPDB_LIGHT5_HIF138_8 DiurnalHours_PPDB_LIGHT5_znknOX DiurnalHours_PPDB_LL12_LDHH DiurnalHours_PPDB_LL23_LDHH DiurnalHours_PPDB_LLHC DiurnalHours_PPDB_LL_LDHC DiurnalHours_PPDB_LL_LLHC DiurnalHours_PPDB_lhyox_SD DiurnalHours_PPDB_longday DiurnalHours_PPDB_lux_2_LDHH DiurnalHours_PPDB_phyB9_SD DiurnalHours_PPDB_shortday
GenoCon2 Challenge A - Developmental Genomic (AtGenExpress + PPDB promoter motif)	AtGenExpress_PPDB_Flowering AtGenExpress_PPDB_Fruit_Seeds AtGenExpress_PPDB_Leaf AtGenExpress_PPDB_Root AtGenExpress_PPDB_Seedling AtGenExpress_PPDB_Stem AtGenExpress_PPDB_Whole_Plant Octamer_elements

Add LinkData work(LinkData)

<p>
<i>This area is for writing your GenoCon2 Report. The guidelines below are for writing a 6 section report. An image should also be included.</i> <br>
</p>

<h1 align="CENTER">Title: Plant Promoter Design for Tissue/Time Specific Expression of Firefly Luciferase in <i>Arabidopsis</i> Plant Body</h1>

<p align="CENTER">
<b>Name: RIKEN GenoCon</b></p>
<p align="CENTER"><b>Affiliation: RIKEN The Institute of Physical and Chemical Research</b>
</p>
<p align="CENTER">
Date: 2012-10-16</p>

<h2>Abstract</h2>
<p>
Formaldehyde is known as a harmful substance to the human body and cause sick house syndrome. If there was a plant which is able to absorb formaldehyde and remove it effectively, we might be able to prevent sick house syndrome by putting the plant in the room. However, general plants have little function to absorb formaldehyde. In this design, we have used JavaScript to design DNA sequence to add such a function to a model plant.The resulting design is efficient, simple, and easy to understand example of JavaScript coding to construct a DNA sequence created by reverse transcription. There are many possibilities to improve on this design.</p>
<p>
<img src="http://app.linkdata.org/asset/dff6ccc0.png">
</p>
<br>

<h2>Introduction</h2>
<p>
Research groups led by Professor Izui of Kinki University, Professor Sakai, and Professor Kato (currently Professor of Kyoto Gakuen University) of Kyoto University are actually trying to create such dreamlike plants. They found out that by inserting two HCHO decomposing bacterium genes into a plant (Arabidopsis thaliana), the plant got a function to remove HCHO in the air. The research teams re-design a plant pathway by adding two genes. (See details of the research)
</p>
<br>

<h2>Method</h2>
<h3>Overview</h3>
<ol><li>
Obtain the HPS protein sequence
</li><li>
Reverse-translate the obtained HPS protein sequence to DNA sequence
</li><li>
Obtain PHI protein sequence
</li><li>
Reverse-translate the obtained PHI protein sequence to DNA sequence
</li><li>
Combine those two DNA sequences
</li><li>
Register the combined DNA sequences in RIKEN SciNetS
</li>
</ol>
<p>
<img src="http://50.87.23.181/wp-content/uploads/2012/08/Strategy_en.jpg">
</p>

<h3>Design Flow</h3>
<p>
The followings are basic explanation about key parts for Challenge B sample program.
</p>
<table>
<tbody>
<tr>
<td valign="top">
<img style="width:600px;" src="http://app.linkdata.org/asset/cab91263.png">
</td>
<td valign="top"> <br><b>Part A. Initialization of the program, data loading
</b><p>
Load the data of 5 tables (dna, promoter, protein, signal_peptide, terminator) included in the sample data (http://linkdata.org/work/rdf1s222i).
</p><br>   <br><br><br><br><br><br><br><br><b>Part B. Create a function for getting sequence data</b><br><p>
In this part, create a function to get sequences;
We named this function as ‘getSequence’. You can change the function name.</p><p><b>Part C. Creation a function for reverse translation</b></p><p>In this part, create a function to reverse translate;
We named this function as ‘reverse Translation’. You can change the function name.</p>
<p>
<b>Part D. Main Program</b>
</p>
<p>Select protein sequences registered in sample data, execute reverse translation by using the function you created in Part C, obtain DNA sequences, outputs of the execution, and display the DNA sequence in the result area.<br></p>
<p><br></p><p>
More detail is explained in the below.
</p>
<br><br><br><br><br><br><br><br><br><br>
<b>Part E. Define amino acids with the corresponding codons</b>
<p>
In this part, amino acids are linked to codons.
</p><p>*This example is not the best. You may brash up this "map" function considering with codon optimizations to Arabidopsis and/or other idea.</p><p>*DNA sequences are represented by a letter string such as `ATGC` whereas protein sequences are represented by a letter string such as `MFLIV...`.</p>

</td>
</tr>
</tbody>
</table>

<br>
<p>
<b>D-1: Obtain protein sequences</b>
<br>
Store protein sequences in a variable named “hpsSeq”.
<br>
<img style="width:600px;" src="http://app.linkdata.org/asset/d1390ee2.png"><br>
<img style="width:500px;" src="http://app.linkdata.org/asset/5788aee4.png"><br>
<br>
This function selects the "protein" table based on the variable 1, and obtain the sequence data of “Q9LBW4” in the “protein” table based on the variable 2
</p>

<p>
<b>D-2: Reverse Translation</b>
<br>
Translate the protein sequence stored in the variable named "hpsSeq" to a DNA sequence, by using the function created in ③, and store the DNA sequence in variable named "hpsDnaSeq".
<br>
<img style="width:600px;" src="http://app.linkdata.org/asset/186e0956.png"><br>
</p>

<p>
<b>
D-3: Obtain protein sequences (in a similar way to D-1)
</b>
<br>
<img style="width:600px;" src="http://app.linkdata.org/asset/cd7ab81a.png"><br>
</p>

<p>
<b>
D-4: Reverse translation (in a similar way to D-2)
</b>
<br>
<img style="width:600px;" src="http://app.linkdata.org/asset/8b88ddb0.png"><br>
</p>

<p>
<b>
D-5: Concatenate two DNA sequences
</b>
<br>
<b>
</b>Concatenate two DNA sequences “hpsDnaSeq” (reverse translated in ④-2) and “phiDnaSeq” (reverse translated in ④-4), and store the DNA sequence in variable named “dnaSeq”.

<p>
<b>
D-6: Display the result
</b>
<br>
Display the DNA sequence “dnaSeq” in the program executing area.
HTML tags are embedded in the result display area. By appending the strings of DNA sequence into the tag, the design results are displayed.
<br>
</p>
<div>
<img style="width:600px;" src="http://app.linkdata.org/asset/2892d511.png"><br>
<br>
<img style="width:400px;" src="http://app.linkdata.org/asset/e040a04f.png"><br>
<p></p>

<br>

<h2>Expected Results</h2>
<p>
The plant should get the function to eliminate formaldehyde by inserting two enzymes, HPS (3-hexulose-6-phosphate synthase) and PHI (6-phospho-3-hexuloisomerase) into the Calvin Cycle of the plant.
</p>

<br>

<h2>Importance of This Design</h2>
<p>
It is known that codon usage is dependent on species. In this design, I reverse transcribed the protein sequences from <i>Mycobacterium gastri</i> to DNA sequences using codons with highest frequency. This is efficient, simple, and easy to understand example of JavaScript coding to construct a DNA sequence created by reverse transcription. There are many possibilities to improve on this design.</p>

<br>

<h2>References</h2>
<ul>
<li>
L. M. Chen, H. Yurimoto, K. Z. Li, I. Orita, M. Akita, N. Kato, Y.Sakai, and K. Izui. 2010. 
"Assimilation of formaldehyde in transgenic plants due to the introduction of the bacterial ribulose monophosphate pathway genes."
<i>Biosci. Biotechnol. Biochem.</i>, 2010. <b>74</b>:627-635.
</li>
<li>
Mitsui R, Sakai Y, Yasueda H, Kato N. 2000.
"A novel operon encoding formaldehyde fixation: the ribulose monophosphate pathway in the gram-positive facultative methylotrophic bacterium Mycobacterium gastri MB19." <i>J Bacteriol.</i>. <b>182</b>:944-948.
</li>
</ul>
<br>

<hr>
<br>
<a href="http://50.87.23.181/wp-content/uploads/2012/06/photo-1.jpg"><img src="http://50.87.23.181/wp-content/uploads/2012/06/photo-1-1024x1024.jpg" alt="" title="Transgenic Arapbidopsis thaliana plant with synthesized DNA for a winning contestant of the first GenoCon 2010" class="size-large wp-image-2487" height="545" width="545"></a> <br><big>Transgenic Arapbidopsis thaliana plant with synthesized DNA <br>designed by Finalist participant of the first GenoCon 2010 Challenge</big>
<br><hr>

</div>

Click the Browse button or drag and drop to choose files to upload

The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)

Edit Application

Please enter information for the application to be registered.

*Required field

Account Name

Application Name*: Remove; Add name for another language

Collaborators

Image: You can upload jpg, gif, png file formats

Website: x

Add website

Tag

License

API version

Initial Cost: ￥

Annual Cost: ￥

Description: <b> Open sample program for Challenge A（<a href="http://app.linkdata.org/app/app1s28i">http://app.linkdata.org/app/app1s28i</a>）</b><br><br> <i> Modify our sample program with your own improvements.<br> If you are only using this prepared data, you do not need to add any new data to LinkData.<br> Copy this sample program using the “Fork this app as your new one” button at the bottom!</i> <br> for more information see: <a href="http://genocon.org/assignment-2012/assignment-a/manuals-a/">http://genocon.org/assignment-2012/assignment-a/manuals-a/</a> Remove; Add description for another language

Security Level: Public
Here anyone can access the page for this application.
Only those who know the link
Only those who know the URL of the page for this application can access this page.
Private
Only the contributor of this application can access the page for this application.

: finish Editing

Select Input Data

Edit Application

Please enter information for the application to be registered.

History