forked from enviPath/enviPy
Basic System (#31)
Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#31
This commit is contained in:
@ -2,139 +2,166 @@
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<!-- TODO rename ids as well as remove pathways if modal is closed!-->
|
||||
<div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="newPackMod">Found Pathway in Database</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>We found at least one pathway in the database with the given root
|
||||
compound. Do you want to open any of the existing pathways or
|
||||
predict a new one? To open an existing pathway, simply click
|
||||
on the pathway, to predict a new one, click Predict. The predicted
|
||||
pathway might differ from the ones in the database due to the
|
||||
settings used in the prediction.</p>
|
||||
<div id="foundPathways"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="modal-predict" class="btn btn-primary" href="#">Predict</a>
|
||||
<button type="button" id="cancel-predict" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<!-- TODO rename ids as well as remove pathways if modal is closed!-->
|
||||
<div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="newPackMod">Found Pathway in Database</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>We found at least one pathway in the database with the given root
|
||||
compound. Do you want to open any of the existing pathways or
|
||||
predict a new one? To open an existing pathway, simply click
|
||||
on the pathway, to predict a new one, click Predict. The predicted
|
||||
pathway might differ from the ones in the database due to the
|
||||
settings used in the prediction.</p>
|
||||
<div id="foundPathways"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="modal-predict" class="btn btn-primary" href="#">Predict</a>
|
||||
<button type="button" id="cancel-predict" class="btn btn-default" data-dismiss="modal">Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<h1>
|
||||
<img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</h1>
|
||||
<p>enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
database provides the possibility to store and view experimentally
|
||||
observed biotransformation pathways. The pathway prediction system
|
||||
provides different relative reasoning models to predict likely biotransformation
|
||||
pathways and products. You can try it out below.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">Learn more >></a>
|
||||
</p>
|
||||
</div>
|
||||
<p></p>
|
||||
|
||||
<div class="input-group" id="index-form-bar">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="jumbotron">
|
||||
<h1>
|
||||
<img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
|
||||
src='{% static "/images/logo-long.svg" %}'/>
|
||||
</h1>
|
||||
<p>enviPath is a database and prediction system for the microbial
|
||||
biotransformation of organic environmental contaminants. The
|
||||
database provides the possibility to store and view experimentally
|
||||
observed biotransformation pathways. The pathway prediction system
|
||||
provides different relative reasoning models to predict likely biotransformation
|
||||
pathways and products. You can try it out below.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/Main_Page">Learn more >></a>
|
||||
</p>
|
||||
</div>
|
||||
<input type="text" class="form-control" id='index-form-text-input' placeholder="Enter a SMILES to predict a Pathway or type something to search">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a id="dropdown-predict">Predict</a></li>
|
||||
<li><a id="dropdown-search">Search</a></li>
|
||||
</ul>
|
||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!</button>
|
||||
</div>
|
||||
</div>
|
||||
<p></p>
|
||||
<form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
|
||||
{% csrf_token %}
|
||||
<div class="input-group" id="index-form-bar">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control" id='index-form-text-input'
|
||||
placeholder="Enter a SMILES to predict a Pathway or type something to search">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a id="dropdown-predict">Predict</a></li>
|
||||
<li><a id="dropdown-search">Search</a></li>
|
||||
</ul>
|
||||
<button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
|
||||
<input type="hidden" id="index-form-predict" name="predict" value="predict">
|
||||
</form>
|
||||
<div id="loading"></div>
|
||||
<script language="javascript">
|
||||
var currentPackage = "{{ meta.current_package.url }}";
|
||||
|
||||
<div id="loading"></div>
|
||||
<script language="javascript">
|
||||
function goButtonClicked() {
|
||||
$(this).prop("disabled", true);
|
||||
|
||||
function goButtonClicked() {
|
||||
$(this).prop("disabled", true);
|
||||
var action = $('#action-button').text().trim();
|
||||
|
||||
var action = $('#action-button').text().trim();
|
||||
var textSmiles = $('#index-form-text-input').val().trim();
|
||||
|
||||
var textSmiles = $('#index-form-text-input').val().trim();
|
||||
var ketcherSmiles = getKetcher('index-form-ketcher').getSmiles().trim();
|
||||
if (textSmiles === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (action != 'Search' && ketcherSmiles != '' && textSmiles != ketcherSmiles) {
|
||||
console.log("Ketcher and TextInput differ!");
|
||||
var ketcherSmiles = getKetcher('index-form-ketcher').getSmiles().trim();
|
||||
|
||||
if (action !== 'Search' && ketcherSmiles !== '' && textSmiles !== ketcherSmiles) {
|
||||
console.log("Ketcher and TextInput differ!");
|
||||
}
|
||||
|
||||
if (action === 'Search') {
|
||||
var par = {};
|
||||
par['search'] = textSmiles;
|
||||
par['mode'] = 'text';
|
||||
var queryString = $.param(par, true);
|
||||
window.location.href = "/search?" + queryString;
|
||||
} else {
|
||||
$('#index-form-smiles').val(textSmiles);
|
||||
$('#index-form').submit();
|
||||
}
|
||||
}
|
||||
|
||||
if (action == 'Search') {
|
||||
console.log("Searching...");
|
||||
} else {
|
||||
console.log("Predicting");
|
||||
function actionDropdownClicked() {
|
||||
var suffix = ' <span class="caret"></span>';
|
||||
var dropdownVal = $(this).text();
|
||||
|
||||
if (dropdownVal === 'Search') {
|
||||
$("#index-form").attr("action", '/search');
|
||||
$("#index-form").attr("method", 'GET');
|
||||
} else {
|
||||
$("#index-form").attr("action", currentPackage + "/pathway");
|
||||
}
|
||||
|
||||
$('#action-button').html(dropdownVal + suffix);
|
||||
}
|
||||
|
||||
}
|
||||
function ketcherToTextInput() {
|
||||
$('#index-form-text-input').val(this.ketcher.getSmiles());
|
||||
}
|
||||
|
||||
function actionDropdownClicked() {
|
||||
var suffix = ' <span class="caret"></span>';
|
||||
var dropdownVal = $(this).text();
|
||||
$('#action-button').html(dropdownVal + suffix);
|
||||
}
|
||||
$(function () {
|
||||
// Code that should be executed once DOM is ready goes here
|
||||
$('#dropdown-predict').on('click', actionDropdownClicked);
|
||||
$('#dropdown-search').on('click', actionDropdownClicked);
|
||||
|
||||
function ketcherToTextInput() {
|
||||
$('#index-form-text-input').val(this.ketcher.getSmiles());
|
||||
}
|
||||
$('#run-button').on('click', goButtonClicked);
|
||||
|
||||
$(function() {
|
||||
// Code that should be executed once DOM is ready goes here
|
||||
$('#dropdown-predict').on('click', actionDropdownClicked);
|
||||
$('#dropdown-search').on('click', actionDropdownClicked);
|
||||
// Update Ketcher Width
|
||||
var fullWidth = $('#index-form-bar').width();
|
||||
$('#index-form-ketcher').width(fullWidth);
|
||||
|
||||
$('#run-button').on('click', goButtonClicked);
|
||||
// add a listener that gets triggered whenever the structure in ketcher has changed
|
||||
$('#index-form-ketcher').on('load', function () {
|
||||
const checkKetcherReady = () => {
|
||||
win = this.contentWindow
|
||||
if (win.ketcher && 'editor' in win.ketcher) {
|
||||
win.ketcher.editor.event.change.handlers.push({
|
||||
once: false,
|
||||
priority: 0,
|
||||
f: ketcherToTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
// Update Ketcher Width
|
||||
var fullWidth = $('#index-form-bar').width();
|
||||
$('#index-form-ketcher').width(fullWidth);
|
||||
checkKetcherReady();
|
||||
});
|
||||
|
||||
// add a listener that gets triggered whenever the structure in ketcher has changed
|
||||
$('#index-form-ketcher').on('load', function() {
|
||||
const checkKetcherReady = () => {
|
||||
win = this.contentWindow
|
||||
if (win.ketcher && 'editor' in win.ketcher) {
|
||||
win.ketcher.editor.event.change.handlers.push({
|
||||
once: false,
|
||||
priority: 0,
|
||||
f: ketcherToTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkKetcherReady();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user