forked from enviPath/enviPy
refactor: large scale formatting/linting
This commit is contained in:
@ -1,302 +1,376 @@
|
||||
|
||||
{% 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
|
||||
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',
|
||||
);
|
||||
s = new Setting(
|
||||
"settingName",
|
||||
"package_multi_select",
|
||||
"modelSelect",
|
||||
"cutoff",
|
||||
"evalType",
|
||||
"availableTS",
|
||||
"forms",
|
||||
"truncatorTable",
|
||||
"summaryTable",
|
||||
);
|
||||
|
||||
$(function() {
|
||||
$(function () {
|
||||
// hide all forms
|
||||
$('#forms').children().hide()
|
||||
$("#forms").children().hide();
|
||||
|
||||
$("#render-button").on("click", function() {
|
||||
syncKetcherAndTextInput('text', "ifKetcher", "smilesinput");
|
||||
$("#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');
|
||||
$("#smilesinput").on("input", function () {
|
||||
syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
|
||||
});
|
||||
|
||||
// If theres an update in ketcher sync it to textinput
|
||||
setInterval(function() {
|
||||
syncKetcherAndTextInput('ketcher', 'ifKetcher', 'smilesinput');
|
||||
setInterval(function () {
|
||||
syncKetcherAndTextInput("ketcher", "ifKetcher", "smilesinput");
|
||||
}, 250);
|
||||
|
||||
$("#smilesinput").on("blur", function() {
|
||||
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
||||
$("#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,
|
||||
$("#smilesinput").on("keypress", function (event) {
|
||||
if (event.keyCode == 13) {
|
||||
syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
|
||||
}
|
||||
});
|
||||
|
||||
$('#modal-form-submit').on('click', function() {
|
||||
// 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>
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user