forked from enviPath/enviPy
[Feature] Modern UI roll out (#236)
This PR moves all the collection pages into the new UI in a rough push. I did not put the same amount of care into these as into search, index, and predict. ## Major changes - All modals are now migrated to a state based alpine.js implementation. - jQuery is no longer present in the base layout; ajax is replace by native fetch api - most of the pps.js is now obsolte (as I understand it; the code is not referenced any more @jebus please double check) - in-memory pagination for large result lists (set to 50; we can make that configurable later; performance degrades at around 1k) stukk a bit rough tracked in #235 ## Minor things - Sarch and index also use alpine now - The loading spinner is now CSS animated (not sure if it currently gets correctly called) ## Not done - Ihave not even cheked the admin pages. Not sure If these need migrations - The temporary migration pages still use the old template. Not sure what is supposed to happen with those? @jebus ## What I did to test - opend all pages in browse, and user ; plus all pages reachable from there. - Interacted and tested the functionality of each modal superfically with exception of the API key modal (no functional test). --- This PR is massive sorry for that; just did not want to push half-brokenn state. @jebus @liambrydon I would be glad if you could click around and try to break it :) Finally closes #133 Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#236 Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
This commit is contained in:
@ -1,70 +1,85 @@
|
||||
<div
|
||||
class="modal fade"
|
||||
tabindex="-1"
|
||||
<dialog
|
||||
id="import_legacy_package_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="import_legacy_package_modal"
|
||||
aria-hidden="true"
|
||||
class="modal"
|
||||
x-data="modalForm()"
|
||||
@close="reset()"
|
||||
>
|
||||
<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">Import Package from legacy System</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Create a Package based on the JSON Export of the legacy system.</p>
|
||||
<form
|
||||
id="import-legacy-package-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label class="btn btn-primary" for="legacyJsonFile">
|
||||
<input
|
||||
id="legacyJsonFile"
|
||||
name="file"
|
||||
type="file"
|
||||
style="display:none;"
|
||||
onchange="$('#upload-legacy-file-info').html(this.files[0].name)"
|
||||
/>
|
||||
Choose JSON File
|
||||
</label>
|
||||
<span class="label label-info" id="upload-legacy-file-info"></span>
|
||||
<input
|
||||
type="hidden"
|
||||
value="import-legacy-package-json"
|
||||
name="hidden"
|
||||
readonly=""
|
||||
/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a
|
||||
id="import-legacy-package-modal-form-submit"
|
||||
class="btn btn-primary"
|
||||
href="#"
|
||||
>Submit</a
|
||||
>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-box">
|
||||
<!-- Header -->
|
||||
<h3 class="text-lg font-bold">Import Package from Legacy System</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<p class="mb-4">
|
||||
Create a Package based on the JSON Export of the legacy system.
|
||||
</p>
|
||||
<form
|
||||
id="import-legacy-package-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
method="post"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Legacy JSON File</span>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="legacyJsonFile"
|
||||
name="file"
|
||||
class="file-input file-input-bordered w-full"
|
||||
accept=".json"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="hidden"
|
||||
value="import-legacy-package-json"
|
||||
name="hidden"
|
||||
readonly
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit('import-legacy-package-modal-form')"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Importing...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#import-legacy-package-modal-form-submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$("#import-legacy-package-modal-form").submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,70 +1,83 @@
|
||||
<div
|
||||
class="modal fade"
|
||||
tabindex="-1"
|
||||
<dialog
|
||||
id="import_package_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="import_package_modal"
|
||||
aria-hidden="true"
|
||||
class="modal"
|
||||
x-data="modalForm()"
|
||||
@close="reset()"
|
||||
>
|
||||
<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">Import Package</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Create a Package based on a JSON Export.</p>
|
||||
<form
|
||||
id="import-package-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label class="btn btn-primary" for="jsonFile">
|
||||
<input
|
||||
id="jsonFile"
|
||||
name="file"
|
||||
type="file"
|
||||
style="display:none;"
|
||||
onchange="$('#upload-file-info').html(this.files[0].name)"
|
||||
/>
|
||||
Choose JSON File
|
||||
</label>
|
||||
<span class="label label-info" id="upload-file-info"></span>
|
||||
<input
|
||||
type="hidden"
|
||||
value="import-package-json"
|
||||
name="hidden"
|
||||
readonly=""
|
||||
/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a
|
||||
id="import-package-modal-form-submit"
|
||||
class="btn btn-primary"
|
||||
href="#"
|
||||
>Submit</a
|
||||
>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-box">
|
||||
<!-- Header -->
|
||||
<h3 class="text-lg font-bold">Import Package</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<p class="mb-4">Create a Package based on a JSON Export.</p>
|
||||
<form
|
||||
id="import-package-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
method="post"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">JSON File</span>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="jsonFile"
|
||||
name="file"
|
||||
class="file-input file-input-bordered w-full"
|
||||
accept=".json"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="hidden"
|
||||
value="import-package-json"
|
||||
name="hidden"
|
||||
readonly
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit('import-package-modal-form')"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Importing...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#import-package-modal-form-submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$("#import-package-modal-form").submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,119 +1,137 @@
|
||||
{% load static %}
|
||||
<div
|
||||
class="modal fade bs-modal-lg"
|
||||
|
||||
<dialog
|
||||
id="new_compound_modal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="new_compound_modal"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
class="modal"
|
||||
x-data="modalForm()"
|
||||
@close="reset()"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Create a new Compound</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form
|
||||
id="new_compound_modal_form"
|
||||
accept-charset="UTF-8"
|
||||
action="{% url 'package compound list' meta.current_package.uuid %}"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<label for="compound-name">Name</label>
|
||||
<div class="modal-box max-w-3xl">
|
||||
<!-- Header -->
|
||||
<h3 class="text-lg font-bold">Create a new Compound</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<form
|
||||
id="new-compound-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action="{% url 'package compound list' meta.current_package.uuid %}"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="compound-name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="compound-name"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="compound-name"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
<label for="compound-description">Description</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="compound-description">
|
||||
<span class="label-text">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="compound-description"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="compound-description"
|
||||
placeholder="Description"
|
||||
/>
|
||||
<label for="compound-smiles">SMILES</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="compound-smiles">
|
||||
<span class="label-text">SMILES</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="compound-smiles"
|
||||
placeholder="SMILES"
|
||||
id="compound-smiles"
|
||||
/>
|
||||
<p></p>
|
||||
<div>
|
||||
<iframe
|
||||
id="new_compound_ketcher"
|
||||
src="{% static '/js/ketcher2/ketcher.html' %}"
|
||||
width="100%"
|
||||
height="510"
|
||||
></iframe>
|
||||
</div>
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary pull-left"
|
||||
data-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="new_compound_modal_form_submit"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<iframe
|
||||
id="new_compound_ketcher"
|
||||
src="{% static '/js/ketcher2/ketcher.html' %}"
|
||||
width="100%"
|
||||
height="510"
|
||||
></iframe>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit('new-compound-modal-form')"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function newCompoundModalketcherToNewCompoundModalTextInput() {
|
||||
$("#compound-smiles").val(this.ketcher.getSmiles());
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$("#new_compound_ketcher").on("load", function () {
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
document
|
||||
.getElementById("new_compound_ketcher")
|
||||
.addEventListener("load", function () {
|
||||
const iframe = this;
|
||||
const checkKetcherReady = () => {
|
||||
win = this.contentWindow;
|
||||
const win = iframe.contentWindow;
|
||||
if (win.ketcher && "editor" in win.ketcher) {
|
||||
win.ketcher.editor.event.change.handlers.push({
|
||||
once: false,
|
||||
priority: 0,
|
||||
f: newCompoundModalketcherToNewCompoundModalTextInput,
|
||||
f: function () {
|
||||
document.getElementById("compound-smiles").value =
|
||||
this.ketcher.getSmiles();
|
||||
},
|
||||
ketcher: win.ketcher,
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkKetcherReady();
|
||||
});
|
||||
|
||||
$(function () {
|
||||
$("#new_compound_modal_form_submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled", true);
|
||||
|
||||
// submit form
|
||||
$("#new_compound_modal_form").submit();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,70 +1,96 @@
|
||||
<div
|
||||
class="modal fade"
|
||||
tabindex="-1"
|
||||
{% load static %}
|
||||
|
||||
<dialog
|
||||
id="new_group_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="new_group_modal"
|
||||
aria-hidden="true"
|
||||
class="modal"
|
||||
x-data="modalForm()"
|
||||
@close="reset()"
|
||||
>
|
||||
<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">New Group</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Create new Group. You can assign users to the group once it is
|
||||
created. Description can be changed after creation.
|
||||
</p>
|
||||
<form
|
||||
id="new_group_modal_form"
|
||||
accept-charset="UTF-8"
|
||||
action="{{ SERVER_BASE }}/group"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
name="group-name"
|
||||
class="form-control"
|
||||
placeholder="Name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="description">Description</label>
|
||||
<input
|
||||
id="description"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Description..."
|
||||
name="group-description"
|
||||
/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_group_modal_form_submit" class="btn btn-primary" href="#"
|
||||
>Submit</a
|
||||
>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-box">
|
||||
<!-- Header -->
|
||||
<h3 class="font-bold text-lg">New Group</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<p class="mb-4">
|
||||
Create new Group. You can assign users to the group once it is created.
|
||||
Description can be changed after creation.
|
||||
</p>
|
||||
|
||||
<form
|
||||
id="new-group-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action="{{ SERVER_BASE }}/group"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="group-name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="group-name"
|
||||
class="input input-bordered w-full"
|
||||
name="group-name"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="group-description">
|
||||
<span class="label-text">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="group-description"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Description..."
|
||||
name="group-description"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit('new-group-modal-form')"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#new_group_modal_form_submit").on("click", function () {
|
||||
$("#new_group_modal_form").submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,30 +1,66 @@
|
||||
<div
|
||||
class="modal fade"
|
||||
tabindex="-1"
|
||||
<dialog
|
||||
id="new_model_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="new_model_modal"
|
||||
aria-hidden="true"
|
||||
class="modal"
|
||||
x-data="{
|
||||
isSubmitting: false,
|
||||
modelType: '',
|
||||
buildAppDomain: false,
|
||||
|
||||
reset() {
|
||||
this.isSubmitting = false;
|
||||
this.modelType = '';
|
||||
this.buildAppDomain = false;
|
||||
},
|
||||
|
||||
get showMlrr() {
|
||||
return this.modelType === 'mlrr';
|
||||
},
|
||||
|
||||
get showRbrr() {
|
||||
return this.modelType === 'rbrr';
|
||||
},
|
||||
|
||||
get showEnviformer() {
|
||||
return this.modelType === 'enviformer';
|
||||
},
|
||||
|
||||
submit(formId) {
|
||||
const form = document.getElementById(formId);
|
||||
if (form && form.checkValidity()) {
|
||||
this.isSubmitting = true;
|
||||
form.submit();
|
||||
} else if (form) {
|
||||
form.reportValidity();
|
||||
}
|
||||
}
|
||||
}"
|
||||
@close="reset()"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<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">New Model</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form
|
||||
id="new_model_form"
|
||||
accept-charset="UTF-8"
|
||||
action="{{ meta.current_package.url }}/model"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<div class="jumbotron">
|
||||
<div class="modal-box max-w-3xl">
|
||||
<!-- Header -->
|
||||
<h3 class="text-lg font-bold">New Model</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<form
|
||||
id="new_model_form"
|
||||
accept-charset="UTF-8"
|
||||
action="{{ meta.current_package.url }}/model"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<div class="alert alert-info mb-4">
|
||||
<span>
|
||||
Create a new Model to limit the number of degradation products in
|
||||
the prediction. You just need to set a name and the packages you
|
||||
want the object to be based on. There are multiple types of models
|
||||
@ -32,239 +68,270 @@
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/relative-reasoning"
|
||||
role="button"
|
||||
class="link"
|
||||
>wiki >></a
|
||||
>
|
||||
</div>
|
||||
<!-- Name -->
|
||||
<label for="model-name">Name</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="model-name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="model-name"
|
||||
name="model-name"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<label for="model-description">Description</label>
|
||||
<!-- Description -->
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="model-description">
|
||||
<span class="label-text">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="model-description"
|
||||
name="model-description"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Model Type -->
|
||||
<label for="model-type">Model Type</label>
|
||||
<!-- Model Type -->
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="model-type">
|
||||
<span class="label-text">Model Type</span>
|
||||
</label>
|
||||
<select
|
||||
id="model-type"
|
||||
name="model-type"
|
||||
class="form-control"
|
||||
data-width="100%"
|
||||
class="select select-bordered w-full"
|
||||
x-model="modelType"
|
||||
required
|
||||
>
|
||||
<option disabled selected>Select Model Type</option>
|
||||
<option value="" disabled selected>Select Model Type</option>
|
||||
{% for k, v in model_types.items %}
|
||||
<option value="{{ v }}">{{ k }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Rule Packages -->
|
||||
<div id="rule-packages" class="ep-model-param mlrr rbrr">
|
||||
<label for="model-rule-packages">Rule Packages</label>
|
||||
<select
|
||||
id="model-rule-packages"
|
||||
name="model-rule-packages"
|
||||
data-actions-box="true"
|
||||
class="form-control"
|
||||
multiple
|
||||
data-width="100%"
|
||||
>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
<!-- Rule Packages (MLRR, RBRR) -->
|
||||
<div class="form-control mb-3" x-show="showMlrr || showRbrr" x-cloak>
|
||||
<label class="label" for="model-rule-packages">
|
||||
<span class="label-text">Rule Packages</span>
|
||||
</label>
|
||||
<select
|
||||
id="model-rule-packages"
|
||||
name="model-rule-packages"
|
||||
class="select select-bordered w-full h-32"
|
||||
multiple
|
||||
>
|
||||
<optgroup label="Reviewed Packages">
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
</optgroup>
|
||||
<optgroup label="Unreviewed Packages">
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</optgroup>
|
||||
</select>
|
||||
<label class="label">
|
||||
<span class="label-text-alt">Hold Ctrl/Cmd to select multiple</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Data Packages -->
|
||||
<div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
|
||||
<label for="model-data-packages">Data Packages</label>
|
||||
<select
|
||||
id="model-data-packages"
|
||||
name="model-data-packages"
|
||||
data-actions-box="true"
|
||||
class="form-control"
|
||||
multiple
|
||||
data-width="100%"
|
||||
>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
<!-- Data Packages (MLRR, RBRR, Enviformer) -->
|
||||
<div
|
||||
class="form-control mb-3"
|
||||
x-show="showMlrr || showRbrr || showEnviformer"
|
||||
x-cloak
|
||||
>
|
||||
<label class="label" for="model-data-packages">
|
||||
<span class="label-text">Data Packages</span>
|
||||
</label>
|
||||
<select
|
||||
id="model-data-packages"
|
||||
name="model-data-packages"
|
||||
class="select select-bordered w-full h-32"
|
||||
multiple
|
||||
>
|
||||
<optgroup label="Reviewed Packages">
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
</optgroup>
|
||||
<optgroup label="Unreviewed Packages">
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</optgroup>
|
||||
</select>
|
||||
<label class="label">
|
||||
<span class="label-text-alt">Hold Ctrl/Cmd to select multiple</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Fingerprinter -->
|
||||
<div id="fingerprinter" class="ep-model-param mlrr">
|
||||
<label for="model-fingerprinter">Fingerprinter</label>
|
||||
<select
|
||||
id="model-fingerprinter"
|
||||
name="model-fingerprinter"
|
||||
data-actions-box="true"
|
||||
class="form-control"
|
||||
multiple
|
||||
data-width="100%"
|
||||
>
|
||||
<option value="MACCS" selected>MACCS Fingerprinter</option>
|
||||
{% if meta.enabled_features.PLUGINS and additional_descriptors %}
|
||||
<option disabled selected>
|
||||
Select Additional Fingerprinter / Descriptor
|
||||
</option>
|
||||
<!-- Fingerprinter (MLRR) -->
|
||||
<div class="form-control mb-3" x-show="showMlrr" x-cloak>
|
||||
<label class="label" for="model-fingerprinter">
|
||||
<span class="label-text">Fingerprinter</span>
|
||||
</label>
|
||||
<select
|
||||
id="model-fingerprinter"
|
||||
name="model-fingerprinter"
|
||||
class="select select-bordered w-full h-32"
|
||||
multiple
|
||||
>
|
||||
<option value="MACCS" selected>MACCS Fingerprinter</option>
|
||||
{% if meta.enabled_features.PLUGINS and additional_descriptors %}
|
||||
<optgroup label="Additional Fingerprinter / Descriptor">
|
||||
{% for k, v in additional_descriptors.items %}
|
||||
<option value="{{ v }}">{{ k }}</option>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</select>
|
||||
</div>
|
||||
</optgroup>
|
||||
{% endif %}
|
||||
</select>
|
||||
<label class="label">
|
||||
<span class="label-text-alt">Hold Ctrl/Cmd to select multiple</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Threshold -->
|
||||
<div id="threshold" class="ep-model-param mlrr enviformer">
|
||||
<label for="model-threshold">Threshold</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value="0.5"
|
||||
id="model-threshold"
|
||||
name="model-threshold"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
<!-- Threshold (MLRR, Enviformer) -->
|
||||
<div
|
||||
class="form-control mb-3"
|
||||
x-show="showMlrr || showEnviformer"
|
||||
x-cloak
|
||||
>
|
||||
<label class="label" for="model-threshold">
|
||||
<span class="label-text">Threshold</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value="0.5"
|
||||
id="model-threshold"
|
||||
name="model-threshold"
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="appdomain" class="ep-model-param mlrr">
|
||||
{% if meta.enabled_features.APPLICABILITY_DOMAIN %}
|
||||
<!-- Build AD? -->
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="build-app-domain"
|
||||
name="build-app-domain"
|
||||
/>Also build an Applicability Domain?
|
||||
<!-- Applicability Domain (MLRR) -->
|
||||
{% if meta.enabled_features.APPLICABILITY_DOMAIN %}
|
||||
<div x-show="showMlrr" x-cloak>
|
||||
<div class="form-control mb-3">
|
||||
<label class="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="build-app-domain"
|
||||
name="build-app-domain"
|
||||
class="checkbox"
|
||||
x-model="buildAppDomain"
|
||||
/>
|
||||
<span class="label-text"
|
||||
>Also build an Applicability Domain?</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div x-show="buildAppDomain" x-cloak class="ml-4 space-y-3">
|
||||
<div class="form-control">
|
||||
<label class="label" for="num-neighbors">
|
||||
<span class="label-text">Number of Neighbors</span>
|
||||
</label>
|
||||
</div>
|
||||
<div id="ad-params" style="display:none">
|
||||
<!-- Num Neighbors -->
|
||||
<label for="num-neighbors">Number of Neighbors</label>
|
||||
<input
|
||||
id="num-neighbors"
|
||||
name="num-neighbors"
|
||||
type="number"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
value="5"
|
||||
step="1"
|
||||
min="0"
|
||||
max="10"
|
||||
/>
|
||||
<!-- Local Compatibility -->
|
||||
<label for="local-compatibility-threshold"
|
||||
>Local Compatibility Threshold</label
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="local-compatibility-threshold">
|
||||
<span class="label-text">Local Compatibility Threshold</span>
|
||||
</label>
|
||||
<input
|
||||
id="local-compatibility-threshold"
|
||||
name="local-compatibility-threshold"
|
||||
type="number"
|
||||
class="form-control"
|
||||
value="0.5"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="1"
|
||||
/>
|
||||
<!-- Reliability -->
|
||||
<label for="reliability-threshold">Reliability Threshold</label>
|
||||
<input
|
||||
id="reliability-threshold"
|
||||
name="reliability-threshold"
|
||||
type="number"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
value="0.5"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="1"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="reliability-threshold">
|
||||
<span class="label-text">Reliability Threshold</span>
|
||||
</label>
|
||||
<input
|
||||
id="reliability-threshold"
|
||||
name="reliability-threshold"
|
||||
type="number"
|
||||
class="input input-bordered w-full"
|
||||
value="0.5"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_model_modal_form_submit" class="btn btn-primary" href="#"
|
||||
>Submit</a
|
||||
>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit('new_model_form')"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
// Built in Model Types
|
||||
var nativeModelTypes = ["mlrr", "rbrr", "enviformer"];
|
||||
|
||||
// Initially hide all "specific" forms
|
||||
$(".ep-model-param").each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$("#model-type").selectpicker();
|
||||
$("#model-fingerprinter").selectpicker();
|
||||
$("#model-rule-packages").selectpicker();
|
||||
$("#model-data-packages").selectpicker();
|
||||
|
||||
$("#build-app-domain").change(function () {
|
||||
if ($(this).is(":checked")) {
|
||||
$("#ad-params").show();
|
||||
} else {
|
||||
$("#ad-params").hide();
|
||||
}
|
||||
});
|
||||
|
||||
// On change hide all and show only selected
|
||||
$("#model-type").change(function () {
|
||||
$(".ep-model-param").hide();
|
||||
var modelType = $("#model-type").val();
|
||||
if (nativeModelTypes.indexOf(modelType) !== -1) {
|
||||
$("." + modelType).show();
|
||||
} else {
|
||||
// do nothing
|
||||
}
|
||||
});
|
||||
|
||||
$("#new_model_modal_form_submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$("#new_model_form").submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,68 +1,93 @@
|
||||
<div
|
||||
class="modal fade"
|
||||
tabindex="-1"
|
||||
{% load static %}
|
||||
|
||||
<dialog
|
||||
id="new_package_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="new_package_modal"
|
||||
aria-hidden="true"
|
||||
class="modal"
|
||||
x-data="modalForm()"
|
||||
@close="reset()"
|
||||
>
|
||||
<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">New Package</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Create new package. Description can be changed later.</p>
|
||||
<form
|
||||
id="new_package_modal_form"
|
||||
accept-charset="UTF-8"
|
||||
action=""
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
id="name"
|
||||
class="form-control"
|
||||
name="package-name"
|
||||
placeholder="Name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="description">Description</label>
|
||||
<input
|
||||
id="description"
|
||||
type="text"
|
||||
rows="3"
|
||||
class="form-control"
|
||||
placeholder="Description..."
|
||||
name="package-description"
|
||||
/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_package_modal_form_submit" class="btn btn-primary" href="#"
|
||||
>Submit</a
|
||||
>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-box">
|
||||
<!-- Header -->
|
||||
<h3 class="font-bold text-lg">New Package</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<p class="mb-4">Create new package. Description can be changed later.</p>
|
||||
|
||||
<form
|
||||
id="new-package-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action=""
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="package-name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="package-name"
|
||||
class="input input-bordered w-full"
|
||||
name="package-name"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="package-description">
|
||||
<span class="label-text">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="package-description"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Description..."
|
||||
name="package-description"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit('new-package-modal-form')"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#new_package_modal_form_submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$("#new_package_modal_form").submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,376 +0,0 @@
|
||||
{% 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>
|
||||
@ -1,185 +1,260 @@
|
||||
{% load static %}
|
||||
|
||||
<div id="new_prediction_setting_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Prediction Setting</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
To create a Prediction Setting fill the form below and click "Create"
|
||||
</p>
|
||||
<form
|
||||
id="new-prediction-setting-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action=""
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<dialog
|
||||
id="new_prediction_setting_modal"
|
||||
class="modal"
|
||||
x-data="{
|
||||
isSubmitting: false,
|
||||
tpMethod: '',
|
||||
|
||||
<label for="prediction-setting-name">Name</label>
|
||||
reset() {
|
||||
this.isSubmitting = false;
|
||||
this.tpMethod = '';
|
||||
},
|
||||
|
||||
async submit() {
|
||||
const form = document.getElementById('new-prediction-setting-modal-form');
|
||||
if (!form.checkValidity()) {
|
||||
form.reportValidity();
|
||||
return;
|
||||
}
|
||||
|
||||
this.isSubmitting = true;
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
const response = await fetch('/setting', {
|
||||
method: 'POST',
|
||||
body: new URLSearchParams(formData)
|
||||
});
|
||||
if (response.ok) {
|
||||
location.reload();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating setting:', error);
|
||||
} finally {
|
||||
this.isSubmitting = false;
|
||||
}
|
||||
}
|
||||
}"
|
||||
@close="reset()"
|
||||
>
|
||||
<div class="modal-box max-w-2xl">
|
||||
<!-- Header -->
|
||||
<h3 class="text-lg font-bold">Create a Prediction Setting</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<p class="mb-4">
|
||||
To create a Prediction Setting fill the form below and click "Create"
|
||||
</p>
|
||||
<form
|
||||
id="new-prediction-setting-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action=""
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="prediction-setting-name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="prediction-setting-name"
|
||||
name="prediction-setting-name"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
<label for="prediction-setting-description">Description</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="prediction-setting-description">
|
||||
<span class="label-text">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="prediction-setting-description"
|
||||
name="prediction-setting-description"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label for="prediction-setting-max-nodes">Max #Nodes</label>
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="prediction-setting-max-nodes">
|
||||
<span class="label-text">Max #Nodes</span>
|
||||
</label>
|
||||
<input
|
||||
id="prediction-setting-max-nodes"
|
||||
type="number"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="prediction-setting-max-nodes"
|
||||
value="30"
|
||||
min="1"
|
||||
max="50"
|
||||
step="1"
|
||||
/>
|
||||
<label for="prediction-setting-max-depth">Max Depth</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="prediction-setting-max-depth">
|
||||
<span class="label-text">Max Depth</span>
|
||||
</label>
|
||||
<input
|
||||
id="prediction-setting-max-depth"
|
||||
type="number"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="prediction-setting-max-depth"
|
||||
value="5"
|
||||
min="1"
|
||||
max="8"
|
||||
step="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label for="tp-generation-method">TP Generation Method</label>
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="tp-generation-method">
|
||||
<span class="label-text">TP Generation Method</span>
|
||||
</label>
|
||||
<select
|
||||
id="tp-generation-method"
|
||||
name="tp-generation-method"
|
||||
class="form-control"
|
||||
data-width="100%"
|
||||
class="select select-bordered w-full"
|
||||
x-model="tpMethod"
|
||||
required
|
||||
>
|
||||
<option disabled selected>Select how TPs are generated</option>
|
||||
<option value="" disabled selected>
|
||||
Select how TPs are generated
|
||||
</option>
|
||||
<option value="rule-based-prediction-setting">Rule Based</option>
|
||||
<option value="model-based-prediction-setting">Model Based</option>
|
||||
</select>
|
||||
<div id="rule-based-prediction-setting-specific-form">
|
||||
<!-- Rule Packages -->
|
||||
<label>Rule Packages</label><br />
|
||||
</div>
|
||||
|
||||
<!-- Rule Based Settings -->
|
||||
<div x-show="tpMethod === 'rule-based-prediction-setting'" x-cloak>
|
||||
<div class="form-control mb-3">
|
||||
<label class="label">
|
||||
<span class="label-text">Rule Packages</span>
|
||||
</label>
|
||||
<select
|
||||
id="rule-based-prediction-setting-packages"
|
||||
name="rule-based-prediction-setting-packages"
|
||||
data-actions-box="true"
|
||||
class="form-control"
|
||||
class="select select-bordered w-full h-32"
|
||||
multiple
|
||||
data-width="100%"
|
||||
>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<optgroup label="Reviewed Packages">
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
<optgroup label="Unreviewed Packages">
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
</select>
|
||||
<label class="label">
|
||||
<span class="label-text-alt"
|
||||
>Hold Ctrl/Cmd to select multiple</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div id="model-based-prediction-setting-specific-form">
|
||||
<label>Select Model</label><br />
|
||||
</div>
|
||||
|
||||
<!-- Model Based Settings -->
|
||||
<div x-show="tpMethod === 'model-based-prediction-setting'" x-cloak>
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="model-based-prediction-setting-model">
|
||||
<span class="label-text">Select Model</span>
|
||||
</label>
|
||||
<select
|
||||
id="model-based-prediction-setting-model"
|
||||
name="model-based-prediction-setting-model"
|
||||
class="form-control"
|
||||
data-width="100%"
|
||||
class="select select-bordered w-full"
|
||||
>
|
||||
<option disabled selected>Select the model</option>
|
||||
<option value="" disabled selected>Select the model</option>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.url }}">{{ m.name|safe }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="model-based-prediction-setting-threshold"
|
||||
>Threshold</label
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="model-based-prediction-setting-threshold">
|
||||
<span class="label-text">Threshold</span>
|
||||
</label>
|
||||
<input
|
||||
id="model-based-prediction-setting-threshold"
|
||||
name="model-based-prediction-setting-threshold"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="0.25"
|
||||
type="number"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
value="on"
|
||||
id="prediction-setting-new-default"
|
||||
name="prediction-setting-new-default"
|
||||
/>
|
||||
<label class="form-check-label" for="prediction-setting-new-default"
|
||||
>Set this setting as new default</label
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="new-prediction-setting-modal-submit"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
value="on"
|
||||
id="prediction-setting-new-default"
|
||||
name="prediction-setting-new-default"
|
||||
/>
|
||||
<span class="label-text">Set this setting as new default</span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Create</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
// Initially hide all "specific" forms
|
||||
$("div[id$='-specific-form']").each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$("#rule-based-prediction-setting-packages").selectpicker();
|
||||
|
||||
// On change hide all and show only selected
|
||||
$("#tp-generation-method").change(function () {
|
||||
$("div[id$='-specific-form']").each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
val = $("option:selected", this).val();
|
||||
$("#" + val + "-specific-form").show();
|
||||
});
|
||||
|
||||
$("#new-prediction-setting-modal-submit").click(function (e) {
|
||||
e.preventDefault();
|
||||
// $('#new-prediction-setting-modal-form').submit();
|
||||
|
||||
const formData = $("#new-prediction-setting-modal-form").serialize();
|
||||
$.post("/setting", formData, function (response) {
|
||||
location.reload();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,91 +1,105 @@
|
||||
{% load static %}
|
||||
<div
|
||||
class="modal fade bs-modal-lg"
|
||||
|
||||
<dialog
|
||||
id="new_reaction_modal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="new_reaction_modal"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
class="modal"
|
||||
x-data="modalForm()"
|
||||
@close="reset()"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Create a new Reaction</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form
|
||||
id="new_reaction_modal_form"
|
||||
accept-charset="UTF-8"
|
||||
action="{% url 'package reaction list' meta.current_package.uuid %}"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<label for="reaction-name">Name</label>
|
||||
<div class="modal-box max-w-3xl">
|
||||
<!-- Header -->
|
||||
<h3 class="font-bold text-lg">Create a new Reaction</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<form
|
||||
id="new-reaction-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action="{% url 'package reaction list' meta.current_package.uuid %}"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="reaction-name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="reaction-name"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="reaction-name"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
<label for="reaction-description">Description</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="reaction-description">
|
||||
<span class="label-text">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="reaction-description"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="reaction-description"
|
||||
placeholder="Description"
|
||||
/>
|
||||
<p></p>
|
||||
<div>
|
||||
<iframe
|
||||
id="new_reaction_ketcher"
|
||||
src="{% static '/js/ketcher2/ketcher.html' %}"
|
||||
width="100%"
|
||||
height="510"
|
||||
></iframe>
|
||||
</div>
|
||||
<input type="hidden" name="reaction-smirks" id="reaction-smirks" />
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary pull-left"
|
||||
data-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="new_reaction_modal_form_submit"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<iframe
|
||||
id="new_reaction_ketcher"
|
||||
src="{% static '/js/ketcher2/ketcher.html' %}"
|
||||
width="100%"
|
||||
height="510"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="reaction-smirks" id="reaction-smirks" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="
|
||||
const k = getKetcher('new_reaction_ketcher');
|
||||
document.getElementById('reaction-smirks').value = k.getSmiles();
|
||||
submit('new-reaction-modal-form');
|
||||
"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#new_reaction_modal_form_submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled", true);
|
||||
|
||||
k = getKetcher("new_reaction_ketcher");
|
||||
$("#reaction-smirks").val(k.getSmiles());
|
||||
|
||||
// submit form
|
||||
$("#new_reaction_modal_form").submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,120 +1,140 @@
|
||||
{% load static %}
|
||||
<div
|
||||
class="modal fade bs-modal-lg"
|
||||
|
||||
<dialog
|
||||
id="new_rule_modal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="new_rule_modal"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
class="modal"
|
||||
x-data="{
|
||||
...modalForm(),
|
||||
smirksVizHtml: '',
|
||||
updateSmirksViz() {
|
||||
const smirks = document.getElementById('rule-smirks').value;
|
||||
if (!smirks) {
|
||||
this.smirksVizHtml = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const img = new Image();
|
||||
img.src = '{% url 'depict' %}?is_query_smirks=true&smirks=' + encodeURIComponent(smirks);
|
||||
img.style.width = '100%';
|
||||
img.style.height = '100%';
|
||||
img.style.objectFit = 'cover';
|
||||
|
||||
img.onload = () => {
|
||||
this.smirksVizHtml = img.outerHTML;
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
this.smirksVizHtml = `
|
||||
<div class='alert alert-error' role='alert'>
|
||||
<h4 class='alert-heading'>Could not render SMIRKS!</h4>
|
||||
<p>Could not render SMIRKS - Have you entered a valid SMIRKS?</p>
|
||||
</div>`;
|
||||
};
|
||||
}
|
||||
}"
|
||||
@close="reset(); smirksVizHtml = ''"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Create a new Rule</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form
|
||||
id="new_rule_modal_form"
|
||||
accept-charset="UTF-8"
|
||||
action="{% url 'package rule list' meta.current_package.uuid %}"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<label for="rule-name">Name</label>
|
||||
<div class="modal-box max-w-3xl">
|
||||
<!-- Header -->
|
||||
<h3 class="font-bold text-lg">Create a new Rule</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<form
|
||||
id="new-rule-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action="{% url 'package rule list' meta.current_package.uuid %}"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="rule-name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="rule-name"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="rule-name"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
<label for="rule-description">Description</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="rule-description">
|
||||
<span class="label-text">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="rule-description"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="rule-description"
|
||||
placeholder="Description"
|
||||
/>
|
||||
<label for="rule-smirks">SMIRKS</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="rule-smirks">
|
||||
<span class="label-text">SMIRKS</span>
|
||||
</label>
|
||||
<input
|
||||
id="rule-smirks"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
name="rule-smirks"
|
||||
placeholder="SMIRKS"
|
||||
@input="updateSmirksViz()"
|
||||
/>
|
||||
<p></p>
|
||||
<div id="rule-smirks-viz"></div>
|
||||
<input
|
||||
type="hidden"
|
||||
name="rule-type"
|
||||
id="rule-type"
|
||||
value="SimpleAmbitRule"
|
||||
/>
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary pull-left"
|
||||
data-dismiss="modal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
id="new_rule_modal_form_submit"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rule-smirks-viz" class="mb-3" x-html="smirksVizHtml"></div>
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
name="rule-type"
|
||||
id="rule-type"
|
||||
value="SimpleAmbitRule"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit('new-rule-modal-form')"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
$("#rule-smirks").on("input", function (e) {
|
||||
$("#rule-smirks-viz").empty();
|
||||
|
||||
smirks = $("#rule-smirks").val();
|
||||
|
||||
const img = new Image();
|
||||
img.src =
|
||||
"{% url 'depict' %}?is_query_smirks=true&smirks=" +
|
||||
encodeURIComponent(smirks);
|
||||
img.style.width = "100%";
|
||||
img.style.height = "100%";
|
||||
img.style.objectFit = "cover";
|
||||
|
||||
img.onload = function () {
|
||||
$("#rule-smirks-viz").append(img);
|
||||
};
|
||||
|
||||
img.onerror = function () {
|
||||
error_tpl = `
|
||||
<div class="alert alert-error" role="alert">
|
||||
<h4 class="alert-heading">Could not render SMIRKS!</h4>
|
||||
<p>Could not render SMIRKS - Have you entered a valid SMIRKS?</a>
|
||||
</p>
|
||||
</div>`;
|
||||
$("#rule-smirks-viz").append(error_tpl);
|
||||
};
|
||||
});
|
||||
|
||||
$("#new_rule_modal_form_submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled", true);
|
||||
// submit form
|
||||
$("#new_rule_modal_form").submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
@ -1,30 +1,45 @@
|
||||
<div
|
||||
class="modal fade"
|
||||
tabindex="-1"
|
||||
{% load static %}
|
||||
|
||||
<dialog
|
||||
id="new_scenario_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="new_scenario_modal"
|
||||
aria-hidden="true"
|
||||
class="modal"
|
||||
x-data="{
|
||||
...modalForm(),
|
||||
scenarioType: 'empty',
|
||||
validateYear(el) {
|
||||
if (el.value && el.value.length < 4) {
|
||||
el.value = new Date().getFullYear();
|
||||
}
|
||||
}
|
||||
}"
|
||||
@close="reset()"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<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">New Scenario</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form
|
||||
id="new_scenario_form"
|
||||
accept-charset="UTF-8"
|
||||
action="{{ meta.current_package.url }}/scenario"
|
||||
data-remote="true"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<div class="jumbotron">
|
||||
<div class="modal-box max-w-3xl">
|
||||
<!-- Header -->
|
||||
<h3 class="font-bold text-lg">New Scenario</h3>
|
||||
|
||||
<!-- Close button (X) -->
|
||||
<form method="dialog">
|
||||
<button
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="py-4">
|
||||
<form
|
||||
id="new-scenario-modal-form"
|
||||
accept-charset="UTF-8"
|
||||
action="{{ meta.current_package.url }}/scenario"
|
||||
method="post"
|
||||
>
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="alert alert-info mb-4">
|
||||
<span>
|
||||
Please enter name, description, and date of scenario. Date should be
|
||||
associated to the data, not the current date. For example, this
|
||||
could reflect the publishing date of a study. You can leave all
|
||||
@ -32,122 +47,131 @@
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://wiki.envipath.org/index.php/scenario"
|
||||
role="button"
|
||||
class="link"
|
||||
>wiki >></a
|
||||
>
|
||||
</div>
|
||||
<label for="scenario-name">Name</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="scenario-name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
id="scenario-name"
|
||||
name="scenario-name"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Name"
|
||||
required
|
||||
/>
|
||||
<label for="scenario-description">Description</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="scenario-description">
|
||||
<span class="label-text">Description</span>
|
||||
</label>
|
||||
<input
|
||||
id="scenario-description"
|
||||
name="scenario-description"
|
||||
class="form-control"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Description"
|
||||
/>
|
||||
<label id="dateField" for="dateYear">Date</label>
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
<input
|
||||
type="number"
|
||||
id="dateYear"
|
||||
name="scenario-date-year"
|
||||
class="form-control"
|
||||
placeholder="YYYY"
|
||||
max="{% now "Y" %}"
|
||||
/>
|
||||
</th>
|
||||
<th>
|
||||
<input
|
||||
type="number"
|
||||
id="dateMonth"
|
||||
name="scenario-date-month"
|
||||
min="1"
|
||||
max="12"
|
||||
class="form-control"
|
||||
placeholder="MM"
|
||||
/>
|
||||
</th>
|
||||
<th>
|
||||
<input
|
||||
type="number"
|
||||
id="dateDay"
|
||||
name="scenario-date-day"
|
||||
min="1"
|
||||
max="31"
|
||||
class="form-control"
|
||||
placeholder="DD"
|
||||
/>
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
<label for="scenario-type">Scenario Type</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label">
|
||||
<span class="label-text">Date</span>
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
id="dateYear"
|
||||
name="scenario-date-year"
|
||||
class="input input-bordered w-24"
|
||||
placeholder="YYYY"
|
||||
max="{% now 'Y' %}"
|
||||
@blur="validateYear($el)"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
id="dateMonth"
|
||||
name="scenario-date-month"
|
||||
min="1"
|
||||
max="12"
|
||||
class="input input-bordered w-20"
|
||||
placeholder="MM"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
id="dateDay"
|
||||
name="scenario-date-day"
|
||||
min="1"
|
||||
max="31"
|
||||
class="input input-bordered w-20"
|
||||
placeholder="DD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-3">
|
||||
<label class="label" for="scenario-type">
|
||||
<span class="label-text">Scenario Type</span>
|
||||
</label>
|
||||
<select
|
||||
id="scenario-type"
|
||||
name="scenario-type"
|
||||
class="form-control"
|
||||
data-width="100%"
|
||||
class="select select-bordered w-full"
|
||||
x-model="scenarioType"
|
||||
>
|
||||
<option value="empty" selected>Empty Scenario</option>
|
||||
{% for k, v in scenario_types.items %}
|
||||
<option value="{{ v.name }}">{{ k }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{% for type in scenario_types.values %}
|
||||
<div id="{{ type.name }}-specific-inputs">
|
||||
{% for widget in type.widgets %}
|
||||
{{ widget|safe }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#"
|
||||
>Submit</a
|
||||
>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
{% for type in scenario_types.values %}
|
||||
<div
|
||||
id="{{ type.name }}-specific-inputs"
|
||||
x-show="scenarioType === '{{ type.name }}'"
|
||||
x-cloak
|
||||
>
|
||||
{% for widget in type.widgets %}
|
||||
{{ widget|safe }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
onclick="this.closest('dialog').close()"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="submit('new-scenario-modal-form')"
|
||||
:disabled="isSubmitting"
|
||||
>
|
||||
<span x-show="!isSubmitting">Submit</span>
|
||||
<span
|
||||
x-show="isSubmitting"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
<span x-show="isSubmitting">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
// Initially hide all "specific" forms
|
||||
$("div[id$='-specific-inputs']").each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
// On change hide all and show only selected
|
||||
$("#scenario-type").change(function () {
|
||||
$("div[id$='-specific-inputs']").each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
val = $("option:selected", this).val();
|
||||
$("#" + val + "-specific-inputs").show();
|
||||
});
|
||||
|
||||
$("#new_scenario_modal_form_submit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$("#new_scenario_form").submit();
|
||||
});
|
||||
|
||||
var dateYear = document.getElementById("dateYear");
|
||||
dateYear.addEventListener("change", () => {
|
||||
console.log("Final value after editing:", dateYear.value);
|
||||
if (dateYear.value.length < 4) {
|
||||
dateYear.value = new Date().getFullYear();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- Backdrop -->
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button :disabled="isSubmitting">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
Reference in New Issue
Block a user