forked from enviPath/enviPy
377 lines
11 KiB
HTML
377 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>
|