forked from enviPath/enviPy
302 lines
11 KiB
HTML
302 lines
11 KiB
HTML
|
|
{% load static %}
|
|
<div class="modal fade" tabindex="-1" id="new_pathway_modal" role="dialog" aria-labelledby="new_pathway_modal"
|
|
aria-hidden="true" style="overflow-y: auto;">
|
|
<!-- FIXME: make width dynamic-->
|
|
<div class="modal-dialog" id="new_pathway_modal_dialog" style="width:900px">
|
|
<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="js-title-step"></h4>
|
|
</div>
|
|
<div class="modal-body hide" data-step="1" data-title="New Pathway">
|
|
<div class="jumbotron">Create a new pathway by entering
|
|
the root compound and a name. Then select if you want to
|
|
use the prediction engine to generate a predicted pathway or
|
|
create an empty pathway that you fill in by yourself. If
|
|
you choose to predict a pathway, you can modify the
|
|
settings for the prediction, or use the default settings
|
|
and just click Submit.
|
|
</div>
|
|
<div class="modal-body">
|
|
{% if current_user.name == 'anonymous' %}
|
|
<div class="alert alert-warning">
|
|
You are currently logged in as Anonymous. Please note:
|
|
Pathways entered or predicted as anonymous user will be deleted after 30 days.
|
|
Please log in to save your results.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="name">Name</label>
|
|
<input id="name" class="form-control" name="name" placeholder="Name"/>
|
|
<label for="description">Description</label>
|
|
<input id="description" class="form-control" name="description" placeholder="no description"/>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="predict">Predict pathway or build yourself?</label>
|
|
<div class="radio" id="predict">
|
|
<p>
|
|
<label>
|
|
<input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict pathway
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
<input type="radio" name="predict" id="radioIncremental"value="incremental"/>Incremental prediction
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
<input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
|
|
</label>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<label for="smilesinput">SMILES</label>
|
|
<table style="width: 100%">
|
|
<colgroup>
|
|
<col span="1" style="width: 90%;">
|
|
<col span="1" style="width: 10%;">
|
|
</colgroup>
|
|
<tr>
|
|
<td>
|
|
<input id="smilesinput" class="form-control" name="smilesinput" placeholder="C1CCCCC1"
|
|
autocapitalize="none"/>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-default" id="render-button">
|
|
Render
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<p id="ketcher_container"></p>
|
|
<div>
|
|
<iframe id="ifKetcher" src="{% static '/js/ketcher/ketcher.html' %}" width="850"
|
|
height="510"></iframe>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body hide" data-step="2" data-title="New Pathway - Advanced Settings">
|
|
<div class="jumbotron">Choose if you want to use an existing
|
|
setting, or create a new one for this pathway
|
|
prediction. Then click Submit to use the specified setting,
|
|
or click next to set the parameters.
|
|
</div>
|
|
<div id="settings">
|
|
<div class="radio" id="settingRadio">
|
|
<p>
|
|
<label>
|
|
<input type="radio" name="existing" id="radioDefault" value="exisiting" checked/>
|
|
Use Default
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
<input type="radio" name="existing" id="radioExists" value="exisiting"/>
|
|
Select Existing
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
<input type="radio" name="existing" id="radioNew" value="temporary"/>
|
|
Create New
|
|
</label>
|
|
</p>
|
|
</div>
|
|
|
|
<select id="settingSelect" name="settingSelect" class="form-control">
|
|
{% for setting in available_settings %}
|
|
<option value="{{ setting.id }}">{{ setting.name|safe }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
{% with step_offset=1 %}
|
|
{% include "templates/modals/collections/new_setting_modal_body.html" %}
|
|
{% endwith %}
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel"
|
|
onclick="reset()" data-dismiss="modal"></button>
|
|
<button type="button" class="btn btn-default js-btn-step" data-orientation="previous"
|
|
id="backbutton"></button>
|
|
<button type="button" class="btn btn-default js-btn-step" data-orientation="next"
|
|
id="nextbutton"></button>
|
|
<a id="modal-form-submit" class="btn btn-primary" href="#">Submit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
s = new Setting(
|
|
'settingName',
|
|
'package_multi_select',
|
|
'modelSelect',
|
|
'cutoff',
|
|
'evalType',
|
|
'availableTS',
|
|
'forms',
|
|
'truncatorTable',
|
|
'summaryTable',
|
|
);
|
|
|
|
$(function() {
|
|
// hide all forms
|
|
$('#forms').children().hide()
|
|
|
|
$("#render-button").on("click", function() {
|
|
syncKetcherAndTextInput('text', "ifKetcher", "smilesinput");
|
|
});
|
|
|
|
// If theres a change in the in '#smilesinput' sync the value to ketcher
|
|
$('#smilesinput').on('input', function() {
|
|
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
|
});
|
|
|
|
// If theres an update in ketcher sync it to textinput
|
|
setInterval(function() {
|
|
syncKetcherAndTextInput('ketcher', 'ifKetcher', 'smilesinput');
|
|
}, 250);
|
|
|
|
$("#smilesinput").on("blur", function() {
|
|
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
|
});
|
|
|
|
$("#smilesinput").on("keypress", function(event) {
|
|
if (event.keyCode == 13) {
|
|
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
|
}
|
|
});
|
|
|
|
// Show forms depending on the selected TS
|
|
$('#availableTS').on('change', function(e) {
|
|
e.preventDefault();
|
|
|
|
var type = $(this).val();
|
|
// hide current content
|
|
$('#forms').children().hide()
|
|
|
|
if(type === '') {
|
|
return;
|
|
}
|
|
|
|
$('#' + type + '_form').show()
|
|
});
|
|
|
|
$("#modelSelect").on("change", function() {
|
|
setCutoff = function (thresh) {
|
|
$("#cutoff").val(thresh);
|
|
}
|
|
|
|
var modelUri = $("#modelSelect :selected").val();
|
|
fillPRCurve(modelUri, setCutoff);
|
|
});
|
|
|
|
// Add a TS to the setting
|
|
$('#add-ts-button').on('click', function(e) {
|
|
e.preventDefault();
|
|
s.addTruncator();
|
|
});
|
|
|
|
$('input[type=radio][name=predict]').change(function() {
|
|
if (this.id == 'radioBuild') {
|
|
$("#nextbutton").prop("disabled", true);
|
|
} else {
|
|
$("#nextbutton").prop("disabled", false);
|
|
}
|
|
});
|
|
|
|
$('input[type=radio][name=existing]').change(function() {
|
|
if (this.id == 'radioDefault' || this.id == 'radioExists') {
|
|
if(this.id == 'radioDefault') {
|
|
$("#settingSelect").prop("disabled", true);
|
|
} else {
|
|
$("#settingSelect").prop("disabled", false);
|
|
}
|
|
$("#nextbutton").prop("disabled", true);
|
|
} else {
|
|
// build...
|
|
$("#settingSelect").prop("disabled", true);
|
|
$("#nextbutton").prop("disabled", false);
|
|
}
|
|
});
|
|
|
|
var pwStep1 = function() {
|
|
console.log("pw step 1");
|
|
// Make "Next" to "Advanced"
|
|
$('#nextbutton').val("Advanced");
|
|
}
|
|
|
|
var pwStep2 = function() {
|
|
console.log("pw step 2");
|
|
// Make "Advanced" to "Next"
|
|
$('#nextbutton').val("Next");
|
|
// As "Use default is preselected" disable "Next" button
|
|
$("#nextbutton").prop("disabled",true);
|
|
// Disable setting dropdown as long as the correspndonding radio isnt checked
|
|
$("#settingSelect").prop("disabled",true);
|
|
// Show submit button
|
|
$("#modal-form-submit").show();
|
|
}
|
|
|
|
var settingStep1 = function (){
|
|
// First step sets name and packages
|
|
s.extractName();
|
|
s.extractSelectedPackages();
|
|
}
|
|
|
|
var settingStep2 = function (){
|
|
// Seconds step gathers relative reasoning params
|
|
s.extractRelativeReasoning();
|
|
s.extractCutoff();
|
|
s.extractEvaluationType();
|
|
}
|
|
|
|
var settingStep3 = function() {
|
|
s.updateTable();
|
|
s.updateSummaryTable();
|
|
// hide duplicate submit...
|
|
$("#nextbutton").hide();
|
|
}
|
|
|
|
var postPathway = function(){
|
|
console.log("Complete!");
|
|
console.log(s.tsParams);
|
|
console.log("Getting SMILES");
|
|
}
|
|
|
|
function dummy() {
|
|
console.log("dummy");
|
|
}
|
|
|
|
$('#new_pathway_modal').modalSteps({
|
|
btnCancelHtml: 'Cancel',
|
|
btnPreviousHtml: 'Back',
|
|
btnNextHtml: 'Next',
|
|
btnLastStepHtml: 'Submit',
|
|
disableNextButton: false,
|
|
completeCallback: postPathway,
|
|
callbacks: {
|
|
'1': pwStep1,
|
|
'2' : pwStep2,
|
|
'3' : dummy,
|
|
'4' : settingStep1,
|
|
'5' : settingStep2,
|
|
'6' : settingStep3,
|
|
}
|
|
});
|
|
|
|
$('#modal-form-submit').on('click', function() {
|
|
e.preventDefault();
|
|
postPathway();
|
|
});
|
|
});
|
|
|
|
</script> |